/* ═══════════════════════════════════════════════
   THE CHAMBER GROUP — Editorial Luxury Redesign
   ═══════════════════════════════════════════════ */

/* ── RESET & TOKENS ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0a0a0a;--charcoal:#1a1a1a;--dark:#222;--gray:#888;--light-gray:#ccc;
  --ivory:#f5f2ed;--white:#fafafa;--cream:#f0ece4;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --eb:'EB Garamond',serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(0,0,.2,1);
}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:var(--sans);background:var(--ivory);color:var(--black);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,textarea,select{font-family:var(--sans);border:none;outline:none;background:transparent}
.container{max-width:1320px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)}
em{font-family:var(--serif);font-style:italic;font-weight:300}

/* ── CURSOR ── */
.cursor,.cursor-dot{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cursor{width:40px;height:40px;border:1px solid rgba(10,10,10,.3);opacity:0}
.cursor-dot{width:6px;height:6px;background:var(--black);opacity:0}
body:hover .cursor,body:hover .cursor-dot{opacity:1}
@media(pointer:coarse){.cursor,.cursor-dot{display:none!important}}

/* ── LOADER ── */
.loader{position:fixed;inset:0;z-index:10000;background:var(--black);display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease)}
.loader.hidden{opacity:0;pointer-events:none}
.loader__content{text-align:center}
.loader__wordmark{font-family:var(--serif);font-size:clamp(2rem,5vw,3.5rem);color:var(--ivory);letter-spacing:.3em;margin-bottom:2rem;font-weight:300}
.loader__bar{width:120px;height:1px;background:rgba(245,242,237,.15);margin:0 auto;overflow:hidden;border-radius:1px}
.loader__fill{width:0;height:100%;background:var(--ivory);transition:width 1.2s var(--ease)}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:1.5rem 0;transition:background .4s,padding .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(245,242,237,.92);backdrop-filter:blur(20px);padding:.8rem 0}
.nav__inner{max-width:1320px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between}
.nav__logo{display:flex;align-items:center;gap:.6rem}
.nav__logo-img{height:28px;width:auto;filter:invert(1);transition:filter .4s}
.nav.scrolled .nav__logo-img{filter:none}
.nav__logo-text{font-family:var(--serif);font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ivory);transition:color .4s;font-weight:400}
.nav.scrolled .nav__logo-text{color:var(--black)}
.nav__links{display:flex;align-items:center;gap:2.5rem}
.nav__link{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);transition:color .3s,opacity .3s;opacity:.8;font-weight:400}
.nav__link:hover{opacity:1}
.nav.scrolled .nav__link{color:var(--black)}
.nav__link--cta{opacity:1;border:1px solid rgba(245,242,237,.4);padding:.5rem 1.2rem;border-radius:0;transition:all .3s}
.nav__link--cta:hover{background:var(--ivory);color:var(--black)}
.nav.scrolled .nav__link--cta{border-color:var(--black);color:var(--black)}
.nav.scrolled .nav__link--cta:hover{background:var(--black);color:var(--ivory)}

/* Hamburger */
.nav__hamburger{display:none;width:32px;height:20px;position:relative;z-index:1001}
.nav__hamburger span{position:absolute;left:0;width:100%;height:1px;background:var(--ivory);transition:all .4s var(--ease)}
.nav.scrolled .nav__hamburger span{background:var(--black)}
.nav__hamburger span:first-child{top:0}
.nav__hamburger span:last-child{bottom:0}
.nav__hamburger.open span:first-child{top:50%;transform:rotate(45deg);background:var(--ivory)}
.nav__hamburger.open span:last-child{bottom:50%;transform:rotate(-45deg);background:var(--ivory)}

/* Mobile Menu */
.nav__mobile{position:fixed;inset:0;background:var(--black);z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.nav__mobile.open{opacity:1;pointer-events:auto}
.nav__mobile-links{text-align:center}
.nav__mobile-links li{overflow:hidden}
.nav__mobile-link{display:inline-block;font-family:var(--serif);font-size:clamp(2rem,7vw,4rem);color:var(--ivory);padding:.3em 0;transition:opacity .3s;font-weight:300;letter-spacing:.02em}
.nav__mobile-link:hover{opacity:.5}
.nav__mobile-footer{position:absolute;bottom:3rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.3)}

@media(max-width:900px){
  .nav__links{display:none}
  .nav__hamburger{display:block}
}

/* ── SECTION LABEL ── */
.section-label{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:1.5rem;font-weight:500}

