/* ===========================================================================
 * nsenterpriseapps.com — NS Enterprise Apps
 *
 * Palette and rhythm are carried over from the Squarespace original (cream
 * field, rust hero, Work Sans headings) so the move is not a visual break for
 * anyone who already knows the site. The typographic detailing — serif display,
 * monospace section labels, rust rules — follows Dean's resume, which is the
 * house style the brand already uses in print.
 * ======================================================================== */

:root {
    --cream:        #EBEADF;   /* body field, sampled from the live site */
    --cream-warm:   #F4F1E8;
    --ink:          #14120E;
    --ink-soft:     #46423A;
    --ink-mute:     #6E685C;
    --rust:         #B4462A;   /* resume accent + hero ground */
    --rust-deep:    #8C3520;
    --gold:         #E3B072;   /* hero headline */
    --rule:         rgba(20, 18, 14, 0.18);
    --rule-soft:    rgba(20, 18, 14, 0.10);

    --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --wrap: 1180px;
    --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

a { color: inherit; }

/* ---- header ------------------------------------------------------------ */
.site-head {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--pad);
}
.site-head img { height: 46px; width: auto; display: block; }
.site-head nav a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 4px;
    transition: background-color .18s ease;
}
.site-head nav a:hover { background: rgba(255,255,255,0.14); }

/* ---- hero -------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background: linear-gradient(148deg, #C2542F 0%, var(--rust) 42%, #96381F 100%);
    overflow: hidden;
}
/* Slow drifting dune bands, echoing the motion on the current site. Two
   layers at different speeds and angles so the movement never visibly loops.
   Purely decorative, sits under the content, and stops entirely for anyone
   who has asked their OS to reduce motion. */
.hero::before {
    content: "";
    position: absolute;
    inset: -30% -20%;
    background:
        repeating-linear-gradient(166deg,
            rgba(255,196,138,.00) 0px,
            rgba(255,196,138,.075) 42px,
            rgba(88,26,12,.10) 96px,
            rgba(255,196,138,.00) 150px),
        repeating-linear-gradient(188deg,
            rgba(255,255,255,.00) 0px,
            rgba(255,214,164,.055) 70px,
            rgba(70,20,8,.075) 150px,
            rgba(255,255,255,.00) 230px);
    will-change: transform;
    animation: dune-drift 46s linear infinite;
    pointer-events: none;
}
@keyframes dune-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06); }
    50%  { transform: translate3d(-3.5%, 2.2%, 0) rotate(.6deg) scale(1.12); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .hero::before { animation: none; }
}
.hero::after {
    /* soft grain so the banding reads as texture rather than stripes */
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 18% 0%, rgba(255,208,150,.16), transparent 58%);
    pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 64px; }
.hero h1 {
    margin: 0;
    max-width: 15ch;
    font-size: clamp(38px, 5.6vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--gold);
}

/* ---- section furniture ------------------------------------------------- */
section { padding: clamp(56px, 8vw, 104px) 0; }

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 14px;
}
h2.section-title {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
}
.lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 8px; }

/* ---- two-column capability grid --------------------------------------- */
.cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 6vw, 88px);
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* ---- accordion (matches the original's +/- disclosure rows) ------------ */
.acc { border-top: 1px solid var(--rule); margin-top: 26px; }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 2px;
    cursor: pointer;
    font-weight: 700;
    font-size: 17px;
    list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 20px;
    line-height: 1;
    color: var(--ink-soft);
    transition: transform .2s ease;
    flex: none;
}
.acc details[open] summary::after { content: "–"; }
.acc summary:hover { color: var(--rust); }
.acc .body {
    padding: 0 2px 22px;
    color: var(--ink-soft);
    font-size: 16px;
}
.acc .body p { margin: 0 0 10px; }
.acc .body ul { margin: 0; padding-left: 20px; }
.acc .body li { margin-bottom: 7px; }
.acc .body a { color: var(--rust); font-weight: 600; }

