/* =====================================================================
   VOGUE-STYLE EDITORIAL THEME  ·  Luciana Salinero — Legal Mastery
   Override layer loaded after styles.css + vendor.css.
   Aesthetic: white editorial canvas, Didot-style serif display
   (Bodoni Moda), wide-tracked sans labels, full-bleed video hero.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600&display=swap");

:root {
    /* serif display face */
    --font-serif: "Cormorant Garamond", "Times New Roman", serif;

    /* editorial monochrome palette */
    --color-1        : #111111;
    --color-1-light  : #555555;
    --color-1-lighter: #888888;
    --color-1-dark   : #000000;
    --color-1-darker : #d8d4cc;

    --color-body  : #ffffff;
    --color-bg    : #ffffff;
    --color-border: #e7e3db;

    --color-text      : #3a3a3a;
    --color-text-dark : #0d0d0d;
    --color-text-light: #6e6e6e;

    /* buttons → solid black / outline-on-hover */
    --color-btn                   : #111111;
    --color-btn-text              : #ffffff;
    --color-btn-hover             : #ffffff;
    --color-btn-hover-text        : #111111;
    --color-btn-primary           : #111111;
    --color-btn-primary-text      : #ffffff;
    --color-btn-primary-hover     : #ffffff;
    --color-btn-primary-hover-text: #111111;
}

/* ---------------------------------------------------------------------
   Base canvas
   --------------------------------------------------------------------- */
body {
    background: var(--color-body);
    color: var(--color-text);
}

/* Serif display typography (Vogue/Didot vibe) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1,
.s-hero__content h1,
.item-title,
.folio-item__title {
    font-family: var(--font-serif);
    color: var(--color-text-dark);
    font-weight: 600;     /* Cormorant is light → bump for presence */
    letter-spacing: .005em;
}

.display-1 {
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.08;
}

/* Eyebrow labels: keep sans, ultra-tracked uppercase */
.section-title h3,
.s-contact__top .h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: .42em;
    color: var(--color-1);
}

/* big faint section index numbers */
.section-title::before {
    font-family: var(--font-serif);
    color: #000;
    opacity: .06;
}

/* tone down decorative dotted graphics for a cleaner editorial look */
.s-about::before { opacity: .06; }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
/* push the menu clear of the wordmark logo so they don't overlap */
.s-header__nav-wrap { padding-left: 28rem; }

