/* ============================================
   DIGITAL WRENCH WORKS — V3
   "Trust is Earned"
   ============================================ */

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

:root {
    --black: #000;
    --white: #fff;
    --accent: #FF4D00;
    --accent-glow: rgba(255,77,0,0.35);
    --gray-100: #f0f0f0;
    --gray-400: #888;
    --gray-600: #555;
    --gray-800: #1a1a1a;
    --gray-900: #0d0d0d;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --ease: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { overflow-x:hidden; scroll-behavior:smooth; }
body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
    cursor: none;
}
a { color:inherit; text-decoration:none; cursor:none; }
img { display:block; max-width:100%; }
::selection { background:var(--accent); color:var(--black); }

/* ============================================
   FILM GRAIN
   ============================================ */
.grain {
    position: fixed; inset:0; z-index:9990; pointer-events:none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   PRELOADER
   ============================================ */
#loader {
    position:fixed; inset:0; background:var(--black); z-index:10000;
    display:flex; align-items:center; justify-content:center;
    transition: clip-path 1.2s var(--ease), opacity 0.6s 1s;
}
#loader.done {
    clip-path: circle(0% at 50% 50%);
    opacity: 0;
    pointer-events: none;
}
.loader-inner { text-align:center; }
.loader-line {
    width:60px; height:1px; background:var(--accent);
    margin:0 auto 30px; transform-origin:left;
    animation: lineDraw 1.5s var(--ease) forwards;
}
@keyframes lineDraw { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.loader-text {
    font-family:var(--font-display); font-size:4rem;
    letter-spacing:1.5rem; margin-bottom:20px;
}
.loader-letter {
    display:inline-block; opacity:0; transform:translateY(30px);
    animation: letterIn 0.7s var(--ease) forwards;
}
.loader-letter:nth-child(1){animation-delay:.3s}
.loader-letter:nth-child(2){animation-delay:.5s}
.loader-letter:nth-child(3){animation-delay:.7s}
@keyframes letterIn { to{opacity:1;transform:translateY(0)} }
.loader-counter {
    font-size:.75rem; letter-spacing:.4rem; color:var(--gray-600);
    font-family:var(--font-body);
}

/* ============================================
   CURSOR
   ============================================ */
#cursor { position:fixed; top:0; left:0; z-index:9999; pointer-events:none; mix-blend-mode:difference; }
.cursor-dot {
    width:8px; height:8px; background:var(--white); border-radius:50%;
    position:absolute; top:-4px; left:-4px;
}
.cursor-ring {
    width:44px; height:44px; border:1px solid rgba(255,255,255,.4);
    border-radius:50%; position:absolute; top:-22px; left:-22px;
    transition: transform .3s var(--ease-out), border-color .3s;
}
.cursor-ring.active { transform:scale(1.6); border-color:var(--accent); }

@media(max-width:768px){
    #cursor{display:none}
    body{cursor:auto}
    a,button{cursor:pointer}
}

/* ============================================
   NAV
   ============================================ */
#nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 50px;
    transition: background .4s, padding .4s, backdrop-filter .4s;
}
#nav.scrolled {
    padding:16px 50px;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.nav-logo-img { height:28px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.nav-center { display:flex; gap:36px; }
.nav-center a {
    font-size:.7rem; font-weight:500; letter-spacing:.18rem; text-transform:uppercase;
    color:var(--gray-400); position:relative; padding:4px 0;
    transition:color .3s;
}
.nav-center a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:1px; background:var(--accent);
    transition:width .4s var(--ease);
}
.nav-center a:hover { color:var(--white); }
.nav-center a:hover::after { width:100%; }
.nav-right { display:flex; align-items:center; }
.nav-status {
    font-size:.6rem; letter-spacing:.25rem; text-transform:uppercase;
    color:var(--gray-600); border:1px solid var(--gray-800);
    padding:6px 14px; border-radius:2px;
}
.nav-burger {
    display:none; background:none; border:none; padding:10px;
    flex-direction:column; gap:6px; cursor:pointer;
}
.nav-burger span { width:24px; height:1px; background:var(--white); transition:all .3s var(--ease); }
.nav-burger.active span:first-child { transform:rotate(45deg) translate(2.5px,2.5px); }
.nav-burger.active span:last-child { transform:rotate(-45deg) translate(2.5px,-2.5px); }

