/* =============================================================================
   AiLogiQs — override layer
   -----------------------------------------------------------------------------
   Loaded LAST, after the vendor theme stylesheets in public/assets/css/.

   Do not put overrides in src/app/globals.css: Next.js injects imported CSS
   modules into <head> ahead of the <link> tags below, so the theme's
   main.css would win. Keeping this file as the final <link> makes the
   cascade order explicit and independent of Next's CSS pipeline.

   Breakpoint patches for the vendor grid do not live here -- that alignment
   is done in the vendor CSS itself. The one media band this file owns is the
   laptop stage; see "Breakpoint alignment" and "Laptop stage" below.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Breakpoint alignment (handled in the vendor CSS, not here)

   The theme is authored for Bootstrap 5's xxl desktop layout, but it expressed
   that with `@media (max-width: 1399px)` compaction blocks while its markup
   depended on `col-xxl-*` and `.container` for real widths. Bootstrap only
   enables xxl at 1400px, so 1200-1399px got a desktop container step with the
   xxl grid classes switched off — layouts collapsed to the xl fallback:

     .container        1320px -> 1140px
     .col-xxl-3        inactive, so `col-xl-4` won -> pricing showed 3 of 4 cards
     fonts / indents   stepped down

   That is why the whole site looked "zoomed in" on a 1366px laptop at 100%
   zoom yet perfect at 90%: 100% gives a ~1351px viewport, 90% gives ~1503px.

   `node scripts/align-breakpoints.mjs` fixes the GRID at the source by moving
   Bootstrap's xxl step 1400 -> 1200 and retargeting the theme's compaction
   tier 1399 -> 1199, so 1200-1399px gets the same real grid as >=1400px:
   container, col-xxl widths, the 4-up pricing row.

   That still left the band on the >=1500px SCALE -- the 1320px container and
   140px hero headline -- which is larger than the design intends for those
   widths and is the other half of the "zoomed in" report. That half is the
   "Laptop stage" section below: one `zoom` band, not a tier of the compacting
   kind.

   Do NOT re-add `@media (max-width: 1399px)` patches here. They cannot express
   "restore the >=1400px presentation" -- the base rules are already correct
   once the tier is realigned, and an override would then fight the base value.
   -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   Laptop stage -- 1200-1500px renders at 90%

   With the grid realigned, every width from 1200px up renders the >=1500px
   stage: a 1366px laptop at 100% browser zoom (a ~1351px viewport once the
   scrollbar is out) gets the 1320px container -- ~14px of gutter per side --
   and the hero sets its headline in 140px type. The same machine at 90%
   browser zoom (a ~1503px viewport) shows the composition the design was
   drawn for; that is the view this band reproduces at 100%.

   `zoom` on the stage does what that 90% browser zoom did: it lays the
   content out on a 1351 / 0.9 = ~1501px canvas and paints it into the 1351px
   viewport, vendor stylesheets untouched. Verified against Chrome:
   - media queries keep evaluating against the physical viewport width (the
     <=1600px tier stays active across the whole band), so no tier is skipped
     and the band can run up to 1500px, where the raw rendering's own margins
     (~90px) already carry the reference composition;
   - position: fixed descendants (the scrolled header, `.sticky`) stay
     viewport-anchored and render scaled -- the same as under browser zoom.

   Scope notes
   - `.site-stage` is the wrapper TemplateRuntime draws around the header, the
     page and the footer. The fixed overlays it renders around that wrapper
     stay outside the scaled subtree: the vendor cursor positions itself from
     raw pointer coordinates, which Chrome reports in unzoomed viewport
     pixels, and would sit 10% off the pointer inside it.
   - The offcanvas drawer, whose type should match the page behind it, takes
     the same 0.9 directly on its own fixed panel (rule below). That panel is
     viewport-sized and stays flush to the viewport under `zoom` (verified:
     the 400px drawer renders 360px wide, full height, at right: 0). The
     preloader, cursor, flat offcanvas backdrop and the fixed-size chat widget
     carry no page-relative scale and stay unscaled.
   - /admin never renders the wrapper, and the two designs with canvases of
     their own -- /ai-services/* + /projects/chatbot, and
     /projects/bee-virus-detection -- are excluded by their body flags.
   - `zoom` is Baseline in current browsers; where it is unsupported the band
     degrades to the old full-size rendering -- not the intended composition,
     but not a broken layout either.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1500px) {
  body:not(.route-bee):not(.route-ai-service) .site-stage {
    /* Also exposed as a custom property: viewport-sized elements inside the
       stage divide their height by this to cancel the scale. See the blog hero
       in this file. */
    --stage-zoom: 0.9;
    zoom: var(--stage-zoom);
  }

  /* The drawer renders outside the stage (see scope notes above), so it
     carries its own 0.9 -- without it it reads as 10% larger than the page
     behind it. The bee page is excluded from the
     stage band only because its design owns its canvas; its drawer is the
     same shared chrome every other page shows, and at raw scale it read
     400px wide against the 360px every other page draws, so it takes the
     0.9 too. The ai-service pages are excluded here: /projects/chatbot
     scales its drawer from ai-service.css to match its own stage factor,
     and the landing page keeps raw chrome next to its raw stage. */
  body:not(.route-ai-service) .offcanvas__info {
    zoom: 0.9;
  }
}

/* ---------------------------------------------------------------------------
   Email addresses are never capitalised
   ---------------------------------------------------------------------------
   `.offcanvas__contact ul li` carries `text-transform: capitalize` (vendor,
   main.css) to title-case the street address. It also hit the email, which
   rendered "Bd@AiLogiQs.Com". The template dodged that with a nested
   `<span style="text-transform: initial">`, so deleting the span exposed the
   bug rather than causing it.

   Hooking `mailto:` fixes it everywhere at once and survives markup changes:
   an address is the only text on the site whose casing is meaningful, and
   every one of them is a mailto link. `none` -- not `lowercase` -- keeps the
   address exactly as written in the markup.
   --------------------------------------------------------------------------- */
a[href^="mailto:"] {
  text-transform: none;
}


/* -----------------------------------------------------------------------------
   Header wordmark
   -----------------------------------------------------------------------------
   The supplied lockup replaces the text wordmark in the main navigation. Its
   transparent margins are cropped, so at the same box height the artwork fills
   more of the bar: the gap above and below the logo shrinks without changing
   the nav's own height. The asset is 3x the rendered size for high-density
   screens. The drawer keeps the text logo because the AI-service drawer
   switches to a white panel where this lockup would lose its pale "Logi";
   the dark footer uses the lockup in its bottom bar.
   -------------------------------------------------------------------------- */

.nav-logo-image {
  display: block;
  width: auto;
  height: 48px;
  max-width: 100%;
}

@media (max-width: 1199px) {
  .nav-logo-image {
    height: 42px;
  }
}

@media (max-width: 575px) {
  .nav-logo-image {
    height: 38px;
  }
}


/* =============================================================================
   Service cards — photo tile + copy panel
   =============================================================================
   Used by the homepage and /service, which share this markup.

   The photo and the copy are deliberately two separate surfaces: a narrow
   rounded image on the left and a dark, bordered copy panel on the right,
   14px apart. An earlier override merged them into one full-bleed card; that
   read as a single generic panel and buried the photo inside the card. The
   reference keeps the photo as its own object and lets the copy panel carry
   the border.

   .service-box-items is now only the flex track -- it has no surface of its
   own. The image is capped at 260px wide, so it is never stretched wider than
   the source, and its aspect ratio matches the 260x300 files. It is centred
   instead of stretched, which keeps it a little smaller than the copy panel
   beside it -- the relationship the reference is after on the homepage and
   the long-form /service cards. The copy panel stretches to the row height
   and pins its link to the bottom with an auto margin, which is what leaves
   the open space above "More Details" in the reference.

   Sibling cards in a row still share one height. On phones the two surfaces
   stack, with the image above the copy, because a side-by-side split at
   ~390px would squeeze the copy into a column too narrow for the heading.

   Colours, radius and hover timing come from the theme's own tokens
   (--theme #EFFB53, 0.4s ease) so it reads as part of the theme rather than a
   bolt-on.
   ========================================================================== */

.service-section .section-title + .row {
  /* The original card margin-top provided this space. It moved to the row so
     the cards can keep height:100% and still be separated between rows --
     a per-card margin would offset each card 30px inside its stretched
     column and overflow it. */
  margin-top: 30px;
  row-gap: 30px;
}

/* The /service page opens directly under the absolute header, unlike the
   inner pages that have a breadcrumb banner. The vendor's 120px top band left
   the eyebrow only ~30px below the bar, and the full-width service cards sat
   just under the heading. Give this page a little more air without touching
   the homepage or the chatbot showcase. */
.service-section.style-padding {
  padding-top: 160px;
}

.service-section.style-padding .section-title + .row {
  margin-top: 50px;
  row-gap: 40px;
}

@media (max-width: 1199px) {
  .service-section.style-padding {
    padding-top: 140px;
  }
}

@media (max-width: 991px) {
  .service-section.style-padding {
    padding-top: 120px;
  }
}

/* The long-form /service cards carry much more copy than the homepage's
   four-up grid, so the photo's own 260:300 frame left it centred with 27-40px
   of dead space above and below the copy panel. Stretching it to the panel's
   height and widening its column keeps the source ratio (340:392 = 0.867)
   while both surfaces now share top and bottom edges. Scoped to
   .style-padding, which only this page uses. */
@media (min-width: 1200px) {
  .service-section.style-padding .service-box-items .service-image {
    flex: 0 0 clamp(280px, 26.2%, 340px);
    align-self: stretch;
    aspect-ratio: auto;
  }
}

/* The "what we build" strip closes /service and is the only user of this
   section class. Its stock 130px bands, on top of the 120px section above,
   left too much dead air around three cards. Tighten it slightly. */
.news-section.section-padding-2 {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 1199px) {
  .news-section.section-padding-2 {
    padding-top: 65px;
    padding-bottom: 65px;
  }
}

@media (max-width: 991px) {
  .news-section.section-padding-2 {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

.service-box-items {
  display: flex;
  align-items: stretch;
  gap: 14px;
  /* Fills the column so cards in a row share one height. Width is left at
     100% so the 24px gutter matches the pricing cards. */
  height: 100%;
  margin-top: 0;
  /* The two children carry their own surfaces; the track stays invisible. */
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transition: transform 0.4s ease;
}

.service-box-items .service-image {
  /* Never wider than the 260px source, which keeps the image crisp. The
     aspect ratio matches the 260x300 files, so on the long-form /service
     cards the photo stays centered as its own smaller object. The homepage
     grid stretches it to the copy panel's height instead; see the
     .service-section-home rule in the >=1200px block below. */
  flex: 0 0 clamp(200px, 34%, 260px);
  max-width: none;
  margin-bottom: 0;
  min-width: 0;
  align-self: center;
  aspect-ratio: 260 / 300;
  overflow: hidden;
  border-radius: 20px;
}

.service-box-items .service-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.6s ease;
}

.service-box-items .service-content {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 52px 38px 44px;
  background: #1d1d21;
  border: 1px solid rgba(207, 208, 212, 0.2);
  border-radius: 20px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.service-box-items .service-content .link-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Pushes the link to the foot of the panel when the photo is taller than
     the copy; it collapses to 0 on the long-form /service cards. */
  margin-top: auto;
  color: var(--white);
  font-size: 16px;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.service-box-items .service-content .link-btn i {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.3s ease;
}

.service-box-items:hover {
  transform: translateY(-4px);
}

.service-box-items:hover .service-image img {
  transform: scale(1.06);
}

.service-box-items:hover .service-content {
  border-color: rgba(239, 251, 83, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.service-box-items:hover .service-content .link-btn {
  color: var(--theme);
}

.service-box-items:hover .service-content .link-btn i {
  transform: translate(2px, -2px);
}

/* Stack the image above the copy on phones, matching the theme's own
   mobile treatment of this component. */
@media (max-width: 767px) {
  .service-box-items {
    flex-direction: column;
  }

  .service-box-items .service-image {
    flex: 0 0 auto;
    width: 100%;
    height: 240px;
    aspect-ratio: auto;
  }

  .service-box-items .service-content {
    padding: 32px 26px;
  }
}


/* =============================================================================
   Selected Projects — heading, spacing + card rows
   ========================================================================== */

/* The services section's 120px bottom padding plus this section's top band
   left a 240px gap before the heading; the same 120px bands also doubled up
   below the last project row. Trimming this section's top and bottom bands to
   60px brings both edges closer without changing the other sections. */
.project-section.section-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* The theme set the display heading at 150px, which is larger than the hero
   h1 (140px) and more than double the 65px used by every other section title.
   It inverted the page hierarchy and wrapped to 1403px of a 1503px viewport.
   92px keeps it the section's display element while sitting below the hero and
   close to the theme's own 65px scale. clamp() so it stays proportional
   without needing a breakpoint ladder. */
.project-wrapper .project-title {
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.04;
  margin-top: 0;
  margin-bottom: 56px;
}

/* The sparkle is a 101x101 sprite inlined into the heading. Sizing it in `em`
   against the (now smaller) heading font keeps the original composition --
   101/150 = 0.67em across, 250/150 = 1.67em indent -- instead of leaving a
   101px square floating next to 92px type. */
.project-wrapper .project-title img {
  width: 0.67em;
  height: 0.67em;
  margin-left: 1.67em;
  vertical-align: 0.02em;
  object-fit: contain;
}

@media (max-width: 1199px) {
  .project-wrapper .project-title img {
    margin-left: 1.1em;
  }
}

/* The old rows were six Bootstrap columns: the theme indented every copy
   block by 200px (130px on the right-hand rows) while the photo sat inset at
   82% of its own half. That left a ~190px dead band between photo and copy,
   with the text floating on the page background. Each project is now one
   bordered card: the photo fills its half edge to edge, the copy is padded
   inside the same surface, and the only gap left is the card's own padding. */
.project-wrapper .project-list {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
  max-width: 1080px;
  margin-inline: auto;
}

.project-wrapper .project-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: clamp(22px, 2.3vw, 34px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.018) 48%,
    rgba(239, 251, 83, 0.035)
  );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.project-wrapper .project-card:hover {
  border-color: rgba(239, 251, 83, 0.28);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
}

/* Keep the alternating rhythm on desktop; on phones every card reads
   photo-first because the DOM order is image then copy. */
@media (min-width: 992px) {
  .project-wrapper .project-card-reversed .project-image {
    order: 2;
  }

  .project-wrapper .project-card-reversed .project-content {
    order: 1;
  }
}

/* --- Images ---------------------------------------------------------------- */

/* The frame is the column now. The image is absolutely positioned so it fills
   whatever height the copy needs -- the card stays a clean rectangle instead
   of the photo's own ratio forcing a shorter or taller panel. */
.project-wrapper .project-card .project-image {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  border-radius: 0;
  transform: none;
}

.project-wrapper .project-card .project-image:hover {
  transform: none;
}

.project-wrapper .project-card .project-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The border and glow belong to the card, so hover lifts the photo inside it
   rather than outlining the photo against the page. */
.project-wrapper .project-card:hover .project-image img {
  transform: scale(1.045);
}

/* --- Copy ------------------------------------------------------------------ */

.project-wrapper .project-card .project-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: clamp(26px, 3.2vw, 48px);
}

.project-wrapper .project-card .project-content > span {
  margin-bottom: 16px;
  padding: 6px 13px;
  border-color: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.04);
}

/* 65px was the section-heading size; 44px max keeps the project name below
   the section title instead of competing with it. */
.project-wrapper .project-card .project-content h3 {
  margin-bottom: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
}

.project-wrapper .project-card .project-content h3 a {
  transition: color 0.4s ease;
}

.project-wrapper .project-card .project-content h3 a:hover {
  color: var(--theme);
}

/* The theme's 350px measure and 50px bottom margin were sized for the
   floating layout. Inside the padded column the copy gets a comfortable 42ch
   and sits closer to its button. */
.project-wrapper .project-card .project-content p {
  max-width: 42ch;
  margin: 16px 0 28px;
  font-size: 16px;
  line-height: 1.65;
}

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 991px) {
  .project-wrapper .project-title {
    margin-bottom: 36px;
  }

  .project-wrapper .project-card {
    grid-template-columns: 1fr;
  }

  .project-wrapper .project-card .project-image {
    aspect-ratio: 860 / 650;
  }

  .project-wrapper .project-card .project-content {
    padding: 28px 24px 32px;
  }
}

