/*----------------------------------------------------------------------
    SMART HABITAT — Design System Overrides
    Loaded after style.css to take cascade precedence.
    Do not edit style.css directly.
    ----------------------------------------------------------------------

    INDEX
    -----
    1.  CSS Variable Overrides
    2.  Typography — Font Family
    3.  Typography — Heading Colour (Accent Gold)
    4.  Typography — Desktop Heading Scale (≥1400px)
    5.  Hero Section Overrides (hero-area-4)
    6.  Infrastructure First Section
    7.  Utility Additions
    8.  Enterprise Wi-Fi Section
    9.  Monitoring & Security Section
    10. The Digital Heart Of The Home Section
    11. How We Work Section

----------------------------------------------------------------------*/

/* ============================================================
   1. CSS Variable Overrides
   ============================================================ */
body {
  /* Brand colours */
  --primary-color:  #B08D57;   /* Accent gold */
  --heading-color:  #F2F2F0;   /* White text   */

  /* Background scale — deepened from Arinde's #131412 */
  --secondary-color: #0D0D0D;
  --black-120:  #0A0A0A;
  --black-110:  #0C0C0C;
  --black-100:  #0D0D0D;
  --black-90:   #1A1A1A;
  --black-80:   #252525;
  --black-70:   #363636;
  --black-60:   #484848;
  --black-50:   #5A5A5A;
  --black-40:   #6C6C6C;
  --black-30:   #B8B5AE;   /* Body text */
  --black-20:   #D0CEC9;
  --black-10:   #E8E7E4;

  background:   #0D0D0D;
  font-family:  "Inter", sans-serif;
  font-size:    20px;
  line-height:  28px;
  font-weight:  500;
}

/* ============================================================
   2. Typography — Font Family
   ============================================================ */
.heading,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.tab-style-one .nav-link {
  font-family: "Inter", sans-serif;
}

/* Remove Arinde's Montserrat letter-shadow (designed for wide-stroke font) */
h1, .h1,
h2, .h2 {
  text-shadow: none !important;
}

/* ============================================================
   3. Typography — Heading Colour (Accent Gold)
   ============================================================ */
h1, .h1,
h2, .h2,
h3, .h3 {
  color: var(--primary-color);
}

/* Restore white for headings explicitly given text-white context */
.text-white h1, .text-white .h1,
.text-white h2, .text-white .h2,
.text-white h3, .text-white .h3 {
  color: var(--heading-color);
}

/* ============================================================
   4. Typography — Desktop Heading Scale (≥1400px)
   Applies approved 72px only at Figma canonical desktop width.
   Arinde's breakpoint rules handle all smaller viewports:
     ≤1399px → h1:67px / h2:51px
     ≤1199px → h1:51px / h2:46px
     ≤991px  → h1:46px / h2:38px
     ≤767px  → h1:42px / h2:32px
   ============================================================ */
@media only screen and (min-width: 1400px) {
  h1, .h1,
  h2, .h2,
  h3, .h3 {
    font-size:    72px;
    line-height:  92px;
    font-weight:  700;
    letter-spacing: -2px;
  }
}

/* ============================================================
   5. Hero Section — hero-area-4 overrides
   ============================================================ */

/* --- Header sygnet: compact symbol mark --- */
.main-header .logo img,
.main-menu .mobile-logo img {
  height: 48px;
  width:  auto;
}

/* Mobile: keep sygnet proportional, slightly smaller */
@media only screen and (max-width: 575px) {
  .main-menu .mobile-logo img {
    height: 36px;
    width:  auto;
  }
}

/* --- Hero column layout: 50/50 split (overrides col-md-5 / col-md-7) ---
   Gives the h1 enough room at all desktop widths (1400px+).
   "THE BACKBONE" at 72px ≈ 582px; col-50% at 1410px = 705px — fits. */
@media only screen and (min-width: 992px) {
  .hero-area-4 .hero3-content {
    flex:      0 0 50%;
    max-width: 50%;
  }
  .hero-area-4 .hero4-img {
    flex:      0 0 50%;
    max-width: 50%;
  }
  /* Approved 3-line wrap at 20px / 28px:
     "Projektujemy niezawodną infrastrukturę"
     "sieciową dla nowoczesnych"
     "domów i rezydencji." */
  .hero-area-4 .hero-sub {
    max-width: 39ch;
  }
}

/* Reduce Arinde's 128px right-padding override that would compress the h1.
   64px retains breathing room from the image column. */
@media only screen and (min-width: 1400px) {
  .hero-area-4 .hero3-content {
    padding-right: 64px;
  }
}

/* Hero description — typography (width tuned on desktop below) */
.hero-area-4 .hero-sub {
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* -------------------------------------------------------
   Vertical rhythm — polish pass
   Arinde's carousel padding-top: 88px was only needed to
   clear the giant-text absolute element (now removed).
   h1 mt-128 served the same purpose — both are orphaned.
   -------------------------------------------------------

   BEFORE (polish pass 1) → AFTER (logo-in-hero pass):
   Header → Hero logo    176px    (section pt 128 + logo mt 48)
   Hero logo → H1         32px    (logo bottom to H1 top)
   H1 → body              32px    (unchanged)
   Body → CTA             64px    (unchanged)
   CTA → Infra First     128px    (unchanged)
------------------------------------------------------- */

/* 1. Remove carousel-item padding (orphaned from giant-text) */
.hero-area-4 .carousel-item {
  padding-top: 0;
}

/* 2. Full wordmark in hero content area */
.hero-area-4 .hero-logo {
  display:    block;
  width:      200px;   /* approved hero wordmark size */
  height:     auto;
  margin-top: 48px;    /* breathing room from section top */
}

/* 3. H1 top margin: 32px gap after logo */
.hero-area-4 .hero3-content h1 {
  margin-top: 32px;
}

/* 4. Buttons top margin: 96px → 64px */
.hero-area-4 .hero3-content .buttons {
  margin-top: 64px;
}

/* Hero CTA button visual properties are handled by .sh-btn-primary (shared component) */

/* ============================================================
   5a. Shared Component — Primary Button (.sh-btn-primary)
   Used by: Hero "Umów konsultację" + CTA "Start Your Project"
   All visual properties live here. Layout-specific properties
   (e.g. margin-top) stay in their section's own rules.
   ============================================================ */

.sh-btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           260px;
  height:          60px;
  border-radius:   8px;
  background:      var(--primary-color);  /* #B08D57 */
  color:           #0D0D0D;
  font-family:     "Inter", sans-serif;
  font-size:       15px;
  font-weight:     600;
  letter-spacing:  0.04em;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background 0.25s ease, transform 0.15s ease;
  box-shadow:      none;
}

