/*------------------------------------------
Note: This is coded below according to the
visibility of the page's order of elements
------------------------------------------*/

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

/* ====================
   LEARNMORE.MD STYLES
====================== */

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

/* ===========================
   NAVBAR (TOP COMMAND BAR) 
=========================== */
:root {
  --navbar-height: 20px;   /* measure your actual rendered height including padding/borders */
}

/* 1. Remove the height: 0 and negative margin pulls unless you have a 
   specific overlapping header design that requires it. */
/* Wrapper is key — it defines where "sticky" starts behaving */
.navbar-outer-wrapper {
  position: sticky;
  top: 0;                      /* final stuck position */
  z-index: 1000;
  height: 0;                   /* important: collapses height so content starts right after header */
  /*margin-top: calc(-1 * var(--navbar-height, 60px)); /* pulls navbar up; it sits at bottom of header */
  padding-left: 1rem; /* navbar has padding from left and right */
  padding-right: 1rem;
}

/* 2. Remove redundant position: sticky here */
/* Initial state — navbar sits at bottom of header */
.learnmore-navbar {
  /* position: sticky;  | Remove redundant position: sticky here */
  top: 0;                      /* redundant but safe */
  width: 100%;
  
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0); /* starts without shadow */

  transform: translateY(100%); /* starts hidden below its natural position */
  will-change: transform;

  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease;
}

/* 3. Single trigger for the stuck behavior */
/* When we want it visible & stuck at top */
/* Optional: subtle shadow / style change when stuck */
.navbar-outer-wrapper.stuck .learnmore-navbar {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  /* you can also shrink padding, change background etc. */
}

/* Rest of existing navbar styles */
/* Scrollable container inside navbar for mobile */
.navbar-scroll {
  display: flex;
  flex: 1 1 auto;          /* expand to full width */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;   /* Firefox */
}

.navbar-scroll::-webkit-scrollbar {
  display: none;           /* Chrome/Safari */
}

/* navbar items become nav tabs */
.navbar-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  margin: 0;
  padding: 0.9rem 0.5rem;

  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;

  color: var(--fg);  /* visible on black */
  border-right: 1px solid var(--border);
  border-radius: 0;

  transition: all 0.3s ease;
  cursor: pointer; /* hand pointer */
}

.navbar-title:last-child {
  border-right: none;
}

.navbar-title:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--highlight); /* highlight color */
}

.navbar-title.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--highlight); /* highlight color */
  box-shadow: inset 0 -2px 0 var(--highlight);
}

/* --------------------------------
   Navbar responsive adjustments
-------------------------------- */
@media (max-width: 900px) {
  .navbar-title {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 0.8rem 1rem;
    font-size: 0.65rem;
  }

  .learnmore-right-column {
    padding-top: 2.8rem;
  }
}

/* ==================================
   Floating Swipe Arrows for Mobile
================================== */
.scroll-arrow-left,
.scroll-arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--fg);
  cursor: pointer;
  opacity: 0.3;
  z-index: 1001;
  display: none; /* hidden by default */
  pointer-events: auto;
  user-select: none;
  background: none;
  padding: 0.2rem 0.4rem;
  border-radius: 50%;
}

/* Left arrow */
.scroll-arrow-left { left: 0.2rem; }

/* Right arrow */
.scroll-arrow-right { right: 0.2rem; }

/* --------------------------------
   Floating Swipe Arrows responsive adjustments
-------------------------------- */
/* Show arrows on mobile only */
@media (max-width: 900px) {
  .scroll-arrow-left,
  .scroll-arrow-right { display: block; }
}

/* Hide arrows on desktop */
@media (min-width: 901px) {
  .scroll-arrow-left,
  .scroll-arrow-right { display: none !important; }
}


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


/* ==============================
   TOC & NAVBAR Spacing column
============================== */
.nav-below-space {
  padding-top: 2.2rem; /* prevents overlap with sticky bar */
  position: relative; /* Position the wrapper relative to the parent column */
}


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


/* TOC is a ghost structure appeared from the 
NAVBAR itself through JS coding and styles */
/* ==========================
   TABLE OF CONTENTS (TOC)
========================== */
.toc-box {
  position: sticky;
  top: 1rem;
  background: color-mix(in srgb, var(--highlight), transparent 99%);
  padding: 2rem 2rem 2rem 2.5rem; 
  border-radius: 12px 12px 12px 0px;
  margin-bottom: 2rem;
  /*max-width: 100%;*/
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-left: 3px solid var(--highlight);
  color: var(--fg);
  /*font-weight: 500;*/
}