@media (max-width: 767px) {
  /* The theme hides every <br> below 768px, which made two of the three
     project names render on one line while the longest wrapped. Restore the
     intentional break so all three cards keep the same two-line title. */
  .project-wrapper .project-card .project-content h3 br {
    display: inline;
  }
}

@media (max-width: 575px) {
  .project-wrapper .project-card {
    border-radius: 24px;
  }
}


/* =============================================================================
   Blog listing
   ========================================================================== */

/* The theme's `.news-standard-items` supplies the card border and bottom rule
   but has no internal layout, so thumb and copy stacked instead of sitting
   side by side, and the card grew to hug an un-sized thumbnail. This makes each
   item a real two-column row: a fixed-ratio thumbnail beside a flexible text
   column, collapsing to a stack on tablets. */
.news-standard-wrapper .news-standard-row {
  display: flex;
  align-items: center;
  gap: 34px;
}

.news-standard-wrapper .news-standard-items .news-thumb {
  flex: 0 0 336px;
  max-width: 336px;
}

.news-standard-wrapper .news-standard-items .news-thumb img {
  width: 100%;
  /* Matches the 840x680 source ratio so nothing is cropped or stretched. */
  aspect-ratio: 840 / 680;
  height: auto;
  object-fit: cover;
  border-radius: 25px;
}

.news-standard-wrapper .news-standard-items .news-thumb .post-date {
  top: 20px;
  left: 20px;
  border-radius: 14px;
}

.news-standard-wrapper .news-standard-items .news-content {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* The theme sizes this at 55px, which is a page-title size being used for a
   card heading. 28px sits between the 35px section titles and body copy. */
.news-standard-wrapper .news-standard-items .news-content h3 {
  font-size: 28px;
  line-height: 1.25;
}

.news-standard-wrapper .news-standard-items .news-content p {
  margin-bottom: 0;
  max-width: 46ch;
}

/* The badge used to sit at top:30/left:30 with 24px type, which covered the
   top-left of the artwork. These covers carry a caption along the bottom edge,
   so the badge moves below the image entirely and becomes an inline meta chip
   with the reading time beside the category. */
.news-standard-wrapper .news-standard-items .news-thumb .post-date {
  position: static;
  padding: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.news-standard-wrapper .news-standard-items .news-thumb .post-date h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-standard-wrapper .news-standard-items .news-thumb .post-date h3 span {
  display: inline;
  margin: 0;
  font-weight: 500;
  color: var(--text2);
}

/* Small yellow dot between date and reading time. */
.news-standard-wrapper .news-standard-items .news-thumb .post-date h3 span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme);
  margin-right: 8px;
  vertical-align: middle;
}

.news-standard-wrapper .news-standard-items .news-content ul {
  display: none;
}


/* ---------------------------------------------------------------- Sidebar --
   The theme never constrained .recent-thumb, so each thumbnail took its
   intrinsic 840px width and blew the 4-column sidebar open to roughly twice
   its intended size. Pin it to a thumbnail-sized box and keep the 840x680
   source ratio. */
.main-sidebar .recent-thumb {
  flex: 0 0 108px;
  max-width: 108px;
}

.main-sidebar .recent-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 840 / 680;
  object-fit: cover;
  border-radius: 14px;
}

.main-sidebar .recent-items {
  align-items: flex-start;
}

.main-sidebar .recent-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Long titles must wrap inside the column rather than widen the sidebar. */
.main-sidebar .recent-content h6 {
  overflow-wrap: anywhere;
}

@media (max-width: 1199px) {
  .news-standard-wrapper .news-standard-row {
    gap: 26px;
  }

  .news-standard-wrapper .news-standard-items .news-thumb {
    flex: 0 0 280px;
    max-width: 280px;
  }
}

@media (max-width: 767px) {
  .news-standard-wrapper .news-standard-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .news-standard-wrapper .news-standard-items .news-thumb {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .news-standard-wrapper .news-standard-items .news-content h3 {
    font-size: 24px;
  }
}
/* ===========================================================================
   Blog hero: per-slide cover art
   ---------------------------------------------------------------------------
   The theme gave the hero a single fixed background image on the section and
   left the slides transparent, so a post's own cover could never show here.
   The background now sits on each .news-hero-slide instead.

   Three problems this has to fix, all of them caused by moving the art from the
   section onto the slides:

   1. The theme padded the SECTION (200px) while the art is painted on the
      SLIDE, which only occupies the middle. Those padding bands had no
      background and rendered as black bars above and below the image. Padding
      therefore moves onto the slide, which is the element that actually paints
      the cover -- a background covers an element's own padding box.

   2. .news-hero-section::before is a full-bleed dark overlay with no z-index.
      Once the slide is positioned and stacked above it, that scrim ends up
      UNDER the art and does nothing except tint the section's own background,
      which is where the extra black came from. It is removed; the scrim is
      re-applied to the slide instead, so it sits between the art and the text.

   3. The scrim is a gradient rather than the theme's flat 80% black fill, so the
      cover still reads as a photograph instead of a solid bar.
   =========================================================================== */

.news-hero-section {
  /*
    Height of the band's header gap, kept in one place because the viewport
    height calculation below subtracts it: the margin and the height have to
    describe the same offset or the band either overshoots the screen or leaves
    a strip of the next section showing.

    The site header is position:absolute over the page, so with the hero flush
    to the top of the document the cover ran underneath the nav and the logo and
    menu sat directly on the photograph. A top margin drops the whole band below
    the header instead, leaving the page background behind the nav rather than
    the cover. Sized to the header's own height (padding + ~70px logo row).
  */
  --news-hero-offset: 96px;
  padding: 0;
  margin-top: var(--news-hero-offset);
}

/* The theme's scrim, disabled. See point 2 above. */
.news-hero-section::before {
  display: none;
}

.news-hero-section .news-hero-slider,
.news-hero-section .swiper-wrapper {
  position: relative;
  z-index: 1;
}

.news-hero-section .news-hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  /*
    The band fills the first screen instead of a fixed 480px strip: viewport
    height minus the header offset it starts under, so no page background (or
    the next section's top padding) shows beneath the cover.

    The covers are stacked for the fade and the band is full-bleed, so all
    three of the section, the track and the slide carry the same height -- a
    min-height would let the hero resize between slides (a one-line title
    produced a 405px band and a two-line title 495px, leaving the taller slide
    showing below the shorter one).

    svh, not just vh: on mobile browsers vh includes the retracted address bar,
    so the band would be taller than the visible screen and reveal a strip of
    the next section on first paint. The vh declaration stays first as the
    fallback for browsers without svh.

    The stage is zoomed to 0.9 on 1200-1500px laptops (see the band note at the
    top of this file). Zoom scales the rendered height too, so a plain
    `100svh - 96px` painted 10% short and left exactly the gap this is meant to
    remove. Dividing by --stage-zoom cancels the scale before it is applied.
  */
  height: calc(100vh / var(--stage-zoom, 1) - var(--news-hero-offset));
  height: calc(100svh / var(--stage-zoom, 1) - var(--news-hero-offset));
  /* Floor for very short viewports (landscape phones): the band keeps a usable
     band for the title and button and pushes the listing below the fold rather
     than clipping the copy. */
  min-height: 480px;
  padding: 60px 0;
  /* Width, not just height: the slide is a direct child of the section now, so
     it spans the viewport and the cover reaches both page edges. */
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*
  Sits above the cover, below the copy.

  Light enough that the photograph still reads as a photograph. It has to be
  strong enough for the h1 to hit contrast on an arbitrary uploaded cover, so the
  centre of the band is the darkest part rather than a uniform wash.
*/
.news-hero-section .news-hero-slide::before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
  /*
    Deliberately light: the point of the cover is to be visible, so this only
    has to be enough to hold white text at contrast against an arbitrary
    photograph. Weighted toward the middle where the h1 sits, and lighter at the
    top and bottom so the image keeps its detail at the edges.
  */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.46) 45%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.news-hero-section .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Swiper sets an explicit width on slides from its measured wrapper; with the
   slider out of .container it needs the full track width instead. */
.news-hero-section .swiper,
.news-hero-section .swiper-wrapper,
.news-hero-section .swiper-slide {
  width: 100%;
}

/* The track must carry the same viewport height as the slides. Without it the
   wrapper sizes to its tallest child, so the band still changed between
   slides. */
.news-hero-section .news-hero-slider,
.news-hero-section .swiper-wrapper {
  height: calc(100vh / var(--stage-zoom, 1) - var(--news-hero-offset));
  height: calc(100svh / var(--stage-zoom, 1) - var(--news-hero-offset));
  min-height: 480px;
}

/* The floors shrink with the smaller type, but the height stays viewport-based
   at every breakpoint -- a fixed height here is what caused the gap. */
@media (max-width: 991px) {
  .news-hero-section .news-hero-slider,
  .news-hero-section .swiper-wrapper,
  .news-hero-section .news-hero-slide {
    min-height: 400px;
  }

  .news-hero-section .news-hero-slide {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .news-hero-section .news-hero-slider,
  .news-hero-section .swiper-wrapper,
  .news-hero-section .news-hero-slide {
    min-height: 340px;
  }

  .news-hero-section .news-hero-slide {
    padding: 40px 0;
  }
}

/* Text shadow on the hero copy. The scrim is intentionally light, so this is
   what guarantees the title stays legible over a bright area of an arbitrary
   uploaded cover. Matches the theme's own shadow treatment elsewhere. */
.news-hero-section .hero-content h1 {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
}

.news-hero-section .hero-content p,
.news-hero-section .hero-content ul {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}


/* =============================================================================
   Home hero banner — copy on the empty left half
   -----------------------------------------------------------------------------
   .hero-image is a 1920x320 strip whose artwork (the robot) sits on the right,
   so the left half is bare gradient and read as unfinished. The theme left this
   element empty; content now sits on the left, vertically centred and capped at
   half the width so it never runs under the robot.

   The theme also collapses the strip to 150px and then 80px, which cannot hold
   copy, so it is given room at those breaks instead of clipping the text.
   ========================================================================== */

.hero-1 .hero-image {
  display: flex;
  align-items: center;
}

.hero-1 .hero-image > .container {
  width: 100%;
}

.hero-1 .hero-image-content {
  /* Left edges line up with the "Explore the AI power & our innovative
     solutions" heading, which the theme indents with .ml-200 (200px). Both sit
     in the same Bootstrap .container, so matching the offset aligns them.
     Capped so the copy stays clear of the robot on the right. */
  max-width: 620px;
  margin-left: 200px;
}

/* .ml-200 drops to 0 below 1200px, so the banner follows it to stay aligned. */
@media (max-width: 1199px) {
  .hero-1 .hero-image-content {
    margin-left: 0;
  }
}

.hero-1 .hero-image-content h2 {
  color: #fff;
  /* Display type matching the hero heading: Satoshi Variable, heavy, uppercase. */
  font-family: "Satoshi Variable", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  /* Sized so "Intelligent products," stays on one line on every screen: the vw
     term fits the narrowest phone and the 43px cap fits the 620px content
     max-width on desktop (that line measures 14.32x the font size). */
  font-size: min(6.3vw, 43px);
  line-height: 1.12;
  /* Was 18px -- the CTA sat almost against the heading. */
  margin: 0 0 30px;
}

/* Each line is its own block, so the break never depends on <br> (the theme
   hides every <br> below 768px). */
.hero-1 .hero-image-content h2 .hero-title-line {
  display: block;
}

/* The display line-height (1.12) left the two heading lines touching. A small
   margin gives them the same visual separation the CTA now has below them. */
.hero-1 .hero-image-content h2 .hero-title-line + .hero-title-line {
  margin-top: 10px;
}

/* "Intelligent products," must never wrap. */
.hero-1 .hero-image-content h2 .hero-title-line:not(.hero-title-line-accent) {
  white-space: nowrap;
}

/* Second line in the Marcellus accent the theme mixes into headings elsewhere
   (see ".section-title h2 span" on this page), with the key word in the theme
   yellow. */
.hero-1 .hero-image-content h2 .hero-title-line-accent {
  font-family: Marcellus, sans-serif;
  font-weight: 400;
}

.hero-1 .hero-image-content h2 b {
  color: var(--theme);
  font-weight: 400;
}

.hero-1 .hero-image-content .theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The theme drops the strip to 150px below 1200px; keep enough height for the
   copy. */
@media (max-width: 1199px) {
  .hero-1 .hero-image {
    height: 300px;
  }
}

/* Below the tablet break the strip sizes to its content, and a scrim keeps the
   copy readable over the artwork instead of moving it off the robot. */
@media (max-width: 991px) {
  .hero-1 .hero-image {
    height: auto;
    min-height: 240px;
    padding: 36px 0;
    margin-top: 40px;
  }

  .hero-1 .hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(16, 15, 24, 0.92) 0%,
      rgba(16, 15, 24, 0.6) 68%,
      rgba(16, 15, 24, 0.08) 100%
    );
  }

  .hero-1 .hero-image > .container {
    position: relative;
    z-index: 1;
  }

  .hero-1 .hero-image-content {
    max-width: 620px;
  }
}

@media (max-width: 575px) {
  .hero-1 .hero-image-content {
    max-width: none;
  }
}


/* =============================================================================
   Home hero — fills the first screen
   -----------------------------------------------------------------------------
   The hero is the whole first impression now that the robot banner below it is
   hidden. From tablet width up it takes the full viewport height and centres
   its copy, so the section below never peeks into the first screen. Phones
   keep the normal content-height hero -- a forced full-screen hero there leaves
   too much empty space between the headline and the next section.

   `svh` is used after `vh` so tablet browsers do not size it to the screen
   area behind their collapsing toolbars.

   The 1200-1500px laptop stage renders at 0.9 (see "Laptop stage" above), and
   `zoom` scales a viewport unit along with everything else. Dividing by
   --stage-zoom cancels that scale, so the section still ends exactly at the
   bottom of the screen instead of leaving the next section peeking in.
   ========================================================================== */

@media (min-width: 768px) {
  .hero-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh / var(--stage-zoom, 1));
    min-height: calc(100svh / var(--stage-zoom, 1));
  }
}


