/* Forte site - corrections applied on top of the Webflow block.
   Section 1: responsive. Section 2: hero crowd lights.
   Loaded after the Webflow style block, which stays the record of what is
   pasted into the live Webflow page. Nothing here changes the design; it
   removes jumps between breakpoints and fixes short viewports.

   1. FLUID HERO WORDMARK
   The Webflow CSS sizes the wordmark in fixed steps: 270, 310, 460, 580, 700,
   800. Between breakpoints the mark does not grow, so just below each one it
   collapses as a share of the screen:

       767px  wide -> 305px lettering, 40% of the viewport
       1023px wide -> 453px lettering, 44%
       1439px wide -> 571px lettering, 40%

   A 1366px laptop, which is one of the most common sizes there is, gets the
   1024px treatment and looks undersized. The rules below interpolate between
   the same six values, so the mark is identical to the live site at 320, 375,
   768, 1024, 1440 and 1920, and scales smoothly in between instead of jumping.

   These cascade on min-width alone, with no max-width bounds, which is how the
   Webflow block does it. A viewport is often a fractional number of CSS pixels
   once device pixel ratio or zoom is involved, and a 1023.4px viewport matches
   neither max-width: 1023px nor min-width: 1024px, so a range-bounded rule
   drops out and the element falls back to its base width. Cascading avoids
   that gap: each rule is only reached inside its own span because the next
   min-width takes over at the top of it.

   2. SHORT VIEWPORTS
   .forte-hero carries min-height: 550px. A landscape phone is shorter than
   that, so the hero grows past the fold and .forte-hero-bottom, which is
   anchored to the bottom of the hero, takes the Work With Us button off
   screen. Measured at 844 x 390 the button sat at 435 to 479 with the fold at
   390. This also affects the live site. */

/* ---- 1. fluid hero wordmark ------------------------------------------- */

/* below 375: 270px at 320 wide, reaching 310px at 375 */
.forte-hero-logo { width: clamp(236px, calc(72.7vw + 37.3px), 310px); }

/* 310px at 375, 460px at 768 */
@media (min-width: 375px) {
  .forte-hero-logo { width: calc(38.17vw + 166.9px); }
}

/* 460px at 768, 580px at 1024 */
@media (min-width: 768px) {
  .forte-hero-logo { width: calc(46.875vw + 100px); }
}

/* 580px at 1024, 700px at 1440 */
@media (min-width: 1024px) {
  .forte-hero-logo { width: calc(28.846vw + 284.6px); }
}

/* 700px at 1440, 800px at 1920 */
@media (min-width: 1440px) {
  .forte-hero-logo { width: calc(20.833vw + 400px); }
}

/* the live site stops growing here */
@media (min-width: 1920px) {
  .forte-hero-logo { width: 800px; }
}

/* The speaker hangs to the right of the final S. On the narrowest phones pull
   it in a little so less of the invisible tap target meets the screen edge. */
@media (max-width: 374.98px) {
  .forte-wordmark__sound { margin-left: -14px; }
}

/* ---- 2. short viewports ------------------------------------------------ */

@media (max-height: 520.98px) and (orientation: landscape) {
  .forte-hero {
    min-height: 0;
  }

  .forte-hero-content {
    margin-top: clamp(16px, 6vh, 40px);
  }

  .forte-hero-logo {
    width: min(44vw, 380px);
  }

  .forte-hero-tagline {
    font-size: 0.7rem;
  }

  .forte-hero-bottom {
    padding-bottom: clamp(10px, 3vh, 20px);
  }

  /* decorative, and the first thing worth dropping when height is scarce */
  .forte-scroll-indicator {
    display: none;
  }
}

/* ---- 3. hero crowd lights ---------------------------------------------- */