#mobile-menu {
    position:fixed; inset:0; background:var(--black); z-index:999;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:all .5s var(--ease);
}
#mobile-menu.active { opacity:1; visibility:visible; }
.mm-inner { display:flex; flex-direction:column; gap:30px; text-align:center; }
.mm-link {
    font-family:var(--font-display); font-size:3.5rem; letter-spacing:.2rem;
    opacity:0; transform:translateY(40px);
    transition:all .5s var(--ease);
}
#mobile-menu.active .mm-link { opacity:1; transform:translateY(0); }
#mobile-menu.active .mm-link:nth-child(1){transition-delay:.1s}
#mobile-menu.active .mm-link:nth-child(2){transition-delay:.2s}
#mobile-menu.active .mm-link:nth-child(3){transition-delay:.3s}
#mobile-menu.active .mm-link:nth-child(4){transition-delay:.4s}

@media(max-width:900px){
    .nav-center,.nav-right{display:none}
    .nav-burger{display:flex}
    #nav{padding:20px 24px}
}

/* ============================================
   HERO
   ============================================ */
#hero {
    position:relative; height:100vh; min-height:700px;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; }
.hero-bg-clip {
    width:100%; height:100%;
    clip-path: circle(0% at 50% 50%);
    animation: clipReveal 2s var(--ease) 2.2s forwards;
}
@keyframes clipReveal { to{clip-path:circle(75% at 50% 50%)} }
.hero-bg-img {
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.15);
    animation: imgZoom 12s ease-out 2.2s forwards;
}
@keyframes imgZoom { to{transform:scale(1)} }
.hero-overlay {
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.95) 100%),
        linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.9) 100%);
}
.hero-content { position:relative; z-index:2; text-align:center; padding:0 20px; margin-top:-22vh; }
.hero-logo-main {
    margin-bottom:40px;
    opacity:0;
    animation: fadeUp 1s var(--ease-out) 2.2s forwards;
}
.hero-logo-img {
    width: clamp(160px, 22vw, 250px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 20px rgba(255,77,0,0.25));
}
.hero-badge {
    display:flex; align-items:center; justify-content:center; gap:16px;
    margin-bottom:40px; opacity:0;
    animation: fadeUp .8s var(--ease-out) 3.6s forwards;
}
.badge-line { width:40px; height:1px; background:var(--gray-600); }
.badge-text { font-size:.65rem; letter-spacing:.35rem; text-transform:uppercase; color:var(--gray-600); }
.hero-title { line-height:.85; overflow:hidden; }
.title-line { display:block; overflow:hidden; }
.title-inner {
    display:inline-block; font-family:var(--font-display);
    font-size:clamp(5rem,16vw,16rem); letter-spacing:-.02em;
    transform:translateY(110%);
    animation: titleSlide 1.2s var(--ease) forwards;
}
.title-line:nth-child(1) .title-inner{animation-delay:2.8s}
.title-line:nth-child(2) .title-inner{animation-delay:3s}
.title-line:nth-child(3) .title-inner{animation-delay:3.2s}
@keyframes titleSlide { to{transform:translateY(0)} }
.title-inner.accent { color:var(--accent); text-shadow:0 0 80px var(--accent-glow); }
.hero-sub {
    margin-top:36px; font-family:var(--font-serif); font-size:1.2rem;
    font-style:italic; font-weight:300; letter-spacing:.15rem; color:var(--gray-400);
    opacity:0; animation: fadeUp .8s var(--ease-out) 3.8s forwards;
}
.hero-scroll {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    opacity:0; animation: fadeUp .8s var(--ease-out) 4.2s forwards;
}
.scroll-bar {
    width:1px; height:50px; background:var(--gray-800); position:relative; overflow:hidden;
}
.scroll-bar::after {
    content:''; position:absolute; top:-100%; left:0; width:100%; height:60%;
    background:var(--accent);
    animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse { 0%{top:-60%} 100%{top:100%} }
.scroll-text { font-size:.55rem; letter-spacing:.35rem; text-transform:uppercase; color:var(--gray-600); }
.hero-side {
    position:absolute; right:40px; top:50%; transform:translateY(-50%) rotate(90deg);
    font-size:.6rem; letter-spacing:.4rem; text-transform:uppercase; color:var(--gray-800);
    opacity:0; animation: fadeIn 1s 4s forwards;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { to{opacity:1} }

/* ============================================
   STATEMENT
   ============================================ */
#statement {
    padding:60px 50px;
    display:flex; align-items:center; justify-content:center;
    min-height:auto;
}
.stmt-content { text-align:center; }
.stmt-line {
    display:flex; align-items:baseline; justify-content:center;
    gap:clamp(12px, 2vw, 30px);
    flex-wrap:wrap;
}
.stmt-word-static {
    font-family:var(--font-display);
    font-size:clamp(2.5rem,8vw,8rem);
    letter-spacing:-.02em;
    color:rgba(255,255,255,.25);
    line-height:1.1;
}
.stmt-word-static.glow {
    color:var(--accent); opacity:.85;
    text-shadow:0 0 80px var(--accent-glow);
}
@media(max-width:768px){
    #statement{padding:80px 24px; min-height:30vh}
    .stmt-line{gap:10px}
}

/* ============================================
   PHILOSOPHY (formerly MANIFESTO)
   ============================================ */
#philosophy { padding:100px 50px; display:flex; align-items:center; }
.mani-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:0; width:100%;
    max-width:1400px; margin:0 auto;
}
.mani-left { padding-right:80px; display:flex; flex-direction:column; justify-content:center; }
.sec-num {
    font-family:var(--font-display); font-size:.75rem; letter-spacing:.5rem;
    color:var(--accent); margin-bottom:40px; display:block;
    position:relative; padding-left:50px;
}
.sec-num::before {
    content:''; position:absolute; left:0; top:50%;
    width:35px; height:1px; background:var(--accent);
}
.sec-num-light { color:var(--white); }
.sec-num-light::before { background:var(--white); }
.sec-num-center {
    text-align:center; padding-left:0; margin-bottom:30px;
}
.sec-num-center::before { display:none; }
.mani-heading {
    font-family:var(--font-serif); font-size:clamp(2rem,3.5vw,3.5rem);
    font-weight:300; line-height:1.25; margin-bottom:20px; color:var(--gray-100);
}
.mani-accent {
    font-family:var(--font-serif); font-size:1.3rem; font-style:italic;
    color:var(--accent); margin-bottom:40px;
}
.mani-body p {
    font-size:.95rem; line-height:1.9; color:var(--gray-400);
    margin-bottom:18px; font-weight:300;
}
.mani-right { position:relative; overflow:hidden; min-height:500px; }
.mani-img-wrap {
    position:absolute; inset:0;
    clip-path:inset(0 100% 0 0);
    transition: clip-path 1.4s var(--ease);
}
.mani-img-wrap.visible { clip-path:inset(0 0 0 0); }
.mani-img {
    width:100%; height:100%; object-fit:cover;
    transform:scale(1.15);
    transition: transform 1.8s var(--ease);
}
.mani-img-wrap.visible .mani-img { transform:scale(1); }