/* ---- platform chips ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 6px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-soft);
    background: rgba(255,255,255,.42);
}

/* ---- banner image ------------------------------------------------------ */
.banner { padding: 0; }
.banner img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }

/* ---- obstacles / value grid ------------------------------------------- */
.grid4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(22px, 3vw, 40px);
    margin-top: 40px;
}
@media (max-width: 980px) { .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.grid4 h3 {
    font-size: 18px; font-weight: 700; margin: 0 0 8px;
    padding-top: 16px; border-top: 2px solid var(--rust);
}
.grid4 p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* ---- CTA --------------------------------------------------------------- */
.cta { background: var(--ink); color: var(--cream-warm); }
.cta h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; font-weight: 700; }
.cta p { color: rgba(244,241,232,.72); margin: 0 0 26px; }
.btn {
    display: inline-block;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 3px;
    transition: background-color .18s ease, transform .18s ease;
}
.btn:hover { background: #F2C88C; transform: translateY(-1px); }

/* ---- footer ------------------------------------------------------------ */
.site-foot { background: var(--ink); color: rgba(244,241,232,.62); padding: 40px 0 56px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.site-foot .mark { font-family: var(--mono); letter-spacing: .16em; font-size: 12px; text-transform: uppercase; color: var(--cream-warm); }
.site-foot a { color: var(--gold); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot small { font-size: 12.5px; }

/* ---- contact page ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; margin-top: 36px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { border-top: 2px solid var(--rust); padding-top: 18px; }
.contact-card h3 { margin: 0 0 6px; font-size: 15px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.contact-card a, .contact-card p { font-size: 19px; font-weight: 600; text-decoration: none; margin: 0; }
.contact-card a:hover { color: var(--rust); }

/* ---- two-lane audience split ------------------------------------------- */
/* The site read enterprise-only, so a growing commerce brand assumed it was
   not for them. These two panels say plainly that both are welcome, before
   the reader reaches the platform detail. */
.lanes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: clamp(20px, 3vw, 34px);
    margin-top: 44px;
}
@media (max-width: 860px) { .lanes { grid-template-columns: 1fr; } }
.lane {
    background: rgba(255,255,255,.5);
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--rust);
    border-radius: 3px;
    padding: clamp(22px, 3vw, 32px);
}
.lane-tag {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 12px;
}
.lane h3 {
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.25;
    margin: 0 0 14px;
    font-weight: 700;
}
.lane p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 12px; }
.lane p:last-child { margin-bottom: 0; }

/* ---- brand mark --------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img {
    height: 54px; width: auto; display: block;
    /* The mark is olive on a rust hero — close in value, so it sinks without
       help. A soft dark drop shadow separates it without recolouring it. */
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.brand span {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
@media (max-width: 520px) { .brand span { display: none; } }

/* ---- deployment targets ------------------------------------------------- */
.ship { background: var(--cream-warm); }
.ship-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-top: 40px;
}
@media (max-width: 1080px) { .ship-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px)  { .ship-grid { grid-template-columns: 1fr; } }
.ship-card {
    background: #fff;
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    padding: clamp(20px, 2.4vw, 26px);
    display: flex;
    flex-direction: column;
}
.ship-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rust);
    margin: 0 0 10px;
}
.ship-card h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}
.ship-card > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }
.ship-card .chips { margin-top: auto; }
.ship-card .chip { background: var(--cream); font-size: 11px; padding: 5px 9px; }

/* ---- split hero: message left, proof right ------------------------------
 * The client logos are the strongest asset on the page, so they sit beside
 * the headline rather than 3,000px down it. Below 900px the panels stack —
 * copy first, logos immediately after, still above the fold on a phone.
 * ---------------------------------------------------------------------- */
