/* ══════════════════════════════════════════════════════
   LUXE CO STUDIO — PAGE-SPECIFIC STYLES
   All page CSS compiled from HTML source files.
   CSS variables, resets, and global styles are in main.css.
   ══════════════════════════════════════════════════════ */

/* ── Shorthand variable aliases (maps pages.css shorthand to theme variables) ── */
:root {
  --ww: var(--white);      /* #FAF8F5 pearl */
  --ch: var(--charcoal);   /* #2C2C2C */
  --dp: var(--deep);       /* #1A1A1A */
  --br: var(--brass);      /* #B8A088 */
  --gr: var(--greige);     /* #EDE8E2 */
  --tp: var(--taupe);      /* #D4CEC6 */
  --sf: var(--serif);      /* Cormorant Garamond */
  --sn: var(--sans);       /* Jost */
}

/* ── IMAGE PLACEHOLDER (shown when no image is uploaded) ── */
.luxe-img-placeholder {
    background: #2a2520;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
}
.luxe-img-placeholder span {
    color: var(--brass);
    font-size: 16px;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
    line-height: 1.8;
}

/* ── PROJECT LIGHTBOX ── */
.proj-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.proj-lightbox.active { display: flex; }
.proj-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; text-align: center; }
.proj-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; }
.proj-lightbox-close {
    position: absolute; top: -40px; right: 0;
    background: none; border: none; color: #FAF8F5;
    font-size: 2rem; cursor: pointer; opacity: .6; transition: opacity .2s;
}
.proj-lightbox-close:hover { opacity: 1; }
.proj-lightbox-prev, .proj-lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(26,26,26,.6); border: 1px solid rgba(250,248,245,.1);
    color: #FAF8F5; width: 48px; height: 48px; cursor: pointer;
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    transition: background .2s; border-radius: 0;
}
.proj-lightbox-prev:hover, .proj-lightbox-next:hover { background: rgba(184,160,136,.3); }
.proj-lightbox-prev { left: -64px; }
.proj-lightbox-next { right: -64px; }
.proj-lightbox-caption {
    display: block;
    margin-top: 12px;
    font-size: 1rem; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(250,248,245,.4);
}