/* The hero video plays at full opacity under a gradient that is clear through
   the middle band and heavy at top and bottom. Two small changes make the
   lights carry more without changing the look of the hero:

   a. a light grade on the video. Contrast does most of the work, lifting the
      lit phones away from the black room rather than raising the whole frame,
      which would grey out the background behind the wordmark.
   b. the bottom of the gradient eased off. It was 0.35 at 75% and 0.92 at the
      base, which was crushing the front rows of the crowd. The base stays dark
      enough to carry the Work With Us button.

   Tune the lights here. Raise contrast for more separation, raise brightness
   for a generally lighter frame. Speed lives in forte-site.js. */

/* Contrast was 1.10 and it was tearing the sky into contour bands: stretching
   8-bit levels on an already heavily compressed dark gradient turns the steps
   between levels into visible lines across the full width. The lift is now
   carried mostly by brightness, which shifts levels without spreading them. */
/* The grade is gone. brightness 1.05 / contrast 1.02 was lifting the arena's
   upper tier edges, faint horizontal lines above the crowd on the left and
   right, into view. They are in the original photograph, not the encode, so
   they cannot be removed; not amplifying them is the next best thing. */
.forte-hero-video {
  filter: none;
}

/* The grain overlay that used to sit here is gone. It was added to dither
   banding in the old 1.2 Mbps clip, but mid-grey noise at 7% opacity over pure
   black lands near 9/255, veiling every black in the hero to about 3.5% grey.
   The current footage is 8.2 Mbps with grain added before compression, so the
   dithering is already in the file and the overlay was only costing depth.
   Measured: the source frames are marginally deeper in the blacks than the
   live site's, so any lift was coming from here. */

/* The overlay gradient is gone. It existed on the Webflow build to darken the
   top and bottom so text stayed legible over the footage, and it is not needed
   on this one. Measured against the delivered frame:

     behind the wordmark and tagline the video is pure black, so the gradient
     changed contrast not at all, 18.43:1 either way
     behind the services line, 10.46:1 without against 10.50:1 with
     behind the CTA, the only place it did anything, 7.52:1 without

   And the CTA now carries its own rgba(8,8,8,0.5) fill, which puts it at
   11.68:1 on its own. WCAG AA wants 4.5:1.

   So nothing is layered over the video now. Not a gradient, not grain, not a
   filter. The hero is the footage as delivered. */
.forte-hero-overlay {
  display: none;
}


/* Someone who asks for less motion should not be given a livelier background,
   so the grade stays and the speed-up is dropped in forte-site.js. */
@media (prefers-reduced-motion: reduce) {
  .forte-hero-video { filter: none; }
}

/* ---- 4. contact form ---------------------------------------------------- */

/* Replaces the mailto link at the end of the letter, the same way PrivyCap Web
   takes enquiries. It sits after #forte-letter-inner rather than inside it,
   because the admin content script clears that block with innerHTML = '' and
   rebuilds it from the API on every load. A form placed inside would be
   destroyed on page load. */

.forte-form-wrap {
  width: 100%;
  max-width: 520px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.forte-form-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

.forte-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.forte-form-row {
  display: flex;
  gap: 18px;
}

.forte-form-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.forte-form-field label {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-grey);
}

.forte-form-field input,
.forte-form-field select,
.forte-form-field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(212, 197, 169, 0.22);
  border-radius: 0;
  color: var(--off-white);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.forte-form-field input::placeholder,
.forte-form-field textarea::placeholder {
  color: rgba(138, 129, 120, 0.75);
}

.forte-form-field input:hover,
.forte-form-field select:hover,
.forte-form-field textarea:hover {
  border-color: rgba(212, 197, 169, 0.35);
}

.forte-form-field input:focus,
.forte-form-field select:focus,
.forte-form-field textarea:focus {
  border-color: rgba(212, 197, 169, 0.6);
  background: rgba(212, 197, 169, 0.04);
}

.forte-form-field textarea {
  resize: vertical;
  min-height: 130px;
}

/* The chevron is inline so there is no extra request, and it is drawn in the
   warm grey rather than the browser default. */
