/* ---------------------------------------------------------------------------
   1000 Ventures — additions on top of the Orisa system.

   Everything here either (a) styles something Orisa has no component for (the
   live product-use counters, the product index, the about card) or (b)
   trims a template flourish that does not belong on a portfolio site. It never
   restyles an Orisa component wholesale: if a rule fights main.css, the fix
   belongs in the markup instead.

   Tokens come from main.css: --at-neutral-*, --at-theme-primary, --at-ff-*.
--------------------------------------------------------------------------- */

:root {
  --vt-live: #0e9f6e;
}

/* --- accessibility ------------------------------------------------------ */

.vt-skip {
  position: absolute;
  top: -200%;
  left: 16px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--at-neutral-950);
  color: var(--at-neutral-0);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.vt-skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--at-theme-primary);
  outline-offset: 3px;
}

/* Anchored sections sit under the fixed header when jumped to. */
[id] {
  scroll-margin-top: 96px;
}

/* --- live product-use counters ------------------------------------------
   The server renders every number, so these only ever get updated in place.
   Tabular figures keep a ticking number from reflowing the line it sits in. */

[data-uses] {
  font-variant-numeric: tabular-nums;
}

/* A pulsing dot marks a figure that is counting right now. It appears only
   where a number is actually live, so its absence is information too. */
.vt-dot {
  /* The ring is a box-shadow, which cannot read background-color, so the hue
     is carried by a pair of variables any context can re-point. */
  --vt-dot-fill: var(--vt-live);
  --vt-dot-ring: rgba(14, 159, 110, 0.5);
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vt-dot-fill);
  vertical-align: middle;
  animation: vt-pulse 2.4s infinite;
}

@keyframes vt-pulse {
  0% { box-shadow: 0 0 0 0 var(--vt-dot-ring); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Headline figures are buttons: they show the short form and expand to the
   exact count on click, which is where the ticking becomes visible. */
.vt-num {
  position: relative;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  cursor: pointer;
}

/* On a headline figure the dot rides above the plus like a superscript mark.
   The offset is in em so it tracks the type, but the dot itself stays in px:
   at 0.3em it becomes a 25px green blob next to a 68px figure, and the whole
   point of the mark is that it reads as a status light, not as punctuation. */
.vt-num .vt-dot {
  position: relative;
  top: -0.5em;
  width: 9px;
  height: 9px;
  margin-left: 0.16em;
  vertical-align: baseline;
}

.sec-1-home-12__title .vt-num {
  color: var(--at-theme-primary);
}
/* The dot marks a figure that is rounded and still moving. Once expanded to
   the exact count the number itself is visibly ticking, so the mark has
   nothing left to say. The JS already flips aria-expanded; CSS reads it. */
.vt-num[aria-expanded="true"] .vt-dot {
  display: none;
}

/* In the headline the dot reads as part of the orange figure rather than as a
   separate status light, so it takes the figure's colour. */
.sec-1-home-12__title .vt-dot {
  --vt-dot-fill: var(--at-theme-primary);
  --vt-dot-ring: rgba(240, 70, 14, 0.5);
  top: -0.62em;
  width: 11px;
  height: 11px;
  margin-left: 0.08em;
}

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

/* --- mobile menu ---------------------------------------------------------
   main.js clones the header nav into the offcanvas panel. The desktop hover
   effect keeps a second copy of each label in `.text-2` and slides it up on
   hover, but the rule that parks it out of sight is scoped to `.at-main-menu`.
   Inside the panel that scope does not apply and every item reads "WorkWork". */

.at-offcanvas-menu .at-link-swap .text-2 {
  display: none;
}

/* --- film grain ----------------------------------------------------------
   index-2 lays an animated noise GIF over its hero band at 10% opacity, which
   reads as old-TV static. One surface carries it here: the about band. It
   sits under the content on purpose, so anything sharing that surface needs
   its own stacking context. */

.vt-noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../imgs/pages/noise.ca275314206f.gif");
  background-repeat: repeat;
  background-size: 320px auto;
  opacity: 0.1;
}

@media (prefers-reduced-motion: reduce) {
  .vt-noise {
    background-image: url("../imgs/pages/noise-still.bed9e41ae9f1.webp");
  }
}

/* The grain is absolutely positioned, so it paints above static content.
   Anything sharing a section with it has to be lifted out of the way. */
.vt-above {
  position: relative;
  z-index: 1;
}

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

/* The hero sits on plain white rather than Orisa's neutral-50, so the grain
   further down the page is what carries the texture. */
.sec-1-home-12 {
  background-color: var(--at-neutral-0);
}
/* The pill said "live" while being a white chip on a white section, i.e. the
   quietest thing in the hero. It stays light — three of the five product
   favicons are opaque with white corners, so a dark capsule turns them into
   white patches — and earns its presence from elevation, a hairline, and the
   same pulsing dot every other live figure on the page carries. */
.sec-1-home-12__pill {
  gap: 10px;
  padding: 8px 20px 8px 10px;
  border: 1px solid var(--at-neutral-100);
  box-shadow: 0 14px 30px -16px rgba(15, 15, 15, 0.4);
}
.sec-1-home-12__pill-text {
  font-size: 14px;
  color: var(--at-neutral-900);
}
.sec-1-home-12__pill .vt-dot {
  width: 8px;
  height: 8px;
}
/* On a phone the badge is a third row of chrome above the headline, and the
   count it carries is repeated by the product index further down. */
@media (max-width: 767.98px) {
  .sec-1-home-12__pill {
    display: none;
  }
}

/* Orisa's pill holds round avatars. Ours holds product favicons, which are
   square marks and read better as rounded tiles on a white chip. */
.vt-pill-marks {
  display: inline-flex;
  align-items: center;
}
.vt-pill-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--at-neutral-0);
  box-shadow: 0 0 0 2px var(--at-neutral-0);
}
.vt-pill-mark + .vt-pill-mark {
  margin-left: -8px;
}

