/* =========================================================

   LAW ⁰⁹ — BASE DESIGN

   ========================================================= */





/* =========================================================

   RESET

   ========================================================= */



*,

*::before,

*::after {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    background: #080808;

}



body {

    margin: 0;

    padding: 0;



    background: #080808;

    color: #f2f2f2;



    font-family:

        Arial,

        Helvetica,

        sans-serif;



    overflow-x: hidden;

}



body.menu-open {

    overflow: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

a {

    -webkit-tap-highlight-color: transparent;

}



button {

    font: inherit;

}



img,

svg {

    display: block;

}



svg {

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}





/* =========================================================

   VARIABLES

   ========================================================= */



:root {



    --black: #080808;

    --black-soft: #0d0d0d;

    --black-light: #121212;



    --white: #f2f2f2;

    --white-soft: #cfcfcf;

    --gray: #8b8b8b;

    --gray-dark: #444;



    --line: rgba(255, 255, 255, 0.12);

    --line-soft: rgba(255, 255, 255, 0.07);



    --container: 1440px;



    --ease:

        cubic-bezier(0.22, 1, 0.36, 1);



    --ease-fast:

        cubic-bezier(0.4, 0, 0.2, 1);

}





/* =========================================================

   PAGE

   ========================================================= */



.page {

    position: relative;

    min-height: 100vh;

    background: var(--black);

    overflow: clip;

}





/* =========================================================

   CONTAINER

   ========================================================= */



.container {

    width: min(

        calc(100% - 80px),

        var(--container)

    );



    margin-inline: auto;

}





/* =========================================================

   HEADER

   ========================================================= */



.site-header {

    position: fixed;



    top: 0;

    left: 0;



    width: 100%;



    z-index: 1000;



    background:

        linear-gradient(

            to bottom,

            rgba(8, 8, 8, 0.94),

            rgba(8, 8, 8, 0)

        );



    backdrop-filter: blur(10px);



    transition:

        background 0.4s ease,

        backdrop-filter 0.4s ease;

}



.site-header.scrolled {

    background: rgba(8, 8, 8, 0.86);

    backdrop-filter: blur(18px);

}



.header-inner {

    width: min(

        calc(100% - 80px),

        var(--container)

    );



    height: 92px;



    margin-inline: auto;



    display: flex;

    align-items: center;

    justify-content: space-between;

}





/* =========================================================

   BRAND

   ========================================================= */



.brand {

    display: inline-flex;

    align-items: flex-start;

    gap: 4px;



    color: var(--white);



    font-weight: 900;

    letter-spacing: -0.08em;



    line-height: 1;

}



.brand-name {

    font-size: 26px;

}



.brand-number {

    position: relative;

    top: -4px;



    font-size: 13px;



    letter-spacing: -0.04em;

}





/* =========================================================

   DESKTOP NAV

   ========================================================= */



.desktop-nav {

    display: flex;

    align-items: center;

    gap: 38px;

}



.desktop-nav a {

    position: relative;



    color: #a4a4a4;



    font-size: 11px;

    font-weight: 700;



    letter-spacing: 0.16em;

    text-transform: uppercase;



    transition:

        color 0.3s ease;

}



.desktop-nav a::after {

    content: "";



    position: absolute;



    left: 0;

    bottom: -8px;



    width: 0;

    height: 1px;



    background: var(--white);



    transition:

        width 0.35s var(--ease);

}



.desktop-nav a:hover {

    color: var(--white);

}



.desktop-nav a:hover::after {

    width: 100%;

}





/* =========================================================

   MENU BUTTON

   ========================================================= */



.menu-toggle {

    display: none;



    width: 46px;

    height: 46px;



    padding: 0;



    border: 1px solid var(--line);



    background: rgba(255, 255, 255, 0.02);



    color: var(--white);



    cursor: pointer;



    align-items: center;

    justify-content: center;



    flex-direction: column;

    gap: 7px;



    transition:

        background 0.3s ease,

        border-color 0.3s ease;

}



.menu-toggle span {

    display: block;



    width: 18px;

    height: 1px;



    background: currentColor;



    transition:

        transform 0.35s var(--ease),

        opacity 0.25s ease;

}



.menu-toggle:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.25);

}



.menu-toggle.active span:first-child {

    transform: translateY(4px) rotate(45deg);

}



.menu-toggle.active span:last-child {

    transform: translateY(-4px) rotate(-45deg);

}





/* =========================================================

   MOBILE MENU

   ========================================================= */



.mobile-menu {

    position: fixed;



    inset: 0;



    z-index: 900;



    background: rgba(8, 8, 8, 0.98);



    visibility: hidden;

    opacity: 0;



    pointer-events: none;



    transition:

        opacity 0.45s ease,

        visibility 0.45s ease;

}



.mobile-menu.active {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

}



.mobile-menu-inner {

    height: 100%;



    padding:

        140px

        40px

        60px;



    display: flex;

    flex-direction: column;

    justify-content: center;



    gap: 10px;

}



.mobile-menu a {

    display: flex;

    align-items: baseline;

    gap: 20px;



    padding: 18px 0;



    border-bottom: 1px solid var(--line-soft);



    transform: translateY(20px);



    opacity: 0;



    transition:

        transform 0.5s var(--ease),

        opacity 0.5s ease;

}