.toc-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 2. Control the actual gap between rows here */
.toc-box li {
  margin: 0 0 0.1rem 0; /* Reduced from 0.4rem to 0.2rem */
  font-size: .8rem;
  transition: all 0.50s ease;
}

.toc-box li.h3 {
  margin-left: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 300;
}

/* --- THE FIXES --- */
/* 1. Target the anchor tags correctly */
.toc-box a {
  color: inherit;
  text-decoration: none !important;
  outline: none !important;
  border-bottom: none !important;
  /* transition: color 0.5s ease; */
  display: inline-block;
  /* Use a tight unitless line-height */
  line-height: 1.1 !important; 
}

/* 2. Hover state for links */
.toc-box a:hover {
  text-decoration: underline !important; /* Adds the underline back on hover */
}

/* 3. Hover state for the list item container */
.toc-box li:hover {
  color: var(--highlight);
  transform: translateX(3px);
}

/* 4. Global heading behavior */
.toc-box h2, h4 {
  scroll-margin-top: 1.4rem;
  text-decoration: none;
}

/* Style for the active link in the TOC */
/* This highlights the TOC link when the button scrolls to its section */
.toc-box ul li a.active-toc {
  font-weight: bold;
  border-left: 2px solid var(--highlight-dark);
  padding-left: 8px;
  transition: all 0.2s ease;
}

.active-toc {
  color: var(--highlight) !important;
  font-weight: bold;
}

/* --------------------------------
   TOC Responsive Adjustments (mobile)
-------------------------------- */
@media (max-width: 1024px) {
  .learnmore-container {
    flex-direction: column;
    margin-top: 3rem !important;
  }

  .learnmore-navbar {
    position: relative;
    max-height: none;
    top: 0;
  }

  .toc-box {
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
}


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


/* --------------------------------------------------------------------------------------------
!IMPORTANT Note: these (learnmore) structural styles are belonging to learnmore.md page only */
/* ==================================
   CONTAINER LAYOUT | MAIN (GHOST)
================================== */

/* ===================================
   MAIN CONTAINER OPENED TO NEST ALL
====================================*/
.learnmore-container {
  display: flex;
  flex-direction: column; /* stack bar on top */
  gap: 0;
  margin-top: 3rem;
  position: relative;
}

/* ------------------------
   SCROLL BUTTON BEHAVIOR
-------------------------*/
.custom-scroll-controls {
  position: absolute;
  bottom: 1rem; /* Matches your bottom padding */
  right: 3rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
  border-radius: 6px 6px 6px 0px;
}

/* Styling the custom tag directly */
scroll-btn.scroll-trigger {
  display: flex; /* Custom tags are 'inline' by default; this makes them blocks */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: color-mix(in srgb, var(--border), transparent 60%);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px 6px 6px 0px; /* Rounded top corners */
  /* Sets the shadow to 50% opacity of the variable */
  box-shadow: .3px .3px 2px .5px color-mix(in srgb, var(--border-bg), transparent 50%);
}

/* This controls the size of the ▲ and ▼ specifically */
scroll-btn.scroll-trigger span {
  font-size: 0.6rem;   /* Increase or decrease this value as needed */
  line-height: 1;    /* Keeps the arrow perfectly centered vertically */
  font-weight: bold; /* Makes the arrow thicker */
}

/*

    - 0 (X-offset): No horizontal movement.
    - 4px (Y-offset): Moves the shadow downward.
    - 4px (Blur): Softens the edges.
    - 12px (Spread): Expands the shadow's size in all directions before the blur is applied.
    
    The Direction Map
    - UP: Use a negative Y-offset.
    - DOWN: Use a positive Y-offset.
    - LEFT: Use a negative X-offset.
    - RIGHT: Use a positive X-offset.

*/

/* Unique style for the UP button */
scroll-btn.btn-up {
  border-radius: 6px 6px 6px 0px; /* Rounded top corners */
  border-bottom: none; /* Merges the buttons visually if they touch */
}

/* Unique style for the DOWN button */
scroll-btn.btn-down {
  border-radius: 0px 6px 6px 6px; /* Rounded bottom corners */
}

scroll-btn.scroll-trigger:hover {
  background-color: var(--highlight);
  transform: scale(1.1);
}

/* Optional: Add a focus ring for keyboard users */
scroll-btn.scroll-trigger:focus {
  outline: 1px solid var(--highlight-dark);
  outline-offset: 2px;
}

/* ------------------------
   CONTENT PANEL OF PAGES
-------------------------*/
/* Ensure the content column is the scroll reference */
.learnmore-block-content {
  max-height: 50vh;
  overflow-y: auto;
  position: relative;
  height: 100%; /* Or your specific height */

  padding: 0 2rem 0rem 2rem;
  box-sizing: border-box;
  scroll-behavior: smooth; /* Enables smooth scrolling natively */

  /* Hide scrollbar for Chrome, Safari, and Opera */
  &::-webkit-scrollbar { display: none; }
  /* Hide scrollbar for IE, Edge, and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.learnmore-block-content h2, 
.learnmore-block-content h4 {
  scroll-margin-top: 20px !important; /* Adjust this to match your image's padding/alignment */
}

/* ------------------------> Note: learnmore.md coded styles are done up to here ... <------------------------ */



/* =========================================================================================================================== */



/* -----------------> Note: individual pages in _includes/learnmore are beginning here ... <------------------ */


/* ==========================================
    SEPERATOR STYLES (in between spotlights)
    *this applies to all sections
========================================== */
/* Style the existing separator line as a gradient */
#section-two .separator-line {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border), transparent);

    margin-top: 03rem;     /* space above */
    margin-bottom: 01rem !important;  /* space below */
}


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


