/* ============================================================
   Our Services Section — Scroll-driven Horizontal Accordion
   Desktop/Tablet: sticky 100vh with GSAP ScrollTrigger scrub
   Mobile: simple dropdown accordions
   ============================================================ */


/* ── Section Tokens ── */
:root {
    --os-label-w:       clamp(65px, 6vw, 95px);
    --os-bg:            var(--color-black2);
    --os-text:          var(--color-white);
}


/* ── Visibility Toggle ── */
.os-desktop { display: block; }
.os-mobile  { display: none; }

@media (max-width: 767px) {
    .os-desktop { display: none !important; }
    .os-mobile  { display: block !important; }
}


/* ============================================================
   DESKTOP / TABLET
   ============================================================ */

/* ── Section Wrapper ── */
.os-section {
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    background: var(--os-bg);
    color: var(--os-text);
}

/* ── Scroll Runway (height set by JS) ── */
.os-runway {
    position: relative;
}

/* ── Sticky Container ── */
.os-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10vh var(--pad-x) 0;
    overflow: hidden;
    background-color: var(--color-black2);
}


/* ── Services Stack (header bar) ── */
.os-stack {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-bottom: clamp(20px, 2.5vw, 40px);
}

/* Brand element with progress counter */
.os-brand-wrap {
    position: relative;
    width: clamp(90px, 10vw, 160px);
    flex-shrink: 0;
}

.os-brand-svg {
    width: 100%;
    height: auto;
    display: block;
}

.os-brand-svg .os-bar {
    fill: var(--color-white);
    transform-box: fill-box;
    transform-origin: center;
}

.os-progress-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(9px, 0.85vw, 13px);
    letter-spacing: var(--tracking-tight);
    color: var(--color-black2);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* "Our Services" heading */
.os-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(1.6rem, 4vw, 3.5rem);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
}

/* View All Services — text link with chevron arrow */
.os-view-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 10px);
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-btn);
    letter-spacing: var(--tracking-btn);
    color: var(--color-white);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--duration-fast) var(--ease-primary);
}

.os-view-btn:hover {
    opacity: 0.7;
}

.os-view-btn-arrow {
    width: clamp(8px, 0.7vw, 12px);
    height: auto;
    flex-shrink: 0;
}

.os-view-btn-arrow svg {
    width: 100%;
    height: auto;
    display: block;
}


/* ── Horizontal Divider (full-width dashed line, hidden until reveal) ── */
.os-divider {
    transform: scaleX(0);
    transform-origin: left center;
    width: calc(100% + 2 * var(--pad-x));
    margin-left: calc(-1 * var(--pad-x));
    height: 0;
    border-top: var(--guide-border);
    flex-shrink: 0;
}


/* ── Services Row ── */
.os-services {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}


/* ── Individual Service Column ── */
.os-service {
    display: flex;
    flex-shrink: 0;
    position: relative;
    height: 100%;
}

.os-service + .os-service {
    border-left: var(--guide-border);
}


/* ── Label Strip (rotated, always visible) ── */
.os-label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: var(--os-label-w);
    flex-shrink: 0;
    padding: clamp(12px, 1.2vw, 20px) clamp(8px, 0.8vw, 14px) 10vh;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* "View" text — injected by JS, positioned near arrow on hover */
@media (min-width: 768px) {
    .os-label-view {
        position: absolute;
        left: 50%;
        writing-mode: vertical-rl;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-medium);
        font-size: var(--text-btn);
        letter-spacing: var(--tracking-btn);
        color: var(--color-white);
        white-space: nowrap;
        pointer-events: none;
    }
}

/* Bottom group: square + name together */
.os-label-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 0.7vw, 14px);
}

/* Arrow chevron (pointing up) — pushed to top via justify-content: space-between on parent */
.os-label-arrow {
    width: clamp(11px, 0.9vw, 16px);
    flex-shrink: 0;
}

.os-label-arrow svg {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-90deg);
}

/* Service name (vertical bottom-to-top) */
.os-label-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(20px, 1.8vw, 32px);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