.mobile-menu.active a {

    transform: translateY(0);

    opacity: 1;

}



.mobile-menu a:nth-child(2) {

    transition-delay: 0.05s;

}



.mobile-menu a:nth-child(3) {

    transition-delay: 0.1s;

}



.mobile-menu a:nth-child(4) {

    transition-delay: 0.15s;

}



.mobile-menu a:nth-child(5) {

    transition-delay: 0.2s;

}



.mobile-menu a span {

    color: var(--gray);



    font-size: 10px;

    letter-spacing: 0.15em;

}



.mobile-menu a strong {

    color: var(--white);



    font-size: clamp(32px, 9vw, 60px);



    font-weight: 500;

    letter-spacing: -0.05em;

}





/* =========================================================

   HERO

   ========================================================= */



.hero {

    position: relative;



    min-height: 100svh;



    display: flex;

    align-items: center;



    background: var(--black);



    overflow: hidden;

}



.hero-background {

    position: absolute;



    inset: 0;



    overflow: hidden;

}



.hero-grid {

    position: absolute;



    inset: -20%;



    background-image:

        linear-gradient(

            rgba(255, 255, 255, 0.035) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255, 255, 255, 0.035) 1px,

            transparent 1px

        );



    background-size: 90px 90px;



    transform:

        perspective(800px)

        rotateX(62deg)

        translateY(25%);



    transform-origin: center bottom;



    opacity: 0.38;



    animation:

        hero-grid-move 18s linear infinite;

}



@keyframes hero-grid-move {



    from {

        background-position:

            0 0,

            0 0;

    }



    to {

        background-position:

            0 90px,

            90px 0;

    }

}



.hero-gradient {

    position: absolute;



    inset: 0;



    background:

        radial-gradient(

            circle at 72% 45%,

            rgba(255, 255, 255, 0.075),

            transparent 28%

        ),

        linear-gradient(

            90deg,

            #080808 0%,

            rgba(8, 8, 8, 0.82) 42%,

            rgba(8, 8, 8, 0.28) 100%

        );

}



.hero-glow {

    position: absolute;



    width: 600px;

    height: 600px;



    border-radius: 50%;



    filter: blur(100px);



    pointer-events: none;

}



.hero-glow-left {

    left: -300px;

    bottom: -300px;



    background: rgba(255, 255, 255, 0.025);

}



.hero-glow-right {

    right: -300px;

    top: 10%;



    background: rgba(255, 255, 255, 0.045);

}



.hero-noise {

    position: absolute;



    inset: 0;



    opacity: 0.035;



    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");



    pointer-events: none;

}



.hero-container {

    position: relative;



    z-index: 2;



    width: min(

        calc(100% - 80px),

        var(--container)

    );



    min-height: 100svh;



    margin-inline: auto;



    padding:

        150px

        0

        42px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.hero-top,

.hero-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.hero-location,

.hero-status,

.hero-scroll,

.hero-index {

    color: var(--gray);



    font-size: 9px;

    font-weight: 700;



    letter-spacing: 0.2em;

    text-transform: uppercase;

}



.hero-status {

    display: flex;

    align-items: center;

    gap: 10px;

}



.status-dot {

    width: 5px;

    height: 5px;



    border-radius: 50%;



    background: #bcbcbc;



    box-shadow:

        0 0 0 5px rgba(255, 255, 255, 0.03);



    animation:

        status-pulse 2s ease-in-out infinite;

}



@keyframes status-pulse {



    0%,

    100% {

        opacity: 0.45;

    }



    50% {

        opacity: 1;

    }

}



.hero-main {

    display: grid;



    grid-template-columns:

        minmax(0, 1fr)

        minmax(360px, 0.7fr);



    align-items: center;



    gap: 70px;



    margin-top: auto;

    margin-bottom: auto;

}



.hero-copy {

    max-width: 720px;

}



.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;



    margin-bottom: 25px;

}



.hero-eyebrow span {

    width: 34px;

    height: 1px;



    background: #888;

}



.hero-eyebrow p {

    margin: 0;



    color: #999;



    font-size: 9px;

    font-weight: 700;



    letter-spacing: 0.22em;

}



.hero-title {

    margin: 0;



    color: var(--white);



    font-size:

        clamp(

            100px,

            16vw,

            245px

        );



    font-weight: 900;



    line-height: 0.72;



    letter-spacing: -0.1em;

}



.hero-title sup {

    position: relative;



    top: -0.7em;



    margin-left: 8px;



    color: #777;



    font-size: 0.17em;



    letter-spacing: -0.06em;

}



.hero-description {

    max-width: 480px;



    margin:

        55px

        0

        0;



    color: #999;



    font-size: 15px;



    line-height: 1.8;

}



.hero-actions {

    display: flex;

    align-items: center;



    gap: 14px;



    margin-top: 34px;

}



.button {

    min-height: 50px;



    padding:

        0 22px;



    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;



    font-size: 10px;

    font-weight: 700;



    letter-spacing: 0.14em;

    text-transform: uppercase;



    transition:

        transform 0.35s var(--ease),

        background 0.35s ease,

        border-color 0.35s ease;

}