/* ══════════════════════════════════════
   01 — Services Hub
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.svc-hero{position:relative;height:55vh;min-height:400px;background:linear-gradient(170deg,#3a352f 0%,#2e2924 60%,#1a1815 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.svc-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(184,160,136,.08) 0%,transparent 60%)}
.svc-hero h1{font-family:var(--sf);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--ww);position:relative;z-index:2;margin-bottom:20px;animation:fadeUp 1s ease-out both}
.svc-hero p{font-family:var(--sn);font-size: 1rem;font-weight:200;color:rgba(250,248,245,.5);max-width:480px;position:relative;z-index:2;animation:fadeUp 1s ease-out .2s both;line-height:1.8}

.service-section{display:grid;grid-template-columns:1fr 1fr;min-height:75vh}
.service-section.reverse{direction:rtl}.service-section.reverse>*{direction:ltr}
.service-image{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%)}

.service-content{padding:80px 72px;display:flex;flex-direction:column;justify-content:center}
.service-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.26em;text-transform:uppercase;color:var(--br);margin-bottom:18px}
.service-content h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ch);margin-bottom:28px;line-height:1.2}
.service-content .lead{font-size: 1rem;color:#444;line-height:1.9;margin-bottom:20px;font-family:var(--sf);font-weight:400;font-style:italic}
.service-content .body{font-size: 1rem;color:#666;line-height:1.9;margin-bottom:14px}
.learn-more{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--ch);text-decoration:none;border-bottom:1px solid var(--tp);padding-bottom:2px;transition:color .3s,gap .3s,border-color .3s}
.learn-more:hover{color:var(--br);gap:16px;border-color:var(--br)}

.service-divider{padding:64px 80px;text-align:center;background:var(--gr)}
.service-divider p{font-family:var(--sf);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;font-style:italic;color:var(--ch);max-width:580px;margin:0 auto;line-height:1.5}

.process{padding:120px 80px;background:var(--ww)}
.process-header{text-align:center;margin-bottom:72px}
.process-header h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:20px auto 0}
.process-header .sub{font-size: 1rem;font-weight:200;color:#999;margin-top:16px;max-width:440px;margin-left:auto;margin-right:auto}
.process-timeline{max-width:600px;margin:0 auto;position:relative}
.process-timeline::before{content:'';position:absolute;left:23px;top:0;bottom:0;width:1px;background:var(--tp)}
.p-step{display:flex;gap:36px;margin-bottom:44px;position:relative;align-items:flex-start}
.p-step:last-child{margin-bottom:0}
.step-circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--br);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--sf);font-size:1rem;color:var(--br);background:var(--ww);position:relative;z-index:2}
.step-body h3{font-family:var(--sf);font-size:1.2rem;font-weight:400;color:var(--ch);margin-bottom:6px;margin-top:10px}
.step-body p{font-size: 1rem;color:#888;line-height:1.8}

.svc-cta{background:var(--dp);padding:100px 48px;text-align:center}
.svc-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.svc-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:440px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.service-section,.service-section.reverse{grid-template-columns:1fr;direction:ltr}.service-section.reverse>*{direction:ltr}
.service-image{min-height:280px}.service-content{padding:56px 32px}
.service-divider{padding:48px 28px}.process{padding:80px 28px}
.svc-cta{padding:72px 28px}footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   02 — Service: Residential
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.svc-detail-hero{position:relative;height:65vh;min-height:450px;background:linear-gradient(160deg,#2e2924 0%,#3a332c 60%,#4a423a 100%);display:flex;align-items:flex-end;overflow:hidden}
.svc-detail-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 65% 45%,rgba(184,160,136,.1) 0%,transparent 55%)}
.hero-inner{position:relative;z-index:2;padding:0 80px 72px;max-width:660px}
.hero-label{font-family:var(--sn);font-size: 20px;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.hero-inner h1{font-family:var(--sf);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;color:var(--ww);line-height:1.12;margin-bottom:20px;animation:fadeUp 1s ease-out both}
.hero-inner p{font-size: 24px;font-weight:200;color:rgba(250,248,245,.5);line-height:1.8;max-width:480px;animation:fadeUp 1s ease-out .2s both}

.svc-philosophy{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:0 auto;padding:100px 80px;gap:72px;align-items:center}
.svc-phil-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:24px;line-height:1.3}
.svc-phil-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:18px}
.svc-phil-img{aspect-ratio:4/5;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%);position:relative}


.included{background:var(--gr);padding:100px 80px}
.included-header{text-align:center;margin-bottom:56px}
.included-header h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:20px auto 0}
.included-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:1000px;margin:0 auto}
.inc-item h3{font-family:var(--sf);font-size:1.15rem;font-weight:400;color:var(--ch);margin-bottom:10px}
.inc-item p{font-size: 1rem;color:#888;line-height:1.8}

.experience{max-width:780px;margin:0 auto;padding:100px 80px;text-align:center}
.experience h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:28px}
.experience p{font-size: 1rem;color:#555;line-height:2;margin-bottom:18px}

.port-preview{padding:80px 80px 100px}
.port-preview h3{font-family:var(--sf);font-size:1.5rem;font-weight:300;text-align:center;color:var(--ch);margin-bottom:40px}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1100px;margin:0 auto}
.preview-item{aspect-ratio:4/3;background:linear-gradient(135deg,#c4bbb0 0%,#b8a088 100%);position:relative;overflow:hidden}

.svc-detail-cta{background:var(--dp);padding:100px 48px;text-align:center}
.svc-detail-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.svc-detail-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:440px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

.other-services{padding:56px 80px;border-top:1px solid var(--tp);display:flex;justify-content:center;gap:48px}
.other-services a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;text-decoration:none;transition:color .3s}.other-services a:hover{color:var(--br)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.hero-inner{padding:0 28px 56px}
.svc-philosophy{grid-template-columns:1fr;padding:64px 28px;gap:40px}
.included{padding:64px 28px}.included-grid{grid-template-columns:1fr;gap:32px}
.experience{padding:64px 28px}
.port-preview{padding:56px 28px}.preview-grid{grid-template-columns:1fr 1fr;gap:8px}
.svc-detail-cta{padding:64px 28px}
.other-services{padding:40px 28px;flex-direction:column;align-items:center;gap:20px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   03 — Service: Commercial
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.svc-detail-hero{position:relative;height:65vh;min-height:450px;background:linear-gradient(160deg,#2a2520 0%,#3a332c 100%);display:flex;align-items:flex-end}
.svc-detail-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 55% 50%,rgba(184,160,136,.08) 0%,transparent 55%)}
.hero-inner{position:relative;z-index:2;padding:0 80px 72px;max-width:660px}
.hero-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.hero-inner h1{font-family:var(--sf);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;color:var(--ww);line-height:1.12;margin-bottom:20px;animation:fadeUp 1s ease-out both}
.hero-inner p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.5);line-height:1.8;max-width:480px;animation:fadeUp 1s ease-out .2s both}

.svc-philosophy{display:grid;grid-template-columns:1.1fr 1fr;max-width:1200px;margin:0 auto;padding:100px 80px;gap:72px;align-items:center}
.svc-phil-img{aspect-ratio:4/5;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%);position:relative}

.svc-phil-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:24px;line-height:1.3}
.svc-phil-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:18px}

.types-section{background:var(--gr);padding:100px 80px}
.types-header{text-align:center;margin-bottom:56px}
.types-header h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:20px auto 0}
.types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:0 auto;border-top:1px solid var(--tp)}
.type-block{padding:40px 24px;text-align:center;border-right:1px solid var(--tp)}
.type-block:last-child{border-right:none}
.type-num{font-family:var(--sf);font-size: 1rem;font-style:italic;color:var(--br);margin-bottom:14px;display:block}
.type-block h3{font-family:var(--sf);font-size:1.1rem;font-weight:400;color:var(--ch);margin-bottom:10px}
.type-block p{font-size: 1rem;color:#888;line-height:1.75}

.approach{max-width:780px;margin:0 auto;padding:100px 80px;text-align:center}
.approach h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:28px}
.approach p{font-size: 1rem;color:#555;line-height:2;margin-bottom:18px}

.svc-detail-cta{background:var(--dp);padding:100px 48px;text-align:center}
.svc-detail-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.svc-detail-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:440px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

.other-services{padding:56px 80px;border-top:1px solid var(--tp);display:flex;justify-content:center;gap:48px}
.other-services a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;text-decoration:none;transition:color .3s}.other-services a:hover{color:var(--br)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.hero-inner{padding:0 28px 56px}
.svc-philosophy{grid-template-columns:1fr;padding:64px 28px;gap:40px}
.types-section{padding:64px 28px}.types-grid{grid-template-columns:1fr 1fr;border-top:none}
.type-block{border:none;border-bottom:1px solid var(--tp)}
.approach{padding:64px 28px}.svc-detail-cta{padding:64px 28px}
.other-services{padding:40px 28px;flex-direction:column;align-items:center;gap:20px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   04 — Service: Spatial Blueprint
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.svc-detail-hero{position:relative;height:65vh;min-height:450px;background:linear-gradient(160deg,#35302b 0%,#2e2924 100%);display:flex;align-items:flex-end}
.svc-detail-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 55%,rgba(184,160,136,.08) 0%,transparent 50%)}
.hero-inner{position:relative;z-index:2;padding:0 80px 72px;max-width:700px}
.hero-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.hero-inner h1{font-family:var(--sf);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;color:var(--ww);line-height:1.12;margin-bottom:20px;animation:fadeUp 1s ease-out both}
.hero-inner p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.5);line-height:1.8;max-width:520px;animation:fadeUp 1s ease-out .2s both}

.split{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:0 auto;padding:100px 80px;gap:72px;align-items:center}
.split.reverse{direction:rtl}.split.reverse>*{direction:ltr}
.split-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:24px;line-height:1.3}
.split-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:18px}
.split-img{aspect-ratio:1;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%);position:relative}


.deliverables{background:var(--gr);padding:100px 80px}
.del-header{text-align:center;margin-bottom:56px}
.del-header h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:20px auto 0}
.del-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;max-width:900px;margin:0 auto}
.del-item h3{font-family:var(--sf);font-size:1.1rem;font-weight:400;color:var(--ch);margin-bottom:8px}
.del-item p{font-size: 1rem;color:#888;line-height:1.8}

.value-section{padding:100px 80px;background:var(--ww)}
.value-header{text-align:center;margin-bottom:56px}
.value-header h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:960px;margin:0 auto}
.value-item{text-align:center;padding:0 12px}
.value-num{font-family:var(--sf);font-size:2.4rem;font-weight:300;color:var(--br);margin-bottom:12px;line-height:1}
.value-item h3{font-family:var(--sf);font-size:1.05rem;font-weight:400;color:var(--ch);margin-bottom:10px}
.value-item p{font-size: 1rem;color:#888;line-height:1.8}

.ideal{max-width:720px;margin:0 auto;padding:100px 80px}
.ideal blockquote{font-family:var(--sf);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:300;font-style:italic;color:var(--ch);text-align:center;line-height:1.5;margin-bottom:28px}
.ideal p{font-size: 1rem;color:#666;line-height:1.9;text-align:center}

.problem-section{max-width:780px;margin:0 auto;padding:100px 80px;text-align:center;border-top:1px solid var(--tp)}
.problem-section h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2rem);font-weight:300;color:var(--ch);margin-bottom:28px;line-height:1.3}
.problem-section p{font-size: 1rem;color:#555;line-height:2;margin-bottom:18px}

.svc-detail-cta{background:var(--dp);padding:100px 48px;text-align:center}
.svc-detail-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.svc-detail-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:480px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

.other-services{padding:56px 80px;border-top:1px solid var(--tp);display:flex;justify-content:center;gap:48px}
.other-services a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;text-decoration:none;transition:color .3s}.other-services a:hover{color:var(--br)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.hero-inner{padding:0 28px 56px}
.split,.split.reverse{grid-template-columns:1fr;padding:64px 28px;gap:40px;direction:ltr}.split.reverse>*{direction:ltr}
.deliverables{padding:64px 28px}.del-grid{grid-template-columns:1fr}
.value-section{padding:64px 28px}.value-grid{grid-template-columns:1fr;gap:36px}
.ideal,.problem-section{padding:64px 28px}
.svc-detail-cta{padding:64px 28px}
.other-services{padding:40px 28px;flex-direction:column;align-items:center;gap:20px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   05 — Service: Selections & Styling
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.svc-detail-hero{position:relative;height:65vh;min-height:450px;background:linear-gradient(160deg,#35302b 0%,#2e2924 100%);display:flex;align-items:flex-end}
.svc-detail-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 55%,rgba(184,160,136,.08) 0%,transparent 50%)}
.hero-inner{position:relative;z-index:2;padding:0 80px 72px;max-width:660px}
.hero-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.hero-inner h1{font-family:var(--sf);font-size:clamp(2.2rem,4.5vw,3.6rem);font-weight:300;color:var(--ww);line-height:1.12;margin-bottom:20px;animation:fadeUp 1s ease-out both}
.hero-inner p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.5);line-height:1.8;max-width:500px;animation:fadeUp 1s ease-out .2s both}

.split{display:grid;grid-template-columns:1fr 1fr;max-width:1200px;margin:0 auto;padding:100px 80px;gap:72px;align-items:center}
.split.reverse{direction:rtl}.split.reverse>*{direction:ltr}
.split-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:24px;line-height:1.3}
.split-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:18px}
.split-img{aspect-ratio:1;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%);position:relative}


.deliverables{background:var(--gr);padding:100px 80px}
.del-header{text-align:center;margin-bottom:56px}
.del-header h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:20px auto 0}
.del-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;max-width:800px;margin:0 auto}
.del-item h3{font-family:var(--sf);font-size:1.1rem;font-weight:400;color:var(--ch);margin-bottom:8px}
.del-item p{font-size: 1rem;color:#888;line-height:1.8}

.ideal{max-width:700px;margin:0 auto;padding:100px 80px}
.ideal blockquote{font-family:var(--sf);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:300;font-style:italic;color:var(--ch);text-align:center;line-height:1.5;margin-bottom:28px}
.ideal p{font-size: 1rem;color:#666;line-height:1.9;text-align:center}

.svc-detail-cta{background:var(--dp);padding:100px 48px;text-align:center}
.svc-detail-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.svc-detail-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:440px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

.other-services{padding:56px 80px;border-top:1px solid var(--tp);display:flex;justify-content:center;gap:48px}
.other-services a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;text-decoration:none;transition:color .3s}.other-services a:hover{color:var(--br)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.hero-inner{padding:0 28px 56px}
.split,.split.reverse{grid-template-columns:1fr;padding:64px 28px;gap:40px;direction:ltr}.split.reverse>*{direction:ltr}
.deliverables{padding:64px 28px}.del-grid{grid-template-columns:1fr}
.ideal{padding:64px 28px}
.svc-detail-cta{padding:64px 28px}
.other-services{padding:40px 28px;flex-direction:column;align-items:center;gap:20px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   06 — Contact
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.contact-hero{position:relative;height:70vh;min-height:500px;background:linear-gradient(170deg,#3a352f 0%,#2e2924 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.contact-hero h1{font-family:var(--sf);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300;color:var(--ww);margin-bottom:20px;animation:fadeUp 1s ease-out both}
.contact-hero p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.5);max-width:460px;line-height:1.8;animation:fadeUp 1s ease-out .2s both}

.contact-main{display:grid;grid-template-columns:1fr 1.2fr;max-width:1200px;margin:0 auto;padding:100px 80px;gap:80px;align-items:start}

.contact-intro h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:28px;line-height:1.3}
.contact-intro p{font-size: 1rem;color:#666;line-height:1.9;margin-bottom:16px}
.contact-details{margin-top:48px;padding-top:36px;border-top:1px solid var(--tp)}
.contact-detail{margin-bottom:24px}
.contact-detail label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--br);display:block;margin-bottom:6px}
.contact-detail span,.contact-detail a{font-size: 1rem;color:#555;text-decoration:none}
.contact-detail a:hover{color:var(--br)}
.social-links{display:flex;gap:20px;margin-top:8px}
.social-links a{font-family:var(--sn);font-size: 1rem;color:#999;text-decoration:none;transition:color .3s}.social-links a:hover{color:var(--br)}

.contact-form-wrapper{background:var(--gr);padding:56px 52px}
.contact-form-wrapper h3{font-family:var(--sf);font-size:1.5rem;font-weight:400;color:var(--ch);margin-bottom:8px}
.form-sub{font-size: 1rem;color:#aaa;margin-bottom:36px;font-family:var(--sn);font-weight:200}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--ch);margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:13px 16px;border:1px solid var(--tp);background:var(--ww);font-family:var(--sn);font-size: 1rem;font-weight:300;color:var(--ch);outline:none;transition:border-color .3s;appearance:none}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--br)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8A088' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.submit-btn{width:100%;padding:16px;margin-top:12px;background:var(--ch);color:var(--ww);border:none;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .4s}.submit-btn:hover{background:var(--br)}
.form-note{font-size: 1rem;color:#ccc;margin-top:12px;text-align:center;font-family:var(--sn);font-weight:200}

.contact-closing{padding:80px 48px;text-align:center;background:var(--greige)}
.contact-closing p{font-family:var(--sf);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;color:var(--ch);font-style:italic}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.contact-main{grid-template-columns:1fr;padding:60px 28px;gap:48px}
.contact-form-wrapper{padding:40px 28px}
.form-row{grid-template-columns:1fr}
.contact-closing{padding:56px 28px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   07 — About
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.about-hero{position:relative;height:70vh;min-height:500px;background:linear-gradient(160deg,#2e2924 0%,#3a332c 50%,#4a423a 100%);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.about-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(184,160,136,.1) 0%,transparent 60%)}
.about-hero-content{position:relative;z-index:2;padding:0 80px;max-width:750px;text-align:center;margin:0 auto}
.about-hero h1{font-family:var(--sf);font-size:clamp(2.6rem,5vw,4.2rem);font-weight:300;color:var(--ww);line-height:1.15;animation:fadeUp 1s ease-out both}
.about-hero-sub{font-family:var(--sn);font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);letter-spacing:.1em;margin-top:20px;animation:fadeUp 1s ease-out .3s both}

.studio-identity{padding:100px 80px;max-width:1200px;margin:0 auto}
.studio-identity-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.studio-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:300;color:var(--ch);margin-bottom:36px;line-height:1.3}
.studio-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:20px}
.studio-image-stack{display:grid;grid-template-rows:1.3fr .7fr;gap:4px;min-height:520px}
.studio-img{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%)}


.divider-quote{padding:80px;text-align:center;background:var(--gr)}
.divider-quote blockquote{font-family:var(--sf);font-size:clamp(1.3rem,2.4vw,2rem);font-weight:300;color:var(--ch);line-height:1.5;max-width:780px;margin:0 auto;font-style:italic}

.philosophy{padding:100px 80px;background:var(--ww)}
.philosophy-header{text-align:center;margin-bottom:64px}
.philosophy-header h2{font-family:var(--sf);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--ch)}
.accent-line{width:48px;height:1px;background:var(--br);margin:24px auto 0}
.philosophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1100px;margin:0 auto;border-top:1px solid var(--tp)}
.phil-block{padding:44px;text-align:center}
.phil-block:not(:last-child){border-right:1px solid var(--tp)}
.phil-num{font-family:var(--sf);font-size: 1rem;font-style:italic;color:var(--br);margin-bottom:14px;display:block}
.phil-block h3{font-family:var(--sf);font-size:1.35rem;font-weight:400;color:var(--ch);margin-bottom:14px}
.phil-block p{font-size: 1rem;color:#888;line-height:1.85}

.founder-section{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:75vh}
.founder-images{display:grid;grid-template-rows:1.2fr .8fr;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--gr)}
.founder-img{position:relative;overflow:hidden;background:linear-gradient(170deg,var(--gr) 0%,var(--tp) 100%)}
.founder-img.hero-img{grid-column:1/-1}

.founder-text{padding:80px 72px;display:flex;flex-direction:column;justify-content:center}
.founder-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--br);margin-bottom:20px}
.founder-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:32px;line-height:1.3}
.founder-text p{font-size: 1rem;color:#555;line-height:1.95;margin-bottom:20px}

.video-section{background:var(--dp);padding:100px 80px;text-align:center}
.video-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.26em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.video-section h2{font-family:var(--sf);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:300;color:var(--ww);margin-bottom:48px;line-height:1.35}
.video-embed{max-width:900px;margin:0 auto;aspect-ratio:16/9;background:linear-gradient(135deg,#2a2520 0%,#3a332c 100%);position:relative;overflow:hidden;border:1px solid rgba(250,248,245,.08)}
.video-embed::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:2px solid rgba(250,248,245,.35);background:rgba(250,248,245,.08)}
.video-embed::before{content:'';position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);width:0;height:0;border-left:18px solid rgba(250,248,245,.5);border-top:11px solid transparent;border-bottom:11px solid transparent}
.video-caption{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.3);margin-top:20px;font-style:italic}

.belief{background:var(--ww);padding:100px 80px;text-align:center}
.belief blockquote{font-family:var(--sf);font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:300;color:var(--ch);line-height:1.45;max-width:780px;margin:0 auto;font-style:italic}
.belief cite{display:block;margin-top:28px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--br);font-style:normal}

.media-line{padding:44px 80px;text-align:center;border-top:1px solid var(--tp);border-bottom:1px solid var(--tp)}
.media-line p{font-size: 1rem;color:#aaa;letter-spacing:.04em}
.media-line a{color:var(--br);text-decoration:none;transition:color .3s}.media-line a:hover{color:var(--ch)}

.about-cta{background:var(--dp);padding:100px 48px;text-align:center}
.about-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.about-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:440px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.about-hero-content{padding:0 32px 56px}
.studio-identity{padding:72px 32px}.studio-identity-inner{grid-template-columns:1fr;gap:48px}
.studio-image-stack{min-height:280px;grid-template-rows:1fr;grid-template-columns:1fr 1fr}
.divider-quote{padding:56px 32px}
.philosophy{padding:72px 32px}.philosophy-grid{grid-template-columns:1fr;border-top:none}
.phil-block:not(:last-child){border-right:none;border-bottom:1px solid var(--tp)}
.founder-section{grid-template-columns:1fr}
.founder-images{max-height:320px;grid-template-rows:1fr;grid-template-columns:1fr 1fr 1fr}
.founder-img.hero-img{grid-column:auto}
.founder-text{padding:56px 32px}
.video-section{padding:72px 28px}
.belief{padding:72px 32px}
.media-line{padding:36px 28px}
.about-cta{padding:72px 32px}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   08 — Lookbook Landing
   ══════════════════════════════════════ */

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