.hero.split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    gap: 0;
    min-height: min(74vh, 620px);
}
.split-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(56px, 7vw, 92px) clamp(24px, 4vw, 56px) clamp(56px, 7vw, 92px) var(--pad);
}
.split-left h1 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.02em;
    color: var(--gold);
}
.hero-sub {
    margin: 20px 0 0;
    max-width: 46ch;
    color: rgba(255,255,255,.90);
    font-size: clamp(15px, 1.5vw, 17.5px);
    line-height: 1.55;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.hero-btn { margin-top: 28px; align-self: flex-start; }

.split-right {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4vw, 52px) var(--pad) clamp(30px, 4vw, 52px) clamp(24px, 4vw, 56px);
    background: #1E211A;   /* deep olive — picks up the eagle, makes cards pop */
    border-left: 1px solid rgba(255,255,255,.08);
}
.split-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin: 0 0 18px;
}
.logo-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 12px);
}
.lw {
    margin: 0;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
    background: #fff;
    border-radius: 4px;
    padding: 10px 12px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.lw img {
    /* Every source file is now the same canvas with the same ink area inside
       it (see assets/clients — normalized by area, not by width or height),
       so the mark needs no fitting here: one width, one ratio, equal weight. */
    width: 100%;
    height: auto;
    display: block;
}
.lw-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.005em;
}
.lw-ind {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: center;
    line-height: 1;
}
.split-more {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.66);
}

@media (max-width: 900px) {
    .hero.split { grid-template-columns: 1fr; min-height: 0; }
    .split-right {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.14);
        padding-top: clamp(24px, 5vw, 34px);
    }
    .split-left { padding-bottom: clamp(30px, 6vw, 44px); }
    .logo-wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 460px) {
    .logo-wall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

/* Shorter banner band now that the hero carries the visual weight */
.banner img { height: clamp(180px, 24vw, 300px); }

/* The header is absolutely positioned over the hero, so the hero's top
   padding has to clear it. At narrow widths the clamp bottomed out below the
   header's own height and the headline rode up under the eagle mark. */
@media (max-width: 900px) {
    .split-left { padding-top: 104px; }
}
@media (max-width: 520px) {
    .site-head { padding: 14px var(--pad); }
    .brand img { height: 44px; }
    .split-left { padding-top: 92px; }
}

/* ---- partner / subcontracting wall -------------------------------------- */
.split-tag.sub { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); }
.partner-wall {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: clamp(6px, .8vw, 10px);
}
@media (max-width: 1100px) { .partner-wall { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 460px)  { .partner-wall { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pw {
    background: #fff;
    border-radius: 4px;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw { text-decoration: none; flex-direction: column; gap: 5px; transition: transform .16s ease, box-shadow .16s ease; }
.pw img { width: 100%; height: auto; display: block; }
.pw .lw-name { font-size: 10.5px; }
a.lw:hover, a.pw:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
/* Hive Brands has no live site of its own any more, so its tile is a
   plain div — no lift, since nothing happens on click. */
div.lw { cursor: default; }
.lw:focus-visible, .pw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- two-panel band: content left, offer right -------------------------
 * On a wide screen a single centred column leaves large dead margins. This
 * puts a secondary panel in that space and collapses to one column when the
 * width is no longer there to spend.
 * ---------------------------------------------------------------------- */
.duo-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
@media (max-width: 1024px) { .duo-wrap { grid-template-columns: 1fr; } }
.duo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 620px) { .duo-grid { grid-template-columns: 1fr; } }
.duo-side {
    background: var(--cream-warm);
    border: 1px solid var(--rule-soft);
    border-top: 3px solid var(--rust);
    border-radius: 4px;
    padding: clamp(22px, 2.6vw, 30px);
    position: sticky;
    top: 24px;
}
@media (max-width: 1024px) { .duo-side { position: static; } }
.duo-side-title { font-family: var(--serif); font-size: 24px; margin: 0 0 10px; font-weight: 700; }
.duo-side > p { color: var(--ink-soft); font-size: 15px; margin: 0 0 18px; }
.duo-list { list-style: none; margin: 0 0 22px; padding: 0; }
.duo-list li {
    border-top: 1px solid var(--rule-soft);
    padding: 14px 0;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.duo-list strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.duo-list a { color: var(--rust); font-weight: 600; text-decoration: none; }
.duo-btn { padding: 12px 22px; font-size: 15px; }