.forte-form-field select {
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8178' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.forte-form-field select:invalid {
  color: rgba(138, 129, 120, 0.75);
}

/* The dropdown list itself is painted by the OS, so it needs its own colours
   or it renders as black on black on some platforms. */
.forte-form-field select option {
  background: #111;
  color: #f0ece6;
}

/* Spam honeypot. Hidden from people and from screen readers, but a bot that
   fills every field will trip it and Formspree will drop the submission. */
.forte-form-gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Matches the hero button so the two calls to action read as one family. */
.forte-form-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0.9rem 2.4rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--champagne);
  background: transparent;
  border: 1px solid rgba(212, 197, 169, 0.3);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.forte-form-submit:hover:not(:disabled) {
  background: rgba(212, 197, 169, 0.08);
  border-color: rgba(212, 197, 169, 0.5);
  color: var(--cream);
  transform: translateY(-1px);
}

.forte-form-submit:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.forte-form-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.forte-form-status {
  margin: 0;
  min-height: 20px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--light-warm);
}

.forte-form-status[data-state="error"] {
  color: #d8a2a2;
}

/* When the send succeeds the form is replaced by the confirmation alone. */
.forte-form-wrap[data-sent="true"] .forte-form > *:not(.forte-form-status) {
  display: none;
}

.forte-form-wrap[data-sent="true"] .forte-form-status {
  font-size: 0.95rem;
  color: var(--champagne);
}

/* The mailto link the form replaces. The admin script recreates it from the
   API on every load, so it is hidden in forte-site.js rather than here. */

@media (max-width: 600.98px) {
  .forte-form-row {
    flex-direction: column;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .forte-form-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .forte-form-submit:hover:not(:disabled) { transform: none; }
}

/* Line above the form. Editable in the admin panel as "Text Above Form"; the
   markup carries the default so nothing flashes empty while the API answers. */
.forte-form-intro {
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-family: var(--sans);
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--light-warm);
  text-align: center;
}

/* ---- 5. hero mark ------------------------------------------------------- */

/* The 01R outline symbol above the Work With Us button. Same artwork as the
   footer mark, larger and a little stronger, so the hero closes on the
   identity. It fades in with the button rather than on its own timing. */
.forte-hero-mark {
  display: block;
  width: clamp(26px, 2.4vw, 34px);
  height: auto;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  opacity: 0;
  animation: forteFadeIn 2s ease 2.4s forwards;
}

/* Short landscape already gives up the scroll indicator; the mark goes with it
   rather than pushing the button towards the copy. */
@media (max-height: 520.98px) and (orientation: landscape) {
  .forte-hero-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .forte-hero-mark { opacity: 1; animation: none; }
}

/* ---- 6. wordmark speaker, site colours ---------------------------------- */

/* The component ships neutral. Here it takes the champagne the tagline uses,
   and a larger icon: at 15px in that colour it read as a smudge rather than a
   control. */
.forte-wordmark__sound {
  color: var(--champagne);
}