/* ── BUTTONS ── */
.btn{display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;padding:.9rem 2.2rem;border:1px solid;transition:all .4s var(--ease);cursor:pointer;font-weight:500}
.btn--light{background:var(--ivory);color:var(--black);border-color:var(--ivory)}
.btn--light:hover{background:transparent;color:var(--ivory)}
.btn--outline{background:transparent;color:var(--ivory);border-color:rgba(245,242,237,.4)}
.btn--outline:hover{background:var(--ivory);color:var(--black)}
.btn--dark{background:var(--black);color:var(--ivory);border-color:var(--black)}
.btn--dark:hover{background:transparent;color:var(--black)}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding-bottom:clamp(4rem,10vh,8rem);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__bg-img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,.7) 100%)}
.hero__content{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);width:100%}
.hero__eyebrow{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,242,237,.5);margin-bottom:2rem;font-weight:400}
.hero__headline{font-family:var(--serif);font-size:clamp(2.5rem,6.5vw,5.5rem);line-height:1.08;color:var(--ivory);font-weight:300;margin-bottom:2rem;max-width:900px;letter-spacing:-.01em}
.hero__line{display:block}
.hero__line--em{font-style:italic;opacity:.85}
.hero__sub{font-size:clamp(.85rem,1.2vw,1rem);color:rgba(245,242,237,.6);max-width:600px;line-height:1.7;margin-bottom:2.5rem;font-weight:300}
.hero__ctas{display:flex;gap:1rem;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:2rem;right:clamp(1.5rem,4vw,4rem);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.hero__scroll-line{width:1px;height:50px;background:linear-gradient(180deg,rgba(245,242,237,.4),transparent)}
.hero__scroll-label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.3);writing-mode:vertical-rl}

/* ── TICKER ── */
.ticker{padding:2rem 0;border-top:1px solid rgba(10,10,10,.06);border-bottom:1px solid rgba(10,10,10,.06);overflow:hidden;background:var(--ivory)}
.ticker__track{display:flex;gap:0;animation:tickerScroll 40s linear infinite;white-space:nowrap;width:max-content}
.ticker__track span{font-family:var(--serif);font-size:clamp(.9rem,1.5vw,1.1rem);color:var(--black);opacity:.35;font-weight:300;padding:0 .5rem}
.ticker__track .sep{opacity:.15;padding:0 .8rem}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── FEATURED WORK ── */
.work{padding:clamp(5rem,12vw,10rem) 0}
.work__header{margin-bottom:clamp(3rem,6vw,5rem)}
.work__title{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;line-height:1.15;letter-spacing:-.01em}
.work__grid{max-width:1320px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}

.work-card{position:relative;cursor:pointer;overflow:hidden}
.work-card__img-wrap{position:relative;overflow:hidden;aspect-ratio:4/5}
.work-card--tall .work-card__img-wrap{aspect-ratio:3/5}
.work-card--wide .work-card__img-wrap{aspect-ratio:16/9}
.work-card--wide{grid-column:span 2}
.work-card__img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s}
.work-card:hover .work-card__img{transform:scale(1.05);filter:brightness(.85)}
.work-card__img-overlay{position:absolute;inset:0;background:rgba(10,10,10,.15);opacity:0;transition:opacity .5s;display:flex;align-items:center;justify-content:center}
.work-card:hover .work-card__img-overlay{opacity:1}
.work-card__hover-label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);border:1px solid rgba(245,242,237,.5);padding:.7rem 1.5rem;transform:translateY(10px);transition:transform .5s var(--ease);font-weight:400}
.work-card:hover .work-card__hover-label{transform:translateY(0)}
.work-card__info{padding:1.5rem 0 .5rem}
.work-card__cat{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);font-weight:500}
.work-card__title{font-family:var(--serif);font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:300;margin:.6rem 0 .5rem;line-height:1.2}
.work-card__desc{font-size:.85rem;color:var(--gray);line-height:1.6;max-width:400px;font-weight:300}

@media(max-width:700px){
  .work__grid{grid-template-columns:1fr}
  .work-card--wide{grid-column:span 1}
  .work-card--wide .work-card__img-wrap{aspect-ratio:4/5}
}

/* ── ABOUT ── */
.about{position:relative;min-height:80vh;display:flex;align-items:center;padding:clamp(5rem,12vw,10rem) 0;overflow:hidden}
.about__media{position:absolute;inset:0}
.about__bg-img{width:100%;height:100%;object-fit:cover}
.about__overlay{position:absolute;inset:0;background:rgba(10,10,10,.75)}
.about__content{position:relative;z-index:2;max-width:800px}
.about__headline{font-family:var(--serif);font-size:clamp(2rem,5vw,3.8rem);color:var(--ivory);font-weight:300;line-height:1.15;margin-bottom:2.5rem;letter-spacing:-.01em}
.about__body{max-width:600px}
.about__body p{font-size:clamp(.9rem,1.1vw,1.05rem);color:rgba(245,242,237,.65);line-height:1.8;margin-bottom:1.2rem;font-weight:300}