/* Coloured square indicator */
.os-label-square {
    width: clamp(10px, 0.85vw, 15px);
    height: clamp(10px, 0.85vw, 15px);
    flex-shrink: 0;
    border-radius: 0;
}


/* ── Content Area (expandable, width animated by GSAP) ── */
.os-content {
    overflow: hidden;
    width: 0;
    flex-shrink: 0;
    height: 100%;
}

.os-content-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(12px, 1.2vw, 20px) clamp(16px, 1.8vw, 28px) 10vh;
    gap: clamp(12px, 1.2vw, 20px);
    opacity: 0;
    visibility: hidden;
}

/* Description text — fixed space, doesn't grow */
.os-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-white);
    flex-shrink: 0;
    flex-grow: 0;
}

/* Media container — fills remaining height */
.os-media {
    flex: 1;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.os-media video,
.os-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}


/* ============================================================
   MOBILE  (<=767px)
   ============================================================ */

.os-mobile {
    background: var(--os-bg);
    color: var(--os-text);
    padding: var(--pad-y) 0;
}

/* ── Mobile Header ── */
.os-mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 var(--pad-x);
    margin-bottom: clamp(24px, 5vw, 40px);
}

.os-mobile-title {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
}

.os-mobile-asterisk {
    width: clamp(24px, 6vw, 36px);
    height: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    animation: os-spin 8s linear infinite;
}

@keyframes os-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Mobile Top Divider ── */
.os-mobile-divider-top {
    border-top: var(--guide-border);
}

/* ── Mobile Service Item ── */
.os-mobile-service {
    border-bottom: var(--guide-border);
}

/* Label row (clickable) */
.os-mobile-label {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 16px);
    width: 100%;
    padding: clamp(16px, 4vw, 24px) var(--pad-x);
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.os-mobile-square {
    width: clamp(10px, 2.5vw, 14px);
    height: clamp(10px, 2.5vw, 14px);
    flex-shrink: 0;
    border-radius: 0;
}

.os-mobile-name {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: clamp(18px, 4.5vw, 28px);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    flex: 1;
}

/* Learn More button — slightly larger than v1 (~+25%) for better tap target */
.os-mobile-learn {
    display: inline-flex;
    align-items: center;
    padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 24px);
    border: 0.5px solid var(--color-greyish);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-btn);
    color: var(--color-white);
    background: var(--color-black);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Arrow toggle */
.os-mobile-arrow {
    width: clamp(10px, 2.5vw, 14px);
    flex-shrink: 0;
    margin-left: clamp(8px, 2vw, 16px);
}

.os-mobile-arrow svg {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(90deg);
    transition: transform var(--duration-normal) var(--ease-primary);
}

/* Open: arrow points up */
.os-mobile-service.is-open .os-mobile-arrow svg {
    transform: rotate(-90deg);
}

/* ── Mobile Content (collapsible) ── */
.os-mobile-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-slow) var(--ease-primary);
}

.os-mobile-content-inner {
    padding: 0 var(--pad-x) clamp(20px, 4vw, 32px);
}

.os-mobile-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    color: var(--color-greyish);
    margin-bottom: clamp(12px, 3vw, 20px);
}

.os-mobile-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
}

.os-mobile-media video,
.os-mobile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ── Mobile View All Button ──
      Default: cream bg, dark text, no border.
      Hover (200ms): dark bg, cream text, 1px dashed grid-color border appears. */
.os-mobile-view-btn {
    display: block;
    width: fit-content;
    margin: clamp(28px, 6vw, 44px) auto 0;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    border: 1px dashed transparent;        /* reserves the 1px so hover doesn't shift layout */
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-btn);
    letter-spacing: var(--tracking-btn);
    color: var(--color-black2);
    background: var(--color-white);
    text-decoration: none;
    text-align: center;
    transition: background 200ms var(--ease-primary),
                color      200ms var(--ease-primary),
                border-color 200ms var(--ease-primary);
}

.os-mobile-view-btn:hover {
    background: var(--color-black2);
    color: var(--color-white);
    border-color: var(--color-grid);       /* #444444 — completes the dashed border */
}