@media(max-width:1024px){
    .mani-grid{grid-template-columns:1fr; gap:60px}
    .mani-left{padding-right:0}
    .mani-right{min-height:400px; position:relative}
    .mani-img-wrap{position:relative; clip-path:none; height:400px}
    #philosophy{padding:100px 30px}
}
@media(max-width:768px){
    #philosophy{padding:80px 24px}
    .mani-right{min-height:300px}
    .mani-img-wrap{height:300px}
}

/* ============================================
   TRUST SECTION
   ============================================ */
#trust {
    padding:120px 50px;
    background: linear-gradient(180deg, var(--black) 0%, #111 50%, var(--black) 100%);
    position:relative;
    overflow:hidden;
}
#trust::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:1px; height:80px; background:linear-gradient(to bottom, transparent, var(--accent));
}
.trust-section {
    max-width:1200px; margin:0 auto; text-align:center;
}
.trust-title {
    font-family:var(--font-display);
    font-size:clamp(5rem,12vw,12rem);
    letter-spacing:.05em; line-height:.85;
    margin-bottom:80px;
    color:var(--white);
}
.trust-grid {
    display:grid; grid-template-columns:1fr auto 1fr; gap:60px;
    text-align:left; align-items:start;
    margin-bottom:80px;
}
.trust-col { padding:40px 0; }
.trust-label {
    font-size:.6rem; letter-spacing:.35rem; text-transform:uppercase;
    color:var(--accent); margin-bottom:24px; font-weight:500;
}
.trust-heading {
    font-family:var(--font-serif); font-size:clamp(1.6rem,2.5vw,2.5rem);
    font-weight:300; line-height:1.3; margin-bottom:24px; color:var(--gray-100);
}
.trust-body {
    font-size:.92rem; line-height:1.9; color:var(--gray-400); font-weight:300;
}
.trust-divider {
    display:flex; align-items:center; justify-content:center;
    padding:40px 0;
}
.trust-div-line {
    width:1px; height:100%; min-height:200px;
    background:linear-gradient(to bottom, transparent, rgba(255,77,0,.3), transparent);
}
.trust-closing {
    font-family:var(--font-serif); font-size:clamp(1.2rem,2vw,1.8rem);
    font-style:italic; font-weight:300; color:var(--gray-400);
    line-height:1.7; max-width:700px; margin:0 auto;
    padding-top:40px;
    border-top:1px solid rgba(255,255,255,.04);
}