.s-header__nav {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    letter-spacing: .3em;
    font-size: 1.05rem;
}
.s-header__nav a { color: rgba(255, 255, 255, .85); }
.s-header__nav a:hover,
.s-header__nav a:focus { color: #fff !important; }

/* logo: white over the dark video hero */
.s-header__logo img {
    filter: brightness(0) invert(1);
    transition: filter .4s ease;
}

/* sticky header → clean white bar with black text + hairline */
.s-header.sticky {
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
}
.s-header.sticky .s-header__logo img { filter: brightness(0); }
.s-header.sticky .s-header__nav a { color: #555 !important; }
.s-header.sticky .s-header__nav a:hover,
.s-header.sticky .s-header__nav a:focus { color: #000 !important; }

/* ---------------------------------------------------------------------
   Buttons — editorial outline / solid black
   --------------------------------------------------------------------- */
.btn, button,
input[type="submit"], input[type="reset"], input[type="button"] {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    letter-spacing: .32em;
    border-radius: 0;
}
.btn:hover, .btn:focus,
button:hover, button:focus {
    border-color: #111 !important;
}
/* header CTA stays visible over the dark hero */
.s-header:not(.sticky) .s-header__content .btn {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.s-header:not(.sticky) .s-header__content .btn:hover,
.s-header:not(.sticky) .s-header__content .btn:focus {
    background: #fff;
    border-color: #fff;
    color: #111;
}
.s-header:not(.sticky) .s-header__content .btn svg path { fill: #fff; }
.s-header:not(.sticky) .s-header__content .btn:hover svg path,
.s-header:not(.sticky) .s-header__content .btn:focus svg path { fill: #111; }

/* ---------------------------------------------------------------------
   HERO — full-bleed video background
   --------------------------------------------------------------------- */
.s-hero { background-color: #0a0a0a; }

.s-hero__bg {
    left: 0;                 /* full width (was 36.5vw) */
    right: 0;
}

.s-hero__video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* richer cinematic vignette so the white text reads */
.s-hero__bg .gradient-overlay {
    z-index: 1;
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .25) 35%,
        rgba(0, 0, 0, .35) 70%,
        rgba(0, 0, 0, .65) 100%);
}

/* center the hero content, editorial style */
.s-hero__content {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
}
.s-hero__content .column { width: 100%; }

.s-hero__content h1 {
    font-family: var(--font-serif);
    color: #ffffff;
    font-weight: 600;
    font-size: clamp(3.4rem, 6.5vw, 8.5rem);
    letter-spacing: .04em;
    line-height: 1.04;
    text-transform: uppercase;
    white-space: nowrap;       /* keep "LEGAL MASTERY" on one elegant line */
    max-width: 100%;
}

/* on small screens allow it to wrap instead of overflowing */
@media screen and (max-width: 700px) {
    .s-hero__content h1 {
        white-space: normal;
        font-size: clamp(3rem, 11vw, 5rem);
    }
}
.s-hero__content h1::before { display: none; }   /* hide dots graphic */

.s-hero__content-about {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    padding-left: 0;
    font-size: clamp(1.9rem, 2.6vw, 3rem);
    margin-top: 2.2rem;
}
.s-hero__content-about::before {
    left: 50%;
    transform: translateX(-50%);
    top: -1.4rem;
    width: 4rem;
    background-color: rgba(255, 255, 255, .5);
}
.s-hero__content-social a { color: rgba(255, 255, 255, .85); }
.s-hero__content-social a:hover { color: #fff; }

.s-hero__scroll a {
    color: rgba(255, 255, 255, .85);
    font-family: "Montserrat", sans-serif;
    letter-spacing: .3em;
}

/* ---------------------------------------------------------------------
   About photo border accent
   --------------------------------------------------------------------- */
.s-about .horizontal-line::before { background-color: #d8d4cc; }

/* ---------------------------------------------------------------------
   Portfolio / Academia cards — editorial captions
   --------------------------------------------------------------------- */
.folio-item__cat {
    font-family: "Montserrat", sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--color-1-lighter);
}
.folio-item__title { font-weight: 500; }

/* process step number badges → outlined, monochrome */
.s-about__process h3::before {
    background-color: #111;
    color: #fff;
}

/* ---------------------------------------------------------------------
   Contact — dark section, so everything inside goes white
   --------------------------------------------------------------------- */
.s-contact__top .h6 {
    color: rgba(255, 255, 255, .65);
}

.s-contact__top .display-1,
.s-contact__top h1 {
    color: #ffffff;
}

/* white logo art on transparent bg — no filter needed */
.s-contact__logo img { max-width: 220px; }


/* =====================================================================
   SCROLL-DRIVEN HERO (video scrubs on scroll)
   ===================================================================== */
.s-scrollhero {
    position: relative;
    height: 500vh;            /* length of the scroll "track" */
    background: #000;
}
.s-scrollhero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.s-scrollhero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    background: #000;
}
.s-scrollhero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.22) 40%,
        rgba(0,0,0,.30) 65%,
        rgba(0,0,0,.60) 100%);
}

/* text panels */
.s-scrollhero__panels {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sh-panel {
    position: absolute;
    width: min(92vw, 1040px);
    text-align: center;
    color: #fff;
    padding: 0 2rem;
    will-change: transform, opacity;
    opacity: 0;                 /* JS reveals these; fallback below keeps intro visible */
}
.sh-panel--intro { opacity: 1; }
.sh-panel__eyebrow {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .45em;
    font-size: 1.2rem;
    margin-bottom: 1.8rem;
    color: rgba(255,255,255,.85);
}
.sh-panel__title {
    font-family: var(--font-serif);
    color: #fff;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: .035em;
    margin: 0;
    text-transform: uppercase;
    font-size: clamp(3rem, 6vw, 6.8rem);   /* default (h2 panels) */
}
.sh-panel--intro .sh-panel__title {
    font-size: clamp(3.8rem, 8.5vw, 9.5rem);
}
.sh-panel__sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.7rem, 2.4vw, 2.8rem);
    color: rgba(255,255,255,.92);
    margin-top: 1.8rem;
    margin-bottom: 0;
}

/* scroll hint */
.s-scrollhero__scroll {
    position: absolute;
    left: 50%;
    bottom: 3.4rem;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,.8);
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: .4em;
    font-size: 1.05rem;
    animation: shBob 2s ease-in-out infinite;
}
@keyframes shBob {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .8; }
    50%      { transform: translateX(-50%) translateY(8px); opacity: .35; }
}

/* ---------------------------------------------------------------------
   Header: transparent over the cinematic hero, white bar afterwards
   --------------------------------------------------------------------- */
.s-header.sticky {
    background: transparent;
    border-bottom-color: transparent;
}
.s-header.sticky .s-header__logo img { filter: brightness(0) invert(1); }
.s-header.sticky .s-header__nav a { color: rgba(255,255,255,.85) !important; }
.s-header.sticky .s-header__nav a:hover,
.s-header.sticky .s-header__nav a:focus { color: #fff !important; }

body.past-hero .s-header.sticky {
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
}
body.past-hero .s-header.sticky .s-header__logo img { filter: brightness(0); }
body.past-hero .s-header.sticky .s-header__nav a { color: #555 !important; }
body.past-hero .s-header.sticky .s-header__nav a:hover,
body.past-hero .s-header.sticky .s-header__nav a:focus { color: #000 !important; }

@media screen and (max-width: 700px) {
    .s-scrollhero { height: 420vh; }
}