/* Two-class selector (specificity 0,2,0) beats Arinde's
   a.theme-btn (specificity 0,1,1) which sets color:white   */
.theme-btn.sh-btn-primary,
a.sh-btn-primary {
  color: #0D0D0D;
}

.sh-btn-primary:hover {
  background:      #9A7A49;
  color:           #0D0D0D;
  text-decoration: none;
}

.sh-btn-primary:focus {
  outline:        2px solid var(--primary-color);
  outline-offset: 3px;
  color:          #0D0D0D;
  text-decoration: none;
}

.sh-btn-primary:active {
  background:  #8A6D40;
  color:       #0D0D0D;
  transform:   translateY(1px);
}

/* Approved mobile CTA proportions — shared by Hero, CTA section, contact form */
@media (max-width: 767px) {
  .sh-btn-primary {
    height:         43px;
    padding-left:   27px;
    padding-right:  27px;
    font-size:      13px;
  }
}

/* 5. Hero section bottom padding: 128px → 64px */
.hero-area-4 {
  padding-bottom: 64px;
}

/* 6. Infrastructure First top padding: 128px → 64px */
.infra-first-area {
  padding-top: 64px;
}

/* Mobile: scale down logo, reduce margins, hide explicit <br> breaks */
@media (max-width: 767px) {
  .hero-area-4 .hero-logo {
    width:      110px;
    margin-top: 8px;
  }
  /* H1: 40px (−10% from 44px) — enforced with !important */
  .hero-area-4 .hero3-content h1 {
    font-size:   40px !important;
    line-height: 1.05 !important;
    margin-top:  18px;
  }
  /* Description: 18px / 25px — one approved line per .hero-sub-line */
  .hero-area-4 .hero-sub {
    max-width:   100%;
    margin-top:  12px;
    font-size:   18px;
    line-height: 25px;
  }
  .hero-area-4 .hero-sub-line {
    display: block;
  }
  .hero-area-4 .hero3-content .buttons {
    margin-top:    24px;
    margin-bottom: 16px;
  }
  /* Hero image: 280px — intentional mobile height (~28% less than 390px) */
  .hero-area-4 .hero4-img img {
    min-height:      280px;
    object-position: center 30%;  /* show upper/mid of image, avoid cropping roofline */
  }
  /* Hero section: minimal top padding — header is absent on mobile */
  .hero-area-4 {
    padding-top:    20px;
    padding-bottom: 38px;
  }
  /* Hero CTA: layout only — sizing from shared mobile .sh-btn-primary */
  .hero-area-4 .sh-btn-primary {
    width: auto;
  }
}

/* ============================================================
   6. Infrastructure First Section
   ============================================================ */
.infra-first-area {
  position: relative;
}

/* 60px line + 20px gap = 80px total indent.
   letter-spacing: 0.30em = 30% as approved. */
.infra-first-area .category-line {
  padding-left:    80px;
  font-size:       13px;
  letter-spacing:  0.30em;
  text-transform:  uppercase;
}

/* Approved 60px line width (Arinde default is 96px) */
.infra-first-area .category-line:after {
  width: 60px;
  top:   10px;   /* vertically centres against 13px uppercase text */
}

/* Heading: two lines via <br> tag in HTML.
   No max-width constraint — at 72px (≥1400px), "Everything starts"
   ≈ 668px fits in col-lg-6 (705px). Let the column govern width. */
.infra-first-area .infra-heading {
  margin-top: 32px;
}

/* Body paragraph — approved width: 612px */
.infra-first-area .infra-body {
  margin-top:  24px;
  color:       var(--black-30);
  max-width:   612px;
  line-height: 28px;
}

/* Right-side visual */
.infra-first-area .infra-visual img {
  width:        100%;
  display:      block;
  object-fit:   cover;
}

/* Stack columns on tablet / mobile */
@media (max-width: 991px) {
  .infra-first-area .infra-visual {
    margin-top: 48px;
  }
  .infra-first-area .infra-body {
    max-width: 100%;
  }
  .infra-first-area .infra-heading {
    max-width: 100%;
  }
}

/* Mobile: symmetrical Hero → Infra First transition + tight bottom gap
   padding-top  = 38px (mirrors Hero padding-bottom for balanced transition)
   padding-bottom = 48px (was 128px → gap to Enterprise Wi-Fi: 48+38=86px, −48%) */
@media (max-width: 767px) {
  .infra-first-area {
    padding-top:    38px;
    padding-bottom: 48px;
  }
}

/* Mobile: tighter label, heading gap, image gap — paragraph typography */
@media (max-width: 767px) {
  /* Label: smaller and tighter for single-line mobile presentation */
  .infra-first-area .category-line {
    font-size:      11px;
    letter-spacing: 0.15em;
    padding-left:   56px;   /* 40px line + 16px gap */
  }
  .infra-first-area .category-line:after {
    width: 40px;
    top:   8px;   /* centre against 11px text */
  }
  /* Label → H2: −37% (32px → 20px) */
  .infra-first-area .infra-heading {
    margin-top: 20px;
  }
  /* Paragraph → Image: −33% (48px → 32px) */
  .infra-first-area .infra-visual {
    margin-top: 32px;
  }
  /* Paragraph typography: matches Hero description */
  .infra-first-area .infra-body {
    font-size:   18px;
    line-height: 25px;
  }
}

/* ============================================================
   8. Enterprise Wi-Fi Section
   ============================================================ */

