/* =========================================================
   Ops That Work - landing redesign (preview)
   Layered on top of ../style-new.css. Nav + footer inherited.
   ========================================================= */

:root {
    --ink: #14312c;
    --ai-bg: #08211d;    /* near-black teal for the dark AI + CTA stretch */
    --paper: #fcfcfa;
    --wash: #eef4f2;
    --glow: #fdfaef;
    --mono: var(--font-accent); /* Overpass Mono, defined in style-new.css */
    --measure: 62rem;
}

/* Scroll-driven background shift. Each section swaps body's tint. */
body {
    background: var(--paper);
    transition: background-color 0.9s ease;
}
body[data-sec="hero"],
body[data-sec="intro"]    { background-color: var(--paper); }
body[data-sec="services"],
body[data-sec="work"],
body[data-sec="ai"]        { background-color: var(--wash); }
body[data-sec="cta"]       { background-color: var(--glow); }

/* One fixed dark layer behind the content, driven by scroll position in
   app.js. It fades in as the AI section approaches, holds through the AI
   and CTA sections, then fades out before the footer. */
.ambient-dark {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--ai-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s linear;
}

/* Keep the real page chrome above the fixed colour layer */
.nav, .hero-wrap, .footer { position: relative; z-index: 1; }

/* Solid white nav that scrolls away with the page (not sticky) */
.nav {
    position: static;
    background: #fff;
    border-bottom: 1px solid rgba(20,49,44,0.08);
}

/* Back-to-top button (shown by JS once you scroll down) */
.to-top {
    position: fixed;
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--teal-dark);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    z-index: 200;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.to-top.show { opacity: 1; transform: none; }
.to-top:hover { background: var(--teal); }
.to-top:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 3px; }

/* ---------------------------------------------------------
   Hero: full-width header image with text overlay.
   On narrow screens the image is too short to overlay, so
   the text stacks beneath it instead.
   --------------------------------------------------------- */
.hero-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hero-wrap picture img { width: 100%; height: auto; display: block; }

.hero-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 620px;
}
.hero-text h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3.6vw, 2.9rem);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0;
}
@media (max-width: 760px) {
    .hero-text {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        text-align: left;
        padding: 2rem 1.5rem 0;
    }
    .hero-text h1 {
        /* size to the viewport so "Systems that support you," stays on one line */
        font-size: min(6.2vw, 2.5rem);
        line-height: 1.15;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------
   Layout shell
   --------------------------------------------------------- */
.lp { position: relative; z-index: 1; }
.lp section {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(3rem, 7vh, 4.5rem) 1.5rem;
}
.lp > section:first-child { padding-top: clamp(1.75rem, 4vh, 2.75rem); }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1rem;
}
body.on-dark .lp-ai .eyebrow { color: var(--yellow); }

.mark {
    color: var(--teal-light);
    background: linear-gradient(transparent 68%, rgba(0,137,123,0.16) 0);
}

.lp-section-head { max-width: 40rem; margin-bottom: clamp(1.5rem, 3vh, 2.25rem); }
.lp-section-head h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
}

/* ---------------------------------------------------------
   Intro / positioning
   --------------------------------------------------------- */
.lp-lead {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ink);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    text-wrap: pretty;
    margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.lp-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}
.lp-scenario p { font-size: 1rem; line-height: 1.65; color: var(--text); margin: 0.75rem 0 0; }
.lp-scenario-tag {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--teal);
}

/* ---------------------------------------------------------
   Services - quiet list, no rules
   --------------------------------------------------------- */
.lp-service-list { list-style: none; margin: 0; padding: 0; }
.lp-service { position: relative; }

/* A bulb sits in the left margin of each row. It is a dim outline by
   default and glows brand-yellow while the row is hovered or focused.
   No click, no navigation: purely a hover cue. */
.lp-bulb {
    position: absolute;
    top: 1.85rem;
    left: -2.75rem;
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    color: #c2cbc8;
    pointer-events: none;
    transition: color 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.lp-service:hover .lp-bulb,
.lp-service:focus-within .lp-bulb {
    color: #fdcc2c;
    filter: drop-shadow(0 0 9px rgba(253, 204, 44, 0.8));
    transform: scale(1.08);
}

/* Row picks up a quiet teal emphasis on hover */
.lp-service:hover h3,
.lp-service:focus-within h3 { color: var(--teal); }

.lp-service-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title go" "body go";
    column-gap: 1.5rem;
    padding: 1.25rem 0;
    text-decoration: none;
    color: inherit;
}
.lp-service-list li + li a { border-top: 1px solid rgba(20,49,44,0.09); }
.lp-service-list h3 {
    grid-area: title;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.35rem;
    transition: color 0.15s;
}
.lp-service-list p { grid-area: body; font-size: 0.98rem; color: var(--slate); line-height: 1.6; margin: 0; max-width: 44rem; }
.lp-service-go {
    grid-area: go;
    align-self: center;
    color: var(--teal-light);
    font-size: 0.85rem;
    transition: transform 0.2s, color 0.2s;
}
.lp-service-list a:hover h3 { color: var(--teal); }
.lp-service-list a:hover .lp-service-go { transform: translateX(4px); color: var(--teal); }

/* ---------------------------------------------------------
   Recent work - open cards, single accent dot
   --------------------------------------------------------- */
