/* ================================================================
   COURSES PAGE — courses.css
   Same fonts & colours as Section 1 & Section 2

   FONT SIZE TOKENS — EDIT HERE ONLY
   ─────────────────────────────────────────────────────────────────
   --fs-cp-title-line1   → "Courses we provide to students"
   --fs-cp-title-line2   → "and upcoming Freelancers"
   --fs-cp-card-title    → Card heading (Graphic Designing etc.)
   --fs-cp-card-desc     → Card body paragraph
   --fs-cp-btn           → "Join Now" button text
   ─────────────────────────────────────────────────────────────────
================================================================ */

:root {

  /* ── BRAND COLOURS (same across all sections) ─────────── */
  --blue:         #006AFF;
  --orange:       #FF5500;
  --yellow:       #FFE100;
  --white:        #FFFFFF;
  --black:        #0D0D0D;
  --blue-hover:   #0055D4;

  /* Card dark background — slightly lighter than pure black */
  --card-bg:      #111318;
  /* Card border — subtle dashed blue, matches design */
  --card-border:  #1a3a6e;
  /* Button border dashed blue */
  --btn-border:   #006AFF;

  /* ── FONTS (same across all sections) ──────────────────── */
  --font-hero:    'Roboto', sans-serif;
  --font-ui:      'Poppins', sans-serif;

  /* ════════════════════════════════════════════════════════
     FONT SIZES — CHANGE THESE TO RESIZE ANY TEXT
  ════════════════════════════════════════════════════════

     FORMAT: clamp( MOBILE , FLUID-VW , DESKTOP )

     1. PAGE TITLE LINE 1: "Courses we provide to students"
        Mobile≈28px | Tablet≈44px | Desktop≈68px             */
  --fs-cp-title:       clamp(28px, 5.2vw, 72px);

  /*   2. CARD TITLE: "Graphic Designing" etc.
        Mobile≈18px | Tablet≈20px | Desktop≈26px             */
  --fs-cp-card-title:  clamp(18px, 1.9vw, 26px);

  /*   3. CARD DESCRIPTION PARAGRAPH
        Mobile≈13px | Tablet≈14px | Desktop≈15px             */
  --fs-cp-card-desc:   clamp(13px, 1.05vw, 15px);

  /*   4. JOIN NOW BUTTON TEXT
        Mobile≈13px | Tablet≈14px | Desktop≈15px             */
  --fs-cp-btn:         clamp(13px, 1.05vw, 15px);

  /* ════════════════════════════════════════════════════════
     SPACING TOKENS
  ════════════════════════════════════════════════════════ */
  --cp-px:          clamp(16px, 4.5vw, 72px);   /* outer horizontal pad */
  --cp-py:          clamp(32px, 4vw,  64px);    /* outer vertical pad   */
  --card-radius:    16px;                        /* card corner radius   */
  --card-gap:       clamp(14px, 2vw, 28px);      /* gap between cards    */
  --card-img-h:     clamp(180px, 22vw, 280px);  /* card image height    */
  --card-pad:       clamp(18px, 1.8vw, 28px);   /* card body padding    */
}

/* ================================================================
   RESET
================================================================ */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
  font-family:             var(--font-ui);
  background:              var(--white);
  color:                   var(--black);
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

/* ================================================================
   COURSES PAGE WRAPPER
================================================================ */
#courses-page {
  width:      100%;
  background: var(--white);
  overflow:   hidden;
}

/* ================================================================
   PART A — PAGE HEADER
   "Courses we provide" [blue bg] to students
   and upcoming Freelancers
================================================================ */
.cp-header {
  width:   100%;
  padding: var(--cp-py) var(--cp-px) clamp(24px, 3vw, 48px) var(--cp-px);
}

/* Title wrapper */
.cp-main-title {
  font-family:    var(--font-hero);
  font-weight:    900;
  font-size:      var(--fs-cp-title);     /* ← TOKEN */
  line-height:    1.15;
  letter-spacing: -0.025em;
  color:          var(--black);
  display:        block;
}