.forte-wordmark__sound svg {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.forte-wordmark__sound:hover svg,
.forte-wordmark__sound:focus-visible svg,
.forte-wordmark__sound[data-sound="on"] svg {
  opacity: 1;
}

@media (max-width: 600.98px) {
  .forte-wordmark__sound svg {
    width: 17px;
    height: 17px;
  }
}

/* ---- 7. hero mark ------------------------------------------------------- */

/* The earlier footage had the singer about 0.5% left of frame centre, which was
   corrected here with a translateX. The tighter delivery centres him, measured
   at 49.84% of the frame width, 2px off a 1280 wide centre, so the correction
   is removed rather than left in place fighting the new footage. The mark is
   centred in the viewport and lands on him. */

/* ---- 8. hero copy ------------------------------------------------------- */

/* Hierarchy: wordmark first, the emotional promise second, capabilities third.
   Locked values, desktop / mobile:
     tagline   36 / 24px  #f0ece6  tracking 0     line-height 1.2
     services  14 / 12px  #b8b0a6  tracking 0.12em line-height 1.65
     CTA       13 / 12px  #e2dacf  tracking 0.14em Inter 500

   One thing not in the spec but required by it: .forte-hero-logo carries
   margin-bottom: 20px from the Webflow block, and flex items do not collapse
   margins, so that 20px would stack on the tagline's margin-top and blow the
   wordmark-to-tagline gap well past target. The wordmark's margin is zeroed
   and the tagline owns that gap alone. */

.forte-hero-logo {
  margin-bottom: 0;
}

.forte-hero-tagline {
  /* Was clamp(1.5rem, 3vw, 3rem); pulled ~12% closer to the wordmark. */
  margin: clamp(1.3125rem, 2.6vw, 2.625rem) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: #f0ece6;
  text-align: center;
  /* Clears the per-breakpoint max-width the Webflow block sets for the old
     one-sentence tagline, which would otherwise cap this at 280-500px. */
  max-width: none;
}

.forte-hero-sub {
  /* Floor raised from 1.125rem so desktop lands in the 20-24px target rather
     than sitting on an 18px minimum. */
  margin: clamp(1.25rem, 1.6vw, 1.5rem) auto 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.75rem, 0.65rem + 0.25vw, 0.875rem);
  line-height: 1.65;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8b0a6;
  text-align: center;
  /* No ch-based cap: uppercase at this tracking is much wider per character
     than ch assumes, and a cap broke the line mid-phrase. On a phone it wraps
     between phrases rather than shrinking. */
  max-width: none;
  text-wrap: balance;
  opacity: 0;
  animation: forteFadeIn 1.5s ease 1.4s forwards;
}

/* The outline and lettering were disappearing into the stage lights. A
   restrained dark fill lifts it off the image without enlarging the type. */
.forte-hero-cta {
  font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #e2dacf;
  background: rgba(8, 8, 8, 0.5);
  border: 1px solid rgba(240, 236, 230, 0.3);
}

.forte-hero-cta:hover {
  background: rgba(8, 8, 8, 0.68);
  border-color: rgba(240, 236, 230, 0.55);
  color: #f5f0e8;
}

@media (prefers-reduced-motion: reduce) {
  .forte-hero-sub { opacity: 1; animation: none; }
}

/* 9. Letter paragraphs ------------------------------------------------------

   The rag was leaving orphans. Measured on the live copy, the last line of a
   paragraph kept collapsing to a fragment:

                        580px measure      327px (phone)
     paragraph 1        75 / 75 / 31       47 / 38 / 38 / 47 / 9
     paragraph 3        75 / 65            38 / 44 / 45 / 11

   A 9-character last line under four full ones reads as a mistake, and it is
   worse here than it would be flush left, because centring puts the stub in
   the middle of all that space with nothing to sit against.

   text-wrap: balance evens the lines instead of filling each one to the
   margin. Same copy, same measure, no orphans:

     paragraph 1        60 / 56 / 65       38 / 36 / 37 / 30 / 38
     paragraph 3        71 / 69            34 / 40 / 34 / 30

   Browsers cap balancing at a handful of lines, so the long second paragraph
   is left alone. It already ends on a full line, so there is nothing to fix.
   Anywhere the property is not supported the text simply wraps as before.

   Leading comes down from 1.9 to 1.75. At 1.9 the lines were far enough apart
   that a paragraph read as separate rows rather than a block, which the wide
   measure and centring already make harder. */
.forte-letter-body {
  line-height: 1.75;
  text-wrap: balance;
}