body.lookbook-page{background:var(--dp);color:var(--ww)}

.lp-nav{padding:28px 56px;display:flex;justify-content:center}
.lp-nav a{font-family:var(--sf);font-size:1.2rem;font-weight:400;letter-spacing:.06em;color:var(--ww);text-decoration:none;opacity:.45;transition:opacity .3s}.lp-nav a:hover{opacity:1}

.lp-hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 80px);max-width:1300px;margin:0 auto;padding:0 56px 40px;gap:72px;align-items:center}
.lp-text{max-width:460px}
.lp-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:24px;display:block}
.lp-text h1{font-family:var(--sf);font-size:clamp(2rem,3.5vw,3rem);font-weight:300;color:var(--ww);line-height:1.2;margin-bottom:28px}
.lp-text .opening{font-family:var(--sf);font-size:1.05rem;font-weight:300;font-style:italic;color:rgba(250,248,245,.6);line-height:1.7;margin-bottom:24px}
.lp-text .body{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.4);line-height:1.9;margin-bottom:12px}

.inside-preview{margin:36px 0;padding:32px 0;border-top:1px solid rgba(250,248,245,.07);border-bottom:1px solid rgba(250,248,245,.07)}
.inside-preview p{font-size: 1rem;color:rgba(250,248,245,.32);line-height:1.85}
.inside-preview em{color:rgba(250,248,245,.52);font-style:normal}