.lp-work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 4vw, 2.75rem);
}
.lp-project {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.4rem;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(20,49,44,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.lp-project:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,49,44,0.1); }
.lp-project-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lp-project-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--teal)); flex-shrink: 0; }
.lp-project h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0; }
.lp-project p { font-size: 0.95rem; color: var(--slate); line-height: 1.6; margin: 0; flex: 1; }
.lp-project-go {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.lp-project:hover .lp-project-go i { transform: translateX(3px); }
.lp-project-go i { font-size: 0.7rem; transition: transform 0.2s; }

/* ---------------------------------------------------------
   AI section - the one dark moment.
   Colours default to dark-on-light and cross-fade to
   light-on-dark once body.ai-dark is set by app.js.
   --------------------------------------------------------- */
.lp-ai { min-height: 60vh; display: flex; align-items: center; }
.lp-ai-inner { max-width: 44rem; }
.lp-ai h2 {
    font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1.25rem;
    color: var(--ink); transition: color 0.5s ease;
}
.lp-ai p {
    font-size: 1.08rem; line-height: 1.75; margin-bottom: 1.1rem;
    color: var(--slate); transition: color 0.5s ease;
}
.lp-ai-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1.75rem; }
.lp-ai-tags span {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0.35rem 0.75rem;
    box-shadow: inset 0 0 0 1px rgba(0,64,57,0.25);
    border-radius: 2px;
    transition: color 0.5s ease, box-shadow 0.5s ease;
}

body.on-dark .lp-ai h2 { color: #fff; }
body.on-dark .lp-ai p { color: rgba(255,255,255,0.78); }
body.on-dark .lp-ai-tags span { color: rgba(255,255,255,0.85); box-shadow: inset 0 0 0 1px rgba(253,204,44,0.35); }
body.on-dark .lp-ai .btn-teal { background: var(--yellow); color: var(--ink); }
body.on-dark .lp-ai .btn-teal:hover { background: #ffd851; }

/* ---------------------------------------------------------
   CTA - the dark finale where the bulb lights up
   --------------------------------------------------------- */
.lp-cta {
    position: relative;
    text-align: center;
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.lp-cta-inner { max-width: 36rem; margin: 0 auto; position: relative; z-index: 1; }
.lp-cta h2 { font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.9rem; transition: color 0.5s ease; }
.lp-cta p { font-size: 1.1rem; color: var(--slate); line-height: 1.65; margin-bottom: 1.75rem; transition: color 0.5s ease; }
.lp-cta .btn-teal { background: var(--teal-dark); color: #fff; }
.lp-cta .btn-teal:hover { background: var(--yellow); color: var(--teal-dark); }

body.on-dark .lp-cta h2 { color: #fff; }
body.on-dark .lp-cta p { color: rgba(255,255,255,0.8); }
body.on-dark .lp-cta .btn-teal { background: var(--yellow); color: var(--teal-dark); }
body.on-dark .lp-cta .btn-teal:hover { background: #ffd851; }

/* Single-line lightbulb above the CTA copy; lights up yellow on arrival */
.cta-bulb {
    width: clamp(110px, 16vw, 168px);
    margin-bottom: clamp(1rem, 3vh, 1.75rem);
    opacity: 0;
    pointer-events: none;
}
.cta-bulb svg { width: 100%; height: auto; overflow: visible; display: block; }

/* glass + base: outline */
.cta-bulb .cb-outline path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.7s ease, filter 0.7s ease;
}
/* the cog logo as the filament: filled */
.cta-bulb .cb-mark {
    fill: rgba(255, 255, 255, 0.22);
    transition: fill 0.7s ease, filter 0.7s ease;
}
.cta-bulb .cb-mark path { stroke: none; }

body.cta-lit .cta-bulb .cb-outline path {
    stroke: var(--yellow);
    filter: drop-shadow(0 0 14px rgba(253, 204, 44, 0.6));
}
body.cta-lit .cta-bulb .cb-mark {
    fill: var(--yellow);
    filter: drop-shadow(0 0 10px rgba(253, 204, 44, 0.8));
}

/* ---------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.05s; }
.reveal:nth-child(3) { transition-delay: 0.1s; }
.reveal:nth-child(4) { transition-delay: 0.15s; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 780px) {
    .lp-scenarios { grid-template-columns: 1fr; gap: 2rem; }
    .lp-work-grid { grid-template-columns: 1fr; }
    .lp-service-list a { grid-template-columns: 1fr; grid-template-areas: "title" "body" "go"; }

    /* Bare arrow does not read as tappable on touch: make it a pill button */
    .lp-service-go {
        justify-self: start;
        align-self: start;
        margin-top: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 1.15rem;
        border-radius: 999px;
        background: var(--teal-dark);
        color: #fff;
        font-family: var(--mono);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.09em;
    }
    .lp-service-go::before { content: "Learn more"; }
    .lp-service-list a:active .lp-service-go { background: var(--teal); }
    .lp-service-list a:hover .lp-service-go { transform: none; color: #fff; }
}

/* Below the left-margin width there is nowhere clean to put the bulb, and
   there is no hover on touch anyway, so hide it. */
@media (max-width: 940px) {
    .lp-bulb { display: none; }
}

/* ---------------------------------------------------------
   Reduced motion: show everything, no fades or drifting
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nav, .lp-bulb { transition: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .to-top { transition: none; }
    .lp-bulb { transform: none; }
    /* The AI dark fade still runs (slow colour change tied to scroll, not
       vestibular motion); its opacity/colour transitions just complete faster. */
    .ambient-dark { transition: opacity 0.15s linear; }
    .lp-ai h2, .lp-ai p, .lp-ai-tags span, .lp-cta h2, .lp-cta p,
    .cta-bulb .cb-outline path, .cta-bulb .cb-mark { transition: none; }
}