/* =========================
    CONTENT PANEL STYLES
========================= */

/* ============================
    Split Section Container
============================ */
section.split-section > .split-container {
  display: flex;
  /*flex-direction: row;*/
  align-items: center;
  gap: 2rem; /* space between image and content */
  /*border-bottom: .05px;*/
  flex-wrap: wrap;           /* fallback + mobile friendly */
  /*margin-top: 0px !important;*/

  padding: 1rem 1.5rem 1rem 1.5rem;
  /*border-radius: 12px 12px 12px 12px !important;*/
  
  background: color-mix(in srgb, var(--fg), transparent 99%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  opacity: 1;                /* override any animation hiding it initially */
  height: 100% !important;
  
  /* animation: slide-up 0.8s ease forwards; */   /* comment out temporarily  */
  transform: translateY(10px); /* transform: none;  /* skip animation for debug */
  animation: reveal 0.8s ease forwards;
}

/* LEFT IMAGE — sticky to top with padding */
section.split-section .split-image {
  flex: 0 0 40%;
  position: sticky;    /* sticks relative to viewport */
  top: 25px;              /* stick at very top */
  align-self: flex-start;
  padding-top: 0rem;   /* breathing room */
  /*padding-left: 1rem;
  padding-right: 1rem;*/
  margin-bottom: none !important;
}

section.split-section .split-image img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px 0px 18px 18px;  /* optional: soft corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* subtle depth */
  margin-bottom: none !important;
  /*margin-top: 1.4rem;*/
}

/* RIGHT CONTENT — scrolls normally */
section.split-section .split-content {
  flex: 1;
  padding-top: 0rem; /* flush with TOC or page */
  padding-left: 0.0rem;
  padding-right: 2.5rem;
  margin-top: -1rem !important;
  top: 25px !important;
}

/* ============================
    Headings and Paragraphs
============================ */

.split-container {
  .split-content {
    h2 {
      font-size: clamp(1.5rem, 3.5vw, 3rem);
      /* margin: 0 0 2rem 0; /* top left bottom right */ /* margin is used for external spacing */
      margin-bottom: 2.6rem;
      color: var(--border-bg);

      /* 1. Remove the "air" inside the box */
      line-height: 0.8; 
      
      /* 2. Remove space above the text (padding is used for internal) */
      padding-top: 1.4rem;
      /*padding-bottom: 20px; /* Adjust this value */
      
      /* 3. This ensures the box doesn't have extra 'descender' space at the bottom */
      display: block; 
      
      /* 4. Use this to pull the baseline up if the font has internal padding */
      vertical-align: top;

      /* text-decoration: underline; */

      /* border-bottom: 1px solid var(--border); */ /*this goes to the bottom of block*/
    }

    h4 {
      padding-top: 1.4rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      /* margin: 0rem 0 2rem 0; */
      margin-bottom: 2rem;
    }

    ul {
      font-size: 1rem;
      margin-bottom: 2rem;
      line-height: 1.6;

      li {
        margin-bottom: 0.5rem !important;
        margin-left: 1.5rem
      }
    }
  }
}