/* Line 1: "Courses we provide [blue] to students" */
.cp-title-line1 {
  display:     block;
  white-space: normal;
}

/* Line 2: "and upcoming Freelancers" */
.cp-title-line2 {
  display: block;
}

/* "Courses we provide" — blue highlight rectangle */
.cp-highlight {
  background:     var(--blue);
  color:          var(--white);
  padding:        0.04em 0.12em;
  /* Inline mark element — no default styling */
  display:        inline;
  border-radius:  0;
  /* Maintain normal text flow */
  -webkit-box-decoration-break: clone;
  box-decoration-break:         clone;
}

/* "to students" — plain black, no background */
.cp-title-plain {
  color: var(--black);
}

/* ================================================================
   PART B — CARDS GRID
   3 columns desktop | 2 columns tablet | 1 column mobile
================================================================ */
.cp-grid-section {
  width:   100%;
  padding: 0 var(--cp-px) var(--cp-py) var(--cp-px);
}

.cp-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--card-gap);
  width:                 100%;
}

/* ================================================================
   COURSE CARD
   Dark card with image top, content bottom, dashed border
================================================================ */
.cp-card {
  background:    var(--card-bg);
  border-radius: var(--card-radius);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  /* Dashed blue border — matches design exactly */
  border:        2px dashed var(--card-border);
  will-change:   transform, opacity;
  transition:    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                 box-shadow 0.35s ease,
                 border-color 0.3s ease;
  cursor:        pointer;
}

/* Card hover — lift + glow */
.cp-card:hover {
  transform:    translateY(-8px) scale(1.018);
  box-shadow:   0 24px 60px rgba(0, 106, 255, 0.22),
                0 8px 24px rgba(0, 0, 0, 0.45);
  border-color: var(--blue);
}

/* ── Card image wrapper ──────────────────────────────── */
.cp-card-img-wrap {
  width:    100%;
  height:   var(--card-img-h);
  overflow: hidden;
  flex-shrink: 0;
}

.cp-card-img-wrap img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  transition:      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:     transform;
}

/* Image zooms in on card hover */
.cp-card:hover .cp-card-img-wrap img {
  transform: scale(1.07);
}

/* ── Card body (below image) ─────────────────────────── */
.cp-card-body {
  padding:        var(--card-pad);
  display:        flex;
  flex-direction: column;
  gap:            clamp(10px, 1.2vw, 16px);
  flex:           1;
}

/* Card title: "Graphic Designing" */
.cp-card-title {
  font-family:    var(--font-ui);
  font-weight:    700;
  font-size:      var(--fs-cp-card-title);  /* ← TOKEN */
  line-height:    1.2;
  letter-spacing: -0.01em;
  color:          var(--white);
}

/* Card description paragraph */
.cp-card-desc {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size:   var(--fs-cp-card-desc);     /* ← TOKEN */
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.72);
  flex:        1;
}

/* ── Join Now Button ─────────────────────────────────── */
.cp-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           fit-content;
  padding:         clamp(9px, 0.9vw, 13px) clamp(22px, 2.2vw, 36px);
  background:      var(--white);
  color:           var(--black);
  font-family:     var(--font-ui);
  font-weight:     700;
  font-size:       var(--fs-cp-btn);       /* ← TOKEN */
  line-height:     1;
  letter-spacing:  0.01em;
  border-radius:   50px;
  /* Dashed border — matches design */
  border:          2px dashed var(--btn-border);
  text-decoration: none;
  margin-top:      auto;
  transition:      background 0.28s ease,
                   color 0.28s ease,
                   transform 0.22s ease,
                   box-shadow 0.28s ease;
  will-change:     transform;
}

.cp-btn:hover {
  background:  var(--blue);
  color:       var(--white);
  border-color: var(--blue);
  transform:   scale(1.06);
  box-shadow:  0 6px 24px rgba(0, 106, 255, 0.35);
}

.cp-btn:active {
  transform: scale(0.97);
}

