/* ===========================================================
   OCRadar
   Full-bleed bands, serif display, no cards.
   =========================================================== */

:root {
    --black:   #0a0a0a;
    --near:    #131313;
    /* One paper tone only. Sections are separated by rules and space,
       never by a second shade of off-white. */
    --cream:   #f4f1ea;
    --ink:     #14130f;
    --ink-2:   #45413a;
    --ink-3:   #6b655b;

    --on-dark:   #f6f3ec;
    --on-dark-2: rgba(246, 243, 236, 0.88);
    --on-dark-3: rgba(246, 243, 236, 0.66);

    --hair:      #ddd7ca;
    --hair-dark: rgba(246, 243, 236, 0.16);

    /* Merriweather has real weights, so headings use Light 300 at display
       size; its large x-height and sturdy strokes read heavy at 400. */
    --serif: "Merriweather", Georgia, "Times New Roman", serif;
    --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --edge: clamp(1.5rem, 5vw, 4.5rem);
    --max:  1440px;
    --nav:  76px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

::selection { background: rgba(20, 19, 15, 0.14); }

main { flex: 1; }

/* Full-bleed band; content held to a wide measure inside it */
.band { width: 100%; }
.band-dark  { background: var(--black); color: var(--on-dark); }
.band-near  { background: var(--near);  color: var(--on-dark); }
.band-cream { background: var(--cream); }

.inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--edge);
}

/* ---------- Type ---------- */
/* Merriweather is wide with a large x-height, so it needs tighter
   tracking and smaller sizes than a narrower face to sit the same. */
.display {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.021em;
    text-wrap: balance;
}
.d-1 { font-size: clamp(2.7rem, 6.1vw, 5.3rem); }
.d-2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.d-3 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }

/* Sentence case, natural tracking. No small-caps label treatment. */
.eyebrow {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ink-2);
}
/* .hero is listed explicitly: it is a dark surface but not a .band-dark,
   so without this its text falls back to the dark-on-cream ink and turns
   into unreadable grey. */
.band-dark .eyebrow,
.band-near .eyebrow,
.hero .eyebrow { color: var(--on-dark-2); }

.body-lg {
    font-size: clamp(1.02rem, 1.25vw, 1.14rem);
    line-height: 1.62;
    color: var(--ink-2);
    max-width: 46ch;
}
.band-dark .body-lg,
.band-near .body-lg,
.hero .body-lg { color: var(--on-dark-2); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.92rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 0.93rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.btn svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    transition: transform 0.22s ease;
}
.btn:hover svg { transform: translateX(3px); }

.btn-light { background: var(--on-dark); color: var(--black); }
.btn-light:hover { background: #fff; }
.btn-dark  { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #000; }
.btn-line-light { border-color: rgba(246,243,236,.42); color: var(--on-dark); }
.btn-line-light:hover { background: rgba(246,243,236,.1); border-color: var(--on-dark); }
.btn-line-dark { border-color: var(--hair); color: var(--ink); }
.btn-line-dark:hover { border-color: var(--ink); }

/* ---------- Nav ---------- */
.nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 40;
}
.nav.solid {
    position: sticky;
    background: var(--cream);
    border-bottom: 1px solid var(--hair);
}
.nav-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: var(--nav);
}
.word {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}
.word img { width: 25px; height: 25px; }

.links { display: flex; align-items: center; gap: 2.4rem; }
.links ul { display: flex; align-items: center; gap: 2.4rem; list-style: none; }
.links a {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.78;
    transition: opacity 0.2s ease;
}
.links a:hover, .links a[aria-current="page"] { opacity: 1; }
.links a.btn { opacity: 1; padding: 0.62rem 1.15rem; font-size: 0.86rem; }

.nav-over { color: var(--on-dark); }