@media(max-width:900px){
    .trust-grid{grid-template-columns:1fr; gap:0}
    .trust-divider{padding:30px 0}
    .trust-div-line{width:60px; height:1px; min-height:auto}
    #trust{padding:100px 24px}
}

/* ============================================
   APPROACH
   ============================================ */
#approach { padding:100px 50px; }
.app-header { max-width:1400px; margin:0 auto 50px; }
.app-title {
    font-family:var(--font-display); font-size:clamp(4rem,10vw,10rem);
    letter-spacing:-.02em; line-height:.9; color:var(--white);
}
.app-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    max-width:1400px; margin:0 auto;
    background:rgba(255,255,255,.04);
}
.app-card {
    background:var(--black); padding:60px 50px; position:relative; overflow:hidden;
    border:none;
    transition: background .4s;
}
.app-card:hover { background:rgba(255,77,0,.02); }
.app-card::after {
    content:''; position:absolute; bottom:0; left:50px; right:50px;
    height:1px; background:rgba(255,255,255,.04);
}
.card-idx {
    font-family:var(--font-display); font-size:5rem; line-height:1;
    position:absolute; top:30px; right:40px;
    color:rgba(255,255,255,.06);
}
.app-card h3 {
    font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.8rem);
    letter-spacing:.03em; margin-bottom:20px; line-height:1.1;
}
.app-card p {
    font-size:.88rem; line-height:1.8; color:var(--gray-400); font-weight:300;
    max-width:340px;
}
.card-accent {
    width:0; height:2px; background:var(--accent); margin-top:30px;
    transition: width .8s var(--ease) .3s;
}
.app-card.visible .card-accent { width:40px; }

@media(max-width:900px){
    .app-grid{grid-template-columns:1fr}
    #approach{padding:100px 24px}
    .app-card{padding:40px 30px}
}

/* ============================================
   THE STANDARD
   ============================================ */
#standard {
    position:relative; min-height:100vh;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.std-bg { position:absolute; inset:0; }