.sec-1-home-12__sub {
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
}

/* Trimming the sub to one line cost the hero 78px, and hiding the badge on
   phones cost another 165px. The block keeps the height it had and centres
   what is left inside it, so the fold does not ride up. */
.sec-1-home-12__hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
}
@media (max-width: 767.98px) {
  .sec-1-home-12__hero {
    min-height: 380px;
  }
}

/* --- product marquee -----------------------------------------------------
   The tiles match the ratio of the capture (1100x990, a narrower viewport
   than a full desktop), so the whole page width survives and the only trim is
   off the bottom. Narrower tiles put four sites on screen at once. */

.sec-1-home-12 {
  --sec1h12-tile-w: 400px;
}
.sec-1-home-12__tile {
  width: var(--sec1h12-tile-w);
  height: auto;
  aspect-ratio: 800 / 720;
  border: 1px solid var(--at-neutral-100);
  background: var(--at-neutral-0);
}
@media (max-width: 1399.98px) {
  .sec-1-home-12 { --sec1h12-tile-w: 370px; }
}
@media (max-width: 1199.98px) {
  .sec-1-home-12 { --sec1h12-tile-w: 340px; }
}
@media (max-width: 991.98px) {
  .sec-1-home-12 { --sec1h12-tile-w: 310px; }
}
@media (max-width: 767.98px) {
  .sec-1-home-12 { --sec1h12-tile-w: 280px; }
}
@media (max-width: 575.98px) {
  .sec-1-home-12 { --sec1h12-tile-w: 250px; }
}

/* Screenshots are documents: anchor them to the top so the hero is what shows
   rather than a slice of the middle of the page. */
.sec-1-home-12__tile-img {
  object-position: top center;
}

/* --- section headers -----------------------------------------------------
   One alignment system: the hero and the closing CTA are centred bookends,
   and every content section between them is left-aligned. "Selected work"
   shipped centred and was the only content section breaking it. */

.sec-2-home-12__header {
  align-items: flex-start;
  text-align: left;
}

/* Orisa sets these sub-lines to line-height 1, which is right for the one-line
   sentence its demo carries and cramped for anything that wraps. Ours wrap. */
.sec-2-home-12__sub {
  max-width: 760px;
  line-height: 1.5;
}

/* Same story in the footer CTA: unconstrained it ran to 111 characters a line,
   well past the 65-75 the eye tracks comfortably. */
