/* ============================================================
   Editorial refinement layer — 2026-11
   ------------------------------------------------------------
   Inspired by the restraint of frontier legal-AI sites (Harvey):
   confident display type, generous vertical rhythm, and sections
   separated by SPACE and GROUND SHIFTS rather than hairline rules.

   The brand is unchanged — Paper, Ink, Evergreen, Switzer, Plex
   Mono all stay. What changes is scale, air, and hierarchy.

   Loaded after styles.css, so every rule here is a deliberate
   override. Delete this file to return to the previous design.
   ============================================================ */

/* ---------- 1. Display typography ---------------------------
   The old scale topped out at 3.5rem, which reads as "capable
   app" rather than "serious institution". Larger, tighter, with
   optical sizing so big text doesn't look loose.
   ------------------------------------------------------------ */

h1, h2, h3 {
    letter-spacing: -0.028em;
    line-height: 1.06;
    text-wrap: balance;
}

.hero h1 {
    font-size: clamp(2.625rem, 6.2vw, 4.5rem);
    max-width: 15ch;
    letter-spacing: -0.034em;
    line-height: 1.02;
    margin-bottom: 1.75rem;
}

.section h2,
.page-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    max-width: 22ch;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.thesis h2,
.final-cta h2 {
    font-size: clamp(2.125rem, 4.8vw, 3.5rem);
    letter-spacing: -0.03em;
}

/* Lead paragraphs carry more weight and air than body copy. */
.hero-description {
    font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
    line-height: 1.55;
    max-width: 46ch;
    margin-bottom: 2.5rem;
}

.section-subtitle,
.page-hero-subtitle {
    font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
    line-height: 1.6;
}

/* ---------- 2. Vertical rhythm ------------------------------
   Premium pages are mostly empty. Roughly doubling section
   padding is the single largest contributor to that feeling.
   ------------------------------------------------------------ */

.hero { padding: 6rem 0 5rem; }
.section { padding: 7rem 0; }
.thesis { padding: 7.5rem 0; }
.final-cta { padding: 7.5rem 0; }

@media (max-width: 860px) {
    .hero { padding: 4.5rem 0 4rem; }
    .section { padding: 5rem 0; }
    .thesis,
    .final-cta { padding: 5.5rem 0; }
}

/* ---------- 3. Remove the hairline grid ---------------------
   A 1px rule between every section is the strongest "generated
   layout" tell: it bands the page into equal boxes. Separation
   now comes from whitespace, with the ground shifting between
   Paper and Vellum to mark movements.
   ------------------------------------------------------------ */

.hero,
.proof,
.section + .section,
.final-cta {
    border-top: 0;
    border-bottom: 0;
}

/* Alternate the ground instead. Vellum is barely perceptible as
   a color — it reads as a change of register, which is the point. */
.section:nth-of-type(even) {
    background: var(--vellum);
}

/* ---------- 4. Logo / proof bar -----------------------------
   Quieter and wider-tracked, the way institutional sites set
   their client rows.
   ------------------------------------------------------------ */

.proof { padding: 2.75rem 0; background: var(--paper); }
.proof-row span {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--subtle);
}

/* ---------- 5. Buttons --------------------------------------
   Larger tap targets and a calmer hover. Enterprise buttons are
   substantial but never loud.
   ------------------------------------------------------------ */

.btn {
    font-size: 0.9375rem;
    padding: 0.8125rem 1.5rem;
    border-radius: 4px;
    letter-spacing: -0.005em;
    transition: background-color 180ms ease, border-color 180ms ease,
                color 180ms ease, transform 180ms ease;
}

.btn-lg {
    font-size: 1rem;
    padding: 0.9375rem 1.75rem;
}

.btn-primary:hover { transform: translateY(-1px); }

/* ---------- 6. Navigation -----------------------------------
   Taller chrome and a stronger glass treatment. The header is
   already sticky with a .scrolled class applied by main.js —
   these refine it rather than re-implement it.
   ------------------------------------------------------------ */

.nav { height: 4.75rem; }

