/* =========================================================
   TOP LINES — Hero layer
   Addresses client comment 2 (22 Jul 2026):
     • "No need for the background photo."
     • "Topography: reduce the text size."
     • "The paragraph text is too small. It's not readable."

   The photo is gone, so the hero now needs its own colour
   scheme. Everything is driven by the variables below —
   change them in one place to reflect the whole hero.
   ========================================================= */

/* ---------- BRIGHT scheme (default) ----------
   Matches the bright neutral surfaces used by the rest of the page
   (see palette.css). A warm stone tone was trialled here and read
   as dim next to the sections below, so the hero is bright white
   with only a whisper of a wash for depth. */
.tl-hero {
  --tl-hero-bg: #ffffff;
  --tl-hero-wash-1: #ffffff;
  --tl-hero-wash-2: #fbfbfb;
  --tl-hero-wash-3: #f3f3f4;
  --tl-hero-ink: #141416;
  --tl-hero-body: #4d4d52;
  /* 5.7:1 on this surface — comfortably past WCAG AA for the 13px badge. */
  --tl-hero-muted: #63636a;
  --tl-hero-rule: rgba(20, 20, 22, 0.16);
  --tl-hero-btn-ink: #141416;
  --tl-hero-btn-rule: rgba(20, 20, 22, 0.22);
}

/* ---------- DARK scheme — add class "tl-hero--dark" ---------- */
.tl-hero.tl-hero--dark {
  --tl-hero-bg: #141416;
  --tl-hero-wash-1: #27272c;
  --tl-hero-wash-2: #151517;
  --tl-hero-wash-3: #0d0d0f;
  --tl-hero-ink: #ffffff;
  --tl-hero-body: rgba(255, 255, 255, 0.78);
  --tl-hero-muted: rgba(255, 255, 255, 0.62);
  --tl-hero-rule: rgba(255, 255, 255, 0.32);
  --tl-hero-btn-ink: #ffffff;
  --tl-hero-btn-rule: rgba(255, 255, 255, 0.45);
}

.tl-hero,
.tl-hero .slider-item {
  background-color: var(--tl-hero-bg);
}

/* A very soft off-centre wash. Flat colour read as dead once the photo
   was removed; this gives the surface a light source without adding
   any decoration the client asked us to strip out. */