.footer-12__cta-sub {
  max-width: 66ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* --- product index -------------------------------------------------------
   Built on Orisa's service card. The additions are the live count row and the
   domain line, which the original card has no slot for. */

.vt-product {
  row-gap: 20px;
}
.vt-product__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--at-neutral-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vt-product__domain {
  display: block;
  margin: -12px 0 0;
  font-size: 13px;
  line-height: 1;
  color: var(--at-neutral-300);
}
.vt-product:hover .vt-product__domain {
  color: var(--at-theme-primary);
}
.card-home-12-service__desc {
  min-height: 0;
}

/* On a phone the 19 product cards were 4,433px — 37% of the whole page — at
   233px each, most of which was card chrome rather than content. Nothing is
   removed here; the padding, gaps and type just stop being desktop-sized. */
@media (max-width: 767.98px) {
  .vt-product {
    padding: 18px;
    row-gap: 10px;
    border-radius: 16px;
  }
  .vt-product .card-home-12-service__title {
    font-size: 19px;
  }
  .vt-product .card-home-12-service__desc {
    font-size: 14px;
    line-height: 1.45;
  }
  .vt-product__domain {
    margin-top: -6px;
    font-size: 12px;
  }
  .vt-product .card-home-12-service__num-line {
    display: none;
  }
}

/* --- selected work -------------------------------------------------------
   The write-ups run 55-70 words, which is four lines on a desktop card and
   seven on a phone. They open on demand instead. */

.card-home-12-project {
  position: relative;
}
/* The card is an <article> now, so the title link stretches to cover it. The
   toggle sits above that overlay and stays clickable. */
.vt-work__link {
  color: inherit;
  text-decoration: none;
}
.vt-work__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-home-12-project__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.card-home-12-project.is-open .card-home-12-project__desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.vt-work__more {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: 4px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--at-neutral-300);
  font-family: var(--at-ff-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--at-neutral-950);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.vt-work__more:hover {
  color: var(--at-theme-primary);
  border-color: var(--at-theme-primary);
}

/* The four flagship cards are 2,809px on a phone, a third of the page. The
   copy stays — it is the showcase — but the image and the chrome around it
   were sized for a 480px desktop slot. */
@media (max-width: 767.98px) {
  .card-home-12-project {
    padding: 18px;
    row-gap: 18px;
  }
  .card-home-12-project__image {
    height: 190px;
  }
  .card-home-12-project__desc {
    font-size: 15px;
    line-height: 1.5;
  }
  .card-home-12-project__desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* Past the sixth card the list stops paying its way on a phone: it is a
   reference index, not something anyone reads top to bottom. The rest stay in
   the DOM for crawlers and expand on tap. Without JS all 19 show, as before. */
.vt-products-more {
  display: none;
}
@media (max-width: 767.98px) {
  .sec-3-home-12__grid.is-collapsed > :nth-child(n + 7) {
    display: none;
  }
  .vt-products-more.is-shown {
    display: inline-flex;
    margin: 24px auto 0;
  }
}

/* --- playbook ------------------------------------------------------------
   index-2's awards list. Its rows were built for a date plus an award name and
   linked out; ours are a number, a principle and its paragraph, so the columns
   are re-proportioned and the row keeps its dark hover state. */

.home-2-section-7 .card-award.style-1 {
  margin-bottom: 12px;
}
.home-2-section-7 .card-award-link {
  align-items: flex-start;
  gap: 24px 40px;
  padding: 12px 0;
}
.home-2-section-7 .card-award-date {
  flex: 0 0 90px;
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.home-2-section-7 .card-award-content {
  flex: 0 0 330px;
}
.home-2-section-7 .card-award-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* Basis 0, not auto: with `auto` the paragraph's base size is its own content
   width, which is far wider than the row, so the wrapping flex row breaks it
   onto its own line instead of seating it beside the title. */
.home-2-section-7 .card-award-web-excellence {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--at-neutral-500);
}
/* The row inverts to ink on hover; everything inside has to follow it. */
.home-2-section-7 .card-award:hover .card-award-title {
  color: var(--at-neutral-0);
}
.home-2-section-7 .card-award:hover .card-award-web-excellence {
  color: var(--at-neutral-300);
}

@media (max-width: 991.98px) {
  .home-2-section-7 .card-award-date,
  .home-2-section-7 .card-award-content,
  .home-2-section-7 .card-award-web-excellence {
    flex: 1 1 100%;
  }
}

/* --- about ---------------------------------------------------------------
   about-1's opening block. `.sec-1-about` and `.section-title` are layout
   hooks with no styling of their own in main.css, so the display sizes are
   set here. */

.vt-about__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--at-neutral-500);
}