.button svg {

    width: 17px;

    height: 17px;



    transition:

        transform 0.35s var(--ease);

}



.button:hover {

    transform: translateY(-3px);

}



.button:hover svg {

    transform: translateX(4px);

}



.button-primary {

    color: #080808;



    background: var(--white);

}



.button-primary:hover {

    background: #fff;

}



.button-secondary {

    color: var(--white);



    border: 1px solid var(--line);



    background: rgba(255, 255, 255, 0.02);

}



.button-secondary:hover {

    border-color: rgba(255, 255, 255, 0.3);

    background: rgba(255, 255, 255, 0.06);

}





/* =========================================================

   HERO VISUAL

   ========================================================= */



.hero-visual {

    display: flex;

    justify-content: flex-end;

}



.hero-visual-frame {

    position: relative;



    width: min(

        100%,

        520px

    );



    aspect-ratio: 0.78;



    padding: 10px;



    transform:

        rotate(2deg);



    transition:

        transform 0.8s var(--ease);

}



.hero-visual-frame:hover {

    transform:

        rotate(0deg)

        translateY(-8px);

}



.hero-visual-image {

    position: relative;



    width: 100%;

    height: 100%;



    overflow: hidden;



    background:

        radial-gradient(

            circle at 50% 38%,

            #3b3b3b 0,

            #181818 27%,

            #0d0d0d 58%,

            #070707 100%

        );



    border: 1px solid rgba(255, 255, 255, 0.13);



    box-shadow:

        0 35px 100px rgba(0, 0, 0, 0.7);

}



.visual-grid {

    position: absolute;



    inset: 0;



    background-image:

        linear-gradient(

            rgba(255, 255, 255, 0.05) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255, 255, 255, 0.05) 1px,

            transparent 1px

        );



    background-size: 50px 50px;



    mask-image:

        linear-gradient(

            to bottom,

            black,

            transparent 85%

        );

}



.visual-light {

    position: absolute;



    width: 280px;

    height: 280px;



    top: 15%;

    left: 50%;



    transform: translateX(-50%);



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.09);



    filter: blur(80px);



    animation:

        visual-light-pulse 5s ease-in-out infinite;

}



@keyframes visual-light-pulse {



    0%,

    100% {

        opacity: 0.45;

        transform: translateX(-50%) scale(0.9);

    }



    50% {

        opacity: 0.8;

        transform: translateX(-50%) scale(1.1);

    }

}



.visual-brand {

    position: absolute;



    top: 50%;

    left: 50%;



    transform: translate(-50%, -50%);



    display: flex;

    align-items: flex-start;



    color: #eee;



    font-weight: 900;



    line-height: 0.8;

}



.visual-brand span {

    font-size: clamp(55px, 7vw, 105px);



    letter-spacing: -0.09em;

}



.visual-brand strong {

    position: relative;



    top: -8px;



    margin-left: 5px;



    color: #777;



    font-size: 18px;

}



.visual-caption {

    position: absolute;



    left: 28px;

    bottom: 25px;



    color: #888;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.2em;

}



.hero-visual-frame::before,

.hero-visual-frame::after {

    content: "";



    position: absolute;



    width: 45px;

    height: 45px;



    border-color: rgba(255, 255, 255, 0.25);



    pointer-events: none;

}



.hero-visual-frame::before {

    top: 0;

    right: 0;



    border-top: 1px solid;

    border-right: 1px solid;

}



.hero-visual-frame::after {

    bottom: 0;

    left: 0;



    border-bottom: 1px solid;

    border-left: 1px solid;

}



.hero-bottom {

    margin-top: 35px;

}



.hero-scroll {

    display: flex;

    align-items: center;

    gap: 14px;

}



.scroll-line {

    width: 55px;

    height: 1px;



    background: #555;

}



.hero-index {

    color: #666;

}





/* =========================================================

   SECTIONS

   ========================================================= */



.section {

    position: relative;



    padding:

        150px

        0;



    background: var(--black);

}



.section-header {

    display: grid;



    grid-template-columns: 90px 1fr;



    gap: 20px;



    margin-bottom: 80px;

}



.section-number {

    color: #555;



    font-size: 10px;

    font-weight: 700;



    letter-spacing: 0.15em;

}



.section-label {

    display: block;



    margin-bottom: 18px;



    color: #777;



    font-size: 9px;

    font-weight: 700;



    letter-spacing: 0.22em;

    text-transform: uppercase;

}



.section-header h2,

.feature-content h2,

.contact-container h2 {

    max-width: 900px;



    margin: 0;



    color: var(--white);



    font-size:

        clamp(

            52px,

            7vw,

            105px

        );



    font-weight: 500;



    line-height: 0.95;



    letter-spacing: -0.07em;

}



.section-header h2 em,

.feature-content h2 em,

.contact-container h2 em {

    color: #777;



    font-style: normal;

}





/* =========================================================

   ABOUT

   ========================================================= */



.about-content {

    display: grid;



    grid-template-columns:

        minmax(0, 1.1fr)

        minmax(300px, 0.9fr);



    gap: 100px;



    padding-left: 110px;

}