/* ── EXPERTISE ── */
.expertise{padding:clamp(5rem,12vw,10rem) 0;background:var(--ivory);border-top:1px solid rgba(10,10,10,.06)}
.expertise__header{margin-bottom:clamp(2rem,4vw,3.5rem);max-width:500px}
.expertise__sub{font-size:clamp(.9rem,1.1vw,1rem);color:var(--gray);line-height:1.7;font-weight:300}
.expertise__list{border-top:1px solid rgba(10,10,10,.08)}
.expertise__item{padding:clamp(1.2rem,2.5vw,2rem) 0;border-bottom:1px solid rgba(10,10,10,.08);display:flex;align-items:baseline;gap:2rem;cursor:default;transition:padding-left .5s var(--ease)}
.expertise__item:hover{padding-left:1.5rem}
.expertise__item::before{content:attr(data-num);font-size:.6rem;letter-spacing:.15em;color:var(--gray);min-width:2rem;font-weight:500}
.expertise__item span{font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.8rem);font-weight:300;letter-spacing:-.01em;transition:opacity .3s}
.expertise__list:hover .expertise__item span{opacity:.3}
.expertise__list:hover .expertise__item:hover span{opacity:1}

/* ── CLIENTS ── */
.clients{padding:clamp(5rem,12vw,10rem) 0;background:var(--white)}
.clients__header{margin-bottom:clamp(2rem,4vw,3rem)}
.clients__title{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;line-height:1.15;margin-bottom:1rem}
.clients__sub{font-size:clamp(.85rem,1vw,.95rem);color:var(--gray);max-width:500px;line-height:1.7;font-weight:300}

/* Filter */
.clients__filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.filter-btn{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.5rem 1.2rem;border:1px solid rgba(10,10,10,.12);color:var(--gray);transition:all .3s;font-weight:500}
.filter-btn.active,.filter-btn:hover{background:var(--black);color:var(--ivory);border-color:var(--black)}

/* Client Grid */
.clients__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-bottom:clamp(4rem,8vw,6rem)}
.client-item{overflow:hidden}
.client-item.hidden{display:none}
.client-item__img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer}
.client-item__img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:grayscale(100%)}
.client-item:hover img{transform:scale(1.06);filter:grayscale(0)}
.client-item__overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.7) 0%,transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;opacity:0;transition:opacity .4s}
.client-item:hover .client-item__overlay{opacity:1}
.client-item__cat{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.6);font-weight:500}
.client-item__name{font-family:var(--serif);font-size:1.1rem;color:var(--ivory);font-weight:300;margin-top:.2rem}
@media(max-width:700px){.clients__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:450px){.clients__grid{grid-template-columns:repeat(2,1fr);gap:.6rem}}

/* Brand Badges */
.clients__brands{border-top:1px solid rgba(10,10,10,.06);padding-top:clamp(2rem,4vw,3rem)}
.clients__brands-label{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:1.5rem;font-weight:500}
.clients__brands-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.brand-badge{font-family:var(--serif);font-size:.9rem;padding:.5rem 1.2rem;border:1px solid rgba(10,10,10,.08);color:var(--dark);transition:all .3s;font-weight:400}
.brand-badge:hover{background:var(--black);color:var(--ivory);border-color:var(--black)}

/* ── FOUNDER ── */
.founder{padding:clamp(5rem,12vw,10rem) 0;background:var(--ivory);border-top:1px solid rgba(10,10,10,.06)}
.founder__inner{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(3rem,6vw,6rem);align-items:center}
.founder__photo-frame{position:relative;overflow:hidden;aspect-ratio:3/4}
.founder__photo{width:100%;height:100%;object-fit:cover;filter:grayscale(40%);transition:filter .6s}
.founder__photo-frame:hover .founder__photo{filter:grayscale(0)}
.founder__headline{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.15;margin-bottom:2rem}
.founder__body{font-size:clamp(.88rem,1vw,.98rem);color:var(--dark);line-height:1.8;margin-bottom:1rem;font-weight:300;max-width:520px}
.founder__press{margin-top:2.5rem;border-top:1px solid rgba(10,10,10,.08);padding-top:1.5rem}
.founder__press-link{display:flex;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(10,10,10,.05);transition:padding-left .4s var(--ease)}
.founder__press-link:hover{padding-left:1rem}
.founder__press-pub{font-family:var(--serif);font-size:.95rem;font-style:italic;min-width:80px;color:var(--black);font-weight:500}
.founder__press-headline{font-size:.8rem;color:var(--gray);font-weight:300}
@media(max-width:800px){.founder__inner{grid-template-columns:1fr;gap:2.5rem}}