.header {
    background: rgba(250, 249, 246, 0.80);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.header.scrolled {
    background: rgba(250, 249, 246, 0.92);
}

.nav-link {
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
}

/* ---------- 7. The hero record ------------------------------
   The product visual is the most valuable element on the page.
   Lift it off the ground with a real shadow so it reads as an
   artifact rather than an outlined div.
   ------------------------------------------------------------ */

.record {
    border-color: var(--hairline);
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(20, 19, 16, 0.04),
        0 8px 24px -4px rgba(20, 19, 16, 0.07),
        0 24px 56px -12px rgba(20, 19, 16, 0.10);
}

/* Slightly more air inside, so it doesn't feel densely packed. */
.record-ask { padding: 1.5rem 1.5rem 1.25rem; }
.record-ledger-head { padding-top: 1.125rem; padding-bottom: 1.125rem; }

/* ---------- 8. Meta labels ----------------------------------
   Wider tracking reads as considered rather than default.
   ------------------------------------------------------------ */

.meta,
.section-label {
    letter-spacing: 0.12em;
    font-size: 0.6875rem;
}

/* ---------- 9. Ink sections ---------------------------------
   Full-bleed dark passages are the strongest rhythm device on
   the page; give them room and keep them pure.
   ------------------------------------------------------------ */

.thesis { background: var(--ink-bg); }
.thesis h2 { max-width: 20ch; }
.thesis p { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6; }

/* An even-numbered section landing next to the ink band would
   fight it; keep the ground neutral around dark passages. */
.thesis + .section,
.section:has(+ .thesis) {
    background: var(--paper);
}

/* ---------- 10. Final CTA -----------------------------------
   Centered, large, and quiet — the close of a document.
   ------------------------------------------------------------ */

.final-cta { background: var(--vellum); }
.final-cta h2 { max-width: 18ch; }

/* ---------- 11. Motion --------------------------------------
   A single restrained entrance. Nothing bounces, nothing slides
   far; elements settle. Respects reduced-motion.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
    }
    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 12. Navigation layout ---------------------------
   The nav was three loose groups in a row; these give it a
   deliberate structure: links centered as their own cluster,
   brand and actions anchoring the ends.
   ------------------------------------------------------------ */

/* Three-part grid so the link cluster is centered against the
   container, not pushed around by the width of the logo or the
   action buttons. */
@media (min-width: 860px) {
    .nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1.5rem;
    }
    .nav-links {
        justify-content: center;
        gap: 0.25rem;
    }
    .nav-actions { justify-self: end; }
}

/* Links become hit-areas rather than bare text, so hover reads as
   a target and the row gains rhythm. */
.nav-link,
.nav-group-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    transition: background-color 160ms ease, color 160ms ease;
}
.nav-link:hover,
.nav-group-btn:hover { background: var(--vellum); color: var(--ink); }

/* The active page should be unmistakable. */
.nav-link.active {
    color: var(--ink);
    font-weight: 500;
    background: var(--vellum);
}

/* ---------- 13. Dropdown panels -----------------------------
   Seven practice areas in a single column made a tall, narrow
   list that overflowed small laptops. Two columns, wider panel,
   and a real entrance.
   ------------------------------------------------------------ */

.nav-dropdown-panel {
    padding: 0.625rem;
    border-radius: 10px;
    box-shadow:
        0 1px 2px rgba(20, 19, 16, 0.04),
        0 12px 32px -6px rgba(20, 19, 16, 0.12),
        0 28px 60px -12px rgba(20, 19, 16, 0.10);
}

/* Multi-column for the long menus. Applied by item count so the
   short Resources menu stays a single tidy column. */
.nav-dropdown-panel:has(> a:nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(13.5rem, 1fr));
    gap: 0.125rem 0.5rem;
    min-width: 29rem;
}

.nav-dropdown-panel a {
    padding: 0.625rem 0.75rem;
    line-height: 1.35;
}
.nav-dropdown-panel a span { margin-top: 0.125rem; }

/* Keep panels on screen near the right edge of the viewport. */
.nav-group:last-child .nav-dropdown {
    left: auto;
    right: 0;
    transform: none;
}

/* Visibility is declared OUTSIDE any motion query: a reduced-motion
   viewer must still get a fully opaque panel. (Scoping these inside
   prefers-reduced-motion left the wrapper at opacity 0 — the panel
   rendered as a transparent ghost over the hero.) */
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
}

/* A short settle, rather than appearing instantly. */
@media (prefers-reduced-motion: no-preference) {
    .nav-dropdown {
        transform: translateX(-50%) translateY(-4px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    }
    .nav-group:hover .nav-dropdown,
    .nav-group:focus-within .nav-dropdown,
    .nav-group.open .nav-dropdown {
        transform: translateX(-50%) translateY(0);
    }
    .nav-group:last-child .nav-dropdown { transform: translateY(-4px); }
    .nav-group:last-child:hover .nav-dropdown,
    .nav-group:last-child:focus-within .nav-dropdown,
    .nav-group:last-child.open .nav-dropdown { transform: translateY(0); }
}

/* ---------- 14. Footer layout -------------------------------
   Was: a 13-link "Solutions" column towering over 3-link
   neighbours, leaving a ragged void on the right. Now five
   balanced columns (Solutions split from Practice Areas) with
   the brand block given real width.
   ------------------------------------------------------------ */

.footer { padding: 5.5rem 0 2rem; }

.footer-grid {
    gap: 3rem 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .footer-grid {
        /* brand | platform | solutions | practice | company | apps */
        grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
        gap: 3rem 2rem;
    }
}

.footer-logo {
    display: block;
    height: 20px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 30ch;
}

.footer-links h4 {
    letter-spacing: 0.12em;
    margin-bottom: 1.125rem;
}

.footer-links a {
    margin-bottom: 0.75rem;
    transition: color 160ms ease;
}
.footer-links a:last-child { margin-bottom: 0; }

/* ---------- 15. Footer baseline -----------------------------
   A hairline and real spacing so the legal line reads as a
   colophon instead of floating loose.
   ------------------------------------------------------------ */

.footer-bottom {
    border-top: 1px solid var(--hairline-on-ink);
    padding-top: 1.75rem;
    gap: 1rem;
}

.footer-bottom p { font-size: 0.8125rem; }
.footer-bottom-links { gap: 1.75rem; }
.footer-bottom-links a { font-size: 0.8125rem; }