.tog {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 10px 8px;
    cursor: pointer;
}
.tog i {
    display: block; height: 1px;
    background: currentColor;
    transition: transform .28s ease, opacity .28s ease;
}
.tog[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tog[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.tog[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero: cinematic, edge to edge ---------- */
/* The hero is deliberately NOT the .inner element. An absolutely
   positioned child of a grid container is confined to its grid area, so
   when the hero was itself the grid the press strip got trapped inside a
   single column instead of spanning the viewport. The grid now lives in a
   wrapper, leaving the hero free to host full-bleed children. */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: var(--nav);
    overflow: clip;
    background: var(--black);
    color: var(--on-dark);
}
/* Takes the remaining height and centres within it, which leaves the
   press strip as the last flow child sitting on the hero's bottom edge.
   Absolute positioning was fragile here and left the strip stranded
   mid-band with dead space under it. */
.hero-grid {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}
.hero-art {
    position: absolute;
    inset: 0;
    background: url("../img/3dbackground.jpg") center / cover no-repeat;
}
/* Scrim weighted to the left so the headline always clears the art */
.hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.6) 38%, rgba(10,10,10,.12) 70%),
        linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,.72) 100%);
}
.hero-copy { position: relative; z-index: 2; }
/* Slightly held back from the headline without dropping to unreadable. */
.hero-copy .body-lg {
    margin-top: 1.7rem;
    color: rgba(246, 243, 236, 0.76);
}
.hero-copy .btn { margin-top: 2.6rem; }

/* 3D mark, right side */
.mark {
    position: relative;
    z-index: 2;
    justify-self: center;
    width: min(38vw, 420px);
    aspect-ratio: 1;
    perspective: 1400px;
}
.mark-tilt {
    position: absolute; inset: 0;
    transform: rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    animation: hover 8s ease-in-out infinite;
    will-change: transform;
}
/* --- Lighting ---------------------------------------------------------
   One key light from the upper RIGHT, matching the bright sweep in the
   background art. Everything below follows from that single decision:
   shadows fall down and to the LEFT, and they soften and fade as they
   travel away from the object. */

/* Shading on the model itself. drop-shadow() traces the rendered
   silhouette, so short offsets away from the key light darken the edges
   turned from it. Kept tight on purpose: no glow, and no long throw that
   would read as a shadow sitting behind the object. */
.mark spline-viewer,
.mark-still {
    filter:
        drop-shadow(-1px 1px 1px rgba(0, 0, 0, .6))
        drop-shadow(-2px 3px 3px rgba(0, 0, 0, .42))
        drop-shadow(-4px 5px 6px rgba(0, 0, 0, .26));
}

.mark spline-viewer {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}
.mark.live spline-viewer { opacity: 1; }
.mark-still {
    position: absolute; inset: 0; margin: auto;
    width: 52%; height: fit-content;
    transition: opacity .7s ease;
}
.mark.live .mark-still { opacity: 0; }

@keyframes hover  { 0%,100% { translate: 0 0; }         50% { translate: 0 -13px; } } 50% { scale: .86 .88; opacity: .5; } } 50% { scale: .8 .85; opacity: .45; } }

/* Press row pinned to the bottom of the hero, full width */
.press {
    position: relative;
    z-index: 3;
    width: 100%;
    border-top: 1px solid var(--hair-dark);
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 40%);
}
/* Centred column: label over a centred logo row, so the label no longer
   hangs off the left edge with a gap before the logos. */
.press-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding-block: 1.9rem;
}
/* The strip sits on the dark hero but is not inside a .band-dark, so the
   label needs its own light colour or it renders dark-on-dark. */
.press .eyebrow {
    color: var(--on-dark);
    opacity: .82;
    font-size: 0.95rem;
    text-align: center;
}
.press ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Sized so all five sit on one row at every width rather than
       orphaning the last logo onto a second line. */
    gap: clamp(1.75rem, 4vw, 4rem);
    list-style: none;
}
.press img {
    height: clamp(34px, 4.2vw, 56px);
    width: auto;
    object-fit: contain;
    opacity: .85;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s cubic-bezier(.22,1,.36,1);
}
/* These logos are near-white on near-black, so lifting opacity to full made
   them bloom and read as washing out rather than as a response. The hover is
   a restrained lift of the single logo instead; transform leaves the row's
   layout untouched, so the other four stay put. */