.about-intro p {

    max-width: 700px;



    margin: 0;



    color: #d1d1d1;



    font-size:

        clamp(

            24px,

            3vw,

            42px

        );



    line-height: 1.25;



    letter-spacing: -0.035em;

}



.about-details {

    border-top: 1px solid var(--line);

}



.about-detail {

    display: grid;



    grid-template-columns: 45px 1fr;



    gap: 20px;



    padding:

        25px

        0;



    border-bottom: 1px solid var(--line);

}



.about-detail > span {

    color: #555;



    font-size: 9px;

    font-weight: 700;

}



.about-detail h3 {

    margin: 0 0 8px;



    color: #eee;



    font-size: 15px;

    font-weight: 600;



    letter-spacing: -0.02em;

}



.about-detail p {

    margin: 0;



    color: #777;



    font-size: 12px;



    line-height: 1.65;

}





/* =========================================================

   FEATURE

   ========================================================= */



.feature-section {

    position: relative;



    min-height: 720px;



    display: flex;

    align-items: center;



    overflow: hidden;



    background: #0b0b0b;

}



.feature-background {

    position: absolute;



    inset: 0;

}



.feature-grid {

    position: absolute;



    inset: 0;



    background-image:

        linear-gradient(

            rgba(255, 255, 255, 0.04) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255, 255, 255, 0.04) 1px,

            transparent 1px

        );



    background-size: 100px 100px;



    transform:

        perspective(900px)

        rotateX(60deg)

        scale(1.6)

        translateY(30%);



    opacity: 0.35;

}



.feature-glow {

    position: absolute;



    width: 800px;

    height: 800px;



    top: 50%;

    left: 65%;



    transform: translate(-50%, -50%);



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(255, 255, 255, 0.1),

            transparent 65%

        );



    filter: blur(50px);

}



.feature-content {

    position: relative;



    z-index: 2;

}



.feature-content p {

    max-width: 500px;



    margin:

        40px

        0

        0;



    color: #888;



    font-size: 14px;



    line-height: 1.8;

}





/* =========================================================

   SOCIAL

   ========================================================= */



.social-grid {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 14px;

}



.social-card {

    position: relative;



    min-height: 330px;



    padding: 28px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;



    border: 1px solid var(--line);



    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.05),

            rgba(255, 255, 255, 0.01)

        );



    overflow: hidden;



    transition:

        transform 0.55s var(--ease),

        border-color 0.4s ease,

        background 0.4s ease;

}



.social-card::before {

    content: "";



    position: absolute;



    inset: -100%;



    background:

        linear-gradient(

            110deg,

            transparent 35%,

            rgba(255, 255, 255, 0.08) 50%,

            transparent 65%

        );



    transform: translateX(-30%);



    transition:

        transform 0.9s var(--ease);

}



.social-card:hover {

    transform: translateY(-8px);



    border-color:

        rgba(255, 255, 255, 0.28);



    background:

        linear-gradient(

            145deg,

            rgba(255, 255, 255, 0.08),

            rgba(255, 255, 255, 0.02)

        );

}



.social-card:hover::before {

    transform: translateX(30%);

}



.social-card-top,

.social-card-bottom {

    position: relative;

    z-index: 2;

}



.social-card-top {

    display: flex;

    justify-content: space-between;

}



.social-card-top > span {

    color: #555;



    font-size: 9px;

    font-weight: 700;



    letter-spacing: 0.15em;

}



.social-card-top svg {

    width: 25px;

    height: 25px;



    color: #aaa;

}



.social-card-bottom {

    display: grid;



    grid-template-columns: 1fr auto;



    align-items: end;

}



.social-card-bottom > span {

    grid-column: 1 / -1;



    margin-bottom: 7px;



    color: #666;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.18em;

}



.social-card-bottom strong {

    color: #eee;



    font-size: 17px;

    font-weight: 500;



    letter-spacing: -0.03em;

}



.social-arrow {

    width: 20px;

    height: 20px;



    color: #777;



    transition:

        transform 0.35s var(--ease),

        color 0.3s ease;

}



.social-card:hover .social-arrow {

    color: #fff;



    transform:

        translate(4px, -4px);

}



/* =========================================================

   LAW 09 — MY SOCIALS

   ========================================================= */

.law-my-socials {

    position: relative;

    grid-column: 1 / -1;

    min-height: 150px;

    margin-top: 2px;

    padding: 28px 34px;

    display: flex;

    align-items: center;

    gap: 28px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.16);

    background: linear-gradient(105deg,#111,#0b0b0b 55%,#101010);

    color: #fff;

    text-decoration: none;

    transition: transform .45s var(--ease), border-color .4s ease, box-shadow .4s ease;

    animation: lawSocialsPulse 4s ease-in-out infinite;

}

.law-my-socials::before {

    content: "";

    position: absolute;

    top: 0;

    left: -40%;

    width: 24%;

    height: 100%;

    background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);

    transform: skewX(-18deg);

    animation: lawSocialsSweep 4.5s ease-in-out infinite;

    pointer-events: none;

}