/* Category line — same overrides as Infra First */
.enterprise-wifi-area .category-line {
  padding-left:   80px;
  font-size:      13px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

.enterprise-wifi-area .category-line:after {
  width: 60px;
  top:   10px;
}

/* Heading: no label above — reset top margin */
.enterprise-wifi-area .service-heading {
  margin-top: 0;
}

/* Body text: heading → body gap = 40px */
.enterprise-wifi-area .service-body {
  margin-top:  40px;
  max-width:   612px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* Tablet + desktop: hide mobile-only copy */
@media only screen and (min-width: 768px) {
  .enterprise-wifi-area .service-body--mobile {
    display: none;
  }
}

/* Desktop: approved 4-line intro copy */
@media only screen and (min-width: 992px) {
  .enterprise-wifi-area .service-body--desktop {
    max-width: 100%;
  }
  .enterprise-wifi-area .service-body--desktop .service-body-line {
    display:       block;
    white-space:   nowrap;
  }
}

/* Bullet list: body → bullets gap = 32px */
.enterprise-wifi-area .service-bullets {
  list-style:   none;
  padding-left: 0;
  margin-top:   32px;
  margin-bottom: 0;
}

.enterprise-wifi-area .service-bullets li {
  position:      relative;
  padding-left:  20px;
  margin-bottom: 8px;
  color:         var(--black-30);
  font-size:     20px;
  line-height:   28px;
  font-weight:   500;
}

.enterprise-wifi-area .service-bullets li::before {
  content:  "•";
  position: absolute;
  left:     0;
  color:    var(--primary-color);   /* gold bullet */
}

/* Right-side visual */
.enterprise-wifi-area .service-visual img {
  width:      100%;
  display:    block;
  object-fit: cover;
}

/* Responsive: stack text above image on tablet/mobile */
@media (max-width: 991px) {
  .enterprise-wifi-area .service-visual {
    order:      2;
    margin-top: 48px;
  }
  .enterprise-wifi-area .service-content {
    order: 1;
  }
  .enterprise-wifi-area .service-body {
    max-width: 100%;
  }
}

/* Mobile: match Infrastructure First visual system */
@media (max-width: 767px) {
  .enterprise-wifi-area {
    padding-top:    38px;
    padding-bottom: 48px;   /* was 128px → gap to next section: 48+38=86px (−48%) */
  }
  .enterprise-wifi-area .service-body {
    margin-top:  24px;
    font-size:   18px;
    line-height: 25px;
  }
  .enterprise-wifi-area .service-body--desktop {
    display: none;
  }
  .enterprise-wifi-area .service-body--mobile {
    max-width: 100%;
  }
  .enterprise-wifi-area .service-body--mobile .service-body-line {
    display:       block;
    white-space:   nowrap;
  }
  .enterprise-wifi-area .service-bullets li {
    font-size:     16px;
    line-height:   22px;
    margin-bottom: 4px;
  }
  .enterprise-wifi-area .service-visual {
    margin-top: 32px;
  }
}

/* Heading → Paragraph → Image → Bullets (matches Monitoring & Security) */
@media (max-width: 767px) {
  .enterprise-wifi-area .service-content {
    display: contents;
  }
  .enterprise-wifi-area .service-heading,
  .enterprise-wifi-area .service-body,
  .enterprise-wifi-area .service-bullets,
  .enterprise-wifi-area .service-visual {
    flex:      0 0 100%;
    max-width: 100%;
  }
  .enterprise-wifi-area .service-heading { order: 1; }
  .enterprise-wifi-area .service-body    { order: 2; }
  .enterprise-wifi-area .service-visual  { order: 3; }
  .enterprise-wifi-area .service-bullets { order: 4; margin-top: 24px; }
}

/* ============================================================
   9. Monitoring & Security Section
   ============================================================ */

/* Heading: no label above — starts directly with h2 */
.monitoring-security-area .service-heading {
  margin-top: 0;
}

/* Body text: heading → body gap = 40px */
.monitoring-security-area .service-body {
  margin-top:  40px;
  max-width:   612px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* Bullet list: body → bullets gap = 32px */
.monitoring-security-area .service-bullets {
  list-style:    none;
  padding-left:  0;
  margin-top:    32px;
  margin-bottom: 0;
}

.monitoring-security-area .service-bullets li {
  position:      relative;
  padding-left:  20px;
  margin-bottom: 8px;
  color:         var(--black-30);
  font-size:     20px;
  line-height:   28px;
  font-weight:   500;
}

.monitoring-security-area .service-bullets li::before {
  content:  "•";
  position: absolute;
  left:     0;
  color:    var(--primary-color);
}

/* Right-side visual */
.monitoring-security-area .service-visual img {
  width:      100%;
  display:    block;
  object-fit: cover;
}

/* Responsive: text is first in DOM — stacks naturally on mobile */
@media (max-width: 991px) {
  .monitoring-security-area .service-visual {
    margin-top: 48px;
  }
  .monitoring-security-area .service-body {
    max-width: 100%;
  }
}

/* Mobile: match Infrastructure First visual system */
@media (max-width: 767px) {
  .monitoring-security-area {
    padding-top:    38px;
    padding-bottom: 48px;   /* was 128px → gap to next section: 48+38=86px (−48%) */
  }
  .monitoring-security-area .service-body {
    margin-top:  24px;
    font-size:   18px;
    line-height: 25px;
  }
  .monitoring-security-area .service-bullets li {
    font-size:     16px;
    line-height:   22px;
    margin-bottom: 4px;
  }
  .monitoring-security-area .service-visual {
    margin-top: 32px;
  }
}

/* EXPERIMENT — Monitoring & Security mobile content reorder
   Goal: Heading → Paragraph → Image → Bullets
   Technique: display:contents dissolves .service-content so its children
   (h2, p, ul) become direct flex items of the .row alongside .service-visual,
   enabling independent order control. Desktop is fully unaffected.
   To revert: remove this entire block. */
@media (max-width: 767px) {
  /* Dissolve the column wrapper — children bubble up into the row flex context */
  .monitoring-security-area .service-content {
    display: contents;
  }
  /* Give every bubbled-up child + the image column full row width */
  .monitoring-security-area .service-heading,
  .monitoring-security-area .service-body,
  .monitoring-security-area .service-bullets,
  .monitoring-security-area .service-visual {
    flex:      0 0 100%;
    max-width: 100%;
  }
  /* Explicit stacking sequence */
  .monitoring-security-area .service-heading { order: 1; }
  .monitoring-security-area .service-body    { order: 2; }
  .monitoring-security-area .service-visual  { order: 3; }
  .monitoring-security-area .service-bullets { order: 4; margin-top: 24px; }
}

/* ============================================================
   10. The Digital Heart Of The Home Section
   ============================================================ */

/* Heading: no label above — starts directly with h2 */
.digital-heart-area .service-heading {
  margin-top: 0;
}

/* Body text: heading → body gap = 40px */
.digital-heart-area .service-body {
  margin-top:  40px;
  max-width:   612px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* Desktop: approved 5-line body copy */
@media only screen and (min-width: 992px) {
  .digital-heart-area .service-body {
    max-width: 100%;
  }
  .digital-heart-area .service-body-line {
    display:       block;
    white-space:   nowrap;
  }
}

/* Bullet list: body → bullets gap = 32px */
.digital-heart-area .service-bullets {
  list-style:    none;
  padding-left:  0;
  margin-top:    32px;
  margin-bottom: 0;
}

.digital-heart-area .service-bullets li {
  position:      relative;
  padding-left:  20px;
  margin-bottom: 8px;
  color:         var(--black-30);
  font-size:     20px;
  line-height:   28px;
  font-weight:   500;
}

.digital-heart-area .service-bullets li::before {
  content:  "•";
  position: absolute;
  left:     0;
  color:    var(--primary-color);
}

/* Left-side visual */
.digital-heart-area .service-visual img {
  width:      100%;
  display:    block;
  object-fit: cover;
}

/* Responsive: image is first in DOM — reorder so text leads on mobile */
@media (max-width: 991px) {
  .digital-heart-area .service-visual {
    order:      2;
    margin-top: 48px;
  }
  .digital-heart-area .service-content {
    order: 1;
  }
  .digital-heart-area .service-body {
    max-width: 100%;
  }
}

/* Mobile: match Infrastructure First visual system */
@media (max-width: 767px) {
  .digital-heart-area {
    padding-top:    38px;
    padding-bottom: 48px;   /* was 128px → gap to next section: 48+38=86px (−48%) */
  }
  .digital-heart-area .service-body {
    margin-top:  24px;
    font-size:   18px;
    line-height: 25px;
  }
  .digital-heart-area .service-bullets li {
    font-size:     16px;
    line-height:   22px;
    margin-bottom: 4px;
  }
  .digital-heart-area .service-visual {
    margin-top: 32px;
  }
}

/* Heading → Paragraph → Image → Bullets (matches Monitoring & Security) */
@media (max-width: 767px) {
  .digital-heart-area .service-content {
    display: contents;
  }
  .digital-heart-area .service-heading,
  .digital-heart-area .service-body,
  .digital-heart-area .service-bullets,
  .digital-heart-area .service-visual {
    flex:      0 0 100%;
    max-width: 100%;
  }
  .digital-heart-area .service-heading { order: 1; }
  .digital-heart-area .service-body    { order: 2; }
  .digital-heart-area .service-visual  { order: 3; }
  .digital-heart-area .service-bullets { order: 4; margin-top: 24px; }
}

/* ============================================================
   11. How We Work Section
   ============================================================ */

/* Section padding — 160px gives premium vertical breathing room */
.how-we-work-area {
  padding-top:    160px;
  padding-bottom: 160px;
}

/* ── Intro block: full-width container, text constrained left ── */

/* Heading sits at the very top — no label above */
.how-we-work-area .how-heading {
  margin-top: 0;
}

/* Intro block: constrain text to 612px (matches other section bodies) */
.how-we-work-area .how-intro {
  max-width: 612px;
}

/* Body: heading → body = 40px; slightly narrower than heading for visual hierarchy */
.how-we-work-area .how-body {
  margin-top:  40px;
  max-width:   520px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* Desktop: 3 approved lines — full intro width; nowrap stops mid-span wraps (520px was too narrow) */
@media only screen and (min-width: 992px) {
  .how-we-work-area .how-body {
    max-width: 612px;
  }
  .how-we-work-area .how-body-line {
    display:       block;
    white-space:   nowrap;
  }
}

/* ── Timeline block: full container width, drops below intro ── */

/* ~48px gap between paragraph and first step number row */
.how-we-work-area .how-timeline {
  margin-top: 48px;
}

/* Horizontal flex track — spans full container width */
.how-we-work-area .timeline-track {
  display:     flex;
  align-items: flex-start;
  width:       100%;
}

/* Equal-width steps; padding-right creates the "after line" breathing gap
   before the next step's number — 28px matches the "before line" margin-left
   on .step-line so the spacing feels symmetrical across the full flow       */
.how-we-work-area .timeline-step {
  flex:          1;
  padding-right: 28px;
}

/* Last step has no trailing line so no right gap is needed */
.how-we-work-area .timeline-step:last-child {
  padding-right: 0;
}

/* Number + connecting line in one flex row */
.how-we-work-area .step-head {
  display:       flex;
  align-items:   center;
  margin-bottom: 28px;
}

/* Large champagne-bronze number */
.how-we-work-area .step-num {
  display:        block;
  font-family:    "Inter", sans-serif;
  font-size:      48px;
  font-weight:    700;
  line-height:    1;
  letter-spacing: -1px;
  color:          var(--primary-color);
  flex-shrink:    0;
}

/* Thin connecting line — fills remaining step width after number;
   margin-left creates the "before line" gap so the number breathes
   away from the line (was 14px; 28px matches the padding-right gap) */
.how-we-work-area .step-line {
  display:     block;
  flex:        1;
  height:      1px;
  background:  rgba(176, 141, 87, 0.30);
  margin-left: 28px;
}

/* Step title: white */
.how-we-work-area .step-title {
  font-family:    "Inter", sans-serif;
  font-size:      15px;
  font-weight:    700;
  line-height:    1.3;
  letter-spacing: 0;
  color:          var(--heading-color);
  text-shadow:    none;
  margin-top:     0;
  margin-bottom:  12px;
}

/* Step description: warm gray, constrained to ~2–3 lines.
   All four steps share the same max-width value so every column
   has identical proportions, including step 04 (no trailing line) */
.how-we-work-area .step-desc {
  font-size:     14px;
  line-height:   22px;
  font-weight:   500;
  color:         var(--black-30);
  margin-bottom: 0;
  max-width:     85%;
}

/* ── Responsive: vertical stack on tablet / mobile ─────────── */
@media (max-width: 991px) {
  .how-we-work-area {
    padding-top:    120px;
    padding-bottom: 120px;
  }

  .how-we-work-area .how-intro,
  .how-we-work-area .how-body {
    max-width: 100%;
  }
  .how-we-work-area .how-timeline {
    margin-top: 56px;
  }
  .how-we-work-area .timeline-track {
    flex-direction: column;
    gap:            40px;
  }
  .how-we-work-area .timeline-step {
    padding-right: 0;
  }
  .how-we-work-area .step-line {
    display: none;
  }
  .how-we-work-area .step-num {
    font-size: 40px;
  }
  .how-we-work-area .step-desc {
    max-width: 100%;
  }
}

/* Mobile: align section spacing and typography with service section baseline */
@media (max-width: 767px) {
  /* Section padding: matches inter-section rhythm (48+38=86px gap) */
  .how-we-work-area {
    padding-top:    38px;
    padding-bottom: 48px;
  }
  /* how-body: match service sections (18px / 25px / margin-top 24px) */
  .how-we-work-area .how-body {
    font-size:   18px;
    line-height: 25px;
    margin-top:  24px;
  }
  /* Timeline: replace gap with divider-based separation */
  .how-we-work-area .timeline-track {
    gap: 0;
  }
  /* Step layout: "01 Konsultacja" on one line, description below */
  .how-we-work-area .timeline-step {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    baseline;
    column-gap:     10px;
    width:          100%;
    max-width:      100%;
    min-width:      0;
  }
  .how-we-work-area .timeline-step:not(:last-child) {
    padding-bottom: 24px;
  }
  .how-we-work-area .timeline-step:not(:first-child) {
    border-top:     1px solid rgba(176, 141, 87, 0.18);
    padding-top:    24px;
  }
  .how-we-work-area .step-head {
    display:        inline-flex;
    align-items:    baseline;
    margin-bottom:  0;
    flex:           0 0 auto;
  }
  .how-we-work-area .step-num,
  .how-we-work-area .step-title {
    font-size:      18px;
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: 0;
  }
  .how-we-work-area .step-num {
    letter-spacing: -0.02em;
  }
  .how-we-work-area .step-title {
    margin-top:     0;
    margin-bottom:  8px;
    flex:           0 1 auto;
  }
  .how-we-work-area .step-desc {
    flex:            0 0 100%;
    width:           100%;
    max-width:       100%;
    min-width:       0;
    line-height:     20px;
    letter-spacing:  normal;
    word-spacing:    normal;
  }
  /* Step 01: approved 3-line description */
  .how-we-work-area .timeline-step:first-child .step-desc-line {
    display:       block;
    white-space:   nowrap;
  }
}

/* ============================================================
   12. Selected Projects Section
   ============================================================ */

/* Section padding — matches How We Work rhythm */
.selected-projects-area {
  padding-top:    160px;
  padding-bottom: 160px;
}

/* ── Intro block ── */

/* Heading sits at the top with no label above */
.selected-projects-area .projects-heading {
  margin-top: 0;
}

/* Constrain intro to 612px (same as other section intros) */
.selected-projects-area .projects-intro {
  max-width: 612px;
}

/* Supporting paragraph: heading → body = 40px */
.selected-projects-area .projects-body {
  margin-top:  40px;
  max-width:   520px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* ── Project items ── */

/* Large gap from intro and between subsequent projects */
.selected-projects-area .project-item {
  margin-top: 96px;
}

/* Image block — max-width 82% of container keeps images compact          */
.selected-projects-area .project-image {
  width:     100%;
  max-width: 82%;
  overflow:  hidden;
}

.selected-projects-area .project-image img {
  display: block;
  width:   100%;
  height:  auto;
}

/* Desktop: reduce visible image height by ~13% via max-height.
   object-fit: cover fills the constrained box without distortion;
   object-position: center top preserves the most relevant area.   */
@media only screen and (min-width: 992px) {
  .selected-projects-area .project-image img {
    max-height:      530px;
    object-fit:      cover;
    object-position: center top;
  }
}

/* Meta sits below the image */
.selected-projects-area .project-meta {
  padding-top: 40px;
}

/* Project number: inline inside h3, same size as title, gold —
   sits on the same baseline so number + title read as one block  */
.selected-projects-area .project-num {
  display:      inline;
  font-family:  "Inter", sans-serif;
  font-weight:  700;
  letter-spacing: 0;
  text-transform: none;
  color:        var(--primary-color);
  margin-right: 14px;
}

/* Project title: white — overrides the global gold h3 rule;
   fixed at 32px to resist the 72px rule at min-width: 1400px  */
.selected-projects-area .project-title {
  font-family:    "Inter", sans-serif;
  font-size:      32px;
  line-height:    1.2;
  font-weight:    700;
  color:          var(--heading-color);
  text-shadow:    none;
  letter-spacing: -0.5px;
  margin-top:     0;
  margin-bottom:  24px;
  max-width:      720px;
}

/* Suppress the 72px desktop heading override for project titles */
@media only screen and (min-width: 1400px) {
  .selected-projects-area .project-title {
    font-size:   32px;
    line-height: 40px;
  }
}

/* Project description: standard body typography */
.selected-projects-area .project-desc {
  font-size:     20px;
  line-height:   28px;
  font-weight:   500;
  color:         var(--black-30);
  max-width:     640px;
  margin-top:    0;
  margin-bottom: 24px;
}

/* Desktop: one approved line per .project-desc-line (nowrap prevents narrow-box wraps) */
@media only screen and (min-width: 992px) {
  .selected-projects-area .project-item:nth-child(2) .project-desc,
  .selected-projects-area .project-item:nth-child(3) .project-desc {
    max-width: 100%;
  }
  .selected-projects-area .project-desc-line {
    display:       block;
    white-space:   nowrap;
  }
}

/* Tag line: small, letter-spaced, gold */
.selected-projects-area .project-tag {
  font-family:    "Inter", sans-serif;
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--primary-color);
  margin-bottom:  0;
}

/* Caption variant: tag placed below image — 24px gap reads as image caption */
.selected-projects-area .project-tag.project-caption {
  margin-top: 24px;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .selected-projects-area {
    padding-top:    120px;
    padding-bottom: 120px;
  }
  .selected-projects-area .projects-intro,
  .selected-projects-area .projects-body {
    max-width: 100%;
  }
  .selected-projects-area .project-item {
    margin-top: 64px;
  }
  .selected-projects-area .project-title {
    font-size: 24px;
    max-width: 100%;
  }
  .selected-projects-area .project-desc {
    max-width: 100%;
  }
}

/* Mobile: section rhythm + typography aligned with service sections */
@media (max-width: 767px) {
  .selected-projects-area {
    padding-top:    38px;
    padding-bottom: 48px;
  }
  /* Intro: h2 inherits global 32px / 1.2 — match body rhythm to reference sections */
  .selected-projects-area .projects-body {
    margin-top:  24px;
    font-size:   18px;
    line-height: 25px;
    font-weight: 500;
  }
  /* Project number + title: match How We Work step row (18px / 700 / 1.2) */
  .selected-projects-area .project-num,
  .selected-projects-area .project-title {
    font-size:      18px;
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: 0;
  }
  .selected-projects-area .project-num {
    letter-spacing: -0.02em;
    margin-right:   10px;
  }
  .selected-projects-area .project-title {
    margin-top:     0;
    margin-bottom:  8px;
    max-width:      100%;
  }
  /* Project descriptions: match How We Work .step-desc (14px / 20px) */
  .selected-projects-area .project-desc {
    font-size:     14px;
    line-height:   20px;
    font-weight:   500;
    color:         var(--black-30);
    margin-top:    0;
    margin-bottom: 24px;
  }
  .selected-projects-area .project-desc br {
    display: none;
  }
  /* Legacy desktop padding — meta now sits above image on mobile */
  .selected-projects-area .project-meta {
    padding-top: 0;
  }
  /* Full-width images on mobile (was 82% container cap) */
  .selected-projects-area .project-image {
    max-width: 100%;
  }
  /* Tags: compact type for single-line fit on 390px viewports */
  .selected-projects-area .project-tag.project-caption {
    margin-top:     20px;
    font-size:      9px;
    letter-spacing: 0.04em;
    line-height:    1.3;
  }
  /* Intro → first project: same 24px as .projects-body margin-top (heading → intro)
     :first-of-type fails here — .projects-intro is the first div sibling */
  .selected-projects-area .projects-intro + .project-item {
    margin-top: 24px;
  }
  /* Tags → next project: −31% (64px → 44px) */
  .selected-projects-area .project-item + .project-item {
    margin-top: 44px;
  }
}

/* ============================================================
   13. CTA Section
   ============================================================ */

/* Section: generous vertical padding, centered content */
.cta-area {
  padding-top:    160px;
  padding-bottom: 160px;
}

/* Inner wrapper: all children centered on a single vertical axis */
.cta-area .cta-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
}

/* Headline: Inter Bold 72px / 92px / #B08D57
   Inherits size, weight, and color from global h2 rules;
   only alignment needs to be set explicitly here            */
.cta-area .cta-heading {
  margin-top: 0;
  text-align: center;
}

/* Suppress any left-align rule that might bleed from other sections */
@media only screen and (min-width: 1400px) {
  .cta-area .cta-heading {
    text-align: center;
  }
}

/* Supporting text: 48px gap below headline */
.cta-area .cta-body {
  margin-top:  48px;
  text-align:  center;
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
  color:       var(--black-30);
  max-width:   520px;
}

/* Button spacing: visual properties live in .sh-btn-primary */
.cta-area .sh-btn-primary {
  margin-top: 48px;
}

/* Responsive: full-width button on small screens */
@media (max-width: 575px) {
  .cta-area {
    padding-top:    120px;
    padding-bottom: 120px;
  }
  .cta-area .cta-body {
    max-width: 100%;
  }
  .cta-area .sh-btn-primary {
    width: 100%;
  }
}

/* Mobile: section rhythm + typography + button aligned with Hero CTA */
@media (max-width: 767px) {
  .cta-area {
    padding-top:    38px;
    padding-bottom: 48px;
  }
  /* Full-width text block — flex center was shrink-wrapping to <br> line widths */
  .cta-area .cta-inner {
    align-items: stretch;
    width:       100%;
  }
  /* Wider text column for predictable line breaks */
  .cta-area > .container {
    padding-left:  4px;
    padding-right: 4px;
  }
  .cta-area .cta-heading,
  .cta-area .cta-body {
    width:       100%;
    max-width:   100%;
    text-align:  center;
  }
  .cta-area .cta-body {
    margin-top:   24px;
    font-size:    clamp(13.5px, 4.1vw, 16px);
    line-height:  1.375;
    font-weight:  500;
    text-wrap:    pretty;
  }
  /* Paragraph 1 + line 2: single lines; break only after "działać" */
  .cta-area .cta-lead,
  .cta-area .cta-mid {
    white-space:    nowrap;
    letter-spacing: -0.02em;
  }
  /* Layout only — sizing from shared mobile .sh-btn-primary (overrides 575px width: 100%) */
  .cta-area .sh-btn-primary {
    margin-top: 28px;
    align-self: center;
    width:      auto;
  }
}

/* ============================================================
   14. Let's Talk Section (Contact)
   LOCATION block intentionally omitted — only INSTAGRAM (no public email).
   ============================================================ */

.lets-talk-area {
  padding-top:    160px;
  padding-bottom: 160px;
}

/* Left column: cap width so auto-sized column doesn't stretch too wide */
.lets-talk-area .lets-talk-intro {
  max-width: 520px;
}

/* Left column heading: off-white #F2F2F0, overrides global h2 gold */
.lets-talk-area .lets-talk-heading {
  margin-top: 0;
  color:      #F2F2F0;
}

/* Supporting paragraph: heading → body = 20px (reduced from 40px) */
.lets-talk-area .lets-talk-body {
  margin-top:  20px;
  color:       var(--black-30);
  font-size:   20px;
  line-height: 28px;
  font-weight: 500;
}

/* Desktop: center the entire two-column composition as one group,
   with 96px gap between left block and right block.
   justify-content: center moves both auto-width columns to the
   horizontal center of the container without changing their
   internal relationship or spacing.                               */
@media (min-width: 992px) {
  .lets-talk-area .row {
    justify-content: center;
    column-gap:      96px;
  }
  /* Contact description: exactly two lines (one sentence per line) */
  .lets-talk-area .lets-talk-lead,
  .lets-talk-area .lets-talk-rest {
    display:       block;
    white-space:   nowrap;
  }
}

/* Right column: flex column with 24px gap between channels (reduced from 48px) */
.lets-talk-area .lets-talk-contacts {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             24px;
}

/* Contact label: small, letter-spaced, gold; 6px gap to value below (reduced from 12px) */
.lets-talk-area .contact-label {
  font-family:    "Inter", sans-serif;
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--primary-color);
  margin-bottom:  6px;
}

/* Contact value: white, body scale */
.lets-talk-area .contact-value {
  display:         block;
  font-family:     "Inter", sans-serif;
  font-size:       20px;
  font-weight:     500;
  line-height:     28px;
  color:           var(--heading-color);
  text-decoration: none;
  margin-bottom:   0;
}

.lets-talk-area a.contact-value:hover {
  color:           var(--primary-color);
  text-decoration: none;
}

/* Tablet: reduced padding, stacked contacts */
@media (max-width: 991px) {
  .lets-talk-area {
    padding-top:    120px;
    padding-bottom: 120px;
  }
  .lets-talk-area .lets-talk-contacts {
    margin-top: 56px;
    gap:        40px;
  }
}

/* Mobile: section rhythm + typography aligned with service sections */
@media (max-width: 767px) {
  /* Match inter-section rhythm (CTA padding-bottom 48px + 38px = 86px) */
  .lets-talk-area {
    padding-top:    38px;
    padding-bottom: 48px;
  }
  .lets-talk-area .row {
    align-items: flex-start;
  }
  .lets-talk-area .lets-talk-intro,
  .lets-talk-area .lets-talk-contacts {
    text-align: left;
  }
  /* H2 inherits global 32px / 1.2 */
  .lets-talk-area .lets-talk-heading {
    text-align: left;
  }
  /* Heading → body: 24px (service section intro rhythm) */
  .lets-talk-area .lets-talk-body {
    margin-top:  24px;
    font-size:   17px;
    line-height: 25px;
    font-weight: 500;
    text-align:  left;
  }
  /* Line 1: one sentence; line 2: max-width for natural wrap if needed */
  .lets-talk-area .lets-talk-lead,
  .lets-talk-area .lets-talk-rest {
    display: block;
  }
  .lets-talk-area .lets-talk-lead {
    white-space: nowrap;
  }
  .lets-talk-area .lets-talk-rest {
    max-width: 33ch;
  }
  /* Body → INSTAGRAM label: tighter intro-to-contacts link */
  .lets-talk-area .lets-talk-contacts {
    margin-top:      20px;
    gap:             16px;
    justify-content: flex-start;
    align-items:     flex-start;
  }
  /* Each channel: label + value as one tight block (overrides <p> bottom margin) */
  .lets-talk-area .contact-item {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            2px;
  }
  .lets-talk-area .contact-label {
    margin:       0;
    line-height:  1;
  }
  /* Contact values: match section body scale */
  .lets-talk-area .contact-value {
    margin-top:  0;
    font-size:   18px;
    line-height: 25px;
    font-weight: 500;
    text-align:  left;
  }
}

/* ============================================================
   14b. Let's Talk — Contact Form
   ============================================================ */

.sh-contact-form-wrap {
  position:      relative;
  margin-top:    48px;
  max-width:     612px;
  margin-left:   auto;
  margin-right:  auto;
}

.sh-contact-form__hp {
  position:       absolute;
  left:           -9999px;
  width:          1px;
  height:         1px;
  overflow:       hidden;
  opacity:        0;
  pointer-events: none;
}

.sh-contact-form__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  column-gap:            32px;
  row-gap:               28px;
}

.sh-contact-form__field--full {
  grid-column: 1 / -1;
}

.sh-contact-form__label {
  display:        block;
  margin-bottom:  8px;
  font-family:    "Inter", sans-serif;
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--primary-color);
}

.sh-contact-form__input {
  display:          block;
  width:            100%;
  padding:          10px 16px;
  border:           1px solid rgba(176, 141, 87, 0.28);
  border-radius:    8px;
  background:       var(--black-90);
  color:            var(--heading-color);
  font-family:      "Inter", sans-serif;
  font-size:        20px;
  line-height:      28px;
  font-weight:      500;
  outline:          none;
  transition:       border-color 0.2s ease, box-shadow 0.2s ease;
}

.sh-contact-form__textarea {
  resize:       vertical;
  min-height:   140px;
  padding:      10px 16px;
}

.sh-contact-form__input::placeholder {
  color: var(--black-60);
}

.sh-contact-form__input:focus {
  border-color: var(--primary-color);
  box-shadow:   0 0 0 1px rgba(176, 141, 87, 0.22);
}

.sh-contact-form__field.is-invalid .sh-contact-form__input {
  border-color: #c45c5c;
  box-shadow:   none;
}

.sh-contact-form__field--privacy {
  margin-top: 8px;
}

.sh-contact-form__checkbox {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  cursor:      pointer;
  margin:      0;
}

.sh-contact-form__checkbox input {
  flex-shrink:     0;
  width:           18px;
  height:          18px;
  margin-top:      4px;
  accent-color:    var(--primary-color);
}

.sh-contact-form__checkbox-text {
  font-size:   14px;
  line-height: 22px;
  font-weight: 500;
  color:       var(--black-30);
}

.sh-contact-form__checkbox-text a {
  color:           var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh-contact-form__checkbox-text a:hover {
  color: var(--heading-color);
}

/* Invisible Turnstile — keep in DOM for verification, hide from layout */
.sh-contact-form__field--turnstile {
  position:       absolute;
  width:          1px;
  height:         1px;
  margin:         -1px;
  padding:        0;
  overflow:       hidden;
  clip:           rect(0, 0, 0, 0);
  white-space:    nowrap;
  border:         0;
  pointer-events: none;
}

.sh-contact-form__submit {
  margin-top: 32px;
}

.sh-contact-form__feedback {
  margin-top:  24px;
  font-size:   18px;
  line-height: 26px;
  font-weight: 500;
}

.sh-contact-form__feedback--success {
  color: var(--heading-color);
}

.sh-contact-form__feedback--error {
  color: #c45c5c;
}

@media (max-width: 991px) {
  .sh-contact-form-wrap {
    margin-top: 40px;
    max-width:  100%;
  }
}

@media (max-width: 767px) {
  .sh-contact-form-wrap {
    margin-top: 32px;
  }
  .sh-contact-form__grid {
    grid-template-columns: 1fr;
    row-gap:               12px; /* tighter field stack — desktop row-gap unchanged */
  }
  .sh-contact-form__label {
    margin-bottom: 4px;
  }
  .sh-contact-form__input {
    font-size:   18px;
    line-height: 25px;
    padding:     2px 12px; /* ~44% shorter field box vs desktop (29px vs 48px) */
  }
  .sh-contact-form__textarea {
    min-height: 54px; /* −23% vs 70px */
    padding:    4px 12px;
  }
  .sh-contact-form__field--privacy {
    margin-top: 4px;
  }
  .sh-contact-form__checkbox {
    align-items: flex-start;
    gap:         6px;
  }
  /* Custom mobile checkbox — native control hidden visually; 22px box (20–24px range) */
  .sh-contact-form__checkbox input {
    -webkit-appearance: none;
    appearance:         none;
    box-sizing:         border-box;
    width:              22px;
    height:             22px;
    flex:               0 0 22px;
    margin:             0;
    padding:            0;
    border:             1px solid rgba(176, 141, 87, 0.42);
    border-radius:      4px;
    background-color:   var(--black-90);
    cursor:             pointer;
    accent-color:       transparent;
  }
  .sh-contact-form__checkbox input:checked {
    background-color:   var(--primary-color);
    border-color:       var(--primary-color);
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath stroke='%230D0D0D' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 5.5 4 8.5 11 1.5'/%3E%3C/svg%3E");
    background-size:    12px 10px;
    background-position: center;
    background-repeat:  no-repeat;
  }
  .sh-contact-form__checkbox input:focus-visible {
    outline:        2px solid var(--primary-color);
    outline-offset: 2px;
  }
  /* Match Hero / CTA mobile CTA — auto width, centered (shared .sh-btn-primary sizing) */
  .sh-contact-form {
    text-align: center;
  }
  .sh-contact-form__grid,
  .sh-contact-form__field--privacy {
    text-align: left;
  }
  .sh-contact-form__submit {
    margin-top: 24px;
    width:      auto;
  }
}

/* ============================================================
   15. Footer
   ============================================================ */

.sh-footer {
  padding-top:  40px;
  padding-bottom: 40px;
  border-top:   1px solid rgba(176, 141, 87, 0.15);
}

.sh-footer .sh-footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             96px;
}

.sh-footer .sh-footer-brand {
  font-family:    "Inter", sans-serif;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--heading-color);
}