/* ── CONTACT ── */
.contact{padding:clamp(5rem,12vw,10rem) 0;background:var(--black);color:var(--ivory)}
.contact__header{margin-bottom:clamp(2.5rem,5vw,4rem)}
.contact__headline{font-family:var(--serif);font-size:clamp(2rem,5vw,3.8rem);font-weight:300;line-height:1.15;margin-bottom:1rem}
.contact__sub{font-size:.85rem;color:rgba(245,242,237,.45);font-weight:300}
.contact__sub a{color:rgba(245,242,237,.65);border-bottom:1px solid rgba(245,242,237,.2);transition:border-color .3s}
.contact__sub a:hover{border-color:var(--ivory)}
.contact__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(3rem,6vw,6rem)}
@media(max-width:800px){.contact__grid{grid-template-columns:1fr;gap:3rem}}

/* Form */
.contact__form{display:flex;flex-direction:column;gap:1.5rem}
.form-group label{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.4);margin-bottom:.5rem;font-weight:500}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.8rem 0;border-bottom:1px solid rgba(245,242,237,.12);color:var(--ivory);font-size:.9rem;transition:border-color .3s;font-weight:300}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:rgba(245,242,237,.5)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(245,242,237,.2)}
.form-group select{appearance:none;cursor:pointer}
.form-group select option{background:var(--black);color:var(--ivory)}
.contact__form .btn--dark{background:var(--ivory);color:var(--black);border-color:var(--ivory);align-self:flex-start;margin-top:.5rem}
.contact__form .btn--dark:hover{background:transparent;color:var(--ivory)}

/* Contact Info */
.contact__info{display:flex;flex-direction:column;gap:2.5rem;padding-top:.5rem}
.contact__info-label{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,237,.3);margin-bottom:.5rem;font-weight:500}
.contact__info-val{font-family:var(--serif);font-size:1.1rem;color:rgba(245,242,237,.7);font-weight:300}
a.contact__info-val{border-bottom:1px solid rgba(245,242,237,.15);transition:border-color .3s}
a.contact__info-val:hover{border-color:var(--ivory)}
.contact__social{display:flex;flex-direction:column;gap:.4rem}
.contact__social-link{font-size:.85rem;color:rgba(245,242,237,.5);transition:color .3s;font-weight:300}
.contact__social-link:hover{color:var(--ivory)}

/* ── FOOTER ── */
.footer{padding:2.5rem 0;border-top:1px solid rgba(245,242,237,.06);background:var(--black)}
.footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer__left{display:flex;align-items:center;gap:.5rem}
.footer__logo{height:20px;width:auto;filter:invert(1);opacity:.5}
.footer__name{font-family:var(--serif);font-size:.75rem;color:rgba(245,242,237,.4);letter-spacing:.1em;font-weight:300}
.footer__nav{display:flex;gap:1.5rem}
.footer__nav a{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(245,242,237,.3);transition:color .3s;font-weight:400}
.footer__nav a:hover{color:var(--ivory)}
.footer__right{text-align:right}
.footer__right p{font-size:.65rem;color:rgba(245,242,237,.25);line-height:1.6;font-weight:300}
@media(max-width:700px){
  .footer__inner{flex-direction:column;text-align:center}
  .footer__right{text-align:center}
  .footer__nav{flex-wrap:wrap;justify-content:center}
}

/* ── ANIMATIONS ── */
.js-fade-up{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-fade-up.visible{opacity:1;transform:translateY(0)}
.js-split-line{display:block;opacity:0;transform:translateY(100%);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-split-line.visible{opacity:1;transform:translateY(0)}

/* Stagger delays */
.hero__line:nth-child(1){transition-delay:.1s}
.hero__line:nth-child(2){transition-delay:.25s}
.hero__line:nth-child(3){transition-delay:.4s}

/* ── RESPONSIVE ── */
@media(max-width:500px){
  .hero__ctas{flex-direction:column;align-items:flex-start}
  .hero__scroll{display:none}
  .expertise__item::before{display:none}
  .expertise__item{gap:0}
}