/* =============================================================================
   Home hero — split layout: copy left, robot right
   -----------------------------------------------------------------------------
   The headline used to be a single full-width block with no supporting copy.
   It is now a two-column composition: eyebrow, headline, lede and two CTAs on
   the left, the robot artwork on the right with a soft colour glow behind it.

   The left column is capped by the Bootstrap grid (col-xl-7), so the headline
   stays clear of the artwork. At the widest desktop tier the type steps up
   once more; the transparent padding baked into the PNG lets the image
   overflow its column without the robot itself crossing the centre line.
   ========================================================================== */

.hero-1 .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-1 .hero-content h1 {
  padding-top: 0;
  margin: 0 0 26px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.hero-1 .hero-content h1 .hero-heading-line {
  display: block;
}

/* The eyebrow sits above the headline on the left, as a quiet kicker, instead
   of floating at the right edge of the first line. */
.hero-1 .hero-eyebrow {
  display: block;
  margin-bottom: 24px;
  font-family: "Satoshi Variable", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #cfd0d4;
}

/* The theme indents "AI" by 280px to centre the old full-width headline; in
   the two-column layout it runs straight on from the left edge. */
.hero-1 .hero-content h1 b {
  margin-left: 0;
}

.hero-1 .hero-content p.hero-lede {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: 19px;
  line-height: 1.65;
  text-align: left;
  text-transform: none;
  color: #c3c4cc;
}

.hero-1 .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero-1 .hero-actions .theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.hero-1 .hero-actions .theme-btn i {
  margin-left: 0;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.hero-1 .hero-actions .theme-btn:hover i {
  transform: translateX(4px);
}

/* Solid lime primary. The theme's default button is a dark chip; this one is
   the filled CTA the hero composition is built around. */
.hero-1 .hero-actions .hero-btn-primary {
  background-color: var(--theme);
  border-color: var(--theme);
  color: var(--header);
}

.hero-1 .hero-actions .hero-btn-primary::after {
  background-color: #ffffff;
}

.hero-1 .hero-actions .hero-btn-primary:hover {
  color: var(--header);
}

/* Quiet outline secondary. */
.hero-1 .hero-actions .hero-btn-ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.hero-1 .hero-actions .hero-btn-ghost::after {
  background-color: var(--theme);
}

.hero-1 .hero-actions .hero-btn-ghost:hover {
  border-color: var(--theme);
  color: var(--header);
}

/* ---- Artwork -------------------------------------------------------------- */

.hero-1 .hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* On the desktop tiers the robot's outstretched arms run close to the headline,
   so the whole artwork is nudged toward the page edge (the hero clips the
   image's transparent margin). */
@media (min-width: 1400px) {
  .hero-1 .hero-visual {
    transform: translateX(clamp(0px, 3vw, 56px));
  }
}

.hero-1 .hero-visual-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Two radial washes -- violet on the left, warm amber on the right -- echoing
   the glow the artwork had in the reference composition. */
.hero-1 .hero-visual-glow {
  position: absolute;
  inset: -6% -10%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 38% 42%, rgba(208, 58, 255, 0.48), transparent 72%),
    radial-gradient(closest-side at 70% 58%, rgba(255, 153, 64, 0.38), transparent 74%);
  filter: blur(40px);
  opacity: 0.95;
  pointer-events: none;
}

/* React-logo style atom rings drawn behind the robot -- three ellipses at
   0/60/120 degrees plus a nucleus, so there is no bitmap to keep in sync with
   the artwork. The gradient runs brand lime into the cyan the robot's eyes
   and core already use; the slow spin is a full turn per 90s (after 120deg
   the set is visually identical again, so it reads as a gentle drift). */
.hero-1 .hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(94vh, 920px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 5px rgba(239, 251, 83, 0.14));
  opacity: 0.42;
  pointer-events: none;
}

.hero-1 .hero-orbit-rings {
  transform-box: view-box;
  transform-origin: 120px 120px;
  animation: hero-orbit-spin 90s linear infinite;
}

@keyframes hero-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-1 .hero-orbit-rings {
    animation: none;
  }
}


/* Height-driven sizing: the robot scales with the screen height (and never
   pushes the hero past one viewport on a laptop); the width follows the PNG's
   aspect ratio. The transparent margin baked into the file lets it overflow the
   grid column without the visible robot crossing into the copy. */
.hero-1 .hero-visual img {
  flex: none;
  width: auto;
  height: min(72vh, 720px);
  max-width: none;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.42));
  animation: hero-robot-float 6s ease-in-out infinite;
}

@keyframes hero-robot-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-1 .hero-visual img {
    animation: none;
  }
}

/* The banner the artwork used to live in is hidden, so the desktop tier needs
   its own bottom spacing -- the theme only carries it below 1200px. */
@media (min-width: 1200px) {
  .hero-1 {
    padding-bottom: 120px;
  }

  /* The header is ~90px tall; 210px of top padding pushed the centred copy far
     below the middle. A shorter band lets the flex centring put the headline
     where the reference composition has it. */
  .hero-1 {
    padding-top: 120px;
  }
}

/* From the lg break up the hero is exactly one viewport tall. The artwork and
   the copy are sized to fit inside that band, so a laptop shows the complete
   composition without scrolling into the next section. */
@media (min-width: 992px) {
  .hero-1 {
    height: calc(100vh / var(--stage-zoom, 1));
    height: calc(100svh / var(--stage-zoom, 1));
    min-height: 0;
  }
}

/* Shorter laptop viewports (e.g. 1366x600) need a tighter band and a smaller
   robot, otherwise the CTA row would be clipped by the fixed hero height. */
@media (min-width: 992px) and (max-height: 740px) {
  .hero-1 {
    padding-top: 110px;
    padding-bottom: 60px;
  }

  .hero-1 .hero-visual img {
    height: min(58vh, 580px);
  }
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .hero-1 .hero-content p.hero-lede {
    font-size: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-1 .hero-visual img {
    height: min(66vh, 620px);
  }
}

/* Below the lg break the columns stack: copy first, artwork underneath. */
@media (max-width: 991px) {
  .hero-1 .hero-content {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .hero-1 .hero-eyebrow {
    margin-bottom: 20px;
    font-size: 13px;
    letter-spacing: 0.3em;
  }

  .hero-1 .hero-content h1 {
    margin-bottom: 22px;
  }

  .hero-1 .hero-content p.hero-lede {
    margin-inline: auto;
    margin-bottom: 28px;
    text-align: center;
  }

  .hero-1 .hero-actions {
    justify-content: center;
  }

  .hero-1 .hero-visual {
    margin-top: 34px;
  }

  .hero-1 .hero-orbit {
    width: min(112%, 700px);
  }

  .hero-1 .hero-visual img {
    width: min(92%, 560px);
    height: auto;
  }
}

@media (max-width: 767px) {
  .hero-1 .hero-orbit {
    width: min(116%, 560px);
  }

  .hero-1 .hero-visual img {
    width: min(94%, 440px);
  }

  .hero-1 .hero-actions .theme-btn {
    padding: 17px 26px;
    font-size: 15px;
  }
}

@media (max-width: 575px) {
  .hero-1 .hero-orbit {
    width: min(120%, 460px);
  }

  .hero-1 .hero-visual {
    margin-top: 26px;
  }

  .hero-1 .hero-visual img {
    width: min(100%, 360px);
  }

  .hero-1 .hero-actions {
    gap: 12px;
  }

  .hero-1 .hero-actions .theme-btn {
    padding: 16px 22px;
    font-size: 14px;
  }
}


/* =============================================================================
   Home hero — scroll-down cue
   -----------------------------------------------------------------------------
   A quiet "there is more below" prompt in the bottom-left corner, visible only
   while the page is at the top and faded out on the first scroll (the visibility
   itself is handled in src/components/layout/ScrollCue.jsx). Colours and the
   circular treatment follow the theme's other floating control (the chat
   launcher).
   ========================================================================== */

.scroll-cue {
  position: fixed;
  left: clamp(16px, 3vw, 40px);
  bottom: clamp(18px, 4vh, 44px);
  z-index: 30;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.scroll-cue-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(207, 208, 212, 0.35);
  border-radius: 50%;
  color: var(--theme);
  font-size: 16px;
  animation: scroll-cue-bounce 1.8s ease-in-out infinite;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.scroll-cue:hover .scroll-cue-icon {
  border-color: var(--theme);
  background-color: rgba(239, 251, 83, 0.08);
}

.scroll-cue-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text2);
}

@keyframes scroll-cue-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-icon {
    animation: none;
  }
}


/* =============================================================================
   Home hero — mobile heading + spacing
   -----------------------------------------------------------------------------
   The theme hides every <br> below 768px (`@media (max-width: 767px) { br {
   display: none } }`), which collapsed the hero heading to "INNOVATIVE AI" on
   one line and "SOLUTIONS" on the next. Restoring just the hero's own break
   keeps the two-line composition used on desktop: "INNOVATIVE" / "AI
   SOLUTIONS". The same query trims the theme's 170px top padding, which left a
   large dead band under the header on a phone.
   ========================================================================== */

@media (max-width: 767px) {
  .hero-1 .hero-content h1 br {
    display: inline;
  }

  .hero-1 {
    padding-top: 120px;
  }

  /* No robot artwork on phones -- the copy stands on the hero background.
     !important overrides the inline background-image the section sets. */
  .hero-1 .hero-image {
    background-image: none !important;
    background-color: transparent;
  }

  /* With no artwork behind it, the readability scrim is not needed. */
  .hero-1 .hero-image::before {
    display: none;
  }

  /* Copy and button centred on small screens. */
  .hero-1 .hero-image-content {
    max-width: none;
    margin-left: 0;
    text-align: center;
  }

  .hero-1 .hero-image-content .theme-btn {
    margin-inline: auto;
  }
}


/* =============================================================================
   Home hero — headline size
   -----------------------------------------------------------------------------
   The theme sets the hero h1 at 140px on the desktop tier. In the split layout
   the headline shares the row with the artwork, so it steps down to a size that
   keeps "INNOVATIVE" and "AI SOLUTIONS" on their own lines inside the 7-column
   copy column. The widest tier gets a small increase because the container no
   longer grows but the composition has room for it.
   ========================================================================== */

@media (min-width: 1200px) {
  .hero-1 .hero-content h1 {
    font-size: 90px;
  }
}

@media (min-width: 1600px) {
  .hero-1 .hero-content h1 {
    font-size: 98px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-1 .hero-content h1 {
    font-size: 62px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-1 .hero-content h1 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .hero-1 .hero-content h1 {
    font-size: 37px;
  }
}

@media (max-width: 575px) {
  .hero-1 .hero-content h1 {
    font-size: 32px;
  }
}


/* =============================================================================
   Home about section — tighter vertical rhythm
   -----------------------------------------------------------------------------
   The theme gives this section 120px above the "Who we are" heading and 120px
   below the counters, plus another 120px above the counters because they sit in
   their own .section-padding wrapper. That read as three separate dead bands.
   Bring all three to the 80px the mobile tier already uses, so the heading sits
   closer to the fold and the counters stay attached to the copy above them.
   The heading's own 30px margin to the tab rail also comes down to 20px above
   768px -- below that the theme already removes it and the wrapper supplies the
   gap. On large screens the three bands step down once more to 60px, with the
   heading margin at 16px, so the whole section reads tighter on a desktop.

   Scoped to .about-section, so the pricing and FAQ sections keep their own
   spacing; the homepage services section gets a separate top-only adjustment
   below.
   ========================================================================== */

.about-section.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .about-section .section-title {
    margin-bottom: 20px;
  }
}

.about-section .counter-section.section-padding {
  padding-top: 80px;
}

@media (min-width: 1200px) {
  .about-section.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-section .section-title {
    margin-bottom: 16px;
  }

  .about-section .counter-section.section-padding {
    padding-top: 60px;
  }
}

/*
  /about's lead section is the one `.about-section` that carries the theme's
  `.style-padding` hook, and that is exactly the difference that matters here:
  it opens directly under the site header instead of below the homepage hero,
  and the header is `position: absolute` over the page. The homepage's tightened
  60px desktop band above therefore left the "Who we are" eyebrow about 25px
  under the nav, overlapping it.

  At desktop the section keeps the theme's own 120px band -- the same clearance
  the other inner pages that start under the header get from `.section-padding`
  (/pricing, /faq, /service). Below 1200px the header is ~58px tall, so the
  80px band already clears it and the homepage rhythm stays untouched there;
  this does not touch the page's second `.about-section`, which has no
  `.style-padding` and keeps the tighter rhythm.
*/
@media (min-width: 1200px) {
  .about-section.section-padding.style-padding {
    padding-top: 120px;
  }
}

/*
  /about — "how we work" band, tighter vertical rhythm

  The section sits between two other sections that already carry 60px bands of
  their own, so the theme's stock 120px top and bottom turned into 180px of dead
  air above the "how we work" eyebrow and another 180px below the last step.
  Bring the band in line with the 80px / 60px rhythm the rest of the page uses,
  so it reads as one sequence instead of a separate screen.

  Deliberately `.section-padding`, not `.section-padding-2`: /projects/chatbot
  renders its own `.how-to-work-section` as a full-bleed band on the other
  padding scale, and this page is the only one using this pair.
*/

.how-to-work-section.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 1200px) {
  .how-to-work-section.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/*
  /about — "our practice" block, a touch more air above it

  On desktop the tightened band above ends 60px before this section, which also
  starts with 60px, so the darker "how we work" panel above sat close to the
  "our practice" eyebrow. Twenty extra pixels is enough to separate the two
  surfaces without undoing the rhythm the rest of the page was given.

  Only the desktop tier changes: below 1200px this section already keeps the
  80px band, and the band above it is 80px as well, so it is already roomier
  there. The hook is carried by the /about markup -- the homepage's about
  section shares `about-section section-padding` and keeps its tighter band.
*/

@media (min-width: 1200px) {
  .about-practice.section-padding {
    padding-top: 80px;
  }
}

/*
  /about — stats strip above the footer

  The same three figures appear on "/" and /projects, but the strip is the last
  thing on /about, where its stock 120px bottom band added to the footer's own
  top edge read as an empty screen between the numbers and the footer.
  The other two pages keep their own bands (`pb-0` inside the homepage's about
  section, and the `body.route-projects` rules further down), so this hook is
  carried by the /about markup only.

  Trimmed to the page's 60px rhythm without touching the top band: `pt-0` on
  this strip is deliberate, the section above supplies that space.
*/

.counter-section-about.section-padding {
  padding-bottom: 60px;
}

@media (max-width: 1199px) {
  .counter-section-about.section-padding {
    padding-bottom: 50px;
  }
}

@media (max-width: 991px) {
  .counter-section-about.section-padding {
    padding-bottom: 40px;
  }
}


/* =============================================================================
   Homepage services section — left-aligned heading
   -----------------------------------------------------------------------------
   The markup drops the theme's .text-center (Bootstrap applies it with
   !important, so overriding it in CSS would need !important too). The heading
   now starts on the same container edge as the hero, about title and tab rail.
   Its top band is a little tighter than the theme's 120px step, but still
   leaves a small breath between the counters above and the services heading.
   Scoped to the homepage class -- /service and the chatbot page reuse
   .service-section with their own spacing.
   ========================================================================== */

.service-section-home.section-padding {
  padding-top: 80px;
}

/* The theme leaves a full 120px under the cards before the projects section,
   which already opens with its own 120px band. Trim the lower side slightly so
   the two sections read as a sequence rather than two separate screens. */
@media (min-width: 1200px) {
  .service-section-home.section-padding {
    padding-bottom: 100px;
  }
}

/* The generic service row sits 30px under the heading; the homepage heading
   is left-aligned directly above the grid, so give the first pair of cards a
   little more air than /service needs. */
.service-section-home .section-title + .row {
  margin-top: 50px;
}

/* The four cards form a 2x2 set. Flexbox equalises each pair independently,
   so the shorter copy in the second pair made that row shallower than the
   first and the cards no longer matched. A two-column grid with 1fr auto-rows
   gives every card the height of the tallest row, keeping the image and
   copy dimensions identical across both rows. The 24px column gap replaces
   the Bootstrap gutters that the grid items no longer use. */
@media (min-width: 1200px) {
  .service-section-home .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 24px;
    row-gap: 30px;
    margin-left: 0;
    margin-right: 0;
  }

  .service-section-home .row > * {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* On the homepage's equal-height grid the photo tile matches the copy
     panel's full height, so the two surfaces share top and bottom edges and
     the image no longer reads as a small inset object. The copy padding and
     margins are trimmed below, which shortens the row; the 34.5% basis keeps
     the tile near the source's 260:300 ratio at that shorter height instead
     of letting object-fit crop the sides. */
  .service-section-home .service-box-items .service-image {
    flex: 0 0 clamp(200px, 34.5%, 240px);
    align-self: stretch;
    aspect-ratio: auto;
  }

  /* 52/44 padding plus the theme's 15/20 margins made each panel 281px tall.
     Trimming them brings the copy panel down to roughly 253px and the photo
     with it, without touching /service's longer cards. */
  .service-section-home .service-box-items .service-content {
    padding: 42px 38px 34px;
  }

  .service-section-home .service-box-items .service-content h3 {
    margin-bottom: 12px;
  }

  .service-section-home .service-box-items .service-content p {
    margin-bottom: 16px;
  }
}


/* =============================================================================
   Screen-reader-only text
   -----------------------------------------------------------------------------
   Content that has to be in the DOM for assistive tech and for crawlers, but
   must not be painted. Bootstrap's own .visually-hidden is not in this build,
   and the theme ships nothing equivalent.

   Used by the blog listing, which has no visible page title -- its cover slider
   carries the featured posts, and those are <h2>s, so without this the page
   would have no <h1> at all.
   ========================================================================== */

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


/* =============================================================================
   Projects card size — /projects only
   =============================================================================
   The projects page holds a single card, and at the theme's own sizing it read
   as a poster rather than a card: `col-xl-4` inside the 1320px container gives a
   408px content box, and the artwork is portrait (840x1010), so the photograph
   alone stood ~490px tall before the title was even reached.

   Capped at 340px, which brings the photograph to ~409px and the whole card to
   roughly 480px — about 17% off both dimensions, and back in proportion with the
   type beside it. The cap is a WIDTH, not a height, because the image is
   `width: 100%`: one number moves both dimensions and the artwork keeps its
   aspect ratio, so it can never letterbox.

   Scoped to `body.route-projects` (set in TemplateRuntime) and NOT to
   `.portfolio-card-items` alone: /project-details renders the same
   `.portfolio-section .portfolio-card-items` markup with three cards to a row,
   and a cap written for one card would have pulled that row in as well.

   Centred with `margin-inline: auto` because the row is `justify-content:
   center` and the card is narrower than its column -- without it the two cards
   would sit flush left inside their columns, which reads as a mistake at the
   smaller of the two breakpoints. `margin-top` comes from main.css and is kept.

   To resize the card, change the one number. Everything else follows from it.
   ========================================================================== */

body.route-projects .portfolio-section .portfolio-card-items {
  max-width: 340px;
  margin-inline: auto;
}

/* The template's "View service" badge is gone from this page's markup, so
   hover only needs a small push into the artwork. Kept below 1.05 so the
   photograph moves without reading as a separate animation. */
body.route-projects .portfolio-card-items .portfolio-image img {
  transition: transform 0.45s ease;
}

body.route-projects .portfolio-card-items:hover .portfolio-image img {
  transform: scale(1.03);
}

/* Keep the photograph and copy on one surface. An earlier two-panel version
   read as four separate cards on this page (two images, two text boxes), which
   is why the image is now full-bleed inside the card and the copy sits directly
   below it. */
body.route-projects .portfolio-card-items {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1d1d21;
  border: 1px solid rgba(207, 208, 212, 0.2);
  border-radius: 20px;
  overflow: hidden;
}

body.route-projects .portfolio-card-items .portfolio-image img {
  display: block;
  border-radius: 0;
}

body.route-projects .portfolio-card-items .portfolio-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: 0;
  padding: 24px 24px 26px;
}