/* 10. Footer ----------------------------------------------------------------

   Everything down here was set with opacity, and the values had stacked up
   into text nobody could read. Measured against the page black:

                        was       now
     cities             3.66:1    7.81:1
     footer mark        1.88:1    6.40:1
     copyright          1.30:1    5.49:1
     city separator     1.27:1    2.26:1

   The copyright at 1.30:1 was the worst of it: 9.6px, uppercase, tracked out,
   and sitting a hair above the background. AA wants 4.5:1 for text that size.
   It is fixed by dropping the 0.25 rather than by changing the colour, so it
   keeps the warm grey it was always meant to be.

   The separators stay dim on purpose. They are punctuation between the city
   names, and lifting them to match would turn five names into nine marks of
   equal weight. 2.26:1 is low for text and right for a rule. */
.forte-letter-cities.visible { opacity: 0.85; }
.forte-city-sep { opacity: 0.45; }
.forte-footer-icon { opacity: 0.6; }
.forte-footer-copy { opacity: 1; }

/* 11. Heading outline -------------------------------------------------------

   The page had no h1 through h6 at all. A crawler arriving at it had the
   title tag, 161 words of body copy and nothing else saying what any part of
   the page was for.

   The elements that were already doing a heading's job now are headings:
   the hero tagline is the h1, the services line under it the h2, and the
   line above the contact form another h2. The letter section had no visible
   heading, so it gets one that is hidden from view but present in the
   outline. It names what the section is; nothing is said to a crawler that
   is not true of the page.

   All of this is invisible. Every rule in the stylesheet matches on class
   rather than tag, so the only thing a p to h1 swap changes is the user
   agent's own margin and bold 2em sizing, which is reset here.

   The reset is wrapped in :where() so it carries no specificity at all. A
   plain class selector here would sit later in the cascade than the rules
   that style these elements and would win against them: the first attempt
   did exactly that and flattened the tagline from 36px Cormorant 300 to
   14px at weight 400, and took its top margin with it. At zero specificity
   the rule still outranks the user agent, because any author rule does,
   while every class rule underneath still outranks it. */