.law-my-socials:hover {

    transform: translateY(-5px);

    border-color: rgba(255,255,255,.38);

    box-shadow: 0 18px 45px rgba(0,0,0,.35),0 0 30px rgba(255,255,255,.04);

}

.law-my-socials-index {

    position: relative;

    z-index: 2;

    color: #555;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .15em;

}

.law-my-socials-icon {

    position: relative;

    z-index: 2;

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    background: rgba(255,255,255,.025);

    transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s ease;

}

.law-my-socials-icon svg {

    width: 27px;

    height: 27px;

    fill: none;

    stroke: #eee;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.law-my-socials:hover .law-my-socials-icon {

    transform: scale(1.1);

    border-color: rgba(255,255,255,.5);

    box-shadow: 0 0 24px rgba(255,255,255,.08);

}

.law-my-socials-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 7px;

}

.law-my-socials-content small {

    color: #666;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .18em;

}

.law-my-socials-content strong {

    color: #eee;

    font-size: clamp(24px,3vw,38px);

    font-weight: 500;

    letter-spacing: -.04em;

}

.law-my-socials-arrow {

    position: relative;

    z-index: 2;

    margin-left: auto;

    font-size: 30px;

    color: #777;

    transition: transform .4s var(--ease),color .3s ease;

}

.law-my-socials:hover .law-my-socials-arrow {

    color: #fff;

    transform: translate(6px,-6px);

}

@keyframes lawSocialsSweep {

    0%,45% { left:-40%; opacity:0; }

    55% { opacity:1; }

    75%,100% { left:120%; opacity:0; }

}

@keyframes lawSocialsPulse {

    0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); }

    50% { box-shadow: 0 0 24px rgba(255,255,255,.025); }

}





/* =========================================================

   CONTENT

   ========================================================= */



.content-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 14px;

}



.content-card {

    overflow: hidden;



    border: 1px solid var(--line);



    background: #0c0c0c;



    transition:

        transform 0.55s var(--ease),

        border-color 0.35s ease;

}



.content-card-large {

    grid-column: span 2;

}



.content-card:hover {

    transform: translateY(-7px);



    border-color:

        rgba(255, 255, 255, 0.25);

}



.content-image {

    position: relative;



    min-height: 300px;



    overflow: hidden;



    background:

        radial-gradient(

            circle at center,

            #303030,

            #101010 55%,

            #080808

        );

}



.content-card-large .content-image {

    min-height: 520px;

}



.content-image-placeholder {

    position: absolute;



    inset: 0;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-direction: column;



    background:

        linear-gradient(

            135deg,

            transparent 30%,

            rgba(255, 255, 255, 0.04),

            transparent 70%

        );



    color: #777;

}



.content-image-placeholder span {

    font-size:

        clamp(

            40px,

            6vw,

            90px

        );



    font-weight: 900;



    letter-spacing: -0.09em;

}



.content-image-placeholder strong {

    margin-top: -5px;



    font-size: 13px;

}



.content-card-info {

    min-height: 90px;



    padding:

        20px

        24px;



    display: flex;

    align-items: center;

    justify-content: space-between;



    border-top: 1px solid var(--line);

}



.content-card-info span:first-child {

    color: #666;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.18em;

}



.content-card-info h3 {

    margin: 7px 0 0;



    color: #eee;



    font-size: 17px;

    font-weight: 500;

}



.card-arrow {

    color: #777;



    font-size: 20px;



    transition:

        transform 0.35s var(--ease),

        color 0.3s ease;

}



.content-card:hover .card-arrow {

    color: #fff;



    transform: translate(4px, -4px);

}





/* =========================================================

   YOUTUBE

   ========================================================= */



.youtube-layout {

    display: grid;



    grid-template-columns:

        minmax(0, 1.6fr)

        minmax(280px, 0.7fr);



    gap: 50px;



    align-items: center;

}



.youtube-player {

    position: relative;



    aspect-ratio: 16 / 9;



    overflow: hidden;



    border: 1px solid var(--line);



    background: #0d0d0d;

}



.youtube-placeholder {

    position: absolute;



    inset: 0;



    display: flex;

    align-items: center;

    justify-content: center;



    flex-direction: column;



    gap: 12px;



    background:

        radial-gradient(

            circle at center,

            #292929,

            #0b0b0b 68%

        );

}



.youtube-placeholder > span {

    color: #777;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.2em;

}



.youtube-placeholder small {

    color: #555;



    font-size: 10px;

}



.youtube-play {

    width: 64px;

    height: 64px;



    margin-bottom: 5px;



    display: flex;

    align-items: center;

    justify-content: center;



    border: 1px solid rgba(255, 255, 255, 0.2);



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.05);



    transition:

        transform 0.4s var(--ease),

        background 0.3s ease;

}



.youtube-play svg {

    width: 20px;

    height: 20px;



    fill: #fff;

    stroke: none;



    margin-left: 3px;

}



.youtube-player:hover .youtube-play {

    transform: scale(1.08);



    background: rgba(255, 255, 255, 0.12);

}



.youtube-info h3 {

    margin: 0;



    color: #eee;



    font-size: 38px;

    font-weight: 500;



    letter-spacing: -0.05em;

}