body.route-projects .portfolio-card-items .portfolio-content h3 {
  font-size: 24px;
  line-height: 1.25;
}

/* =============================================================================
   /projects — page top, now that the breadcrumb is gone
   =============================================================================
   `.header-1` is `position: absolute`, so on every other inner page the
   breadcrumb banner is what holds the content clear of the bar (`.page-heading`
   pads 170px top). /projects no longer has one, which left the cards section
   starting at its own 120px `section-padding` -- just clearing the bar, with
   none of the air the rest of the site opens with.

   140px still clears the bar with a little air, while trimming the wide band
   the original 200px opening left above the "SELECTED WORK" eyebrow.

   Scoped to `body.route-projects` and to the section, not to `.portfolio-section`
   generally: /project-details still has its breadcrumb and must keep 120px.
   ========================================================================== */

body.route-projects .portfolio-section {
  position: relative;
  padding-top: 140px;
}

/* The breadcrumb's own background (breadcrumb-bg.jpg — near-black with two
   soft magenta/gold glows) still opens the page; it just sits behind the cards
   section now instead of behind a banner.

   Painted as a fading band rather than with `background-size: cover` on the
   section itself. The source is a ~3:1 strip, and the section is ~1100px tall:
   `cover` would scale it about 3x, crop the sides, and take both glows out of
   frame — the page would read as flat black, i.e. as if nothing had been
   restored. Masking it to fade into `--bg` over the bottom half also means
   there is no hard seam where the image ends. */
body.route-projects .portfolio-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 560px;
  background: url("/assets/img/breadcrumb-bg.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

body.route-projects .portfolio-section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  body.route-projects .portfolio-section {
    padding-top: 120px;
  }
}

@media (max-width: 767px) {
  body.route-projects .portfolio-section {
    padding-top: 100px;
  }
}

/* =============================================================================
   /projects — intro line + card copy
   =============================================================================
   The page previously had no copy of its own: a breadcrumb, two cards and a
   counter row. Both paragraphs below are new, and neither has a vendor rule --
   `.portfolio-content` only styles its h6 and h3, and `.section-title` has no
   `p` rule at all -- so without these the intro would stretch the full 1320px
   container as one centred line and the card text would inherit the body size.

   Colour matches the eyebrow (#CDCDCD) so the hierarchy stays eyebrow -> title
   -> body. Scoped to `body.route-projects`: /project-details reuses
   `.portfolio-section .portfolio-card-items` with a different card, and must
   not pick these up.
   ========================================================================== */

body.route-projects .portfolio-section .section-title p {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: #cdcdcd;
}

body.route-projects .portfolio-section .portfolio-card-items .portfolio-content p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: #cdcdcd;
}

/* The stats strip is shared with the homepage and /about, but this page's
   cards already sit on a 120px bottom band; keeping the counter at the full
   120px top and bottom left two deep gaps around three lines of content.
   Trim the outer bands only on /projects. */