.lp-form{margin-top:36px}
.form-row{display:flex;gap:0}
.lp-form input{flex:1;padding:15px 18px;border:1px solid rgba(250,248,245,.1);border-right:none;background:rgba(250,248,245,.03);font-family:var(--sn);font-size: 1rem;color:var(--ww);outline:none;transition:border-color .3s}
.lp-form input::placeholder{color:rgba(250,248,245,.2)}
.lp-form input:focus{border-color:var(--br)}
.lp-form button{padding:15px 32px;background:var(--br);color:var(--ww);border:1px solid var(--br);font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .3s;white-space:nowrap}
.lp-form button:hover{background:transparent;color:var(--br)}
.lp-fine{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.18);margin-top:14px}

.trust-strip{max-width:1300px;margin:0 auto;padding:0 56px 56px;display:flex;gap:48px}
.trust-item{display:flex;align-items:center;gap:10px}
.trust-dot{width:4px;height:4px;border-radius:50%;background:var(--br);flex-shrink:0;opacity:.45}
.trust-item span{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.2);letter-spacing:.04em}

.lp-closing{text-align:center;padding:24px 56px 48px}
.lp-closing a{font-size: 1rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,248,245,.2);text-decoration:none;transition:color .3s}.lp-closing a:hover{color:var(--br)}