/* --------------------------------
   Split section – layout only
-------------------------------- */
@media (max-width: 900px) {

  section.split-section > .split-container {
    flex-direction: column;
    gap: 4rem;
    margin-top: 1.5rem !important;
    line-height: 1.6rem !important;
  }

  .split-container {
  .split-content {
    h2 {
      margin-bottom: 1.5rem;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      /* margin: 0rem 0 2rem 0; */
      margin-bottom: 1rem;
    }

    ul {
      font-size: 1rem;
      margin-bottom: 1rem;
      line-height: 1.6;

      li {
        margin-bottom: 0.5rem !important;
        margin-left: 1.5rem
      }
    }
  }
  }  

  section.split-section .split-image {
    position: relative;
    top: 0;
    flex: 1 1 100%;
    padding: 0;
    margin-bottom: -1rem !important;

    img {
      width: 100%;
      height: auto;
    }
  }

  section.split-section .split-content {
    flex: 1 1 100%;
    padding: 0;
  }
}


/* =========================================================================================================================== */

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


/* ======================================
   INTO THE DEPTH SECTION (ENQUIRE.MD)
====================================== */

/* ==========================================
   OPTIMIZED ARROW STYLES (Mobile-First)
========================================== */
/* Down facing arrow at bottom center */

#arrow-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem; /* Reduced for smaller screens */
    margin-bottom: 0rem;
    padding: 00px 0;     /* Vertical padding to give space */
    position: relative;
    top: 0px; /* Essential for sticky to work correctly */
    z-index: 10; /* Added */
}

.arrow-wrapper {
    font-size: 38px;  /* Smaller starting size for mobile */
    color: var(--bg); /* Black color for the arrow */
    display: inline-block;
    /* Use will-change to hint GPU acceleration for smoother mobile animation */
    will-change: transform; 
    animation: bounceArrow 1.5s ease infinite; /* Apply animation */
}

/* ==========================================
   BELOW ARROW TITLE STYLES (into the depth)
========================================== */
#section-two-title {
    padding: 0.75rem 3rem;          /* tighter horizontal padding */
    text-align: center !important;
    align-items: center;
}

#section-two-title h2 {
    font-size: clamp(2rem, 6vw, 3rem); /* fluid scale */
    font-weight: 700;
    line-height: 1.15;              /* tighter for small screens */
    margin: -1rem 0 0.4rem 0; /* top left bottom right */
    text-align: center !important;
}

#section-two-title p {
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    font-weight: 400;
    font-style: italic;
    color: var(--fg-light);
    opacity: 0.8;
    margin: 0;
    margin: 0 0 0rem 0; /* top left bottom right */
}

/* Title wrapper */
#section-two-title .right-text {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    padding: 0;
    text-align: center;
}

/* ------------------------------------------
   Tablet and up (enhancement, not override)
------------------------------------------ */
@media (min-width: 768px) {
    #section-two-title {
        padding: 1rem 1.5rem;
    }

    #section-two-title h2 {
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    #section-two-title .right-text {
        margin-bottom: 1.5rem;
    }
}

/* Arrow Animation – subtle on mobile */
@keyframes bounceArrow {
    0%, 50%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    75% { transform: translateY(-3px); }
}

/* ==============================
   SPOTLIGHT / CONTENT PANEL
============================== */