/* ================================================================
   INITIAL HIDDEN STATES — GSAP animates in
================================================================ */
.cp-main-title,
.cp-highlight,
.cp-card {
  opacity: 0;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
================================================================ */

/* ── Tablet landscape (≤ 1024px) ────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --card-img-h: clamp(160px, 24vw, 240px);
  }
}

/* ── Tablet portrait (≤ 768px) — 2 columns ──────────────── */
@media (max-width: 768px) {
  .cp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile large (≤ 560px) — 1 column ─────────────────── */
@media (max-width: 560px) {
  .cp-grid {
    grid-template-columns: 1fr;
  }

  :root {
    --card-img-h: clamp(200px, 55vw, 300px);
  }

  /* Title: allow line breaks naturally */
  .cp-title-line1 {
    white-space: normal;
  }
}

/* ── Mobile small (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
  :root {
    --cp-px:    14px;
    --cp-py:    24px;
    --card-pad: 16px;
  }
}

/* ================================================================
   UTILITY — Smooth reveal class added by GSAP
================================================================ */
.cp-revealed {
  opacity: 1;
}

/* ================================================================
   COURSES SECTION 2 — courses-section2.css
   Same fonts & colours as all other sections

   FONT SIZE TOKENS — EDIT HERE ONLY
   ─────────────────────────────────────────────────────────────────
   --fs-cs2-headline       → Big heading "We provide real skill..."
   --fs-cs2-intro          → Intro paragraph below headline
   --fs-cs2-section-head   → "What we offer" / "Why our courses..."
   --fs-cs2-offer-label    → Course name labels (UI/UX Design etc.)
   --fs-cs2-offer-desc     → Course description paragraphs
   --fs-cs2-why-item       → Bullet list items
   --fs-cs2-why-close      → Closing paragraph
   ─────────────────────────────────────────────────────────────────
   FORMAT: clamp( MOBILE , FLUID-VW , DESKTOP )
================================================================ */

:root {

  /* ── BRAND COLOURS (same across ALL sections) ────────── */
  --blue:       #006AFF;
  --orange:     #FF5500;
  --yellow:     #FFE100;
  --white:      #FFFFFF;
  --black:      #0D0D0D;
  --blue-hover: #0055D4;

  /* Offer item hover accent line */
  --offer-line: #006AFF;

  /* ── FONTS (same across ALL sections) ───────────────── */
  --font-hero:  'Roboto', sans-serif;
  --font-ui:    'Poppins', sans-serif;

  /* ════════════════════════════════════════════════════════
     FONT SIZES  ←  CHANGE THESE TO RESIZE ANY TEXT
  ════════════════════════════════════════════════════════

     1. BIG HEADLINE — "We provide real skill courses..."
        Mobile≈28px | Tablet≈40px | Desktop≈60px           */
  --fs-cs2-headline:     clamp(28px, 4.5vw,  62px);

  /*   2. INTRO PARAGRAPH below headline
        Mobile≈14px | Tablet≈15px | Desktop≈17px           */
  --fs-cs2-intro:        clamp(14px, 1.2vw,  17px);

  /*   3. SECTION HEADINGS — "What we offer" / "Why..."
        Mobile≈22px | Tablet≈26px | Desktop≈34px           */
  --fs-cs2-section-head: clamp(22px, 2.6vw,  34px);

  /*   4. OFFER LABEL — "UI/UX Design" "Graphic Designing"
        Mobile≈13px | Tablet≈14px | Desktop≈16px           */
  --fs-cs2-offer-label:  clamp(13px, 1.1vw,  16px);

  /*   5. OFFER DESCRIPTION paragraph
        Mobile≈13px | Tablet≈14px | Desktop≈16px           */
  --fs-cs2-offer-desc:   clamp(13px, 1.1vw,  16px);

  /*   6. BULLET LIST ITEMS
        Mobile≈13px | Tablet≈14px | Desktop≈16px           */
  --fs-cs2-why-item:     clamp(13px, 1.1vw,  16px);

  /*   7. CLOSING PARAGRAPH
        Mobile≈13px | Tablet≈14px | Desktop≈16px           */
  --fs-cs2-why-close:    clamp(13px, 1.1vw,  16px);

  /* ════════════════════════════════════════════════════════
     SPACING TOKENS
  ════════════════════════════════════════════════════════ */
  --cs2-px:         clamp(20px, 6vw,  100px);  /* outer horizontal pad  */
  --cs2-max-w:      820px;                      /* content max-width     */
  --cs2-block-gap:  clamp(40px, 6vw,  80px);   /* gap between blocks    */
  --cs2-item-gap:   clamp(20px, 2.5vw, 36px);  /* gap between offer items */
}

/* ================================================================
   RESET
================================================================ */

html { scroll-behavior: smooth; }

body {
  font-family:             var(--font-ui);
  background:              var(--white);
  color:                   var(--black);
  overflow-x:              hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hide default cursor — replaced by custom cursor */
  cursor: none;
}

img { display: block; max-width: 100%; }

/* ================================================================
   CUSTOM CURSOR
   ─────────────────────────────────────────────────────────────
   cs2-cursor       = small filled dot that follows mouse exactly
   cs2-cursor-trail = larger ring that follows with lag (GSAP)
================================================================ */

/* Main dot */
.cs2-cursor {
  position:      fixed;
  top:           0;
  left:          0;
  width:         10px;
  height:        10px;
  background:    var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index:       99999;
  transform:     translate(-50%, -50%);
  transition:    width 0.2s ease, height 0.2s ease,
                 background 0.2s ease;
  will-change:   transform;
  mix-blend-mode: multiply;
}

/* Trailing ring */
.cs2-cursor-trail {
  position:      fixed;
  top:           0;
  left:          0;
  width:         40px;
  height:        40px;
  border:        2px solid var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index:       99998;
  transform:     translate(-50%, -50%);
  opacity:       0.6;
  will-change:   transform;
  transition:    width 0.25s ease, height 0.25s ease,
                 border-color 0.25s ease, opacity 0.25s ease;
}

/* Cursor expands when hovering interactive elements */
body.cursor-hover .cs2-cursor {
  width:      18px;
  height:     18px;
  background: var(--orange);
}

body.cursor-hover .cs2-cursor-trail {
  width:        64px;
  height:       64px;
  border-color: var(--orange);
  opacity:      0.35;
}

/* Cursor shrinks on click */
body.cursor-click .cs2-cursor {
  width:      6px;
  height:     6px;
  background: var(--yellow);
}

/* Show default cursor on mobile (no hover) */
@media (hover: none) {
  .cs2-cursor,
  .cs2-cursor-trail { display: none; }
  body { cursor: auto; }
}

/* ================================================================
   SECTION 2 WRAPPER
================================================================ */
#cs2 {
  width:      100%;
  background: var(--white);
  padding:    var(--cs2-block-gap) var(--cs2-px);
  display:    flex;
  flex-direction: column;
  gap:        var(--cs2-block-gap);
}

/* All content blocks constrained to max-width, left-aligned */
.cs2-headline-block,
.cs2-offer-block,
.cs2-why-block {
  width:     100%;
  max-width: var(--cs2-max-w);
}

/* ================================================================
   PART A — BIG HEADLINE BLOCK
================================================================ */
.cs2-headline-block {
  display:        flex;
  flex-direction: column;
  gap:            clamp(18px, 2.5vw, 32px);
}

/* "We provide real skill courses designed for
    the real world, not just certificates." */
.cs2-headline {
  font-family:    var(--font-hero);
  font-weight:    900;
  font-size:      var(--fs-cs2-headline);   /* ← TOKEN */
  line-height:    1.12;
  letter-spacing: -0.025em;
  color:          var(--black);
  /* Each word will be split for GSAP line animation */
}

/* Intro paragraph */
.cs2-intro-text {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size:   var(--fs-cs2-intro);         /* ← TOKEN */
  line-height: 1.75;
  color:       var(--black);
  max-width:   760px;
}

/* ================================================================
   SECTION HEADINGS — "What we offer" / "Why our courses..."
================================================================ */
.cs2-section-heading {
  font-family:    var(--font-hero);
  font-weight:    900;
  font-size:      var(--fs-cs2-section-head); /* ← TOKEN */
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--black);
  margin-bottom:  clamp(20px, 2.8vw, 36px);
}