@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.lp-visual{animation:fadeUp 1s ease-out both}
.lp-text{animation:fadeUp 1s ease-out .25s both}
.trust-strip{animation:fadeUp 1s ease-out .5s both}

@media(max-width:960px){
.lp-hero{grid-template-columns:1fr;padding:0 28px 40px;gap:40px;min-height:auto;padding-top:20px}
.lp-image{max-height:45vh;aspect-ratio:4/5}.peek-page{display:none}
.lp-text{max-width:100%}.lp-nav{padding:22px 28px}
.form-row{flex-direction:column;gap:10px}
.lp-form input{border-right:1px solid rgba(250,248,245,.1)}
.trust-strip{flex-direction:column;gap:16px;padding:0 28px 40px}
.lp-closing{padding:16px 28px 40px}
}


/* ══════════════════════════════════════
   09 — Journal
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.journal-hero{position:relative;height:45vh;min-height:340px;background:linear-gradient(160deg,#2e2924 0%,#3a332c 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.journal-hero h1{font-family:var(--sf);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--ww);margin-bottom:16px;animation:fadeUp 1s ease-out both}
.journal-hero p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.4);max-width:420px;line-height:1.8;animation:fadeUp 1s ease-out .2s both}

.featured-post{display:grid;grid-template-columns:1.3fr 1fr;max-width:1200px;margin:0 auto;padding:80px;gap:0}
.featured-img{aspect-ratio:4/3;background:linear-gradient(135deg,var(--gr) 0%,var(--tp) 100%);position:relative;overflow:hidden}
.featured-img::after{content:'Featured Image';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--sn);font-size: 1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--br);opacity:.4}
.featured-text{padding:48px 56px;display:flex;flex-direction:column;justify-content:center;background:var(--gr)}
.post-cat{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--br);margin-bottom:14px}
.featured-text h2{font-family:var(--sf);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:18px;line-height:1.3}
.featured-text p{font-size: 1rem;color:#777;line-height:1.85;margin-bottom:24px}
.featured-text .meta{font-size: 1rem;font-weight:200;color:#bbb;margin-bottom:20px;letter-spacing:.04em}
.link-text{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:var(--ch);text-decoration:none;display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid var(--tp);padding-bottom:2px;transition:color .3s,gap .3s,border-color .3s}.link-text:hover{color:var(--br);gap:16px;border-color:var(--br)}

.journal-filter{display:flex;justify-content:center;gap:28px;padding:28px 32px;border-bottom:1px solid var(--tp);max-width:1200px;margin:0 auto}
.filter-btn{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;cursor:pointer;padding:6px 0;border:none;background:none;border-bottom:2px solid transparent;transition:all .3s}.filter-btn:hover,.filter-btn.active{color:var(--ch);border-bottom-color:var(--br)}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1200px;margin:0 auto;padding:56px 80px 100px}
.post-card{cursor:pointer}
.post-thumb{aspect-ratio:3/2;background:linear-gradient(135deg,var(--gr) 0%,var(--tp) 100%);margin-bottom:20px;position:relative;overflow:hidden}
.post-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.25),transparent);opacity:0;transition:opacity .4s}
.post-card:hover .post-thumb::after{opacity:1}
.post-card .post-cat{margin-bottom:8px;display:block}
.post-card h3{font-family:var(--sf);font-size:1.25rem;font-weight:400;color:var(--ch);margin-bottom:10px;line-height:1.35}
.post-card p{font-size: 1rem;color:#999;line-height:1.75;margin-bottom:12px}
.post-card .meta{font-size: 1rem;font-weight:200;color:#ccc;letter-spacing:.04em}

.lookbook-banner{background:var(--dp);padding:72px 48px;text-align:center}
.lookbook-banner h3{font-family:var(--sf);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;color:var(--ww);margin-bottom:16px}
.lookbook-banner p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.4);max-width:400px;margin:0 auto 32px;line-height:1.8}
.banner-form{display:flex;gap:0;justify-content:center;max-width:400px;margin:0 auto}
.banner-form input{flex:1;padding:14px 18px;border:1px solid rgba(250,248,245,.15);border-right:none;background:transparent;font-family:var(--sn);font-size: 1rem;color:var(--ww);outline:none}
.banner-form input::placeholder{color:rgba(250,248,245,.25)}
.banner-form input:focus{border-color:var(--br)}
.banner-form button{padding:14px 28px;background:var(--ww);color:var(--dp);border:1px solid var(--ww);font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .3s;white-space:nowrap}
.banner-form button:hover{background:var(--br);color:var(--ww);border-color:var(--br)}

.pagination{display:flex;justify-content:center;gap:8px;padding:0 80px 80px}
.page-num{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--sn);font-size: 1rem;color:#999;border:1px solid var(--tp);cursor:pointer;transition:all .3s;background:none}
.page-num.active,.page-num:hover{background:var(--ch);color:var(--ww);border-color:var(--ch)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.featured-post{grid-template-columns:1fr;padding:48px 28px}.featured-text{padding:36px 28px}
.journal-filter{gap:16px;flex-wrap:wrap}
.post-grid{grid-template-columns:1fr 1fr;padding:40px 28px 72px;gap:28px}
.lookbook-banner{padding:56px 28px}
.banner-form{flex-direction:column;gap:10px}
.banner-form input{border-right:1px solid rgba(250,248,245,.15)}
footer{padding:36px 28px 20px}
}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}


/* ══════════════════════════════════════
   10 — Blog Post
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.post-hero{position:relative;height:55vh;min-height:400px;background:linear-gradient(135deg,#c4bbb0 0%,#a89478 100%);display:flex;align-items:flex-end}
.post-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.5) 0%,transparent 50%)}
.post-hero-content{position:relative;z-index:2;padding:0 80px 56px;max-width:700px}
.post-cat{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.24em;text-transform:uppercase;color:var(--br);margin-bottom:14px;display:block}
.post-hero h1{font-family:var(--sf);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;color:var(--ww);line-height:1.2;margin-bottom:16px}
.post-hero .meta{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.4);letter-spacing:.04em}

.article-wrap{max-width:700px;margin:0 auto;padding:72px 32px 80px}
.article-wrap p{font-size: 1rem;color:#555;line-height:2;margin-bottom:24px}
.post-content p:first-of-type::first-letter{font-family:var(--sf);font-size:3.4rem;float:left;line-height:.82;margin-right:10px;margin-top:8px;color:var(--br);font-weight:400}
.article-wrap h2{font-family:var(--sf);font-size:1.8rem;font-weight:300;color:var(--ch);margin:48px 0 20px;line-height:1.3}
.article-wrap h3{font-family:var(--sf);font-size:1.3rem;font-weight:400;color:var(--ch);margin:36px 0 14px;line-height:1.3}
.article-wrap blockquote{font-family:var(--sf);font-size:1.2rem;font-weight:300;font-style:italic;color:var(--ch);border-left:2px solid var(--br);padding:4px 0 4px 28px;margin:36px 0;line-height:1.6}
.inline-img{width:100%;aspect-ratio:16/9;margin:40px 0;background:linear-gradient(135deg,var(--gr) 0%,var(--tp) 100%);position:relative}


.share-bar{display:flex;align-items:center;gap:16px;padding:32px 0;border-top:1px solid var(--tp);border-bottom:1px solid var(--tp);margin-bottom:52px}
.share-bar span{font-size: 1rem;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:#bbb}
.share-bar a{font-size: 1rem;color:#999;text-decoration:none;transition:color .3s}.share-bar a:hover{color:var(--br)}

.lookbook-cta{background:var(--gr);padding:52px 48px;text-align:center;margin-bottom:52px}
.lookbook-cta h3{font-family:var(--sf);font-size:1.6rem;font-weight:300;color:var(--ch);margin-bottom:12px}
.lookbook-cta p{font-size: 1rem;color:#888;max-width:380px;margin:0 auto 24px;line-height:1.75}
.lookbook-form{display:flex;gap:0;justify-content:center;max-width:360px;margin:0 auto}
.lookbook-form input{flex:1;padding:13px 16px;border:1px solid var(--tp);border-right:none;background:var(--ww);font-family:var(--sn);font-size: 1rem;outline:none;color:var(--ch)}.lookbook-form input:focus{border-color:var(--br)}
.lookbook-form button{padding:13px 24px;background:var(--ch);color:var(--ww);border:1px solid var(--ch);font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s;white-space:nowrap}.lookbook-form button:hover{background:var(--br);border-color:var(--br)}

.consult-cta{text-align:center;padding:0 0 48px}
.consult-cta p{font-size: 1rem;color:#888;margin-bottom:20px;line-height:1.8}
.btn-dark{display:inline-block;padding:14px 40px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ww);background:var(--ch);text-decoration:none;transition:background .4s}.btn-dark:hover{background:var(--br)}

.related{background:var(--gr);padding:80px}
.related h3{font-family:var(--sf);font-size:1.5rem;font-weight:300;text-align:center;color:var(--ch);margin-bottom:48px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1100px;margin:0 auto}
.related-card{cursor:pointer}
.r-thumb{aspect-ratio:3/2;background:linear-gradient(135deg,var(--tp) 0%,#c4bbb0 100%);margin-bottom:16px}
.related-card .post-cat{margin-bottom:6px}
.related-card h4{font-family:var(--sf);font-size:1.15rem;font-weight:400;color:var(--ch);line-height:1.35;margin-bottom:6px}
.related-card .meta{font-size: 1rem;font-weight:200;color:#bbb}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.post-hero-content{padding:0 28px 40px}
.article-wrap{padding:48px 24px 56px}
.lookbook-cta{padding:40px 24px}
.lookbook-form{flex-direction:column;gap:10px}
.lookbook-form input{border-right:1px solid var(--tp)}
.related{padding:56px 28px}.related-grid{grid-template-columns:1fr}
footer{padding:36px 28px 20px}
}


/* ══════════════════════════════════════
   11 — Portfolio
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ch);text-decoration:none}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ch);text-decoration:none;transition:color .3s}.nav-links a:hover,.nav-links a.active{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.port-hero{position:relative;height:50vh;min-height:380px;background:linear-gradient(160deg,#2e2924 0%,#3a332c 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.port-hero h1{font-family:var(--sf);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--ww);margin-bottom:20px;animation:fadeUp 1s ease-out both}
.port-hero p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:480px;line-height:1.8;animation:fadeUp 1s ease-out .2s both}

.featured-project{position:relative;min-height:70vh;overflow:hidden;background:linear-gradient(135deg,#c4bbb0 0%,#a89478 100%)}
.featured-project::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(26,26,26,.7) 0%,rgba(26,26,26,.2) 55%,transparent 100%)}
.featured-content{position:relative;z-index:2;padding:100px 80px;display:flex;flex-direction:column;justify-content:flex-end;min-height:70vh;max-width:560px}
.feat-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.26em;text-transform:uppercase;color:var(--br);margin-bottom:16px}
.featured-content h2{font-family:var(--sf);font-size:clamp(2rem,3.5vw,3rem);font-weight:300;color:var(--ww);line-height:1.2;margin-bottom:12px}
.feat-meta{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.35);letter-spacing:.06em;margin-bottom:20px}
.featured-content p{font-size: 1rem;color:rgba(250,248,245,.6);line-height:1.85;margin-bottom:32px;max-width:440px}
.btn-outline{display:inline-block;padding:13px 36px;align-self:flex-start;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ww);border:1px solid rgba(250,248,245,.3);text-decoration:none;transition:all .4s}.btn-outline:hover{background:rgba(250,248,245,.1);border-color:var(--ww)}

.category-nav{display:flex;justify-content:center;gap:36px;padding:36px 32px;border-bottom:1px solid var(--tp);background:var(--ww);position:sticky;top:82px;z-index:50}
.cat-tab{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#aaa;cursor:pointer;padding:8px 0;border:none;background:none;border-bottom:2px solid transparent;transition:all .3s}.cat-tab:hover,.cat-tab.active{color:var(--ch);border-bottom-color:var(--br)}

.masonry{max-width:1400px;margin:0 auto;padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;grid-auto-rows:200px}
.m-item{position:relative;overflow:hidden;cursor:pointer}
.m-item .m-bg{position:absolute;inset:0;transition:transform .6s ease}
.m-item:hover .m-bg{transform:scale(1.04)}
.m-item[data-status="active"] .m-bg{background:linear-gradient(135deg,#c4bbb0 0%,#b8a088 50%,#a89478 100%)}
.m-item[data-status="soon"] .m-bg{background:linear-gradient(135deg,var(--gr) 0%,var(--tp) 100%)}
.m-item[data-status="soon"]::before{content:'';position:absolute;inset:0;z-index:2;backdrop-filter:blur(3px);background:rgba(250,248,245,.25)}
.m-tall{grid-row:span 2}.m-wide{grid-column:span 2}.m-large{grid-column:span 2;grid-row:span 2}
.m-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(to top,rgba(26,26,26,.55) 0%,transparent 45%);opacity:0;transition:opacity .4s}
.m-item:hover .m-overlay{opacity:1}
.m-item[data-status="soon"] .m-overlay{justify-content:center;align-items:center;background:none;opacity:1}
.m-overlay h3{font-family:var(--sf);font-size:1.3rem;font-weight:400;color:var(--ww);margin-bottom:3px}
.m-overlay span{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--br)}
.coming-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--br);padding:10px 24px;border:1px solid var(--br)}
.video-badge{position:absolute;top:16px;right:16px;z-index:4;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(250,248,245,.5);display:flex;align-items:center;justify-content:center;background:rgba(26,26,26,.3)}
.video-badge::after{content:'';width:0;height:0;border-left:8px solid rgba(250,248,245,.7);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}

.port-cta{background:var(--dp);padding:100px 48px;text-align:center}
.port-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--ww);margin-bottom:20px}
.port-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:420px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}
.featured-content{padding:60px 32px}
.category-nav{gap:14px;flex-wrap:wrap;top:66px}.cat-tab{font-size: 1rem}
.masonry{grid-template-columns:1fr 1fr;padding:16px;gap:8px;grid-auto-rows:180px}
.m-large{grid-column:span 2;grid-row:span 1}.m-wide{grid-column:span 2}
.port-cta{padding:72px 28px}footer{padding:36px 28px 20px}
}
@media(max-width:560px){
.masonry{grid-template-columns:1fr;grid-auto-rows:220px}.m-large,.m-wide{grid-column:span 1}
}


/* ══════════════════════════════════════
   12 — Project Single
   ══════════════════════════════════════ */

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