.sh-footer .sh-footer-tagline {
  font-family: "Inter", sans-serif;
  font-size:   13px;
  font-weight: 500;
  color:       var(--black-30);
}

.sh-footer .sh-footer-copy {
  font-family: "Inter", sans-serif;
  font-size:   13px;
  font-weight: 500;
  color:       var(--black-30);
}

.sh-footer .sh-footer-link {
  font-family:     "Inter", sans-serif;
  font-size:       13px;
  font-weight:     500;
  color:           var(--black-30);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.sh-footer .sh-footer-link:hover {
  color: var(--primary-color);
}

/* ============================================================
   16. Privacy Policy Page
   ============================================================ */

.sh-legal-page {
  padding-top:    120px;
  padding-bottom: 120px;
}

.sh-legal-page .sh-legal-inner {
  max-width: 720px;
}

.sh-legal-page .sh-legal-title {
  margin-top:  0;
  color:       #F2F2F0;
  font-size:   32px;
  line-height: 1.2;
}

.sh-legal-page .sh-legal-updated {
  margin-top:  16px;
  font-size:   14px;
  line-height: 22px;
  color:       var(--black-30);
}

.sh-legal-page .sh-legal-body {
  margin-top: 40px;
  color:      var(--black-30);
  font-size:  18px;
  line-height: 28px;
  font-weight: 500;
}

.sh-legal-page .sh-legal-body h2 {
  margin-top:     32px;
  margin-bottom:  12px;
  font-size:      20px;
  line-height:    28px;
  color:          var(--heading-color);
}

.sh-legal-page .sh-legal-body p,
.sh-legal-page .sh-legal-body ul {
  margin-bottom: 16px;
}

.sh-legal-page .sh-legal-body ul {
  padding-left: 1.25em;
}

.sh-legal-page .sh-legal-body a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sh-legal-page .sh-legal-back {
  display:         inline-block;
  margin-top:      40px;
  font-size:       14px;
  font-weight:     500;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           var(--primary-color);
  text-decoration: none;
}

.sh-legal-page .sh-legal-back:hover {
  color: var(--heading-color);
}

@media (max-width: 767px) {
  .sh-legal-page {
    padding-top:    48px;
    padding-bottom: 48px;
  }
  .sh-legal-page .sh-legal-title {
    font-size: 28px;
  }
  .sh-legal-page .sh-legal-body {
    margin-top: 24px;
    font-size:  17px;
    line-height: 25px;
  }
}

@media (max-width: 767px) {
  /* Divider → content: −65% vs 40px — footer reads as one compact block */
  .sh-footer {
    padding-top:    14px;
    padding-bottom: 28px;
  }
  .sh-footer .sh-footer-inner {
    flex-direction: column;
    gap:            4px;
    text-align:     center;
  }
}

/* ============================================================
   7. Utility Additions
   ============================================================ */

/* Smooth body text rendering for Inter */
body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Preloader — inherit brand colour */
.custom-loader {
  border-top-color: var(--primary-color);
}