/* ================================================================
   PART B — WHAT WE OFFER LIST
================================================================ */
.cs2-offer-block {
  display: flex;
  flex-direction: column;
}

.cs2-offer-list {
  display:        flex;
  flex-direction: column;
  /* Gap between each course item */
  gap:            var(--cs2-item-gap);
}

/* Single course item */
.cs2-offer-item {
  display:        flex;
  flex-direction: column;
  gap:            clamp(4px, 0.5vw, 8px);
  padding-bottom: var(--cs2-item-gap);
  /* Bottom separator line — matches design's subtle separation */
  border-bottom:  1px solid rgba(13, 13, 13, 0.10);
  position:       relative;
  cursor:         none;
  /* Blue left accent line appears on hover */
  padding-left:   0;
  transition:     padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:    padding-left;
}

/* Blue left accent bar — hidden by default */
.cs2-offer-item::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     var(--cs2-item-gap);
  width:      3px;
  background: var(--blue);
  border-radius: 2px;
  transform:  scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover: indent text + reveal blue bar */
.cs2-offer-item:hover {
  padding-left: 16px;
}

.cs2-offer-item:hover::before {
  transform: scaleY(1);
}

/* Last item — no bottom border */
.cs2-offer-item:last-child {
  border-bottom:  none;
  padding-bottom: 0;
}