body.route-projects .counter-section.section-padding {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (max-width: 1199px) {
  body.route-projects .counter-section.section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 991px) {
  body.route-projects .counter-section.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* The closing consultation block is also shared, so trim its section bands
   only on /projects to keep it in rhythm with the tighter stats strip above. */
body.route-projects .cta-discuss-section.section-padding {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 1199px) {
  body.route-projects .cta-discuss-section.section-padding {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

@media (max-width: 991px) {
  body.route-projects .cta-discuss-section.section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}


/* =============================================================================
   Selected AI engineering projects — /portfolio
   -----------------------------------------------------------------------------
   One page, two case studies, one column. Each study runs title -> summary ->
   stack -> story -> features -> contribution -> screens, at the same measure
   and the same rhythm, so the second reads as the same kind of object as the
   first. There is one rule between the two studies and one above the next-case
   link; everything else is spacing and type.

   The screens run in ONE frame with arrows either side. Five separate frames
   for one product read as five unrelated images; one frame reads as a product
   being demonstrated, and the page is shorter for it.

   Colours and the Marcellus accent face come from main.css; the `pf-` prefix
   keeps all of it off /project-details and the rest of the theme.
   ========================================================================== */

/* --- page shell ---------------------------------------------------------- */

.pf-page {
  background: var(--body-bg);
}

/* --- hero ---------------------------------------------------------------- */

/* The hero now opens exactly the way /projects does: centred, on the
   breadcrumb glow, eyebrow -> one title -> one lede -> a small meta row.

   The glow is painted as a masked band rather than as `background-size: cover`
   on the section: the source is a ~3:1 strip and the section is ~500px tall, so
   `cover` would scale it ~3x, crop both glows out of frame and leave the page
   reading as flat black. Masking it to fade into --body-bg also removes the
   hard seam where the image would otherwise end. `isolation: isolate` keeps the
   band's z-index: -1 inside the hero instead of behind the page background. */
.pf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 138px 0 72px;
  text-align: center;
}

.pf-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  background: url("/assets/img/breadcrumb-bg.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.pf-hero > .container {
  position: relative;
  z-index: 1;
}

/* Matches `.section-title h6` on /projects: 16px, 700, uppercase, --text. */
.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.pf-eyebrow img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* The h1 takes the h2 scale from main.css (65 / 55 / 45 / 36 / 30), so this
   page's title sits at the same weight and size as /projects' "Built, Shipped,
   Still Running". The Marcellus accent and the yellow `b` are the same
   `.section-title h2 span/b` pairing, written out here because the visible
   title on this page is an h1 and those vendor rules are keyed to h2. */
.pf-hero h1 {
  max-width: 1100px;
  margin: 0 auto 22px;
  color: var(--white);
  font-size: 65px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.16;
  text-transform: none;
}

.pf-hero h1 span {
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
}

.pf-hero h1 b {
  color: var(--theme);
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
}

.pf-hero-lede {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

@media (max-width: 991px) {
  .pf-hero h1 {
    font-size: 55px;
  }
}

@media (max-width: 767px) {
  .pf-hero h1 {
    font-size: 45px;
  }
}

@media (max-width: 575px) {
  .pf-hero h1 {
    font-size: 36px;
  }

  .pf-hero-lede {
    font-size: 16px;
  }
}

@media (max-width: 470px) {
  .pf-hero h1 {
    font-size: 30px;
  }
}

/* --- case study ---------------------------------------------------------- */

.pf-work {
  background: var(--body-bg);
}

.pf-case {
  padding: 80px 0;
  border-top: 1px solid rgba(207, 208, 212, 0.14);
  scroll-margin-top: 100px;
}

/* Below the hero this was another 72px on top of the hero's own 72px bottom
   band -- 144px of nothing between the jump buttons and "Case study 01". */
.pf-case:first-child {
  padding-top: 56px;
  border-top: 0;
}

.pf-case-index {
  margin: 0 0 10px;
  color: var(--theme);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.pf-case h2 {
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: none;
}

.pf-case-lede {
  max-width: 720px;
  margin: 0;
  color: #d2d2d2;
  font-size: 19px;
  line-height: 1.65;
}

.pf-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
}

.pf-stack li {
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  color: #d6d6d6;
  font-size: 13.5px;
  line-height: 1.3;
}

/* --- the story ----------------------------------------------------------- */

.pf-case-body {
  margin-top: 38px;
}

.pf-prose {
  max-width: 780px;
}

.pf-prose p {
  margin: 0 0 20px;
  color: #c9c9c9;
  font-size: 18px;
  line-height: 1.75;
}

.pf-prose p:last-child {
  margin-bottom: 0;
}

.pf-block {
  margin-top: 64px;
}

.pf-block > h3 {
  margin: 0 0 24px;
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

/* Features are cards, in the same material as the /service and pricing cards:
   a #1d1d21 panel, a hairline border, a 20px radius, and the yellow accent
   arriving on hover. The grid keeps two columns so the copy keeps its measure;
   each card is numbered by a counter rather than the markup, because the
   number is decoration and the list is already an ordered set of features. */
.pf-feature-list {
  counter-reset: pf-feature;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 0;
  padding: 0;
}

.pf-feature-list li {
  counter-increment: pf-feature;
  padding: 26px 28px 28px;
  background: #1d1d21;
  border: 1px solid rgba(207, 208, 212, 0.2);
  border-radius: 20px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.pf-feature-list li:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 251, 83, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* The number chip sits above the title and starts the card, so the features
   scan as numbered deliverables instead of a run of bullets. The counter is
   per list, so ChadBot's four and ShopAgent's six each start at 01. */
.pf-feature-list li::before {
  content: counter(pf-feature, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(239, 251, 83, 0.1);
  color: var(--theme);
  font-family: "Marcellus", sans-serif;
  font-size: 14px;
  line-height: 1;
}

.pf-feature-list h4 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.pf-feature-list p {
  margin: 0;
  color: #a9a9a9;
  font-size: 16px;
  line-height: 1.65;
}

/* --- screens: one frame, arrows either side ------------------------------- */

/* The frame stops at the width of the feature grid rather than the full case
   column: at 1166px it dwarfed the copy around it, and the screens inside are
   already dense enough to read at 1000px. */
.pf-slider {
  max-width: 1000px;
  margin: 0;
}

.pf-slider-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(207, 208, 212, 0.18);
  border-radius: 22px;
  background: #101012;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.3);
}

.pf-slider-chrome {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(207, 208, 212, 0.14);
  background: #17171a;
}

.pf-slider-dots {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.pf-slider-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(207, 208, 212, 0.22);
}

.pf-slider-caption {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #9c9c9c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pf-slider-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.pf-slider-counter {
  color: #8f8f8f;
  font-family: "Marcellus", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.pf-slider-counter b {
  color: var(--theme);
  font-weight: 400;
}

/* The arrows sit on the edges of the frame, not in the bar above it: the site
   header is sticky, and when the frame sits high in the viewport the bar --
   and any control in it -- ends up underneath the header. */
.pf-slider-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 1px solid rgba(207, 208, 212, 0.24);
  border-radius: 50%;
  background: rgba(16, 16, 18, 0.72);
  color: #cdcdcd;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.pf-slider-nav--prev {
  left: 18px;
}

.pf-slider-nav--next {
  right: 18px;
}

.pf-slider-nav:hover {
  border-color: var(--theme);
  background: var(--theme);
  color: var(--header);
}

/* A native scroll-snap track: a swipe works with no JavaScript, and the
   arrows only have to scroll it. */
.pf-slider-track {
  display: flex;
  overflow-x: auto;
  aspect-ratio: 16 / 9;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pf-slider-track::-webkit-scrollbar {
  display: none;
}

.pf-slider-track:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: -3px;
}

.pf-slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 22px;
  scroll-snap-align: center;
}

.pf-slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* The screenshots come in two shapes -- wide desktop views and portrait
     phone shots. The frame holds a fixed box and the image keeps its own ratio
     inside it, so nothing is stretched and the border hugs the image rather
     than the empty space around it. */
  border: 1px solid rgba(207, 208, 212, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.pf-slider-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(207, 208, 212, 0.16);
}

.pf-slider-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: #8f8f8f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.pf-slider-tab span {
  color: var(--theme);
  font-family: "Marcellus", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.pf-slider-tab:hover {
  color: var(--white);
}

.pf-slider-tab[aria-selected="true"] {
  color: var(--white);
  border-bottom-color: var(--theme);
}

/* --- next case study ----------------------------------------------------- */

.pf-next {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 68px;
  padding-top: 28px;
  border-top: 1px solid rgba(207, 208, 212, 0.16);
  color: var(--white);
}

.pf-next-label {
  flex: 0 0 auto;
  color: #8f8f8f;
  font-size: 13px;
  line-height: 1.5;
}

.pf-next-name {
  flex: 1 1 auto;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.pf-next:hover .pf-next-name {
  color: var(--theme);
}

.pf-next-arrow {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(207, 208, 212, 0.22);
  border-radius: 50%;
  color: var(--theme);
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

.pf-next:hover .pf-next-arrow {
  border-color: var(--theme);
  background: var(--theme);
  color: var(--header);
}

/* --- engineering focus --------------------------------------------------- */

/* The whole block is centred like the hero heading above it — eyebrow, title,
   copy and the footnote all share the page's centre line. The pillar cards
   below stay left-aligned: a 280px card of centred body copy reads worse than
   one that follows the same left edge as the feature lists in the cards above.
   -------------------------------------------------------------------------- */

.pf-focus {
  padding: 64px 0 80px;
  border-top: 1px solid rgba(207, 208, 212, 0.14);
  background: var(--body-bg);
  text-align: center;
}

.pf-focus h2 {
  max-width: 900px;
  margin: 0 auto 22px;
  color: var(--white);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: none;
}

.pf-focus h2 span {
  color: var(--theme);
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
}

.pf-focus-copy {
  max-width: 780px;
  margin: 0 auto;
  color: #c9c9c9;
  font-size: 18px;
  line-height: 1.75;
}

/* The four pillars use the features' card material (see that block above), on
   a narrower card. The index in the markup becomes the same yellow chip. */
.pf-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 44px 0 0;
  padding: 0;
}

.pf-focus-grid li {
  padding: 24px 22px 26px;
  background: #1d1d21;
  border: 1px solid rgba(207, 208, 212, 0.2);
  border-radius: 20px;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.pf-focus-grid li:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 251, 83, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pf-focus-grid li > span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(239, 251, 83, 0.1);
  color: var(--theme);
  font-family: "Marcellus", sans-serif;
  font-size: 14px;
  line-height: 1;
}

.pf-focus-grid h3 {
  margin: 0 0 8px;
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.pf-focus-grid p {
  margin: 0;
  color: #a9a9a9;
  font-size: 15.5px;
  line-height: 1.65;
}

.pf-note {
  max-width: 780px;
  margin: 44px auto 0;
  color: #7f7f7f;
  font-size: 13px;
  line-height: 1.6;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1199px) {
  .pf-hero {
    padding: 126px 0 62px;
  }

  .pf-case {
    padding: 68px 0;
  }

  .pf-case:first-child {
    padding-top: 48px;
  }

  /* Four cards fit beside each other only from 1200px up. Below that the same
     grid is 2x2: at ~220px a card left its copy about 175px wide, five or six
     lines deep -- a cramped column rather than a card. */
  .pf-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 991px) {
  .pf-hero {
    padding: 118px 0 56px;
  }

  .pf-case {
    padding: 60px 0;
  }

  .pf-case:first-child {
    padding-top: 44px;
  }

  .pf-block {
    margin-top: 54px;
  }

  .pf-focus {
    padding: 54px 0 66px;
  }
}

@media (max-width: 767px) {
  .pf-hero {
    padding: 104px 0 48px;
  }

  .pf-hero h1 {
    margin-bottom: 18px;
  }

  .pf-case {
    padding: 52px 0;
  }

  .pf-case:first-child {
    padding-top: 40px;
  }

  .pf-case h2 {
    margin-bottom: 16px;
  }

  .pf-case-lede {
    font-size: 17px;
  }

  .pf-prose p,
  .pf-focus-copy {
    font-size: 16.5px;
  }

  .pf-block {
    margin-top: 46px;
  }

  .pf-block > h3 {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .pf-feature-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .pf-feature-list li {
    padding: 22px 22px 24px;
  }

  .pf-feature-list h4 {
    font-size: 18px;
  }

  .pf-feature-list p {
    font-size: 15.5px;
  }

  /* A taller frame: the phone screens of ChadBot are portrait, and a 16:9
     box would shrink them to nothing. */
  .pf-slider-track {
    aspect-ratio: 4 / 3;
  }

  .pf-slide {
    padding: 14px;
  }

  .pf-slider-chrome {
    gap: 12px;
    padding: 11px 14px;
  }

  .pf-slider-caption {
    font-size: 10px;
  }

  .pf-slider-nav {
    width: 38px;
    height: 38px;
  }

  .pf-slider-nav--prev {
    left: 10px;
  }

  .pf-slider-nav--next {
    right: 10px;
  }

  .pf-slider-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    scrollbar-width: none;
  }

  .pf-slider-tabs::-webkit-scrollbar {
    display: none;
  }

  .pf-slider-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pf-next {
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 52px;
  }

  .pf-next-label {
    flex: 1 1 auto;
  }

  .pf-next-name {
    flex: 1 1 100%;
    order: 3;
    font-size: 24px;
  }

  .pf-focus {
    padding: 46px 0 56px;
  }

  .pf-focus-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 40px;
  }

  .pf-focus-grid li {
    padding: 22px 20px 24px;
  }

  .pf-note {
    margin-top: 32px;
  }
}

@media (max-width: 575px) {
  .pf-case h2 {
    font-size: 40px;
  }

  .pf-slider-dots {
    display: none;
  }
}


/* =============================================================================
   Portfolio — two-card showcase
   =============================================================================
   /portfolio opens the way /projects does: a centred heading band, then two
   cards side by side — ChadBot left, ShopAgent right. Each card is the project
   mockup plus title, summary, stack pills, key features and the contribution
   statement. The screen gallery and the index/category line that used to sit
   inside each card are gone, as is the hero's meta row (all three at the user's
   request): the mockup already shows the product, and the rest only added
   height and clutter.

   Two things the previous version got wrong and this one fixes:

   1. The cards were Bootstrap columns, so the shorter one (ChadBot: four
      features) stopped ~90px above the taller one (ShopAgent: six). They are
      now grid items in ONE grid, which stretches both to a shared height, and
      the screens strip is pinned to the bottom of each card with
      `margin-top: auto` — so the leftover space lands above that strip rather
      than as a ragged bottom edge.

   2. The features were a two-column grid of 12.5px body copy, which at a
      ~280px column ran four or five lines deep and read as fine print. They
      are now a single column: a yellow tick, then the feature title in white
      and its description inline, at 15px.

   The old long-form case studies (.pf-case, .pf-case-head, .pf-case-body,
   .pf-block, .pf-feature-list, .pf-slider, .pf-next) are kept above, untouched,
   so the ScreenSlider component still renders if a route uses it again.
   ========================================================================== */

/* ---- section ------------------------------------------------------------ */

.pf-work {
  padding: 4px 0 96px;
  background: var(--body-bg);
}

/* One grid, not two columns: `stretch` then gives both cards the taller
   card's height and their bottoms line up. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}


/* ---- card --------------------------------------------------------------- */

.pf-card {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 24px;
  background: linear-gradient(180deg, #1b1b20 0%, #16161a 100%);
  border: 1px solid rgba(207, 208, 212, 0.14);
  border-radius: 26px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.pf-card:hover {
  border-color: rgba(239, 251, 83, 0.26);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
}

/* The artwork sits in the card's own padding, so the mockup reads as a print
   mounted on a board rather than as a photograph bleeding to the edge. Both
   sources are 1254x1254; a 4:3 frame crops ~12% top and bottom, and the phones
   sit inside that margin, so nothing important is lost. */
.pf-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: #0f0f12;
}

.pf-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pf-card:hover .pf-card-media img {
  transform: scale(1.035);
}


/* ---- body --------------------------------------------------------------- */

/* The index/category line that used to open the body is gone (user's call), so
   the title now starts directly under the artwork. */
.pf-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px 12px 0;
}

.pf-card-title {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: none;
}

.pf-card-desc {
  margin: 0;
  color: #b6b6b6;
  font-size: 17px;
  line-height: 1.7;
}


/* ---- stack pills -------------------------------------------------------- */

.pf-card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.pf-card-stack li {
  padding: 6px 13px;
  border: 1px solid rgba(207, 208, 212, 0.14);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.035);
  color: #d0d0d0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}


/* ---- labelled blocks (features / contribution) -------------------------- */

/* `margin-bottom` is the gap the contribution panel needs when the card has no
   spare height: `margin-top: auto` on that panel resolves to 0 in that case, so
   the gap has to live on the block above it — a margin the auto value can add
   to but never eat. */
.pf-card-block {
  margin: 30px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(207, 208, 212, 0.12);
}

.pf-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pf-card-label span {
  color: #7d7d7d;
  font-family: "Marcellus", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
}


/* ---- features ----------------------------------------------------------- */

.pf-card-feats {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-card-feats li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.pf-tick {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(239, 251, 83, 0.12);
  color: var(--theme);
}

.pf-tick svg {
  width: 12px;
  height: 12px;
}

.pf-card-feats p {
  margin: 0;
  color: #9f9f9f;
  font-size: 16px;
  line-height: 1.68;
}

.pf-card-feats strong {
  color: #ececec;
  font-weight: 700;
}


/* ---- contribution ------------------------------------------------------- */

/* The one paragraph on the card that is about the person rather than the
   product, so it gets the accent tint instead of another hairline rule.

   `margin-top: auto` is what keeps the two cards' bottom edges aligned: the
   cards are stretched to a shared height, ChadBot has two fewer features than
   ShopAgent, and the leftover space lands here rather than as a ragged edge
   under the last card. */
.pf-card-contrib {
  margin-top: auto;
  padding: 22px 24px 24px;
  background: rgba(239, 251, 83, 0.045);
  border: 1px solid rgba(239, 251, 83, 0.16);
  border-radius: 16px;
}

/* `margin-top: auto` resolves to 0 when the card has no spare height, which
   would sit the panel flush against the feature list — the gap lives on
   `.pf-card-block` above it. */
.pf-card-contrib .pf-card-label {
  margin-bottom: 12px;
  color: var(--theme);
}

.pf-card-contrib p {
  margin: 0;
  color: #b2b2b2;
  font-size: 15.5px;
  line-height: 1.7;
}

/* Both cards share a height, but ShopAgent's statement wraps to one more line
   than ChadBot's at desktop widths, leaving the two tinted panels 26px apart.
   A shared minimum makes them identical rectangles; the spare space falls
   under ChadBot's shorter paragraph. Below 1200px the narrower panel wraps
   both statements to the same number of lines, so the rule would only add
   empty height there. */
@media (min-width: 1200px) {
  .pf-card-contrib {
    min-height: 210px;
  }
}


/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1399px) {
  .pf-card-title {
    font-size: 30px;
  }
}

/* The two cards stay side by side — ChadBot left, ShopAgent right — all the
   way down to 768px. They only stack on phones, where two ~300px columns would
   squeeze the feature copy to four words a line. */
@media (max-width: 991px) {
  .pf-grid {
    gap: 20px;
  }

  .pf-card {
    padding: 12px 12px 18px;
    border-radius: 22px;
  }

  .pf-card-media {
    border-radius: 14px;
  }

  .pf-card-body {
    padding: 20px 4px 0;
  }

  .pf-card-title {
    font-size: 25px;
  }

  .pf-card-desc,
  .pf-card-feats p {
    font-size: 14px;
  }

  .pf-card-stack li {
    font-size: 11.5px;
    padding: 4px 10px;
  }

  .pf-card-contrib {
    padding: 16px 16px 18px;
  }

  .pf-card-contrib p {
    font-size: 13.5px;
  }
}

@media (max-width: 767px) {
  .pf-work {
    padding-bottom: 72px;
  }

  .pf-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    max-width: 560px;
    margin-inline: auto;
  }

  .pf-card {
    padding: 12px 12px 20px;
  }

  .pf-card-body {
    padding: 24px 6px 0;
  }

  .pf-card-title {
    font-size: 26px;
  }

  .pf-card-desc {
    font-size: 16px;
  }

  .pf-card-feats p {
    font-size: 15px;
  }

  .pf-card-stack li {
    font-size: 12px;
    padding: 5px 11px;
  }

  .pf-card-contrib {
    padding: 20px 20px 22px;
  }

  .pf-card-contrib p {
    font-size: 15px;
  }
}


/* ---- closing CTA -------------------------------------------------------- */

/* The consultation block is shared with the homepage, /about and /projects, and
   it ships with `.section-padding` — 120px top and bottom. On this page it
   follows the engineering-focus section directly, and 120px of empty dark above
   and below a four-line block read as two more sections of nothing.

   Scoped through `.pf-page`, the wrapper this page owns, so the shared block on
   every other route keeps its own padding (and /projects keeps the 80px it
   already overrides for itself). */
.pf-page .cta-discuss-section.section-padding {
  padding-top: 56px;
  padding-bottom: 56px;
}

@media (max-width: 1199px) {
  .pf-page .cta-discuss-section.section-padding {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

@media (max-width: 991px) {
  .pf-page .cta-discuss-section.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .pf-page .cta-discuss-section.section-padding {
    padding-top: 34px;
    padding-bottom: 34px;
  }
}


/* =============================================================================
   Contact info cards — one row, one height
   =============================================================================
   The four cards under "Contact information" (Location / Email us / Free call /
   Opening hour) each sized to their own copy, so the row bottom read ragged:
   the three-line address card ran 56px taller than the one-line email and
   phone cards, with the two-line opening hours in between.

   The columns were never the problem — Bootstrap rows are `align-items:
   stretch`, so every column in a line already stands the tallest card's
   height. The cards inside just did not fill their column. `height: 100%`
   does that, so icon, heading and first line keep one baseline across the row
   and the spare space lands under the shorter copy.

   Below xl the grid wraps (3 per row at lg, 2 at md); every flex line then
   stretches to its own tallest card, which is what each layout wants.
   ========================================================================== */

.contact-info-section .contact-box-items-4 {
  height: 100%;
}


/* =============================================================================
   Service cards — "Trending features" line
   -----------------------------------------------------------------------------
   The long-form cards (/service) show each service's features as one inline
   run of bulleted items under a small heading, instead of a paragraph. Set in
   the brand yellow so the keywords pop against the card's dark panel.

   These cards can grow much taller than the homepage cards. The photo tile
   is deliberately not stretched to that height (see the card block above):
   it stays at its 260:300 size and centres beside the taller copy, so the
   image remains the smaller of the two surfaces.
   ========================================================================== */

.service-box-items .service-content h4 {
  margin: 4px 0 12px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
}

.service-box-items .service-content .trending-list {
  margin: 0 0 22px;
  color: var(--theme);
}

.service-box-items .service-content .trending-list span {
  margin-right: 20px;
}

.service-box-items .service-content .trending-list span::before {
  content: "•";
  margin-right: 8px;
}

/* =============================================================================
   Footer — "Get in touch" contact rows
   -----------------------------------------------------------------------------
   Both footer variants replaced their newsletter signup with this contact
   block (see src/components/site-footer/Footer.jsx). These rows sit outside
   the theme's .list-items link treatment -- that one animates a hover
   underline and slides an arrow in, which reads as affordance for navigation,
   not for an address. A plain flex row with a themed icon is quieter.

   Text colour is inherited so each variant keeps its own surface: the classic
   footer is a near-black panel (body --text), the indigo style-2 footer a
   light one (--text2). Only the icon accent is set here.
   ========================================================================== */

.footer-section .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-section .footer-contact-item i {
  margin-top: 7px;
  font-size: 16px;
}

.footer-section .footer-contact-item a {
  color: inherit;
  word-break: break-word;
}

.footer-section .footer-contact-item a:hover {
  color: var(--theme);
}

/* Classic footer (near-black panel): yellow icon accent. */
.footer-section.footer-bg .footer-contact-item i {
  color: var(--theme);
}

/* Indigo footer (style-2): indigo icon accent, indigo hover. */
.footer-widgets-wrapper.style-2 .footer-contact-item i {
  color: var(--theme2);
}

.footer-widgets-wrapper.style-2 .footer-contact-item a:hover {
  color: var(--theme2);
}

/* The classic footer's dark bar carries the same lockup as the nav. It is
   shorter than the 48px social icons, so the bar's height does not change. */

.footer-logo-image {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
}

@media (max-width: 1199px) {
  .footer-logo-image {
    height: 36px;
  }
}

@media (max-width: 575px) {
  .footer-logo-image {
    height: 32px;
  }
}

/* -----------------------------------------------------------------------------
   Footer — bottom bar alignment
   -----------------------------------------------------------------------------
   The vendor bar is `flex` + `space-between`, so its middle item is centred on
   the space LEFT OVER between the logo and the social icons — not on the page.
   With the legal links added under the copyright, the two lines landed ~40px
   apart and read as two unrelated rows.

   1fr / auto / 1fr fixes it properly: the side columns are equal by
   definition, so the centre column is on the container's true centre whatever
   the logo and icon widths are, and the copyright and the links above it share
   that axis.

   Scoped to `.footer-bg` (the classic footer) on purpose — the indigo
   `style-2` bar has its own two-item flex row that is already correct.
   -------------------------------------------------------------------------- */

.footer-section.footer-bg .footer-bottom .footer-bottom-wrapper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.footer-section.footer-bg
  .footer-bottom
  .footer-bottom-wrapper
  > .social-icon {
  justify-self: end;
}

.footer-bottom-center {
  text-align: center;
}

/* --- legal row ------------------------------------------------------------ */

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}

.footer-legal a {
  color: #8f8f99;
  transition: color 0.25s ease;
}

.footer-legal a:hover {
  color: var(--theme);
}

/* An empty span rather than a "·" character: a true dot at any font size,
   and it cannot be read out by a screen reader. */
.footer-legal-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #55555f;
}

@media (max-width: 991px) {
  /* One column, stacked and centred — the grid's side columns have nothing
     left to balance on a phone. */
  .footer-section.footer-bg .footer-bottom .footer-bottom-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .footer-section.footer-bg
    .footer-bottom
    .footer-bottom-wrapper
    > .social-icon {
    justify-self: auto;
  }
}

@media (max-width: 575px) {
  .footer-legal {
    gap: 6px 10px;
    font-size: 13.5px;
  }
}

/* =============================================================================
   Classic footer — vertical rhythm
   =============================================================================
   The vendor gives the widget block a 90px top / 120px bottom band and the
   bottom bar another 30px on each side. That leaves a lot of empty black
   between the link columns and the legal row, and below the bar. Trim the
   outer bands a little; the spacing inside the columns is untouched.
   ========================================================================== */

.footer-section.footer-bg .footer-widgets-wrapper {
  padding-top: 30px;
  padding-bottom: 80px;
}

.footer-section.footer-bg .footer-bottom {
  padding-top: 16px;
  padding-bottom: 16px;
}

@media (max-width: 1199px) {
  .footer-section.footer-bg .footer-widgets-wrapper {
    padding-top: 30px;
    padding-bottom: 70px;
  }
}

@media (max-width: 991px) {
  .footer-section.footer-bg .footer-widgets-wrapper {
    padding-top: 25px;
    padding-bottom: 55px;
  }
}

/* ==========================================================================
   Contact form (functional)
   The template's Subject control was a `nice-select` div faking a dropdown
   with dummy numbered options; the site never had a contact.php to post to
   either. The form now submits through a server action, so the subject is a
   real <select>. These rules make it sit exactly where the old widget was and
   match the input styling (dark fill, 10px radius, yellow affordance).
   ========================================================================== */

.contact-wrapper .contact-form-items-area .contact-form-items .form-clt select {
  width: 100%;
  padding: 18px 46px 18px 20px; /* room for the chevron at right */
  border-radius: 10px;
  border: 1px solid rgba(207, 208, 212, 0.2);
  background: #222226;
  color: #cdcdcd;
  font-weight: 500;
  font-size: 16px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* The dropdown list itself renders in the OS/agent layer on some platforms;
   give the open list a dark surface so white options stay readable. */
.contact-wrapper .contact-form-items-area .contact-form-items .form-clt select option {
  background: #222226;
  color: #cdcdcd;
}

/* Hidden-from-humans honeypot field (src/components/contact/ContactForm.jsx).
   Off-screen rather than display:none, which is what some bots recognise. */
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Success receipt, shown in place of the form. */
.contact-form-success {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px;
  border-radius: 10px;
  border: 1px solid rgba(53, 195, 127, 0.35);
  background: rgba(53, 195, 127, 0.08);
}

.contact-form-success .icon {
  font-size: 34px;
  line-height: 1;
  color: #35c37f;
  margin-top: 2px;
}

.contact-form-success .content h3 {
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 8px;
}

.contact-form-success .content p {
  color: #cdcdcd;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* The form's icons are inline SVG (see ContactForm.jsx — the theme's Font
   Awesome webfonts are 7-9KB subsets and render most glyphs as tofu). They are
   drawn at 1em with `currentColor`, so the theme's font-size/color rules still
   size and tint them; these rules only fix the box behaviour an <i> got for
   free. */
.contact-form-items .icon svg,
.contact-form-success .icon svg,
.contact-form-error svg {
  display: block;
}

/* .contact-form-error is a flex row; without this the glyph shrinks when the
   error message wraps to two lines. */
.contact-form-error svg {
  flex: none;
}

/* Inline validation error above the submit button. */
.contact-form-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 143, 138, 0.35);
  background: rgba(192, 50, 47, 0.12);
  color: #ff9d97;
  font-size: 15px;
  font-weight: 500;
}

/* =============================================================================
   Careers
   -----------------------------------------------------------------------------
   Public hiring surface: /careers and /careers/<slug>, plus the application
   form and its success/error states. The palette and type follow the rest of
   the dark theme -- black surfaces, theme yellow accents, Marcellus display
   lines -- while the layout is intentionally calmer than a service landing page
   so the roles and the application remain the focus.
   ========================================================================== */

/* Inline line icons drawn by CareersIcon.jsx. `1em` keeps every icon in step
   with the text size of the element it sits in. */
.careers-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.theme-btn .careers-icon {
  margin-left: 10px;
}

.careers-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh / var(--stage-zoom, 1));
  min-height: calc(100svh / var(--stage-zoom, 1));
  overflow: hidden;
  padding: 160px 0 80px;
  background: #0f0f12;
  border-bottom: 1px solid rgba(207, 208, 212, 0.1);
}

.careers-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(239, 251, 83, 0.16), transparent 32%),
    radial-gradient(circle at 12% 10%, rgba(81, 77, 224, 0.22), transparent 34%);
  pointer-events: none;
}