.youtube-info p {

    max-width: 320px;



    margin:

        18px

        0

        30px;



    color: #777;



    font-size: 13px;



    line-height: 1.7;

}



.text-link {

    display: inline-flex;

    align-items: center;

    gap: 16px;



    color: #eee;



    font-size: 10px;

    font-weight: 700;



    letter-spacing: 0.16em;

    text-transform: uppercase;

}



.text-link svg {

    width: 17px;

    height: 17px;



    transition:

        transform 0.35s var(--ease);

}



.text-link:hover svg {

    transform: translateX(5px);

}





/* =========================================================

   CONTACT

   ========================================================= */



.contact-section {

    position: relative;



    min-height: 650px;



    display: flex;

    align-items: center;



    overflow: hidden;



    background: #0b0b0b;

}



.contact-background {

    position: absolute;



    inset: 0;

}



.contact-grid {

    position: absolute;



    inset: 0;



    background-image:

        linear-gradient(

            rgba(255, 255, 255, 0.035) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255, 255, 255, 0.035) 1px,

            transparent 1px

        );



    background-size: 100px 100px;



    mask-image:

        radial-gradient(

            circle at center,

            black,

            transparent 75%

        );

}



.contact-glow {

    position: absolute;



    width: 700px;

    height: 700px;



    left: 50%;

    top: 50%;



    transform: translate(-50%, -50%);



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(255, 255, 255, 0.08),

            transparent 68%

        );



    filter: blur(50px);

}



.contact-container {

    position: relative;



    z-index: 2;



    width: min(

        calc(100% - 80px),

        850px

    );



    margin-inline: auto;



    text-align: center;

}



.contact-container .section-label {

    margin-bottom: 30px;

}



.contact-container h2 {

    font-size:

        clamp(

            70px,

            11vw,

            150px

        );

}



.contact-container p {

    max-width: 470px;



    margin:

        35px

        auto

        30px;



    color: #777;



    font-size: 14px;



    line-height: 1.7;

}



.contact-button {

    min-height: 54px;



    padding:

        0 25px;



    display: inline-flex;

    align-items: center;

    gap: 22px;



    border: 1px solid rgba(255, 255, 255, 0.25);



    color: #fff;



    font-size: 9px;

    font-weight: 700;



    letter-spacing: 0.18em;

    text-transform: uppercase;



    transition:

        background 0.35s ease,

        color 0.35s ease,

        transform 0.35s var(--ease);

}



.contact-button svg {

    width: 17px;

    height: 17px;



    transition:

        transform 0.35s var(--ease);

}



.contact-button:hover {

    color: #080808;



    background: #fff;



    transform: translateY(-4px);

}



.contact-button:hover svg {

    transform: translateX(5px);

}





/* =========================================================

   FOOTER

   ========================================================= */



.site-footer {

    background: #080808;



    border-top: 1px solid var(--line);

}



.footer-inner {

    width: min(

        calc(100% - 80px),

        var(--container)

    );



    min-height: 110px;



    margin-inline: auto;



    display: flex;

    align-items: center;

    justify-content: space-between;

}



.footer-brand {

    display: flex;

    align-items: flex-start;



    color: #eee;



    font-weight: 900;



    letter-spacing: -0.08em;

}



.footer-brand span {

    font-size: 23px;

}



.footer-brand strong {

    position: relative;



    top: -3px;



    margin-left: 3px;



    color: #666;



    font-size: 11px;

}



.footer-meta {

    display: flex;

    align-items: center;

    gap: 13px;



    color: #555;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.17em;

}



.footer-separator {

    width: 4px;

    height: 4px;



    border-radius: 50%;



    background: #444;

}



.footer-top {

    display: flex;

    align-items: center;

    gap: 10px;



    color: #666;



    font-size: 8px;

    font-weight: 700;



    letter-spacing: 0.18em;



    transition:

        color 0.3s ease;

}



.footer-top svg {

    width: 15px;

    height: 15px;

}



.footer-top:hover {

    color: #fff;

}





/* =========================================================

   REVEAL ANIMATIONS

   ========================================================= */



.reveal {

    opacity: 1;

    transform: translateY(0);

}





/* =========================================================

   RESPONSIVE — TABLET

   ========================================================= */



@media (max-width: 1000px) {



    .desktop-nav {

        display: none;

    }



    .menu-toggle {

        display: flex;

    }



    .hero-main {

        grid-template-columns: 1fr;

    }



    .hero-visual {

        display: none;

    }



    .hero-description {

        max-width: 600px;

    }



    .about-content {

        padding-left: 0;



        grid-template-columns: 1fr;



        gap: 60px;

    }



    .social-grid {

        grid-template-columns: 1fr;

    }



    .social-card {

        min-height: 260px;

    }



    .youtube-layout {

        grid-template-columns: 1fr;

    }



}





/* =========================================================

   RESPONSIVE — MOBILE

   ========================================================= */