:where(.forte-hero-tagline, .forte-hero-sub, .forte-form-intro) {
  margin-block: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Reachable by a screen reader, absent from the page. The 1px box with a
   clip path is used rather than display:none because a hidden element is
   dropped from the accessibility tree entirely, which would defeat the
   point. */
.forte-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 12. Cities in the hero ----------------------------------------------------

   The line moved out of the footer and up under the CTA, so it needs the
   hero's treatment rather than the footer's.

   Colour matches the services line above it, #b8b0a6, at full opacity. It
   was #c4b8a8 at 0.85, which is both warmer and dimmer. These two lines now
   bracket the CTA and reading as the same voice matters more than either
   value did on its own.

   The spacing was the real problem. In the footer the line carried a
   clamp(48px, 6vw, 80px) top margin. Measured in the hero at 1024, that
   left 42px above it and 10px below, so it sat four times closer to the
   scroll arrow than to the CTA and read as part of the scroll cue rather
   than as the close of the hero.

   Reducing it was not enough on its own: at 28 above and 12 below the line
   was still nearer the arrow than the button, and things read as belonging
   to whatever they sit closest to. So the top margin goes entirely, leaving
   the 19px the CTA already contributes, and the space moves underneath
   instead. 19 above and 27 below puts the line inside the group it belongs
   to.

   The total is 5px more than before, which the hero can afford: the scroll
   indicator finishes 31px clear of the fold at 1024x768, and the clamp
   shrinks the value on shorter viewports. */
.forte-hero .forte-letter-cities {
  margin-top: clamp(0.875rem, 1.8vw, 1.25rem);
  margin-bottom: clamp(1.25rem, 2.6vw, 2rem);
  color: #b8b0a6;
}

.forte-hero .forte-letter-cities.visible {
  opacity: 1;
}

/* The separators keep their subordinate weight against the new colour. */
.forte-hero .forte-city-sep {
  opacity: 0.4;
}

/* Five cities with 0.2em tracking do not fit one line on a phone. Wrapping
   is fine; running into the screen edge is not, and at 375 the line was
   spanning the full width with nothing either side. */
@media (max-width: 767px) {
  .forte-hero .forte-letter-cities {
    padding-inline: 1.5rem;
  }
}

/* 13. The lower cluster --------------------------------------------------

   The mark, the button, the cities and the scroll indicator sit in
   .forte-hero-bottom, which is positioned against the floor of the hero.
   Lowering it therefore means taking space out from under it, not adding
   space above.

   The wordmark, tagline and services line are not touched. An earlier pass
   moved them down 77px across two goes and that was wrong: it dropped the
   services line onto the leading edge of the crowd, and the position they
   had was right. They are back on the values in the page's own stylesheet.

   Floor padding goes from clamp(24px, 4vh, 48px) to roughly half. At
   1024x768 that is 31px down to 15px, so the whole cluster drops 16px,
   which is all the room there is: below this the scroll indicator starts
   running into the bottom of the screen. */
.forte-hero-bottom {
  padding-bottom: clamp(12px, 2vh, 24px);
}

/* The button carried 14.4 by 38.4 of padding, which made a 198 by 50 box for
   three short words. Smaller on both axes, and the 44px minimum height for a
   touch target is still clear. */
.forte-hero-cta {
  min-height: 44px;
  padding: clamp(0.5rem, 0.9vw, 0.625rem) clamp(1.125rem, 2.1vw, 1.5rem);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
}

/* And the mark above it comes down from 26px. It is a full stop before the
   button, not a second logo. */
.forte-hero-mark {
  width: clamp(18px, 1.8vw, 24px);
  margin-bottom: clamp(10px, 1.2vw, 15px);
}

/* Short landscape hides the mark in section 5, which sits earlier in this
   file than the rule above. Restated so a phone held sideways keeps the
   tighter layout. Its hero margin is untouched now, so that part is gone. */
@media (max-height: 520.98px) and (orientation: landscape) {
  .forte-hero-mark { display: none; }
}

/* 14. Hero hierarchy, per the design note ----------------------------------

   Three levels rather than one flat surface: brand and positioning, then
   the primary action, then supporting locations. The lower half was losing
   authority against the bright crowd and the button was reading as a
   caption rather than the thing to press.

   Everything here is the spec's values. Where they collide with something
   already in this file, the note wins. */

/* Level 1 ---------------------------------------------------------------- */

/* Cormorant's hairlines are fragile over moving video and survive
   compression badly, so the tagline goes to 400. */
.forte-hero-tagline {
  font-weight: 400;
  font-size: clamp(2rem, 2.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: #f0ece6;
  margin-top: clamp(2.375rem, 3.3vw, 2.75rem);
}

.forte-hero-sub {
  font-weight: 500;
  font-size: clamp(0.7rem, 0.7vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: 0.18em;
  color: #aaa199;
  margin-top: clamp(1.75rem, 2.6vw, 2rem);
}

/* The wordmark keeps its scale and gains headroom on a large display. */
@media (min-width: 1920px) {
  .forte-hero-logo { width: 960px; }
}

/* Level 2 ---------------------------------------------------------------- */

/* The mark and the button leave the centre stack entirely and become the
   two top corners of a frame: mark upper left, action upper right, wordmark
   and message centred, performer untouched between them. Stacked above the
   button they were reading as a second logo and sitting over the performer;
   in the corner the mark gets a job instead, and balances the button.

   34px visible, in a 44px target. The link is what makes that target
   meaningful, and it is why the mark is wrapped in an anchor now. */
.forte-hero-mark-link {
  position: absolute;
  top: clamp(24px, 3vw, 40px);
  left: clamp(24px, 3vw, 48px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0;
  opacity: 0;
  animation: forteFadeIn 2s ease 2.4s forwards;
}

.forte-hero-mark {
  width: 34px;
  height: 34px;
  margin: 0;
  opacity: 1;
  animation: none;
}

/* A real button. The blur is what separates it from the crowd behind it
   without putting a panel over the footage. */
.forte-hero-cta {
  position: absolute;
  top: clamp(24px, 3vw, 40px);
  right: clamp(24px, 3vw, 48px);
  z-index: 4;
  min-width: 150px;
  width: auto;
  height: 46px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(240, 236, 230, 0.38);
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #f0ece6;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.forte-hero-cta:hover {
  background: rgba(240, 236, 230, 0.92);
  border-color: #f0ece6;
  color: #111;
}

/* Level 3 ---------------------------------------------------------------- */

.forte-hero .forte-letter-cities {
  margin-top: 48px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.65vw, 0.8rem);
  line-height: 1.4;
  letter-spacing: 0.16em;
  color: #aaa199;
}

.forte-hero .forte-city-sep {
  opacity: 1;
  color: rgba(240, 236, 230, 0.28);
}

/* Placement -------------------------------------------------------------- */

/* The note puts the city row 28 to 36px off the bottom, which makes it the
   last thing in the hero. The scroll indicator sat below it and has nowhere
   left to go, so it is dropped here. Worth a decision: it was the only cue
   that the page continues, and the button is an anchor to the same place. */
.forte-hero .forte-scroll-indicator {
  display: none;
}

/* With the mark and the button lifted out, this block holds the city row
   alone. Dropped 14px into the darker foreground, per the note, from 72px
   off the fold to 58px, which still clears the 48px minimum it asks for.
   On a phone the safe area is added on top, so the row is not sitting under
   a home indicator. */
.forte-hero-bottom {
  padding-bottom: calc(clamp(3.625rem, 5.6vh, 4.5rem) + env(safe-area-inset-bottom, 0px));
}

/* The note asked for a gradient behind the city row. Measured, there is
   nothing for it to do: the footage behind the row is already black, mean
   0.0 of 255 at 1024x768 and 3.0 on a phone, and the row reads at 10.2:1
   against it either way. A gradient over pure black changes pure black into
   pure black.

   So it is not here. Nothing is layered over this video. */

/* 15. Colour and pairing, per the refinement note --------------------------

   One family for the foreground, one for the supporting text, applied as
   colour rather than as opacity over a lighter value, so nothing is dimmed
   twice.

     #f0ece6   wordmark, F, tagline, button text
     #aaa199   services line, cities

   The wordmark was #f4f4ef, inherited from the component, which is a
   different white from everything around it. The lettering is drawn with
   currentColor, so setting colour here reaches it.

   The F's box is handled in the asset rather than here: the locked symbol
   draws its own rect, so a CSS border would have produced a second box
   around the first. assets/forte-symbol-hero.svg is that symbol with the
   stroke set to rgba(240,236,230,0.35) and the width scaled to land on
   exactly 1.0px at a 34px render, which is the button's border beside it.
   The locked master is untouched and still used in the footer. */
.forte-hero-logo {
  color: #f0ece6;
}

/* The two corners are a pair, so they sit on one axis. The mark's target
   goes to 46px to match the button's height; the visible mark stays 34px
   and the target stays comfortably above the 44px minimum. */
.forte-hero-mark-link,
.forte-hero-cta {
  top: clamp(24px, 3vw, 40px);
}

/* 16. Sound control ---------------------------------------------------------

   The hit area was already 44px and the focus ring already there. What was
   missing was plain labelling: "Play the Forte signature" describes the
   artwork rather than the control. */
.forte-wordmark__sound:focus-visible {
  outline: 2px solid #f0ece6;
  outline-offset: 3px;
  border-radius: 2px;
}

/* City names never split. The <wbr> after each separator is the only place
   the row is allowed to break, which keeps "Los Angeles" and "New York"
   whole on a phone. */
.forte-hero .forte-letter-cities span:not(.forte-city-sep) {
  white-space: nowrap;
}

/* The row inherited text-align: start when it left the letter block, which
   was invisible on a desktop because it fits on one line and the flex
   parent centres the box. On a phone it wraps, and both lines were sitting
   hard against the left edge. */
.forte-hero .forte-letter-cities {
  text-align: center;
}