.press a:hover img, .press a:focus-visible img {
    transform: scale(1.08);
    opacity: .95;
}

/* ---------- Sections ---------- */
.sec { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }
.sec-sm { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* Labels sit directly above their content. A wide left rail stranded
   these short labels in empty space and made them read as tacked on. */
.eyebrow { display: block; }
.rule-top { border-top: 1px solid var(--hair); }
.band-dark .rule-top, .band-near .rule-top { border-top-color: var(--hair-dark); }

/* Centred block: the statement and its paragraph share a centre axis
   rather than hugging the left edge. */
.lede-pair {
    text-align: center;
    margin-inline: auto;
    max-width: 46rem;
}
.statement {
    max-width: 20ch;
    margin-inline: auto;
    margin-bottom: 1.5rem;
}
.lede-pair .body-lg { max-width: 56ch; margin-inline: auto; }

.points { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Point rows: hairlines and space, not boxes */
.points { display: grid; }
.point {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 6vw, 5rem);
    align-items: baseline;
    padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
    border-top: 1px solid var(--hair);
}
.point:last-child { border-bottom: 1px solid var(--hair); }
.band-dark .point, .band-dark .point:last-child { border-color: var(--hair-dark); }
.point h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
    letter-spacing: -0.016em;
    line-height: 1.3;
}
.point p { color: var(--ink-2); max-width: 52ch; }
.band-dark .point p { color: var(--on-dark-2); }

/* ---------- Page head ---------- */
.head {
    padding-top: clamp(4rem, 8vw, 6.5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}
.head .eyebrow { display: block; margin-bottom: 1.3rem; }
.head .body-lg { margin-top: 1.6rem; }

/* ---------- About ---------- */
.about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
}
.about .body-lg { margin-top: 1.7rem; }
.about .actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

.device { justify-self: center; text-align: center; }
.device-shot {
    width: clamp(200px, 22vw, 268px);
    margin-inline: auto;
    filter: drop-shadow(0 34px 60px rgba(20,19,15,.28));
}
.device-shot img { width: 100%; height: auto; transition: transform .3s ease, opacity .3s ease; }
.device-ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 2rem;
}
.step {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--hair);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .22s ease, background-color .22s ease;
}
.step:hover { border-color: var(--ink); }
.step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.count { font-size: 0.82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Team ---------- */
.roster { display: grid; }
.member {
    display: grid;
    /* Wider left rail than other rows: the role titles are long */
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
    border-top: 1px solid var(--hair);
    align-items: start;
}
.member:last-child { border-bottom: 1px solid var(--hair); }
.who { display: flex; align-items: center; gap: 1.1rem; }
.who img {
    width: 68px; height: 68px; flex: none;
    border-radius: 50%;
    object-fit: cover;
}
.who h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.95vw, 1.6rem);
    letter-spacing: -0.016em;
    line-height: 1.3;
}
.who .role {
    margin-top: 0.45rem;
    font-size: 0.88rem;
    color: var(--ink-3);
    line-height: 1.5;
}
.member .bio { color: var(--ink-2); max-width: 60ch; }