body{background:var(--ww);color:var(--ch);font-family:var(--sn);font-weight:300;line-height:1.7;overflow-x:hidden}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 56px;transition:background .5s,padding .4s,box-shadow .4s}
nav.scrolled{background:rgba(250,248,245,.97);padding:18px 56px;box-shadow:0 1px 20px rgba(0,0,0,.04)}
.logo{font-family:var(--sf);font-size:1.3rem;font-weight:400;letter-spacing:.06em;color:var(--ww);text-decoration:none;transition:color .5s}
nav.scrolled .logo{color:var(--ch)}
.nav-links{display:flex;gap:36px;list-style:none}.nav-links a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,248,245,.7);text-decoration:none;transition:color .4s}
nav.scrolled .nav-links a{color:var(--ch)}.nav-links a:hover{color:var(--br)}
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px}.hamburger span{width:22px;height:1px;background:var(--ww);transition:background .4s}
nav.scrolled .hamburger span{background:var(--ch)}
.mobile-nav{display:none;position:fixed;inset:0;background:var(--dp);z-index:150;flex-direction:column;justify-content:center;align-items:center;gap:40px}.mobile-nav.open{display:flex}.mobile-nav a{font-family:var(--sf);font-size:2rem;color:var(--ww);text-decoration:none;font-weight:300}.mobile-close{position:absolute;top:28px;right:30px;font-size:1.8rem;color:var(--ww);cursor:pointer;background:none;border:none}