/* =======================
    University Groups
======================= */
.content-container {
  display: flex;
  flex-direction: column;       /* Mobile-first: stack vertically */
  gap: 1.5rem;
  box-sizing: border-box;
  padding: 1rem;                /* mobile padding */
  max-width: 100%;

  .left-image {
    flex: 1 1 100%;
    padding: 0;
    position: relative;

    img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 4px;       /* smaller radius on mobile */
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      filter: grayscale(100%);
      transition: filter 0.3s ease;

      &:hover {
        filter: grayscale(0%);
      }
    }
  }

  .right-text {
    flex: 1 1 100%;
    padding: 0;
    margin: 0;
    margin-top: 1rem !important;

    p:nth-child(1) {
      margin-bottom: 0.3rem;
      font-size: 0.8rem;
      font-weight: normal;
    }

    p:nth-child(2) {
      margin-bottom: 0.5rem;
      font-size: clamp(1.5rem, 3vw, 2rem);  /* scaled title */
      font-weight: 100;
    }

    p:nth-child(3) {
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    ul.actions {
      margin: 1rem 0 0 0;
      padding: 0;
      list-style: none;

      li {
        margin-bottom: 0.5rem;

        a.button {
          font-size: 0.6rem;
        }
      }
    }

    .nested-readmore {
      .readmore-toggle {
        font-size: 0.6rem;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fg-light);
        margin-top: 0.5rem;
        padding: 0;
        transition: color 0.2s ease;
        display: inline-block;
      }

      .readmore-content {
        display: none;
        font-size: 0.8rem;
        margin-top: 0.25rem;
        color: var(--fg);

        &.expanded {
          display: block;
        }
      }
    }
  }
}

/* -----------------------
   Mobile optimization
----------------------- */
@media (min-width: 900px) {
  .content-container {
    flex-direction: row;      /* row layout for desktop */
    gap: 1.5rem;
    padding: 0 5rem;          /* horizontal padding only */

    .left-image {
      flex: 0 0 50%;
      padding: 1rem;
    }

    .right-text {
      flex: 1;
    }

    .right-text p:nth-child(2) {
      font-size: 2rem;         /* desktop title font */
    }

    .left-image img {
      border-radius: 8px;
    }
  }
}


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


/* =========================================
   HERO IMG SECTION – LEARNMORE.MD
========================================= */

/* ---------------- */
/* HERO IMG BANNER */
.hero-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem 0rem;          /* breathable spacing */
  margin-bottom: 2rem;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 12px 0px;
  box-shadow: 0 1px 10px var(--bg); 
  object-fit: cover;
}

/* -----------------------
   Mobile optimization
----------------------- */
@media (min-width: 900px) {
  .hero-image img {
    max-width: 100%;
  }
}


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

/* =========================================
   START YOUR JOURNEY SECTION – LEARNMORE.MD
========================================= */

/* GENERIC STYLES FOR THE CARDS OF STEPS */
/* Each step – make sure they're not hidden */
.enquire-step,
.enquire-step-1 {
  padding: 2.5rem 3rem;
  /* border-left: 4px solid var(--highlight-dark); */
  border-left: 4px solid color-mix(in srgb, var(--highlight-dark), transparent 50%);
  background: color-mix(in srgb, var(--border), transparent 60%);
  border-radius: 0px 12px 12px 12px;
  
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  opacity: 1;                /* override any animation hiding it initially */
  transform: none;           /* skip animation for debug */
  
  /* animation: slide-up 0.8s ease forwards; */   /* comment out temporarily */
  transform: translateY(30px);
  animation: reveal 0.8s ease forwards;

  align-items: center !important;
}

/* ------------------------ */
/* BELOW CONTENT CONTAINER */
.enquire-two-column {
  display: flex;
  flex-wrap: wrap;           /* fallback + mobile friendly */
  gap: 2.5rem;
  margin: 4rem 0;
  min-height: 50vh;          /* prevent total collapse */
}

/* -----

To align the scrolling steps perfectly with the sticky image column so they stop at the same level, you need to adjust the top values and ensure the container heights match.
The reason they currently offset is likely due to the 20px difference in your top values (130px vs 150px).
  1. Synchronize the Sticky Offsets
  Both columns should usually share the same top value to stay aligned at the header level.

----- */

/* LEFT: IMG COLUMN */
.left-image-column {
  flex: 0 0 40%;
  max-width: 480px;
  position: sticky;
  top: 130px; 
  align-self: flex-start;
  height: fit-content;
  padding: 0rem 0rem 0rem 3rem; 
}

.persistent-hero-image {
  width: 100%;
  height: auto;
  border-radius: 12px 0px 12px 12px;
  object-fit: cover;
  margin-bottom: -0.5rem !important;
}