/* The portrait signs the bio rather than sitting in a card of its own. */
.vt-about__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--at-neutral-100);
}
.vt-about__sign .sec-2-home-5__avatar-sm {
  flex: none;
  background: transparent;
  padding: 0;
}
/* The template greyscales these; a single portrait reads better in colour and
   the hover scale it ships with still applies. */
.vt-about__sign .sec-2-home-5__avatar-sm img {
  filter: none;
  border-radius: 8px;
}
.vt-about__sign-name {
  font-family: var(--at-ff-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--at-neutral-950);
}
.vt-about__sign-role {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--at-neutral-500);
}

@media (max-width: 991.98px) {
  .sec-1-about {
    padding-top: 72px;
    padding-bottom: 80px;
  }
}

/* --- footer -------------------------------------------------------------- */

.vt-cta-mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 28px;
  border-radius: 999px;
  background: var(--at-neutral-0);
  color: var(--at-neutral-950);
  font-family: var(--at-ff-heading);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.vt-cta-mail:hover {
  transform: translateY(-2px);
  color: var(--at-neutral-950);
}
.vt-cta-mail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--at-theme-primary);
  color: #fff;
}

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vt-dot {
    animation: none;
  }
}


/* ---------------------------------------------------------------------------
   Mobile pass (<=767px)

   Findings from measuring the rendered page at 390px rather than eyeballing a
   narrowed desktop: 37 controls under the 44px touch minimum, section padding
   running 48/72/80 with no rhythm, a 12px content gutter that the footer set
   to 16px, and body copy that my own scroll-trimming had pushed to 14px.
--------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  /* --- touch targets ------------------------------------------------------
     44px is the floor; several controls sat at 19-40px. The visible shape
     stays the same where it matters, the tappable box grows around it. */
  .at-menu-bar,
  .at-offcanvas .close-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .at-offcanvas-menu nav a {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .at-offcanvas-contact li {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .vt-skip {
    padding: 14px 20px;
  }
  /* The rule stays 1px and hugs the words; the padding is what fingers get. */
  .vt-work__more {
    padding: 12px 0;
    margin-top: 0;
    min-height: 44px;
  }

  /* These needed the anchor itself, not its wrapper: sizing the <h3> or the
     <li> leaves the tappable box the same 18-22px it always was. */
  .at-header-logo a,
  .footer-12__brand,
  .vt-work__link,
  .at-offcanvas-contact li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The counter sits inside the headline, so it cannot become a flex box: the
     live dot rides on the baseline as a superscript, and flex layout drops
     vertical-align, which lands the dot above the digits and forces the line
     box to 44px. The tap area grows on a pseudo-element instead, which costs
     the text flow nothing. */
  .vt-num::before {
    content: '';
    position: absolute;
    inset: -10px -8px;
  }
  .card-home-12-project__title {
    margin-bottom: 0;
  }

  /* Secondary text links in lists. WCAG 2.5.8 AA asks 24px where spacing is
     sufficient; 36px plus the row gap clears that comfortably without adding
     ~340px of footer to reach the 44px platform guideline. */
  .footer-12__col-links a,
  .at-hero-social a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  /* --- type floor ---------------------------------------------------------
     Trimming for scroll had pushed real body copy to 14px. Metadata (domain,
     count, label) stays small on purpose; sentences do not. */
  .card-home-12-project__desc {
    font-size: 16px;
  }
  .vt-product .card-home-12-service__desc {
    font-size: 15px;
  }
  .vt-product__domain {
    font-size: 13px;
  }
  .footer-12__brand-desc {
    font-size: 15px;
  }

  /* --- notch --------------------------------------------------------------
     With viewport-fit=cover the ink footer now reaches the bottom edge, so it
     has to keep its own content clear of the home indicator. */
  .footer-12__main {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}


/* ---------------------------------------------------------------------------
   Spacing system

   The page inherited three different ways of setting a content column: Orisa's
   `.container` (which it widens to 1750px, so it is effectively full-bleed),
   an inner `max-width: 1280px` on the index-12 grids, and the footer's
   `.container-fluid px-3 px-lg-5`. Measured at 1440 the left edges landed on
   12, 80 and 48px; at 1280 the index-2 sections collapsed to 12 while the
   index-12 ones held 82. One rule for all of them instead.

   Vertical padding was equally scattered: 100/120/72 on desktop, 48/72/80 on
   mobile. One scale, three steps.
--------------------------------------------------------------------------- */

.sec-1-home-12 > .container,
.sec-1-home-12__hero > .container,
.sec-2-home-12 > .container,
.sec-3-home-12 > .container,
.home-2-section-7 > .container,
.sec-1-about > .container,
.footer-12__cta > .container-fluid,
.footer-12__main > .container-fluid {
  max-width: 1360px;
  margin-inline: auto;
  padding-left: 40px;
  padding-right: 40px;
}

.sec-2-home-12,
.sec-3-home-12,
.home-2-section-7,
.sec-1-about,
.footer-12__cta {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media (max-width: 1199.98px) {
  .sec-1-home-12 > .container,
  .sec-1-home-12__hero > .container,
  .sec-2-home-12 > .container,
  .sec-3-home-12 > .container,
  .home-2-section-7 > .container,
  .sec-1-about > .container,
  .footer-12__cta > .container-fluid,
  .footer-12__main > .container-fluid {
    padding-left: 32px;
    padding-right: 32px;
  }

  .sec-2-home-12,
  .sec-3-home-12,
  .home-2-section-7,
  .sec-1-about,
  .footer-12__cta {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

@media (max-width: 767.98px) {
  .sec-1-home-12 > .container,
  .sec-1-home-12__hero > .container,
  .sec-2-home-12 > .container,
  .sec-3-home-12 > .container,
  .home-2-section-7 > .container,
  .sec-1-about > .container,
  .footer-12__cta > .container-fluid,
  .footer-12__main > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sec-2-home-12,
  .sec-3-home-12,
  .home-2-section-7,
  .sec-1-about,
  .footer-12__cta {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}


/* --- playbook on a phone --------------------------------------------------
   The awards list rewards a hover with an ink card. Touch has no hover, so on
   a phone the section was four white boxes of grey text and nothing else. The
   ink state becomes the resting state there: same component, same content,
   but the playbook now reads as its own chapter rather than more paragraphs.
   Keyed to (hover: none) rather than width, because the reason is the input. */

@media (hover: none) and (max-width: 767.98px) {
  .home-2-section-7 .card-award.style-1 {
    background-color: var(--at-neutral-900);
    border-color: var(--at-neutral-900);
    padding: 24px;
  }
  .home-2-section-7 .card-award-date {
    color: var(--at-theme-primary);
    font-weight: 500;
  }
  .home-2-section-7 .card-award-title {
    color: var(--at-neutral-0);
    font-size: 24px;
  }
  .home-2-section-7 .card-award-web-excellence {
    color: var(--at-neutral-300);
  }
  /* The rows carry their own weight now, so they need air between them. */
  .home-2-section-7 .card-award.style-1 + .card-award.style-1 {
    margin-top: 16px;
  }
}


/* The headline dot is placed for the 84px desktop cut. At the 40px mobile cut
   the same em offsets read too high and too far right against the "+". */
@media (max-width: 767.98px) {
  .sec-1-home-12__title .vt-dot {
    top: -0.53em;
    margin-left: 0.03em;
  }
}


/* ---------------------------------------------------------------------------
   Section headings

   Measured at 1440 they ran 115 / 64 / 80 / 62px across four sections, at two
   weights and four line-heights, and the playbook had no reveal while the rest
   did. Selected work at 115px was also louder than the 84px hero h1, which
   inverts the hierarchy of the page.

   One scale for the four content sections. The hero and the closing CTA keep
   their larger cut: they are bookends, not section headers.
--------------------------------------------------------------------------- */

.vt-section-title {
  font-family: var(--at-ff-heading);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: var(--at-neutral-950);
  text-wrap: balance;
}