.std-bg-img {
    width:100%; height:100%; object-fit:cover;
    opacity:0; transform:scale(1.1);
    transition: opacity 1.5s var(--ease), transform 2s var(--ease);
}
.std-bg-img.visible { opacity:.35; transform:scale(1); }
.std-overlay {
    position:absolute; inset:0;
    background:radial-gradient(ellipse at center, transparent 0%, var(--black) 75%);
}
.std-content { position:relative; z-index:2; text-align:center; padding:80px 20px; }
.std-title {
    font-family:var(--font-display);
    font-size:clamp(4rem,14vw,14rem);
    line-height:.85; margin-bottom:60px;
}
.std-line { display:block; }
.std-line.glow { color:var(--accent); text-shadow:0 0 100px var(--accent-glow); }
.std-stats {
    display:flex; align-items:center; justify-content:center; gap:50px;
    margin-bottom:60px;
}
.std-stat { text-align:center; }
.std-num { font-family:var(--font-display); font-size:3.5rem; color:var(--accent); display:block; }
.std-label { font-size:.65rem; letter-spacing:.25rem; text-transform:uppercase; color:var(--gray-600); display:block; margin-top:6px; }
.std-divider { width:1px; height:50px; background:rgba(255,255,255,.08); }
.std-closing {
    font-family:var(--font-serif); font-size:1.1rem; font-style:italic;
    line-height:1.9; color:var(--gray-400);
}

@media(max-width:768px){
    .std-stats{flex-direction:column; gap:30px}
    .std-divider{width:40px; height:1px}
}

/* ============================================
   CONTACT
   ============================================ */
#contact { padding:160px 50px; min-height:70vh; display:flex; align-items:center; }
.contact-wrap { max-width:800px; width:100%; }
.contact-heading {
    font-family:var(--font-serif); font-size:clamp(2rem,4vw,3.5rem);
    font-weight:300; line-height:1.3; margin-bottom:60px;
}
.contact-heading .accent { color:var(--accent); }
.contact-list { display:flex; flex-direction:column; gap:0; }
.contact-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:28px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.contact-row:first-child { border-top:1px solid rgba(255,255,255,.04); }
.contact-label { font-size:.6rem; letter-spacing:.3rem; text-transform:uppercase; color:var(--accent); }
.contact-val {
    font-family:var(--font-serif); font-size:1.4rem; font-weight:300;
    transition:color .3s;
}
a.contact-val:hover { color:var(--accent); }

@media(max-width:768px){
    #contact{padding:100px 24px}
    .contact-row{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ============================================
   FOOTER
   ============================================ */
#footer { padding:50px; border-top:1px solid rgba(255,255,255,.03); }
.footer-wrap {
    display:flex; align-items:center; justify-content:space-between;
    max-width:1400px; margin:0 auto;
}
.footer-logo-large {
    width: clamp(120px, 15vw, 200px);
    height: auto;
    filter: drop-shadow(0 0 15px rgba(255,77,0,0.2));
}
.footer-line { flex:1; height:1px; background:rgba(255,255,255,.04); margin:0 30px; }
.footer-copy { font-size:.65rem; letter-spacing:.1rem; color:var(--gray-600); }
.footer-tag { font-family:var(--font-serif); font-size:.8rem; font-style:italic; color:var(--gray-600); }

@media(max-width:768px){
    .footer-wrap{flex-direction:column; gap:20px; text-align:center}
    .footer-line{display:none}
    #footer{padding:40px 24px}
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal-text {
    opacity:0; transform:translateY(50px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-text.visible { opacity:1; transform:translateY(0); }
.reveal-card {
    opacity:1; transform:translateY(0);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-card:nth-child(1){transition-delay:0s}
.reveal-card:nth-child(2){transition-delay:.12s}
.reveal-card:nth-child(3){transition-delay:.24s}
.reveal-card:nth-child(4){transition-delay:.36s}

/* Smooth scroll offset */
section[id] { scroll-margin-top:100px; }