.tl-hero .slider-item {
  background-image: radial-gradient(
    130% 100% at 78% 6%,
    var(--tl-hero-wash-1) 0%,
    var(--tl-hero-wash-2) 48%,
    var(--tl-hero-wash-3) 100%
  );
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------
   Vertical rhythm. The old 317px top padding existed to clear
   a full-bleed photo; without it the hero only needs to clear
   the fixed header.
   --------------------------------------------------------- */
/* Same inset as header.css, so the hero title starts on the same
   vertical line as the logo. */
.tl-hero .container {
  padding-left: clamp(16px, 3.2vw, 64px);
  padding-right: clamp(16px, 3.2vw, 64px);
}

.tl-hero .slider-content-wrap {
  padding-top: clamp(150px, 19vh, 232px);
  padding-bottom: clamp(80px, 12vh, 140px);
}

@media (max-width: 767px) {
  .tl-hero .slider-content-wrap {
    padding-top: 128px;
    padding-bottom: 64px;
    text-align: left;
  }
}

/* ---------------------------------------------------------
   Typography — smaller title, larger and more readable body.
   --------------------------------------------------------- */

/* Badge. polish.css draws a 28px dash at left:0 and reserves 38px of
   left padding for it — inside a bordered pill that reads as a glitch
   crossing the border, so the hero badge drops it. */
.tl-hero .slider-content-wrap .section-heading .sub-heading {
  border: 1px solid var(--tl-hero-rule);
  color: var(--tl-hero-muted);
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 12px 22px;
}

.tl-hero .slider-content-wrap .section-heading .sub-heading::before {
  content: none;
}

/* Title — was 120px, client asked for it to come down. */
.tl-hero .slider-content-wrap .section-heading .section-title,
.tl-hero .slider-content-wrap .section-heading .section-title.title-2 {
  color: var(--tl-hero-ink);
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 500;
  max-width: 17ch;
}

.tl-hero .slider-content-wrap .section-heading .section-title span {
  color: var(--tl-hero-ink);
}

/* styles.css caps the mobile hero title with `!important`, which left it at
   ~27px — too small to carry the page. Match that weight to override it. */
@media (max-width: 991.98px) {
  .tl-hero .slider-content-wrap .section-heading .section-title,
  .tl-hero .slider-content .section-title {
    font-size: clamp(31px, 8.4vw, 46px) !important;
    line-height: 1.1;
    max-width: 100%;
  }

  .tl-hero .slider-content-wrap .section-heading .sub-heading {
    font-size: 11px;
    letter-spacing: 0.12em;
    padding: 10px 16px;
  }

  /* responsive-fix.css centres the CTA while the copy stays left-aligned.
     Keep the whole lockup on one edge. */
  .tl-hero .slider-content-wrap .bottom-content .antra-btn {
    justify-content: flex-start;
  }
}

/* Paragraph — client: "too small. It's not readable." 18px -> up to 20px,
   looser leading and a measure capped for comfortable reading. */
.tl-hero .slider-content-wrap .bottom-content .antra-desc p {
  color: var(--tl-hero-body);
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.75;
  max-width: 62ch;
}

.tl-hero .slider-content-wrap .bottom-content .antra-desc {
  max-width: 760px;
}

/* `.white-content` in main.css hard-codes white on every child, which
   is wrong the moment the hero is light. Re-point it at the variables. */
.tl-hero .white-content h1,
.tl-hero .white-content h2,
.tl-hero .white-content h3,
.tl-hero .white-content h4,
.tl-hero .white-content h5,
.tl-hero .white-content h6,
.tl-hero .white-content span {
  color: var(--tl-hero-ink);
}

.tl-hero .white-content p,
.tl-hero .white-content li {
  color: var(--tl-hero-body);
}

.tl-hero .section-heading.white-content .sub-heading {
  color: var(--tl-hero-muted);
}

/* ---------------------------------------------------------
   CTA — the theme's `.white-btn` is white-on-white once the
   photo is removed. Drive it from the scheme variables.
   --------------------------------------------------------- */
.tl-hero .tl-primary-btn,
.tl-hero .tl-primary-btn.white-btn {
  color: var(--tl-hero-btn-ink);
  border: 1px solid var(--tl-hero-btn-rule);
  font-size: 16px;
  padding: 11px 16px 11px 26px;
}

.tl-hero .tl-primary-btn:hover,
.tl-hero .tl-primary-btn.white-btn:hover {
  color: #ffffff;
  border-color: var(--tl-color-theme-primary, #0abab5);
}

/* ---------------------------------------------------------
   Swiper had a fade effect for the two-slide version. With a
   single slide (client comment 2: "No need for slide 2") the
   leftover opacity transition can flash on load.
   --------------------------------------------------------- */
.tl-hero .antra-slider .swiper-slide {
  opacity: 1 !important;
}

/* =========================================================
   Hero side panel
   The client removed the full-bleed background photo (comment 2).
   This puts a single project photograph beside the copy instead:
   the surface behind the words stays clean, and the work is still
   the first thing on the page.
   ========================================================= */

.tl-hero .slider-item {
  position: relative;
  overflow: hidden;
}

.tl-hero-media {
  position: absolute;
  top: clamp(118px, 13vh, 152px);
  right: clamp(16px, 3.2vw, 64px);
  bottom: clamp(56px, 8vh, 92px);
  width: 42%;
  max-width: 640px;
  border-radius: 24px;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--tl-surface-alt, #eee);
}

.tl-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tl-hero .slider-container {
  position: relative;
  z-index: 2;
}

.tl-hero .slider-content-wrap {
  max-width: 50%;
}

/* Tablet — narrower panel so the copy keeps a readable measure. */
@media (max-width: 1199.98px) {
  .tl-hero-media {
    width: 38%;
  }

  .tl-hero .slider-content-wrap {
    max-width: 56%;
  }
}

/* Stacked below the copy on phones and small tablets. The media div sits
   first in the DOM (so it paints behind the copy on desktop), which would
   put the photo above the headline once it drops into normal flow — hence
   the explicit ordering here. */
@media (max-width: 991.98px) {
  .tl-hero .slider-item {
    display: flex;
    flex-direction: column;
  }

  .tl-hero .slider-container {
    order: 1;
  }

  .tl-hero-media {
    order: 2;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    height: clamp(240px, 42vw, 380px);
    margin: 8px clamp(16px, 4vw, 28px) clamp(48px, 7vh, 72px);
    border-radius: 18px;
  }

  .tl-hero .slider-content-wrap {
    max-width: 100%;
    padding-bottom: clamp(28px, 4vh, 44px);
  }
}