.proj-hero{position:relative;height:100vh;min-height:600px;background:linear-gradient(135deg,#c4bbb0 0%,#a89478 50%,#8a7a66 100%);display:flex;align-items:flex-end;overflow:hidden}
.proj-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,26,.6) 0%,rgba(26,26,26,.1) 40%,transparent 70%)}
.proj-hero-content{position:relative;z-index:2;padding:0 80px 80px;max-width:600px}
.proj-label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:var(--br);margin-bottom:16px;display:block}
.proj-hero h1{font-family:var(--sf);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--ww);line-height:1.15;margin-bottom:14px;animation:fadeUp 1s ease-out both}
.proj-meta{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.4);letter-spacing:.04em;animation:fadeUp 1s ease-out .15s both}

.proj-overview{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;max-width:1100px;margin:0 auto;padding:100px 80px;align-items:start}
.detail-row{margin-bottom:24px}
.detail-row label{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--br);display:block;margin-bottom:4px}
.detail-row span{font-size: 1rem;color:#666}
.proj-narrative p{font-size: 1rem;color:#555;line-height:2;margin-bottom:20px}
.proj-narrative p:first-child::first-letter{font-family:var(--sf);font-size:3.2rem;float:left;line-height:.82;margin-right:10px;margin-top:6px;color:var(--br);font-weight:400}

.proj-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px;max-width:1400px;margin:0 auto;grid-auto-rows:240px}
.g-item{position:relative;overflow:hidden}
.g-item .g-bg{position:absolute;inset:0;transition:transform .6s}
.g-item:hover .g-bg{transform:scale(1.03)}
.g-item[data-o="h"] .g-bg{background:linear-gradient(135deg,#c4bbb0 0%,#b8a088 100%)}
.g-item[data-o="v"] .g-bg{background:linear-gradient(170deg,#d4cec6 0%,#b8a088 100%)}
.g-item[data-o="d"] .g-bg{background:linear-gradient(145deg,#a89478 0%,#8a7a66 100%)}
.g-tall{grid-row:span 2}.g-wide{grid-column:span 2}

.g-item:hover::after{opacity:1}
.g-video{position:relative}
.g-video .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;border:2px solid rgba(250,248,245,.4);background:rgba(26,26,26,.25);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.g-video .play-btn:hover{background:rgba(26,26,26,.5);border-color:var(--ww)}
.g-video .play-btn::after{content:'';width:0;height:0;border-left:16px solid rgba(250,248,245,.8);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:3px}

.concept-section{background:var(--gr);padding:100px 80px}
.concept-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1100px;margin:0 auto;align-items:center}
.concept-text h2{font-family:var(--sf);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:300;color:var(--ch);margin-bottom:24px;line-height:1.3}
.concept-text p{font-size: 1rem;color:#666;line-height:1.9;margin-bottom:16px}
.concept-images{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.concept-img{aspect-ratio:1;background:linear-gradient(135deg,var(--tp) 0%,#c4bbb0 100%);position:relative}


.proj-cta{background:var(--dp);padding:100px 48px;text-align:center}
.proj-cta h2{font-family:var(--sf);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--ww);margin-bottom:18px}
.proj-cta p{font-size: 1rem;font-weight:200;color:rgba(250,248,245,.45);max-width:420px;margin:0 auto 36px;line-height:1.8}
.btn-light{display:inline-block;padding:16px 48px;font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--dp);background:var(--ww);text-decoration:none;transition:all .4s}.btn-light:hover{background:var(--br);color:var(--ww)}

.proj-nav{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:48px 80px;border-top:1px solid var(--tp)}
.proj-nav a{font-family:var(--sn);font-size: 1rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--br);text-decoration:none;transition:color .3s;display:flex;align-items:center;gap:8px}.proj-nav a:hover{color:var(--ch)}
.proj-nav .center-link{font-size: 1rem;color:#bbb}

footer{background:var(--white);padding:48px 80px 28px;border-top:1px solid var(--taupe)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}
.footer-inner span,.footer-inner a{font-size: 1rem;color:#bbb;text-decoration:none}.footer-inner a:hover{color:var(--br)}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:960px){
.nav-links{display:none}.hamburger{display:flex}nav{padding:22px 28px}nav.scrolled{padding:16px 28px}
.proj-hero-content{padding:0 28px 56px}
.proj-overview{grid-template-columns:1fr;padding:64px 28px;gap:40px}
.proj-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px;padding:0 4px}.g-wide{grid-column:span 2}
.concept-section{padding:64px 28px}.concept-inner{grid-template-columns:1fr;gap:36px}
.proj-cta{padding:64px 28px}
.proj-nav{padding:36px 28px;flex-direction:column;gap:20px;text-align:center}
footer{padding:36px 28px 20px}
}
@media(max-width:560px){.proj-gallery{grid-template-columns:1fr;grid-auto-rows:220px}.g-wide{grid-column:span 1}}


/* ══════════════════════════════════════════════════════
   PORTFOLIO HUB — pfhub-*
══════════════════════════════════════════════════════ */

.pfhub-hero {
  background: #1a1815;
  padding: 140px 80px 80px;
  text-align: center;
}
.pfhub-eyebrow {
  display: block;
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--br);
  margin-bottom: 20px;
}
.pfhub-heading {
  font-family: var(--sf);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  color: #faf8f5;
  margin-bottom: 20px;
  line-height: 1.1;
}
.pfhub-sub {
  font-size: 18px;
  font-weight: 200;
  color: rgba(250,248,245,.5);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.8;
}

.pfhub-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 48px 40px 40px;
  background: #faf8f5;
}
.pfhub-filter-btn {
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #888;
  background: none;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all .25s ease;
}
.pfhub-filter-btn:hover,
.pfhub-filter-btn.active {
  color: #2c2c2c;
  border-color: #2c2c2c;
}

.pfhub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #faf8f5;
  padding: 0 2px 80px;
}
.pfhub-card {
  background: #faf8f5;
  transition: opacity .3s ease;
}
.pfhub-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pfhub-card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #ede8e2;
}
.pfhub-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pfhub-card-link:hover .pfhub-card-img img {
  transform: scale(1.04);
}
.pfhub-card-body {
  padding: 20px 24px 28px;
}
.pfhub-card-cat {
  display: block;
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--br);
  margin-bottom: 8px;
}
.pfhub-card-title {
  font-family: var(--sf);
  font-size: 22px;
  font-weight: 300;
  color: #2c2c2c;
  margin-bottom: 6px;
  line-height: 1.3;
}
.pfhub-card-loc {
  font-size: 16px;
  font-weight: 300;
  color: #888;
}
.pfhub-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px;
  color: #888;
  font-size: 16px;
}

@media (max-width: 900px) {
  .pfhub-hero { padding: 100px 32px 60px; }
  .pfhub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pfhub-hero { padding: 80px 24px 48px; }
  .pfhub-grid { grid-template-columns: 1fr; padding: 0 0 48px; }
  .pfhub-filter { padding: 32px 24px 28px; }
}


/* ══════════════════════════════════════════════════════
   SINGLE PROJECT SLIDESHOW — sproj-*
══════════════════════════════════════════════════════ */

.sproj-wrap { background: #faf8f5; }

.sproj-slideshow {
  position: relative;
  background: #1a1815;
  overflow: hidden;
}
.sproj-slides { position: relative; width: 100%; }
.sproj-slide {
  display: none;
  width: 100%;
}
.sproj-slide.active { display: block; }
.sproj-slide img {
  width: 100%;
  height: 80vh;
  min-height: 480px;
  object-fit: cover;
  display: block;
}

.sproj-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(26,24,21,.6);
  color: #faf8f5;
  border: none;
  width: 52px;
  height: 52px;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: background .2s;
  border-radius: 2px;
}
.sproj-btn:hover { background: rgba(26,24,21,.9); }
.sproj-prev { left: 24px; }
.sproj-next { right: 24px; }

.sproj-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.sproj-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250,248,245,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}
.sproj-dot.active { background: #faf8f5; }

.sproj-counter {
  position: absolute;
  bottom: 20px;
  right: 28px;
  font-size: 16px;
  font-weight: 300;
  color: rgba(250,248,245,.6);
  z-index: 10;
  font-family: var(--sn);
  letter-spacing: .08em;
}

.sproj-details {
  padding: 72px 80px 80px;
}
.sproj-details-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
}
.sproj-back {
  display: inline-block;
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color .2s;
}
.sproj-back:hover { color: #2c2c2c; }
.sproj-title {
  font-family: var(--sf);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: #2c2c2c;
  line-height: 1.15;
  margin-bottom: 28px;
}
.sproj-narrative {
  font-size: 18px;
  font-weight: 300;
  color: #555;
  line-height: 1.9;
  margin-bottom: 20px;
}

.sproj-meta {
  margin: 0;
  padding: 36px;
  background: #ede8e2;
  align-self: start;
}
.sproj-meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(44,44,44,.1);
}
.sproj-meta > div:first-child { padding-top: 0; }
.sproj-meta > div:last-child  { border-bottom: none; padding-bottom: 0; }
.sproj-meta dt {
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #888;
}
.sproj-meta dd {
  font-size: 16px;
  font-weight: 300;
  color: #2c2c2c;
  margin: 0;
}