.careers-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px
  );
  background-size: 27px 27px;
  opacity: 0.25;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  pointer-events: none;
}

.careers-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.careers-hero-grid {
  display: block;
}

.careers-hero-copy-wrap {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.careers-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(239, 251, 83, 0.3);
  background: rgba(239, 251, 83, 0.06);
  color: var(--theme);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.careers-eyebrow .careers-icon {
  color: var(--theme);
  font-size: 15px;
}

.careers-hero h1 {
  max-width: 900px;
  margin: 25px auto;
  color: #ffffff;
  font-size: clamp(44px, 5.9vw, 92px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.careers-hero h1 span {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.careers-hero h1 span b {
  color: var(--theme);
  font-weight: 400;
}

.careers-hero-copy {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text);
  font-size: 20px;
  line-height: 1.65;
}

.careers-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

/* The stock outline button fills with blue on hover, which reads as a second
   accent next to the yellow primary. On careers both buttons should behave the
   same: a yellow fill and dark label. */
.theme-btn.bt-white-outline:hover {
  color: var(--header);
}

.theme-btn.bt-white-outline:hover::after {
  background-color: var(--theme);
}

.careers-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 34px;
}

.careers-hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #c4c4cc;
  font-size: 13px;
  line-height: 1;
}

.careers-hero-chips .careers-icon {
  color: var(--theme);
  font-size: 14px;
}

/* --- shared section heading ------------------------------------------------ */

.careers-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  margin-bottom: 46px;
}

.careers-section-head .section-title {
  max-width: 760px;
  margin-bottom: 0;
}

.careers-section-head .section-title h2 {
  margin-bottom: 0;
  color: #ffffff;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.careers-section-head .section-title h2 span {
  color: #ffffff;
}

.careers-section-head .section-title h2 b {
  color: var(--theme);
}

.careers-section-head .section-title h6 .careers-icon {
  margin-right: 8px;
  color: var(--theme);
  font-size: 15px;
}

.careers-section-intro {
  max-width: 400px;
  margin: 0 0 6px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

/* --- open roles ----------------------------------------------------------- */

.careers-openings-section {
  position: relative;
  padding: 110px 0;
  background: var(--body-bg);
  scroll-margin-top: 100px;
}

.careers-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
}

.careers-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #c5c5ce;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.careers-filter span {
  display: inline-block;
  min-width: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #9f9fa9;
  font-size: 11px;
  text-align: center;
}

.careers-filter:hover {
  color: #ffffff;
  border-color: rgba(239, 251, 83, 0.45);
}

.careers-filter.is-active {
  border-color: var(--theme);
  background: var(--theme);
  color: #151518;
}

.careers-filter.is-active span {
  background: rgba(21, 21, 24, 0.13);
  color: #151518;
}

.careers-jobs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.careers-job-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: #19191e;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s ease, border-color 0.35s ease,
    background 0.35s ease;
}

.careers-job-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--theme);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

.careers-job-card:hover {
  border-color: rgba(239, 251, 83, 0.42);
  background: #1c1c22;
  transform: translateX(5px);
}

.careers-job-card:hover::before {
  transform: scaleY(1);
}

.careers-job-main {
  min-width: 0;
  flex: 1;
}

.careers-job-dept {
  display: inline-block;
  color: var(--theme);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

/* The theme capitalizes headings globally, which would turn “Next.js” into
   “Next.Js” and rewrite words in admin-authored descriptions. Job titles and
   rich-text headings render exactly as stored. */
.careers-job-card h3,
.career-detail-hero h1,
.career-prose h2,
.career-prose h3,
.career-prose h4 {
  text-transform: none;
}

.careers-job-card h3 {
  margin: 10px 0 10px;
  color: #ffffff;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.15;
  transition: color 0.3s ease;
}

.careers-job-card:hover h3 {
  color: var(--theme);
}

.careers-job-card p {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

.careers-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.careers-job-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #b9b9c2;
  font-size: 13px;
  line-height: 1;
}

.careers-job-meta .careers-icon {
  color: var(--theme);
  font-size: 13px;
}

.careers-job-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--theme);
  font-size: 17px;
  transition: background 0.35s ease, color 0.35s ease,
    border-color 0.35s ease, transform 0.35s ease;
}

.careers-job-card:hover .careers-job-arrow {
  border-color: var(--theme);
  background: var(--theme);
  color: #151518;
  transform: rotate(-45deg);
}

.careers-empty {
  padding: 58px 30px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}

.careers-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 18px;
  border: 1px solid rgba(239, 251, 83, 0.18);
  background: rgba(239, 251, 83, 0.08);
  color: var(--theme);
  font-size: 23px;
}

.careers-empty h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 28px;
}

.careers-empty p {
  max-width: 580px;
  margin: 0 auto;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}

.careers-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

/* --- closing CTA ---------------------------------------------------------- */

.careers-cta-section {
  padding: 0 0 120px;
  background: var(--body-bg);
}

.careers-cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  overflow: hidden;
  padding: 56px 60px;
  border-radius: 30px;
  background: var(--theme);
}

.careers-cta-inner::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -80px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(21, 21, 24, 0.16);
  border-radius: 50%;
}

.careers-cta-inner::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -20px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(21, 21, 24, 0.12);
  border-radius: 50%;
}

.careers-cta-inner > * {
  position: relative;
  z-index: 1;
}

.careers-cta-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: rgba(21, 21, 24, 0.62);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.careers-cta-inner h2 {
  max-width: 720px;
  margin: 0 0 13px;
  color: #151518;
  font-family: "Marcellus", sans-serif;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.careers-cta-inner p {
  max-width: 570px;
  margin: 0;
  color: rgba(21, 21, 24, 0.7);
  font-size: 16px;
  line-height: 1.65;
}

.careers-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 14px;
}

.careers-cta-inner .theme-btn {
  border-color: #151518;
  background: #151518;
  color: var(--theme);
}

.careers-cta-inner .theme-btn::after {
  background: #ffffff;
}

.careers-cta-mail {
  color: #151518;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =============================================================================
   Job detail
   ========================================================================== */

.career-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 185px 0 85px;
  border-bottom: 1px solid rgba(207, 208, 212, 0.1);
  background:
    radial-gradient(circle at 84% 24%, rgba(239, 251, 83, 0.14), transparent 27%),
    radial-gradient(circle at 5% 100%, rgba(81, 77, 224, 0.15), transparent 32%),
    #0f0f12;
}

.career-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.13) 1px,
    transparent 1px
  );
  background-size: 27px 27px;
  opacity: 0.2;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
  pointer-events: none;
}

.career-detail-hero .container {
  position: relative;
  z-index: 2;
}

.careers-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  color: #8f8f99;
  font-size: 14px;
}

.careers-breadcrumb a {
  color: #c5c5ce;
  text-decoration: none;
}

.careers-breadcrumb a:hover {
  color: var(--theme);
}

.careers-breadcrumb span:last-child {
  color: var(--theme);
}

.career-detail-hero-inner {
  max-width: 1020px;
}

/* The detail hero is left-aligned; its actions should start on the same edge
   as the title instead of centring inside the measure. */
.career-detail-hero .careers-hero-actions {
  justify-content: flex-start;
}

.career-detail-hero h1 {
  margin: 14px 0 20px;
  color: #ffffff;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.career-detail-summary {
  max-width: 790px;
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.7;
}

.career-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.career-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #c4c4cc;
  font-size: 13px;
  line-height: 1;
}

.career-detail-meta .careers-icon {
  color: var(--theme);
  font-size: 14px;
}

.career-detail-section {
  padding: 85px 0 105px;
  background: var(--body-bg);
}

.career-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 64px;
  align-items: start;
}

.career-prose {
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}

.career-prose > div > *:first-child {
  margin-top: 0;
}