/* RIGHT: SCROLLING STEPS (Container holds the flow, doesn't stick) */
.right-steps-column {
  flex: 1;                   
  min-width: 320px;               /* prevent squashing on narrow views */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;                      /* space between steps */
  /* Removed position: sticky from here if you want cards to scroll naturally */
  padding: 0rem 3rem 0rem 0rem;   /* top . right . bottom . left */
}

/* INDIVIDUAL STEP CARD */
.enquire-step {
  /* REMOVE position: sticky FROM HERE */
  position: relative; 
  
  /* Keep your existing styling */
  padding: 2.5rem 3rem;
  border-left: 4px solid color-mix(in srgb, var(--highlight-dark), transparent 50%);
  background: color-mix(in srgb, var(--border), transparent 60%);
  border-radius: 0px 16px 16px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  
  /* Animation */
  transform: translateY(30px);
  animation: reveal 0.8s ease forwards;
}

/* Force visibility & debug outline (remove later) */
.right-steps-column * {
  min-height: 20px;          /* tiny safeguard */
}

/* ------------------------------------
   Mobile optimization (Under 768px)
------------------------------------ */
@media (max-width: 768px) {
  .enquire-two-column {
    flex-direction: column; /* Stack vertically */
    gap: 1.5rem;
    margin: 1rem 0;
  }

  .left-image-column {
    position: relative;    /* Disable sticky on mobile */
    top: 0 !important;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;            /* Remove side padding */
    display: none !important;
  }

  .persistent-hero-image {
    height: 250px;         /* Cap height so cards aren't too far down */
    border-radius: 12px;   /* Round all corners for mobile look */
    display: none !important;
  }

  .right-steps-column {
    padding: 0;            /* Use full width for cards */
    gap: 1.5rem;
  }

  .enquire-step, 
  .enquire-step-1 {
    padding: 1.5rem;       /* Tighter padding for small screens */
    border-radius: 12px;   /* Match image style */
  }
}


/* TYPOGRAPHY AND DESIGN */
.enquire-step h2,
.enquire-step h4 {
  margin-bottom: 1rem !important;
  margin-top: 0rem !important;
  padding-top: 0rem !important;
}

.enquire-step p {
  margin-bottom: 1rem;
}

.enquire-step ul {
  margin-left: 1.2rem;
  margin-top: 0rem;
}

/* note styles */
.subtle {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 2rem;
}

.note {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-top: 2rem !important;
}

/* ARROW BUTTON */
/* BASE STYLE (Shared by both) */
.arrow-btn-right, 
.arrow-btn-down {
  display: inline-block;
  margin: 1rem 0;
  font-weight: 600;
  text-decoration: none !important;
  position: relative;
  transition: transform 0.3s ease;
  
  /* THE LOOK: Primary styles moved here for consistency */
  color: var(--fg);
  background: color-mix(in srgb, var(--border), transparent 40%);
  padding: 0.8rem 1.5rem;
  border-radius: 0px 10px 10px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);

  /* REMOVE INHERITED DOTTED LINE */
  outline: none;
  box-shadow: none; 
  border-bottom: none;
}

/* SHARED PSEUDO BASE */
.arrow-btn-right::after, 
.arrow-btn-down::after {
  margin-left: 0.5rem;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 1. RIGHT BUTTON LOGIC */
.arrow-btn-right::after { content: "🡆"; }
.arrow-btn-right:hover { transform: translateX(4px); }
.arrow-btn-right:hover::after { transform: translateX(2px); }

/* 2. DOWN BUTTON LOGIC */
.arrow-btn-down::after { content: "🡇"; }
.arrow-btn-down:hover { transform: translateY(4px); }
.arrow-btn-down:hover::after { transform: translateY(2px); }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* -------

To match the 🡇 (U+1F847) style perfectly, the corresponding right-facing arrow is 🡆 (U+1F846).

The "Heavy Wide-Headed" Family:
  Right: 🡆 (U+1F846)
  Down: 🡇 (U+1F847)
  Left: 🡄 (U+1F844)
  Up: 🡅 (U+1F845)

Usage Tip:
Since you are using these in ::after content, ensure your font-family supports extended Unicode. If it doesn't render, most browsers will default to a standard system font that includes it.

If you decide to switch back to the horizontal push behavior, just change your CSS from translateY back to translateX.
Let me know if you want the Unicode hex codes for a specific CSS content property implementation!

------- */