/* ---------- Contact ---------- */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: start;
    padding-bottom: clamp(4rem, 9vw, 7rem);
}
.note { border-top: 1px solid var(--hair); padding-top: 1.4rem; margin-top: 1.8rem; }
.note:first-child { margin-top: 0; }
.note h2 { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 0.4rem; }
.note p { color: var(--ink-2); font-size: 0.96rem; }
.note a { border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.note a:hover { border-color: var(--ink); }

.f { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.9rem; }
.f label {
    font-size: 0.88rem;
    color: var(--ink-3);
}
.f input, .f textarea {
    font-family: var(--sans);
    font-size: 1.02rem;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 0.65rem 0;
    transition: border-color .22s ease;
}
.f textarea { resize: vertical; min-height: 96px; }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f input:focus, .f textarea:focus { outline: none; border-bottom-color: var(--ink); }
.hint { margin-top: 1rem; font-size: 0.82rem; color: var(--ink-3); }

/* ---------- Legal ---------- */
.legal { max-width: 64ch; padding-bottom: clamp(4rem, 9vw, 7rem); }
.legal p { color: var(--ink-2); margin-bottom: 1rem; }
.legal a { border-bottom: 1px solid var(--hair); }
.legal a:hover { border-color: var(--ink); }

/* ---------- Footer ---------- */
.foot { background: var(--black); color: var(--on-dark); }
.foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    padding-block: clamp(3rem, 6vw, 4.5rem);
}
.foot-brand p { margin-top: 1rem; color: var(--on-dark-3); font-size: 0.9rem; max-width: 26ch; }
.foot h3 {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--on-dark-3);
    margin-bottom: 1.1rem;
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.foot ul a { color: var(--on-dark-2); font-size: 0.92rem; transition: color .2s ease; }
.foot ul a:hover { color: var(--on-dark); }
.foot-base {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; gap: 0.6rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--hair-dark);
    color: var(--on-dark-3);
    font-size: 0.82rem;
}

/* ---------- Motion ---------- */
html.js .up {
    opacity: 0;
    translate: 0 14px;
    transition: opacity .8s cubic-bezier(.22,1,.36,1), translate .8s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--d, 0s);
}
html.js .up.seen { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html.js .up { opacity: 1; translate: 0 0; }
    .press a:hover img, .press a:focus-visible img { transform: none; }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1000px) {
    /* The hero deliberately keeps its two columns down to 760px. Stacking
       it here while it was still locked to 100svh spread the copy and the
       mark to opposite ends of a very tall band with a void between. */
    .mark { width: min(34vw, 300px); }

    .point, .member {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .statement { max-width: none; }
    .about, .contact { grid-template-columns: 1fr; gap: 3rem; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .tog { display: flex; }
    .links {
        position: absolute;
        top: var(--nav);
        left: var(--edge); right: var(--edge);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.6rem;
        background: var(--cream);
        color: var(--ink);
        border: 1px solid var(--hair);
        opacity: 0;
        pointer-events: none;
        translate: 0 -6px;
        transition: opacity .25s ease, translate .25s ease;
    }
    .links.open { opacity: 1; pointer-events: auto; translate: 0 0; }
    .links ul { flex-direction: column; align-items: stretch; gap: 0; }
    .links ul a { display: block; padding: 0.85rem 0.9rem; opacity: 1; }
    .links a.btn { justify-content: center; margin-top: 0.5rem; }
    .links .btn-line-light { border-color: var(--hair); color: var(--ink); }
}

@media (max-width: 760px) {
    /* The hero stops being locked to the full viewport: forcing 100svh
       squeezed the mark and crushed the press strip onto the bottom edge.
       It now sizes to its content with real breathing room. */
    .hero {
        min-height: 0;
        padding-bottom: 0;
        text-align: left;
    }
    .hero-grid {
        flex: none;
        grid-template-columns: 1fr;
        gap: 0;
        padding-block: clamp(2rem, 7vh, 3.5rem) clamp(1.5rem, 4vh, 2.5rem);
    }
    .hero-art::after {
        background:
            linear-gradient(180deg, rgba(10,10,10,.74) 0%, rgba(10,10,10,.46) 42%, rgba(10,10,10,.86) 100%);
    }
    .mark {
        width: min(64vw, 270px);
        margin-top: 2.25rem;
    }
    .press-in {
        padding-block: 1.6rem 1.9rem;
        gap: 0.95rem;
    }
    .press ul { gap: clamp(1.1rem, 5vw, 2rem); }
    .press img { height: clamp(26px, 6.5vw, 34px); }
}

@media (max-width: 560px) {
    .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .who { flex-direction: column; align-items: flex-start; }
}