@media (max-width: 700px) {



    .container {

        width: min(

            calc(100% - 40px),

            var(--container)

        );

    }



    .header-inner {

        width: calc(100% - 40px);



        height: 76px;

    }



    .brand-name {

        font-size: 22px;

    }



    .hero-container {

        width: calc(100% - 40px);



        padding:

            110px

            0

            25px;

    }



    .hero {

        min-height: 100svh;

    }



    .hero-title {

        font-size:

            clamp(

                82px,

                25vw,

                150px

            );

    }



    .hero-description {

        margin-top: 38px;



        font-size: 13px;

    }



    .hero-actions {

        align-items: stretch;

        flex-direction: column;



        max-width: 250px;

    }



    .button {

        width: 100%;

    }



    .hero-bottom {

        margin-top: 50px;

    }



    .hero-scroll {

        display: none;

    }



    .section {

        padding:

            95px

            0;

    }



    .section-header {

        grid-template-columns: 45px 1fr;



        margin-bottom: 55px;

    }



    .section-header h2 {

        font-size:

            clamp(

                46px,

                13vw,

                72px

            );

    }



    .about-intro p {

        font-size: 25px;

    }



    .feature-section {

        min-height: 600px;

    }



    .feature-content h2 {

        font-size:

            clamp(

                50px,

                14vw,

                85px

            );

    }



    .social-card {

        min-height: 230px;



        padding: 22px;

    }



    .content-grid {

        grid-template-columns: 1fr;

    }



    .content-card-large {

        grid-column: auto;

    }



    .content-image,

    .content-card-large .content-image {

        min-height: 280px;

    }



    .youtube-info h3 {

        font-size: 32px;

    }



    .contact-container {

        width: calc(100% - 40px);

    }



    .contact-container h2 {

        font-size:

            clamp(

                65px,

                19vw,

                110px

            );

    }



    .footer-inner {

        width: calc(100% - 40px);



        min-height: 90px;

    }



    .footer-meta {

        display: none;

    }



}





/* =========================================================

   REDUCED MOTION

   ========================================================= */



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }



}




/* LAW ⁰⁹ — remover indicadores decorativos */

.section-number,

.hero-bottom {

    display: none !important;

}






/* LAW ⁰⁹ — título Redes Sociais */

.social-section .section-header h2 {

    max-width: none;

    white-space: nowrap;

}



@media (max-width: 700px) {

    .social-section .section-header h2 {

        font-size: clamp(42px, 12vw, 68px);

        line-height: 0.95;

        white-space: normal;

    }

}






/* LAW ⁰⁹ — REDES SOCIAIS numa linha */

.social-section .section-label {

    white-space: nowrap;

}






/* LAW ⁰⁹ — título YouTube */

.youtube-section .section-header h2 {

    max-width: none;

    white-space: nowrap;

}



@media (max-width: 700px) {

    .youtube-section .section-header h2 {

        font-size: clamp(42px, 12vw, 68px);

        line-height: 0.95;

        white-space: normal;

    }

}






/* LAW ⁰⁹ — YouTube direct player */



.youtube-player {

    position: relative;

    overflow: hidden;

    min-height: 420px;

    background:

        radial-gradient(circle at center, rgba(255,255,255,.08), transparent 45%),

        linear-gradient(135deg, #181818 0%, #050505 55%, #111 100%);

}



.youtube-direct-link {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: #fff;

    background:

        linear-gradient(135deg, rgba(255,255,255,.04), transparent 50%),

        #090909;

    transition: background .35s ease, transform .35s ease;

}



.youtube-direct-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    text-align: center;

}



.youtube-direct-play {

    width: 76px;

    height: 76px;

    border: 1px solid rgba(255,255,255,.5);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 4px;

    font-size: 25px;

    color: #fff;

    background: rgba(255,255,255,.06);

    transition:

        transform .35s ease,

        background .35s ease,

        border-color .35s ease;

}



.youtube-direct-label {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .22em;

    color: rgba(255,255,255,.78);

}



.youtube-direct-link:hover {

    background:

        linear-gradient(135deg, rgba(255,255,255,.09), transparent 55%),

        #0d0d0d;

}



.youtube-direct-link:hover .youtube-direct-play {

    transform: scale(1.08);

    background: rgba(255,255,255,.14);

    border-color: #fff;

}



@media (max-width: 700px) {

    .youtube-player {

        min-height: 280px;

    }



    .youtube-direct-play {

        width: 64px;

        height: 64px;

        font-size: 21px;

    }

}






/* =========================================================

   LAW ⁰⁹ — MOBILE FINAL FIX

   ========================================================= */