.sproj-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #e0dbd4;
}
.sproj-nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 48px;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid #e0dbd4;
  transition: background .2s;
}
.sproj-nav-item:last-child { border-right: none; text-align: right; }
.sproj-nav-item:hover { background: #f5f1ec; }
.sproj-nav-dir {
  font-family: var(--sn);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--br);
}
.sproj-nav-name {
  font-family: var(--sf);
  font-size: 20px;
  font-weight: 300;
  color: #2c2c2c;
}

@media (max-width: 900px) {
  .sproj-details { padding: 48px 32px 56px; }
  .sproj-details-inner { grid-template-columns: 1fr; gap: 40px; }
  .sproj-slide img { height: 60vh; }
  .sproj-nav-item { padding: 28px 32px; }
}
@media (max-width: 600px) {
  .sproj-details { padding: 36px 24px 48px; }
  .sproj-slide img { height: 50vh; min-height: 300px; }
  .sproj-btn { width: 40px; height: 40px; font-size: 16px; }
  .sproj-prev { left: 12px; }
  .sproj-next { right: 12px; }
  .sproj-nav { grid-template-columns: 1fr; }
  .sproj-nav-item { border-right: none; border-bottom: 1px solid #e0dbd4; }
  .sproj-nav-item:last-child { text-align: left; border-bottom: none; }
}