/* Course label: "UI/UX Design" */
.cs2-offer-label {
  font-family:  var(--font-ui);
  font-weight:  600;
  font-size:    var(--fs-cs2-offer-label);  /* ← TOKEN */
  line-height:  1.3;
  color:        var(--black);
  transition:   color 0.3s ease;
}

.cs2-offer-item:hover .cs2-offer-label {
  color: var(--blue);
}

/* Course description */
.cs2-offer-desc {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size:   var(--fs-cs2-offer-desc);   /* ← TOKEN */
  line-height: 1.72;
  color:       rgba(13, 13, 13, 0.78);
  transition:  color 0.3s ease;
}

.cs2-offer-item:hover .cs2-offer-desc {
  color: var(--black);
}

/* ================================================================
   PART C — WHY OUR COURSES ARE DIFFERENT
================================================================ */
.cs2-why-block {
  display: flex;
  flex-direction: column;
}

/* Bullet list */
.cs2-why-list {
  list-style:     none;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            clamp(8px, 1vw, 14px);
  margin-bottom:  clamp(20px, 2.5vw, 32px);
}

.cs2-why-list li {
  font-family:  var(--font-ui);
  font-weight:  400;
  font-size:    var(--fs-cs2-why-item);   /* ← TOKEN */
  line-height:  1.65;
  color:        var(--black);
  padding-left: 1.4em;
  position:     relative;
  /* Each item fades in via GSAP stagger */
  will-change:  transform, opacity;
}

/* Bullet dot — matches design (• style) */
.cs2-why-list li::before {
  content:   '•';
  position:  absolute;
  left:      0;
  color:     var(--black);
  font-size: 1em;
  top:       0;
}

/* Closing paragraph */
.cs2-why-close {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size:   var(--fs-cs2-why-close);  /* ← TOKEN */
  line-height: 1.75;
  color:       var(--black);
  max-width:   720px;
}