@media (max-width: 700px) {



    html,

    body {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;

    }



    /* HEADER MOBILE */



    .site-header {

        z-index: 10000 !important;

    }



    .site-header .header-inner {

        padding-left: 22px !important;

        padding-right: 22px !important;

    }



    .menu-toggle {

        display: flex !important;

        position: relative;

        z-index: 10002;

        width: 56px !important;

        height: 56px !important;

        flex-shrink: 0;

    }



    /* MENU MOBILE */



    .mobile-menu {

        position: fixed !important;

        top: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        left: 0 !important;

        width: 100vw !important;

        height: 100dvh !important;

        min-height: 100vh;

        z-index: 9999 !important;



        display: block !important;



        background: #080808 !important;



        visibility: hidden !important;

        opacity: 0 !important;

        pointer-events: none !important;



        overflow-y: auto !important;

        overflow-x: hidden !important;



        transform: translateX(100%);

        transition:

            transform .4s cubic-bezier(.22,1,.36,1),

            opacity .3s ease,

            visibility .4s ease !important;

    }



    .mobile-menu.active {

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;

        transform: translateX(0) !important;

    }



    .mobile-menu-inner {

        box-sizing: border-box;

        width: 100%;

        min-height: 100dvh;

        padding: 130px 32px 50px !important;



        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        gap: 0 !important;

    }



    .mobile-menu a {

        display: flex !important;

        align-items: center !important;

        gap: 18px !important;



        width: 100%;

        box-sizing: border-box;



        padding: 20px 0 !important;



        border-bottom: 1px solid rgba(255,255,255,.12) !important;



        color: #fff !important;

        text-decoration: none !important;



        transform: translateY(15px);

        opacity: 0;



        transition:

            transform .45s cubic-bezier(.22,1,.36,1),

            opacity .35s ease !important;

    }



    .mobile-menu.active a {

        transform: translateY(0) !important;

        opacity: 1 !important;

    }



    .mobile-menu a:nth-child(1) {

        transition-delay: .04s !important;

    }



    .mobile-menu a:nth-child(2) {

        display: none !important;

    }



    .mobile-menu a:nth-child(3) {

        transition-delay: .08s !important;

    }



    .mobile-menu a:nth-child(4) {

        transition-delay: .12s !important;

    }



    .mobile-menu a span {

        display: block !important;

        min-width: 25px;

        color: rgba(255,255,255,.38) !important;

        font-size: 9px !important;

        letter-spacing: .16em !important;

    }



    .mobile-menu a strong {

        display: block !important;

        color: #fff !important;

        font-size: clamp(30px, 9vw, 44px) !important;

        line-height: 1 !important;

        font-weight: 500 !important;

        letter-spacing: -.04em !important;

    }



    body.menu-open {

        overflow: hidden !important;

        height: 100vh !important;

    }



    /* HERO MOBILE */



    .hero {

        min-height: calc(100dvh - 20px) !important;

    }



    .hero-content {

        width: 100% !important;

        max-width: 100% !important;

    }



    .hero h1 {

        font-size: clamp(58px, 18vw, 90px) !important;

        line-height: .88 !important;

        letter-spacing: -.07em !important;

    }



    .hero p {

        max-width: 100% !important;

        font-size: 16px !important;

        line-height: 1.55 !important;

    }



    /* SECTIONS */



    .section {

        width: 100% !important;

        box-sizing: border-box !important;

        padding-left: 22px !important;

        padding-right: 22px !important;

    }



    /* YOUTUBE TITLE */



    .youtube-section .section-header h2 {

        width: 100% !important;

        max-width: 100% !important;

        white-space: normal !important;



        font-size: clamp(40px, 11.5vw, 54px) !important;

        line-height: .92 !important;

        letter-spacing: -.055em !important;



        overflow-wrap: normal !important;

        word-break: normal !important;

    }



    .youtube-layout {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 42px !important;

    }



    .youtube-player {

        width: 100% !important;

        min-height: 0 !important;

        aspect-ratio: 16 / 10 !important;

        box-sizing: border-box !important;

    }



    .youtube-direct-link {

        width: 100% !important;

        height: 100% !important;

    }



    .youtube-direct-play {

        width: 68px !important;

        height: 68px !important;

        font-size: 20px !important;

    }



    .youtube-direct-label {

        font-size: 10px !important;

        letter-spacing: .18em !important;

    }



    .youtube-info {

        width: 100% !important;

    }



    .youtube-info h3 {

        font-size: 46px !important;

        line-height: .95 !important;

    }



    .youtube-info p {

        font-size: 16px !important;

        line-height: 1.55 !important;

    }



    /* SOCIAL */



    .social-section .section-header h2 {

        width: 100% !important;

        max-width: 100% !important;

        white-space: normal !important;



        font-size: clamp(40px, 11.5vw, 54px) !important;

        line-height: .92 !important;

        letter-spacing: -.055em !important;

    }



}



/* MOBILE MENU — desktop protection */



@media (min-width: 701px) {

    .mobile-menu {

        display: none !important;

    }

}






/* =========================================================

   LAW ⁰⁹ — YOUTUBE MOBILE FINAL

   ========================================================= */



.youtube-title-muted {

    color: var(--gray);

}



.youtube-direct-play svg {

    width: 28px;

    height: 28px;

    display: block;

    fill: currentColor;

}



@media (max-width: 700px) {



    .youtube-section .section-header h2 {

        font-size: clamp(44px, 12.5vw, 60px) !important;

        line-height: .94 !important;

        letter-spacing: -.06em !important;

    }



    .youtube-direct-play {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding-left: 3px;

    }



    .youtube-direct-play svg {

        width: 25px;

        height: 25px;

        fill: #fff;

    }



}





.law-my-socials-arrow{width:25px!important;height:25px!important;max-width:25px!important;max-height:25px!important;display:block!important;flex:0 0 25px!important;}
.law-my-socials-arrow path{fill:none!important;stroke:currentColor!important;stroke-width:1.5!important;stroke-linecap:round!important;stroke-linejoin:round!important;}