.career-prose > div > *:last-child {
  margin-bottom: 0;
}

.career-prose p {
  margin-bottom: 22px;
}

.career-prose h2 {
  margin: 42px 0 16px;
  color: #ffffff;
  font-family: "Marcellus", sans-serif;
  font-size: clamp(27px, 2.3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.career-prose h3 {
  margin: 30px 0 12px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.3;
}

.career-prose ul,
.career-prose ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.career-prose li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.career-prose li::marker {
  color: var(--theme);
}

.career-prose strong {
  color: #ffffff;
  font-weight: 600;
}

.career-prose a {
  color: var(--theme);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.career-prose blockquote {
  margin: 30px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--theme);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e2e7;
}

.career-sidebar {
  position: sticky;
  top: 110px;
}

.career-summary-card {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background: linear-gradient(180deg, #1d1d22, #17171b);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.career-posted {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--theme);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.career-summary-card h2 {
  margin: 0 0 20px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.25;
}

.career-facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.career-facts li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 14px;
  line-height: 1.5;
}

.career-facts li:last-child {
  border-bottom: 0;
}

.career-facts span {
  color: #8f8f99;
}

.career-facts strong {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

.career-apply-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 22px;
  padding: 18px 24px;
}

.career-sidebar-note {
  margin: 14px 0 0;
  color: #8f8f99;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

/* --- application section -------------------------------------------------- */

.careers-apply-section {
  padding: 100px 0 120px;
  border-top: 1px solid rgba(207, 208, 212, 0.1);
  background:
    radial-gradient(circle at 4% 2%, rgba(81, 77, 224, 0.14), transparent 28%),
    #101014;
  scroll-margin-top: 100px;
}

.careers-apply-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 62px;
  padding: 58px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(239, 251, 83, 0.07), transparent 30%),
    #17171b;
}

.careers-apply-intro h2 {
  margin: 22px 0 18px;
  color: #ffffff;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.careers-apply-intro h2 span {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
}

.careers-apply-intro h2 b {
  color: var(--theme);
  font-weight: 400;
}

.careers-apply-intro > p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

.careers-apply-points {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.careers-apply-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  color: #c4c4cc;
  font-size: 15px;
  line-height: 1.55;
}

.careers-apply-points .careers-icon {
  width: 28px;
  height: 28px;
  margin-top: -3px;
  padding: 7px;
  border-radius: 9px;
  background: rgba(239, 251, 83, 0.09);
  color: var(--theme);
}

.careers-apply-form {
  min-width: 0;
}

.careers-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.careers-field-wide {
  grid-column: 1 / -1;
}

.careers-field label {
  display: block;
  margin-bottom: 8px;
  color: #d2d2d9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.careers-field > input:not([type="file"]),
.careers-field > textarea {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  outline: none;
  background: #121216;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.careers-field > input::placeholder,
.careers-field > textarea::placeholder {
  color: #6f6f79;
}

.careers-field > input:focus,
.careers-field > textarea:focus {
  border-color: rgba(239, 251, 83, 0.7);
  box-shadow: 0 0 0 3px rgba(239, 251, 83, 0.1);
}

.careers-field > textarea {
  min-height: 150px;
  resize: vertical;
}

.careers-field-hint {
  display: block;
  margin-top: 7px;
  color: #83838d;
  font-size: 13px;
  line-height: 1.5;
}

.careers-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: #121216;
  color: #b9b9c2;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.careers-file:hover,
.careers-file:focus-within {
  border-color: rgba(239, 251, 83, 0.55);
  background: #15151a;
}

.careers-file:focus-within {
  box-shadow: 0 0 0 3px rgba(239, 251, 83, 0.1);
}

.careers-file .careers-icon {
  color: var(--theme);
  font-size: 16px;
}

.careers-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.careers-file input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.careers-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  color: #a5a5ae;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
}

.careers-consent input {
  width: auto;
  margin-top: 2px;
  accent-color: var(--theme);
}

.careers-form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

.careers-form-submit .theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  cursor: pointer;
}

.careers-form-submit .theme-btn:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.careers-form-submit p {
  max-width: 260px;
  margin: 0;
  color: #83838d;
  font-size: 13px;
  line-height: 1.55;
}

.careers-form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 143, 138, 0.35);
  border-radius: 11px;
  background: rgba(192, 50, 47, 0.12);
  color: #ff9d97;
  font-size: 15px;
  line-height: 1.5;
}

.careers-form-error .careers-icon {
  margin-top: 3px;
  font-size: 16px;
}

.careers-form-success {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px;
  border: 1px solid rgba(239, 251, 83, 0.35);
  border-radius: 18px;
  background: rgba(239, 251, 83, 0.07);
}

.careers-form-success-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme);
  color: #151518;
  font-size: 19px;
}

.careers-form-success h3 {
  margin: 2px 0 8px;
  color: #ffffff;
  font-size: 24px;
}

.careers-form-success p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
}

.careers-form-success-note {
  margin-top: 10px !important;
  color: #92929c !important;
  font-size: 14px !important;
}

.careers-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- more roles ----------------------------------------------------------- */

.career-more-section {
  padding: 0 0 120px;
  background: var(--body-bg);
}

.career-more-section .careers-section-head {
  align-items: flex-end;
}

.career-more-section .careers-section-head .section-title h2 {
  font-size: clamp(34px, 3.5vw, 52px);
}

/* =============================================================================
   Careers responsive
   ========================================================================== */

@media (max-width: 1199px) {
  .careers-hero {
    padding: 170px 0 85px;
  }

  .careers-openings-section {
    padding: 95px 0;
  }

  .careers-detail-grid {
    gap: 44px;
  }

  .careers-apply-shell {
    gap: 42px;
    padding: 46px;
  }
}

@media (max-width: 991px) {
  .careers-hero {
    padding: 150px 0 70px;
  }

  .careers-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 38px;
  }

  .careers-section-intro {
    max-width: 640px;
  }

  .careers-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 30px;
    padding: 44px;
  }

  .careers-cta-actions {
    align-items: flex-start;
  }

  .career-detail-hero {
    padding: 160px 0 70px;
  }

  .career-detail-section {
    padding: 70px 0 85px;
  }

  .career-detail-grid {
    grid-template-columns: 1fr;
  }

  .career-sidebar {
    position: static;
  }

  .career-summary-card {
    max-width: 560px;
  }

  .careers-apply-section {
    padding: 80px 0 95px;
  }

  .careers-apply-shell {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px;
  }

  .careers-apply-intro {
    max-width: 640px;
  }

  .career-more-section {
    padding-bottom: 95px;
  }
}

@media (max-width: 767px) {
  .careers-hero {
    padding: 136px 0 64px;
  }

  .careers-hero h1 {
    font-size: clamp(42px, 11vw, 62px);
    letter-spacing: -0.035em;
  }

  .careers-hero-copy {
    font-size: 17px;
  }

  .careers-openings-section {
    padding: 75px 0;
  }

  .careers-job-card {
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
  }

  .careers-job-card:hover {
    transform: none;
  }

  .careers-job-card p {
    font-size: 15px;
  }

  .careers-job-arrow {
    width: 46px;
    height: 46px;
    font-size: 14px;
  }

  .careers-cta-section {
    padding-bottom: 75px;
  }

  .careers-cta-inner {
    padding: 34px;
    border-radius: 22px;
  }

  .careers-cta-actions {
    width: 100%;
  }

  .careers-cta-inner .theme-btn {
    width: 100%;
  }

  .career-detail-hero {
    padding: 144px 0 60px;
  }

  .career-detail-hero h1 {
    font-size: clamp(37px, 10vw, 54px);
  }

  .career-detail-summary {
    font-size: 17px;
  }

  .career-detail-section {
    padding: 60px 0 70px;
  }

  .career-prose {
    font-size: 17px;
  }

  .careers-apply-section {
    padding: 65px 0 75px;
  }

  .careers-apply-shell {
    padding: 28px;
    border-radius: 22px;
  }

  .careers-form-grid {
    grid-template-columns: 1fr;
  }

  .careers-field-wide {
    grid-column: auto;
  }

  .careers-form-submit {
    align-items: flex-start;
    flex-direction: column;
  }

  .careers-form-submit .theme-btn {
    width: 100%;
  }

  .careers-form-success {
    padding: 22px;
  }

  .career-more-section {
    padding-bottom: 75px;
  }
}

@media (max-width: 575px) {
  .careers-hero {
    padding: 120px 0 56px;
  }

  .careers-hero h1 {
    font-size: clamp(38px, 11.5vw, 48px);
  }

  .careers-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .careers-hero-actions .theme-btn {
    width: 100%;
  }

  .careers-hero-chips {
    gap: 7px;
  }

  .careers-hero-chips span {
    padding: 8px 10px;
    font-size: 11px;
  }

  .careers-job-card {
    padding: 21px 19px;
  }

  .careers-job-card h3 {
    font-size: 22px;
  }

  .careers-job-arrow {
    width: 40px;
    height: 40px;
  }

  .careers-job-meta span {
    font-size: 12px;
  }

  .careers-empty {
    padding: 42px 20px;
  }

  .careers-empty h3 {
    font-size: 24px;
  }

  .careers-cta-inner {
    padding: 28px 24px;
  }

  .careers-cta-inner h2 {
    font-size: 33px;
  }

  .careers-apply-shell {
    padding: 22px;
  }

  .careers-apply-intro h2 {
    font-size: 36px;
  }

  .career-summary-card {
    padding: 24px;
  }

  .career-facts li {
    gap: 12px;
  }
}

/* =============================================================================
   Home pricing note
   =============================================================================
   One line under the four plan cards. The row is generated from PLANS in
   app/(site)/(home-1)/page.jsx, so the note sits outside the .row.
   ========================================================================== */

.pricing-note {
  margin-top: 60px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #cdcdcd;
}

/* The note is the last element in the section, so the 120px section padding
   underneath it stacks onto the message section's own top band. Trim the
   lower side slightly; the gap above the note stays as it is. */
@media (min-width: 992px) {
  .pricing-section-home.section-padding {
    padding-bottom: 80px;
  }
}

/* =============================================================================
   Home message section
   =============================================================================
   The vendor sets this headline in 150px and the section on the theme's 120px
   band. On the homepage it is the last big call to action before the client
   strip, so it gets a slightly smaller headline and a little less air above.
   The section's bottom padding also sits BELOW the nested brand strip, so it
   is what separates the marquee from the footer; that side is trimmed too.
   ========================================================================== */

.message-section-home.section-padding {
  /* Both bands sit around the whole Let's-talk block. The bottom one is below
     the nested brand strip, so it is the gap between the marquee and the
     footer; the top one is the air above the headline. */
  padding-top: 60px;
  padding-bottom: 60px;
}

/* The brand strip is nested in this section. Its own section padding was the
   biggest gap left inside the block (the space between the CTA row and the
   logos), so tighten that without moving the marquee itself. */
.message-section-home .brand-section.section-padding {
  padding-top: 80px;
}

@media (min-width: 992px) {
  .message-section-home .message-items h2 {
    font-size: 140px;
  }
}

/* The white inverse button in the theme has no hover state of its own; the
   portfolio cards already turn their copy lime. Match that here so the
   homepage call to action responds on hover too. */
.message-section-home .message-items .lets-circle {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.message-section-home .message-items .lets-circle:hover {
  background-color: var(--theme);
  color: var(--header);
}

/* =============================================================================
   Home pricing — one row, one height
   =============================================================================
   The vendor card has no height and no flex, so each of the four cards sized
   to its own content: the price wrapped to two lines on "Rs 5,499" and
   "Rs 9,999" but not on "Rs 0", which pushed the feature list and the button
   down by a line on those cards. Four cards, four different silhouettes.

   Fixed by making the column a flex box, the card a column that fills it, and
   the button stick to the bottom. `margin-top: auto` on the button is what
   keeps the CTAs on one line when a plan has three features instead of four.

   The price also drops from 55px to 44px with `nowrap`: at 4-up the card's
   inner width is ~230px and "Rs 17,999" at 55px is wider than that, so nowrap
   alone would have overflowed instead of wrapping.

   Scoped to `.pricing-home` because /pricing renders `.pricing-box-items` in
   its own wrapper with a different card count per row.
   ========================================================================== */

.pricing-home .row > [class*="col-"] {
  display: flex;
}

.pricing-home .pricing-box-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pricing-home .pricing-box-items .pricing-header h2 {
  font-size: 44px;
  white-space: nowrap;
}

.pricing-home .pricing-box-items .pricing-button {
  margin-top: auto;
  padding-top: 30px;
}

/* "2,000 AI conversations" is long enough to wrap in a 4-up card. The vendor
   list item is a plain block with the tick inline and the text in an
   inline-block span, so a wrapped second line starts under the tick instead of
   under the text. Flex makes the tick a fixed column and the text its own. */
.pricing-home .pricing-box-items .pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pricing-home .pricing-box-items .pricing-list li svg {
  flex: none;
  margin-top: 7px;
}

.pricing-home .pricing-box-items .pricing-list li span {
  padding-left: 0;
}

/* One label on one line -- a wrapped CTA made the button taller than its
   neighbours and broke the row's bottom edge. */
.pricing-home .pricing-box-items .pricing-button .theme-btn {
  white-space: nowrap;
}

@media (max-width: 575px) {
  .pricing-home .pricing-box-items .pricing-header h2 {
    font-size: 36px;
  }
}

/* =============================================================================
   FAQ page — /faq
   -----------------------------------------------------------------------------
   The search box on this page used to submit to "#" and do nothing. It now
   filters the answers, and a search that matches nothing needs to say so --
   otherwise the page looks broken: an empty column under the sidebar.
   ========================================================================== */

.faq-content .faq-empty {
  color: #cdcdcd;
  font-size: 17px;
  line-height: 1.7;
  padding: 20px 0;
}

/* The accordion on this page is driven by React, not by Bootstrap's collapse
   plugin, so the button needs the same hover reset the plugin's markup got
   for free: without it the theme's own button rules show a focus ring on
   every click. */
.faq-content .accordion-button:focus {
  box-shadow: none;
}

/* =============================================================================
   Legal pages — /privacy-policy and /terms-of-service
   -----------------------------------------------------------------------------
   Two documents, one layout (src/components/legal/LegalPage.jsx): hero, a
   sticky "on this page" index, numbered sections, closing CTA.

   Deliberately the calmest surface on the site. Every other inner page opens
   with a marketing hero, and a policy that opens with a marketing hero reads
   as something other than a policy. So: the same palette and type as the rest
   of the dark theme — near-black bands, theme-yellow accents, Marcellus for
   the display line — but a document measure and no scroll animations
   competing with the text.

   Type scale runs one step larger than the rest of the site's body copy. A
   policy is read line by line, often by someone looking for one clause, and
   at 19px/1.75 the paragraphs hold up at arm's length on a laptop. The measure
   is capped at 760px so the larger size does not turn into 110-character
   lines.

   `text-transform: none` on the headings is not a style preference. The vendor
   `h1..h6` rule capitalises every word, which is what turns "bd@ailogiqs.org"
   into "Bd@AiLogiQs.Org" elsewhere on the site. Legal headings quote product
   and company names, so they stay exactly as written.
   ========================================================================== */

/* Inline line icons (LegalIcon.jsx). `1em` keeps each one in step with the text
   size of whatever it sits in — the same contract the template's <i> had. */
.legal-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* --- hero ----------------------------------------------------------------- */

.legal-hero {
  position: relative;
  overflow: hidden;
  padding: 176px 0 84px;
  background: #0f0f12;
  border-bottom: 1px solid rgba(207, 208, 212, 0.1);
}

/* Centred headline, so the light sits behind the middle of the block rather
   than off to one side. The indigo wash stays bottom-right as the counterweight
   the yellow glow needs. */
.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(239, 251, 83, 0.12), transparent 46%),
    radial-gradient(circle at 86% 92%, rgba(81, 77, 224, 0.16), transparent 46%);
  pointer-events: none;
}