/* ================================================================
   INITIAL HIDDEN STATES — GSAP animates these in
================================================================ */
.cs2-headline,
.cs2-intro-text,
.cs2-section-heading,
.cs2-offer-item,
.cs2-why-list li,
.cs2-why-close {
  opacity: 0;
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
================================================================ */

/* ── Tablet (≤ 900px) ───────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --cs2-px:       clamp(20px, 5vw, 60px);
    --cs2-max-w:    100%;
  }
}

/* ── Mobile large (≤ 600px) ─────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --cs2-px:        18px;
    --cs2-block-gap: clamp(32px, 8vw, 52px);
    --cs2-item-gap:  clamp(16px, 4vw, 24px);
  }
}

/* ── Mobile small (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
  :root {
    --cs2-px:  14px;
  }
}



/* ============================================================
   SECTION 6 — Quote + Footer
   Add this to the bottom of your index.css

   Required font — add to <head> in index.html:
   <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet" />
============================================================ */

#section-6 {
  width: 100%;
  overflow-x: hidden;
}

/* ============================================================
   PART B — DARK FOOTER BLOCK
============================================================ */

.s6-dark-block {
  width: 100%;
  background: var(--black);
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 5.5vw, 72px) clamp(32px, 4.5vw, 64px) clamp(48px, 7vw, 96px);
  gap: clamp(48px, 8vw, 110px);
}


/* ── TOP ROW: Lets Talk (left) + Nav (right) ── */

.s6-top-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}

/* Lets Talk button — white outlined pill with arrow */
.s6-lets-talk {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  background: var(--white);
  color: var(--black);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 20px);
  text-decoration: none;
  /* Fixed width like in image ~260px at desktop */
  min-width: clamp(160px, 18vw, 260px);
  padding: clamp(14px, 1.4vw, 20px) clamp(20px, 2.4vw, 36px);
  border-radius: 0;
  letter-spacing: 0;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.s6-lets-talk:hover {
  background: var(--blue);
  color: var(--white);
}

.s6-btn-label {
  flex: 1;
}

.s6-btn-arrow {
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1;
}

/* Nav links */
.s6-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 56px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.s6-nav-link {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.4vw, 20px);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.s6-nav-link:hover {
  color: var(--blue);
}


/* ── LOGO AREA ── */

.s6-logo-area {
  width: 100%;
}

.s6-logo {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.s6-logo.loaded + .s6-logo-fallback {
  display: none;
}

/* Text fallback (shown until real logo image is added) */
.s6-logo-fallback {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 14px);
}

.s6-logo-mark {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 10vw, 140px);
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}

.s6-logo-sub {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 28px);
  color: var(--white);
  letter-spacing: 0.28em;
  display: block;
}


/* ── INITIAL HIDDEN STATES (GSAP animates in) ── */
.s6-quote,
.s6-top-row,
.s6-logo-area {
  opacity: 0;
}


/* ── RESPONSIVE ── */

/* Tablet portrait */
@media (max-width: 768px) {
  .s6-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 40px);
  }

  .s6-nav {
    justify-content: flex-start;
    gap: clamp(16px, 4vw, 32px);
  }

  .s6-lets-talk {
    min-width: clamp(140px, 45vw, 220px);
  }

  /* Logo fills full width on tablet */
  .s6-logo-area {
    width: 100%;
    overflow: hidden;
  }

  .s6-logo {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile large */
@media (max-width: 600px) {
  .s6-quote {
    font-size: clamp(28px, 9vw, 52px);
  }

  .s6-dark-block {
    padding: 36px 20px 48px;
    gap: 32px;
  }

  /* Logo full width, contained, no overflow */
  .s6-logo-area {
    width: 100%;
    overflow: hidden;
  }

  .s6-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .s6-nav {
    gap: clamp(14px, 4vw, 24px);
  }

  .s6-nav-link {
    font-size: clamp(13px, 3.5vw, 16px);
  }
}

/* Mobile small */
@media (max-width: 380px) {
  .s6-quote-block {
    padding: 36px 16px;
  }

  .s6-dark-block {
    padding: 28px 16px 40px;
  }

  .s6-logo-area {
    width: 100%;
    overflow: hidden;
  }

  .s6-logo {
    width: 100%;
    max-width: 100%;
  }
}
.s6-copyright {
    text-align: center;
    padding: 1rem 0 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1.5rem;
}

.s6-copyright p {
    margin: 0;
}

.s6-credit-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.s6-credit-link:hover {
    color: #ffffff;
    text-decoration: underline;
}