.legal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px
  );
  background-size: 27px 27px;
  opacity: 0.22;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  pointer-events: none;
}

.legal-hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.legal-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
  color: #7f7f8a;
  font-size: 14.5px;
  line-height: 1;
}

.legal-breadcrumb a {
  color: #9d9da7;
  transition: color 0.25s ease;
}

.legal-breadcrumb a:hover {
  color: var(--theme);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid rgba(239, 251, 83, 0.3);
  background: rgba(239, 251, 83, 0.06);
  color: var(--theme);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.legal-eyebrow .legal-icon {
  color: var(--theme);
  font-size: 15px;
}

.legal-hero h1 {
  max-width: 1000px;
  margin: 28px auto 0;
  color: #ffffff;
  font-size: clamp(50px, 5.6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-transform: none;
}

/* One line: "Privacy Policy" / "Terms of Service". The span used to be a block,
   which stacked the serif accent under the sans lead and cost a whole extra
   line of hero height for two short words. Inline keeps the two-typeface
   treatment without the break. */
.legal-hero h1 span {
  display: inline;
  font-family: "Marcellus", sans-serif;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.legal-hero h1 span b {
  color: var(--theme);
  font-weight: 400;
}

.legal-hero-copy {
  max-width: 700px;
  margin: 26px auto 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.7;
}

.legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.legal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 17px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #c4c4cc;
  font-size: 15.5px;
  line-height: 1;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.legal-meta-item .legal-icon {
  color: var(--theme);
  font-size: 15px;
}

a.legal-meta-item:hover {
  border-color: rgba(239, 251, 83, 0.4);
  color: #ffffff;
}

/* --- body: index + document ----------------------------------------------- */

.legal-body {
  padding: 88px 0 96px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.legal-aside {
  position: sticky;
  top: 118px;
}

.legal-toc-label {
  margin-bottom: 16px;
  color: #8a8a94;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* The rail is a 1px line on the list; the active item draws its own 2px marker
   over it with a -1px pull, so the highlight sits ON the rail rather than
   beside it. */
.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(207, 208, 212, 0.14);
}

.legal-toc a {
  display: flex;
  gap: 10px;
  margin-left: -1px;
  padding: 10px 0 10px 17px;
  border-left: 2px solid transparent;
  color: #9d9da7;
  font-size: 17.5px;
  line-height: 1.45;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.legal-toc a:hover {
  color: #ffffff;
}

.legal-toc a[aria-current="location"] {
  border-left-color: var(--theme);
  color: var(--theme);
}

.legal-toc-num {
  padding-top: 3px;
  color: #5c5c66;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.25s ease;
}

.legal-toc a[aria-current="location"] .legal-toc-num {
  color: var(--theme);
}

/* "Questions?" card under the index. Hidden below 992px, where the closing CTA
   already carries the same invitation and the index has to stay out of the
   way of the text. */
.legal-help {
  margin-top: 30px;
  padding: 22px 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(239, 251, 83, 0.2);
  background: rgba(239, 251, 83, 0.045);
}

.legal-help > .legal-icon {
  color: var(--theme);
  font-size: 21px;
}

.legal-help h2 {
  margin: 12px 0 8px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-transform: none;
}

.legal-help p {
  margin: 0 0 16px;
  color: #a8a8b2;
  font-size: 16px;
  line-height: 1.6;
}

.legal-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme);
  font-size: 16px;
  font-weight: 700;
  word-break: break-word;
}

.legal-help-btn .legal-icon {
  font-size: 14px;
  transition: transform 0.25s ease;
}

.legal-help-btn:hover .legal-icon {
  transform: translateX(4px);
}

/* --- the document --------------------------------------------------------- */

/* 800px is the reading measure (~76 characters at 21px). The index column
   stays flush with the hero's left edge; the document centres in what is left
   of the row, so the wide container's slack is split around the text instead
   of piling up on one side. */
.legal-doc {
  max-width: 800px;
  margin-inline: auto;
}

.legal-section {
  padding-bottom: 42px;
  margin-bottom: 42px;
  border-bottom: 1px solid rgba(207, 208, 212, 0.08);
  /* Clears the fixed header when an index link jumps here. */
  scroll-margin-top: 120px;
}

.legal-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.legal-section h2 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: clamp(28px, 2.7vw, 37px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-transform: none;
}

/* The number is a chip, not a typographic marker: it aligns to the cap height
   of the heading and stays legible at any heading size. */
.legal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(239, 251, 83, 0.28);
  background: rgba(239, 251, 83, 0.07);
  color: var(--theme);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.legal-doc p {
  margin: 0 0 18px;
  color: #b6b6c0;
  font-size: 21px;
  line-height: 1.75;
}

.legal-doc p a,
.legal-list a {
  color: var(--theme);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(239, 251, 83, 0.4);
  transition: text-decoration-color 0.25s ease;
}

.legal-doc p a:hover,
.legal-list a:hover {
  text-decoration-color: var(--theme);
}

.legal-list {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.legal-list li {
  position: relative;
  padding-left: 30px;
  color: #b6b6c0;
  font-size: 20.5px;
  line-height: 1.7;
}

/* A small rotated square rather than a disc — the site's mark is a diamond,
   and a round bullet next to it reads like a different brand. */
.legal-list li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--theme);
  transform: rotate(45deg);
}

.legal-list strong {
  color: #ffffff;
  font-weight: 600;
}

.legal-section > *:last-child {
  margin-bottom: 0;
}

/* Contact panel — the closing section of the policy. */
.legal-contact {
  margin-top: 24px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid rgba(207, 208, 212, 0.14);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.012)
  );
}

.legal-contact-name {
  margin: 0 0 15px;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.legal-contact .legal-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 13px;
  color: #b6b6c0;
  font-size: 19px;
  line-height: 1.6;
}

.legal-contact .legal-contact-row:last-child {
  margin-bottom: 0;
}

.legal-contact-row .legal-icon {
  margin-top: 6px;
  color: var(--theme);
  font-size: 17px;
}

.legal-contact-row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.legal-contact-row a:hover {
  color: var(--theme);
}

/* --- closing CTA ---------------------------------------------------------- */

.legal-cta {
  padding: 0 0 100px;
}

.legal-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  padding: 44px 48px;
  border-radius: 24px;
  border: 1px solid rgba(239, 251, 83, 0.16);
  background:
    radial-gradient(circle at 88% 15%, rgba(239, 251, 83, 0.13), transparent 48%),
    #141419;
}

.legal-cta-inner h2 {
  color: #ffffff;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-transform: none;
}

.legal-cta-inner p {
  margin: 8px 0 0;
  color: #a8a8b2;
  font-size: 19px;
  line-height: 1.6;
}

.legal-cta .theme-btn .legal-icon {
  margin-left: 10px;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1199px) {
  .legal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
  }

  .legal-hero {
    padding-top: 156px;
  }
}

/* Below the desktop grid the index stops being a column and becomes a chip
   scroller above the document: the same navigation, no sticky panel eating a
   third of a phone screen. */
@media (max-width: 991px) {
  .legal-hero {
    padding: 148px 0 62px;
  }

  .legal-layout {
    display: block;
  }

  .legal-aside {
    position: static;
    margin-bottom: 40px;
  }

  .legal-help {
    display: none;
  }

  .legal-toc ol {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding-bottom: 6px;
    border-left: 0;
    scrollbar-width: thin;
  }

  .legal-toc li {
    flex: 0 0 auto;
  }

  .legal-toc a {
    margin-left: 0;
    padding: 10px 15px;
    border: 1px solid rgba(207, 208, 212, 0.16);
    border-radius: 999px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  .legal-toc a[aria-current="location"] {
    border-color: rgba(239, 251, 83, 0.5);
    background: rgba(239, 251, 83, 0.08);
  }

  .legal-toc-num {
    display: none;
  }

  .legal-body {
    padding: 54px 0 72px;
  }

  .legal-cta {
    padding-bottom: 76px;
  }
}

@media (max-width: 575px) {
  .legal-hero {
    padding: 132px 0 48px;
  }

  .legal-hero h1 {
    font-size: 42px;
  }

  .legal-hero-copy {
    margin-top: 20px;
    font-size: 19.5px;
  }

  .legal-meta-item {
    font-size: 14px;
  }

  .legal-section {
    padding-bottom: 34px;
    margin-bottom: 34px;
    scroll-margin-top: 96px;
  }

  .legal-section h2 {
    gap: 12px;
    font-size: 24px;
  }

  .legal-num {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 13px;
  }

  .legal-doc p,
  .legal-list li {
    font-size: 19px;
  }

  .legal-list li {
    padding-left: 24px;
  }

  .legal-list li::before {
    top: 13px;
    width: 7px;
    height: 7px;
  }

  .legal-contact {
    padding: 22px;
  }

  .legal-contact .legal-contact-row {
    font-size: 17.5px;
  }

  .legal-cta-inner {
    padding: 32px 24px;
  }
}

/* 320px-class phones (iPhone SE 1st gen and older Androids): "Terms of
   Service" is 16 characters and wrapped onto a second line at 42px, which is
   the one thing this heading must not do. */
@media (max-width: 359px) {
  .legal-hero h1 {
    font-size: 36px;
  }
}

/* --- print ---------------------------------------------------------------- */

/* A policy gets printed or saved as a PDF, usually by whoever has to review it.
   The chrome, the index and the CTA are navigation — they have no meaning on
   paper, and the dark panels would drain a toner cartridge. */
@media print {
  #header-sticky,
  .footer-section,
  .legal-aside,
  .legal-cta,
  .legal-hero::before,
  .legal-hero::after {
    display: none !important;
  }

  .legal-hero,
  .legal-body {
    padding: 0 !important;
    background: #ffffff !important;
    border: 0;
  }

  .legal-hero h1,
  .legal-hero h1 span b,
  .legal-section h2,
  .legal-list strong,
  .legal-contact-name {
    color: #000000 !important;
  }

  .legal-hero-copy,
  .legal-doc p,
  .legal-list li,
  .legal-contact-row,
  .legal-meta-item,
  .legal-breadcrumb {
    color: #222222 !important;
  }

  .legal-num,
  .legal-eyebrow,
  .legal-contact {
    border-color: #bbbbbb !important;
    background: transparent !important;
  }

  .legal-section {
    page-break-inside: avoid;
    border-bottom-color: #dddddd;
  }

  .legal-doc {
    max-width: none;
  }
}


/* =============================================================================
   Chat widget — floating launcher + UI-only panel
   -----------------------------------------------------------------------------
   Rendered by TemplateRuntime outside `.site-stage`, so it is positioned
   against the viewport and never inherits the 0.9 stage zoom -- the same
   treatment as the rest of the fixed chrome.

   Every colour is a `--chat-*` token declared here. The indigo and BeeLens
   designs repaint the same component by overriding those tokens under their
   own body flag (ai-service.css / bee-service.css).

   The panel stays mounted while closed, so a typed thread survives closing and
   reopening; `visibility` keeps its controls out of the tab order until then.
   Nothing is sent anywhere yet -- see ChatWidget.jsx for the backend hook.
   ========================================================================== */

.chat-widget {
  --chat-accent: var(--theme);
  --chat-accent-ink: var(--header);
  --chat-accent-hover: var(--header);
  --chat-accent-hover-ink: var(--white);
  --chat-surface: #151518;
  --chat-surface-2: #1d1d21;
  --chat-line: rgba(255, 255, 255, 0.1);
  --chat-text: #ffffff;
  --chat-muted: #b2b2b2;
  --chat-launcher-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  --chat-panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);

  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 1000;
}

.chat-launcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--chat-accent);
  color: var(--chat-accent-ink);
  box-shadow: var(--chat-launcher-shadow);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    transform 0.25s ease;
}

.chat-launcher:hover {
  background-color: var(--chat-accent-hover);
  color: var(--chat-accent-hover-ink);
  transform: translateY(-2px);
}

.chat-launcher:active {
  transform: translateY(0);
}

.chat-launcher svg {
  width: 25px;
  height: 25px;
}

/* Brand artwork (192px source, cropped to its content). The artwork's own
   transparent padding is why this is smaller than the 56px disc, not a crop. */
.chat-launcher img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  height: min(500px, calc(100vh - 120px));
  height: min(500px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid var(--chat-line);
  border-radius: 20px;
  background-color: var(--chat-surface);
  color: var(--chat-text);
  box-shadow: var(--chat-panel-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: 100% 100%;
  /* Visibility flips after the fade on close, immediately on open (the
     `.is-open` override below), so the panel cannot eat clicks while fading. */
  transition: opacity 0.22s ease, transform 0.22s ease,
    visibility 0s linear 0.22s;
}

.chat-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--chat-line);
  background-color: var(--chat-surface-2);
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--chat-accent);
  color: var(--chat-accent-ink);
}

.chat-avatar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.chat-id {
  flex: 1;
  min-width: 0;
}

.chat-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.chat-sub {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--chat-muted);
}

.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--chat-muted);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.chat-close:hover {
  color: var(--chat-text);
  background-color: color-mix(in srgb, var(--chat-text) 8%, transparent);
}

.chat-close svg {
  width: 18px;
  height: 18px;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  padding: 18px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--chat-line) transparent;
}

.chat-thread::-webkit-scrollbar {
  width: 6px;
}

.chat-thread::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: var(--chat-line);
}

.chat-msg {
  display: flex;
  max-width: 86%;
}

.chat-msg p {
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.chat-msg-assistant {
  align-self: flex-start;
}

.chat-msg-assistant p {
  border-bottom-left-radius: 5px;
  background-color: var(--chat-surface-2);
}

.chat-msg-user {
  align-self: flex-end;
}

.chat-msg-user p {
  border-bottom-right-radius: 5px;
  background-color: var(--chat-accent);
  color: var(--chat-accent-ink);
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 11px;
  border-top: 1px solid var(--chat-line);
}

.chat-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--chat-line);
  border-radius: 999px;
  background-color: var(--chat-surface-2);
  color: var(--chat-text);
  font: inherit;
  font-size: 14px;
}

.chat-input::placeholder {
  color: var(--chat-muted);
}

.chat-input:focus {
  outline: none;
  border-color: var(--chat-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 20%, transparent);
}

.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--chat-accent);
  color: var(--chat-accent-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.chat-send:hover:not(:disabled) {
  background-color: var(--chat-accent-hover);
  color: var(--chat-accent-hover-ink);
}

.chat-send:disabled {
  opacity: 0.4;
  cursor: default;
}

.chat-send svg {
  width: 19px;
  height: 19px;
}

.chat-launcher:focus-visible,
.chat-close:focus-visible,
.chat-send:focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  .chat-launcher {
    width: 52px;
    height: 52px;
  }

  .chat-panel {
    width: calc(100vw - 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-panel {
    transition: none;
  }
}

@media print {
  .chat-widget {
    display: none;
  }
}