/* ================================================================
   G2F DESIGN — Main Stylesheet v1.0
   ================================================================ */

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

:root {
    --black:     #1a1a1a;
    --dark:      #141414;
    --white:     #ffffff;
    --gray-100:  #f5f5f5;
    --gray-200:  #e8e8e8;
    --gray-400:  #aaaaaa;
    --gray-600:  #666666;
    --gray-700:  #444444;
    --accent:    #2563eb;
    --nav-h:     76px;
    --side-w:    40px;
    --font-body: 'Inter', sans-serif;
    --font-cond: 'Barlow Condensed', sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100%; }
body { font-family: var(--font-body); color: var(--black); background: var(--white); line-height: 1.6; overflow-x: hidden; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Wrapper ── */
.wrap     { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.wrap-pad { padding-left: calc(var(--side-w) + 56px); }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 30px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
    transition: all .25s ease; white-space: nowrap;
    border: 1.5px solid transparent;
}
.btn svg { flex-shrink: 0; width: 14px; height: 14px; }
.btn-dark    { border-color: var(--black);             background: var(--black);  color: var(--white); }
.btn-dark:hover { background: transparent; color: var(--black); }
.btn-outline { border-color: var(--black); background: transparent; color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }
.btn-light   { border-color: rgba(255,255,255,.7); background: transparent; color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-sm { padding: 9px 18px; font-size: 10px; letter-spacing: 1.5px; }

/* ── Typography ── */
.section-h { font-size: 60px; font-weight: 400; line-height: 1.15; }
.section-h strong { font-weight: 700; }
.body-copy { font-size: 20px; color: var(--gray-700); line-height: 1.88; }

/* ── Side label strip ── */
.side-strip {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: var(--side-w); display: flex; align-items: center; justify-content: center;
    border-right: 1px solid rgba(0,0,0,.09); z-index: 2;
}
.side-strip span {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gray-600); white-space: nowrap;
}
.side-strip.light { border-right-color: rgba(255,255,255,.15); }
.side-strip.light span { color: rgba(255,255,255,.45); }

/* ── Dot accent ── */
.dot-accent { color: var(--accent); }

/* ================================================================
   NAVIGATION
   ================================================================ */
.site-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 900;
    height: var(--nav-h); display: flex; align-items: center;
    justify-content: space-between; padding: 0 48px;
    background: transparent;
    transition: background .4s ease, box-shadow .4s ease;
}
.site-nav.nav-solid {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(0,0,0,.07);
}

.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-img  { height: 42px; width: auto; display: block; filter: brightness(0) invert(1); transition: filter .35s ease; }
.nav-solid .logo-img { filter: brightness(0); }

.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
    font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.8); transition: color .3s, opacity .3s; position: relative;
}
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1.5px; background:currentColor; transition:width .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-solid .nav-links a        { color: rgba(0,0,0,.6); }
.nav-solid .nav-links a:hover,
.nav-solid .nav-links a.active { color: var(--black); }

.nav-cta { border-color: rgba(255,255,255,.65); color: var(--white); transition: all .25s ease, border-color .35s, color .35s; }
.nav-cta:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.nav-solid .nav-cta            { border-color: var(--black); color: var(--black); }
.nav-solid .nav-cta:hover      { background: var(--black); color: var(--white); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 6px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; transition: background .35s; }
.nav-solid .hamburger span { background: var(--black); }

/* ================================================================
   MOBILE OVERLAY MENU
   ================================================================ */
.mob-menu { position:fixed; inset:0; background:var(--dark); z-index:950; display:none; flex-direction:column; align-items:center; justify-content:center; gap:32px; }
.mob-menu.open { display: flex; }
.mob-close { position:absolute; top:22px; right:22px; background:none; border:none; color:var(--white); padding:8px; }
.mob-menu nav a { display:block; font-size:34px; font-weight:300; letter-spacing:6px; text-transform:uppercase; color:var(--white); text-align:center; opacity:.85; transition:opacity .2s; margin-bottom:4px; }
.mob-menu nav a:hover { opacity: 1; }
.mob-social { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:16px; }
.mob-social p { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); }
.mob-social-icons { display:flex; gap:20px; color:rgba(255,255,255,.7); }

/* ================================================================
   HOMEPAGE HERO
   ================================================================ */
.hero { position:relative; height:100vh; min-height:640px; overflow:hidden; background:#0e0e0e; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(108deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.10) 100%); }

.hero-strip { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:100px 0 48px; z-index:2; }
.hero-year { writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; font-weight:500; letter-spacing:3px; color:rgba(255,255,255,.38); }
.hero-welcome { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8.5px; font-weight:600; letter-spacing:5px; text-transform:uppercase; color:rgba(255,255,255,.38); white-space:nowrap; }

.hero-body { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 72px 88px; color:var(--white); z-index:2; }

.hero-title { font-family:var(--font-body); font-size:clamp(72px,10vw,148px); font-weight:400; line-height:1.0; letter-spacing:-2px; color:var(--white); margin-bottom:0; text-transform:none; display:flex; flex-direction:column; }
.hero-title-row { display:flex; align-items:baseline; gap:14px; }
.hero-preheader { font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.45); flex-shrink:0; }
.hero-title .title-bold { font-weight:800; display:inline-block; align-self:flex-start; }

.hero-divider-group { display:flex; flex-direction:column; }
.hero-divider { width:100%; height:1px; background:rgba(255,255,255,.3); margin:20px 0 20px; }
.hero-copy { font-size:18px; font-weight:400; color:rgba(255,255,255,.58); width:100%; line-height:1.65; margin-bottom:0; letter-spacing:.3px; }

/* ================================================================
   ABOUT INTRO (homepage section)
   ================================================================ */
.about-intro { position:relative; padding:108px 0; overflow:hidden; }
.about-intro .inner { padding-left:calc(40px + 52px); display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; max-width:1280px; margin:0 auto; padding-right:64px; }

.about-img-wrap { overflow:hidden; position:relative; width:100%; height:520px; }
.about-img { width:100%; height:100%; object-fit:cover; object-position:center top; transform:scale(1.1) translateY(16px); opacity:0; transition:transform 1.5s cubic-bezier(0.16,1,0.3,1), opacity 1.2s ease; will-change:transform,opacity; }
.about-img-wrap.revealed .about-img { transform:scale(1) translateY(0); opacity:1; }
@keyframes kenBurns { 0%{transform:scale(1.0)} 50%{transform:scale(1.05)} 100%{transform:scale(1.0)} }
.about-img-wrap.animated .about-img { animation:kenBurns 16s ease-in-out infinite; transition:none; }

.about-text .section-h { margin-bottom:22px; }
.about-text .body-copy + .body-copy { margin-top:16px; }
.about-text .btn { margin-top:32px; }

/* ================================================================
   HOMEPAGE SERVICES ROWS
   ================================================================ */
.services-intro { padding:72px 64px 56px; text-align:center; max-width:800px; margin:0 auto; }
.services-intro .section-h { margin-bottom:14px; }
.services-intro p { font-size:20px; color:var(--gray-700); line-height:1.85; }

.svc-row { display:grid; grid-template-columns:1fr 1fr; }
.svc-img { overflow:hidden; min-height:440px; }
.svc-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.svc-row:hover .svc-img img { transform:scale(1.04); }
.svc-body { display:flex; flex-direction:column; justify-content:center; padding:64px; background:var(--white); }
.svc-row:nth-child(even) .svc-body { background:var(--gray-100); }
.svc-row:nth-child(even) .svc-img  { order:2; }
.svc-row:nth-child(even) .svc-body { order:1; }
.svc-body h3     { font-size:56px; font-weight:700; margin-bottom:8px; }
.svc-body .tagline { font-size:24px; font-style:italic; color:var(--gray-600); margin-bottom:16px; }
.svc-body p      { font-size:20px; color:var(--gray-700); line-height:1.88; margin-bottom:28px; }
.svc-body .btn   { align-self:flex-start; }

/* ================================================================
   PORTFOLIO INTRO + GRID (homepage)
   ================================================================ */
.port-intro { position:relative; padding:108px 0; overflow:hidden; }
.port-intro .inner { padding-left:calc(40px + 52px); display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; max-width:1280px; margin:0 auto; padding-right:64px; }
.port-big-h { font-size:80px; line-height:1.1; font-weight:400; margin-bottom:32px; }
.port-big-h strong { font-weight:700; }
.port-right .body-copy + .body-copy { margin-top:18px; }

.projects-sec { padding:108px 0; }
.proj-hdr { text-align:center; margin-bottom:36px; }
.proj-hdr .section-h { margin-bottom:28px; }

.filter-bar { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:56px; }
.f-btn { padding:9px 22px; font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; border:1px solid var(--gray-200); border-radius:999px; background:transparent; color:var(--black); transition:all .2s; cursor:pointer; }
.f-btn:hover, .f-btn.active { background:var(--black); color:var(--white); border-color:var(--black); }

.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:52px; }
.proj-card { overflow:hidden; display:block; text-decoration:none; color:inherit; cursor:pointer; }
.proj-thumb-wrap { overflow:hidden; }
.proj-thumb { width:100%; height:280px; object-fit:cover; display:block; transition:transform .45s ease; }
.proj-card:hover .proj-thumb { transform:scale(1.06); }
.proj-info { padding:16px 0 0; }
.proj-info h4 { font-size:16px; font-weight:700; margin-bottom:4px; }
.proj-info span { font-size:12px; color:var(--gray-600); }
.proj-footer { text-align:center; }

/* ================================================================
   PAGE HERO BANNER (inner pages)
   ================================================================ */
.page-hero { position:relative; height:340px; overflow:hidden; background:#111; margin-top:var(--nav-h); }
.page-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 100%); }
.page-hero-side { position:absolute; top:0; bottom:0; left:0; width:var(--side-w); border-right:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; }
.page-hero-side span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; }
.page-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 64px 48px calc(var(--side-w) + 48px); color:var(--white); }
.page-hero-title { font-size:clamp(32px,5vw,60px); font-weight:400; line-height:1.1; }
.page-hero-title strong { font-weight:700; }

/* ================================================================
   ABOUT PAGE
   ================================================================ */
.about-block { padding:100px 0 64px; }
.about-block .inner { max-width:1280px; margin:0 auto; padding:0 64px 0 calc(40px + 52px); display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:start; }
.about-block .inner--text-only { grid-template-columns:1fr; }
.about-portrait { width:100%; height:560px; object-fit:cover; object-position:center top; }
.about-right .lead-text { font-size:24px; font-weight:400; line-height:1.45; color:var(--black); margin-bottom:28px; }
.about-right .lead-text strong { font-weight:700; }
.about-right .body-copy + .body-copy { margin-top:18px; }
.about-full { padding:0 64px 88px calc(40px + 52px); max-width:1280px; margin:0 auto; }
.about-full .body-copy + .body-copy { margin-top:20px; }
.about-full .italic-cta { font-size:20px; font-weight:700; font-style:italic; margin-top:32px; color:var(--black); }
.founder-block { display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 64px 0; max-width:640px; margin:48px auto 0; border-top:1px solid var(--gray-200); }
.founder-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; margin-bottom:16px; }
.founder-name { font-size:16px; font-weight:700; margin-bottom:4px; }
.founder-title { font-size:12px; color:var(--gray-600); margin-bottom:16px; letter-spacing:.5px; }
.founder-quote { font-size:20px; font-style:italic; color:var(--gray-700); line-height:1.75; }

.project-cta { background:var(--dark); padding:72px 0; }
.project-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.project-cta p { font-size:56px; font-weight:400; color:var(--white); }
.project-cta p strong { font-weight:700; }

/* ================================================================
   SERVICES PAGE
   ================================================================ */
.svc-hero { position:relative; height:420px; overflow:hidden; background:#111; margin-top:var(--nav-h); }
.svc-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.svc-hero-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 100%); }
.svc-hero-side { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.svc-hero-side span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; }
.svc-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 56px 88px; color:var(--white); }
.svc-hero-title { font-size:60px; font-weight:400; line-height:1.18; }
.svc-hero-title strong { font-weight:700; }

.svc-intro { padding:80px 0 0; position:relative; }
.svc-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; max-width:1280px; margin:0 auto; padding:0 64px 0 calc(40px + 52px); }
.svc-intro-grid--text-only { grid-template-columns:1fr; }
.svc-intro-grid .body-copy + .body-copy { margin-top:18px; }
.svc-intro-img { width:100%; height:420px; object-fit:cover; object-position:top center; }

.svc-overview { padding:48px 0 80px; max-width:1280px; margin:0 auto; padding-left:calc(40px + 52px); padding-right:64px; }
.svc-overview .body-copy + .body-copy { margin-top:18px; }
.svc-list { margin-top:28px; display:flex; flex-direction:column; gap:10px; }
.svc-list li { display:flex; align-items:center; gap:12px; font-size:20px; color:var(--gray-700); }
.svc-list li svg { color:var(--black); flex-shrink:0; }
.svc-list-title { font-size:24px; font-weight:700; margin-bottom:16px; color:var(--black); }

.svc-detail { padding:88px 0; border-top:1px solid var(--gray-200); }
.svc-detail:nth-child(even) { background:var(--gray-100); }
.svc-detail .wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.svc-detail:nth-child(even) .wrap .svc-d-img  { order:2; }
.svc-detail:nth-child(even) .wrap .svc-d-body { order:1; }
.svc-d-body h2 { font-size:56px; font-weight:700; margin-bottom:10px; }
.svc-d-body .tagline { font-size:24px; color:var(--gray-600); font-style:italic; margin-bottom:20px; }
.svc-d-body .body-copy + .body-copy { margin-top:16px; }
.svc-d-body .svc-list { margin-top:20px; }
.svc-d-body .btn { margin-top:28px; }
.svc-d-img { width:100%; height:460px; object-fit:cover; }

.shape-cta { padding:88px 0; text-align:center; background:var(--dark); color:var(--white); }
.shape-cta h2 { font-size:60px; font-weight:400; color:var(--white); margin-bottom:16px; }
.shape-cta h2 strong { font-weight:700; }
.shape-cta p { font-size:20px; color:rgba(255,255,255,.55); margin-bottom:36px; max-width:520px; margin-left:auto; margin-right:auto; }

/* ================================================================
   GALLERY / OUR WORK PAGE
   ================================================================ */
.sub-hero { position:relative; height:480px; overflow:hidden; background:#111; }
.sub-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s ease; }
.sub-hero-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 100%); pointer-events:none; }
.sub-hero-side { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.sub-hero-side span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; }
.sub-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 56px 88px; transition:color .3s ease; }
.sub-hero-title { font-size:56px; font-weight:400; line-height:1.1; margin-bottom:16px; }
.sub-hero-desc  { font-size:18px; font-weight:400; line-height:1.7; max-width:580px; opacity:.85; }

.gallery-section { padding:72px 0 108px; }
.gallery-hdr { text-align:center; padding:0 64px; margin-bottom:40px; }
.gallery-hdr .section-h { margin-bottom:12px; }
.filter-bar { padding:0 64px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:0 64px; margin-bottom:56px; }
.g-card { overflow:hidden; cursor:pointer; text-decoration:none; color:inherit; display:block; }
.g-thumb-wrap { overflow:hidden; }
.g-thumb { width:100%; height:300px; object-fit:cover; display:block; transition:transform .45s ease; }
.g-card:hover .g-thumb { transform:scale(1.06); }
.g-info { padding:18px 0 0; }
.g-info h3 { font-size:17px; font-weight:700; margin-bottom:5px; }
.g-info span { font-size:12px; color:var(--gray-600); }
.gallery-cta { text-align:center; }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-hero { position:relative; height:380px; overflow:hidden; background:#060610; margin-top:var(--nav-h); }
.contact-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }
.contact-hero-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(0,0,0,.7) 0%,rgba(0,0,40,.35) 100%); }
.contact-hero-side { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.contact-hero-side span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; }
.contact-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 56px 88px; color:var(--white); }
.contact-hero-title { font-size:60px; font-weight:400; line-height:1.1; }
.contact-hero-title strong { font-weight:700; }
.contact-body { padding:88px 0; position:relative; }
.contact-inner { max-width:860px; margin:0 auto; padding:0 64px 0 calc(40px + 52px); }
.contact-intro { font-size:20px; color:var(--gray-700); line-height:1.85; margin-bottom:40px; }
.contact-intro a { color:var(--accent); border-bottom:1px solid currentColor; }
.contact-email-row { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.contact-email-row .label { font-size:14px; font-weight:700; }
.contact-email-row a { font-size:14px; color:var(--black); border-bottom:1px solid var(--black); transition:opacity .2s; }
.contact-email-row a:hover { opacity:.6; }
.contact-socials { font-size:20px; color:var(--gray-700); margin-bottom:40px; line-height:1.8; }
.contact-socials a { font-weight:600; color:var(--black); border-bottom:1px solid var(--black); transition:opacity .2s; }
.contact-socials a:hover { opacity:.6; }

/* ================================================================
   PROJECT PAGE (single)
   ================================================================ */
.proj-slider { position:relative; height:90vh; min-height:760px; background:#111; overflow:hidden; margin-top:var(--nav-h); cursor:zoom-in; }
.proj-slider-img { width:100%; height:100%; object-fit:cover; opacity:.75; pointer-events:none; }
.proj-slider-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.1) 60%); pointer-events:none; }
.proj-slider-side { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.proj-slider-side span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; }
.proj-slider-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 48px 88px; color:var(--white); }
.proj-slider-label { font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:10px; }
.proj-slider-title { font-size:20px; font-weight:600; line-height:1.35; margin-bottom:6px; color:var(--white); }
.proj-slider-desc { font-size:13px; color:rgba(255,255,255,.58); line-height:1.65; max-width:520px; }
.slide-counter { font-size:11px; font-weight:500; letter-spacing:1.5px; color:rgba(255,255,255,.45); margin-left:12px; align-self:center; }
.slider-controls { position:absolute; bottom:48px; right:72px; display:flex; gap:4px; align-items:center; }
.slider-btn { width:36px; height:36px; border:1px solid rgba(255,255,255,.4); background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.slider-btn:hover { background:var(--white); color:var(--black); }
#projSlider button, #projSlider a { cursor:pointer; }
.slider-expand { position:absolute; top:20px; right:52px; width:36px; height:36px; border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.3); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; backdrop-filter:blur(4px); }
.slider-expand:hover { background:rgba(255,255,255,.15); }
.proj-social-bar { position:absolute; right:0; top:0; bottom:0; width:40px; border-left:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; }
.proj-social-bar a { color:rgba(255,255,255,.6); transition:color .2s; }
.proj-social-bar a:hover { color:var(--white); }

/* Lightbox */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:2000; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-img { max-width:88vw; max-height:78vh; object-fit:contain; display:block; cursor:default; }
.lightbox-caption { margin-top:20px; text-align:center; color:var(--white); max-width:640px; padding:0 24px; }
.lightbox-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.lightbox-desc { font-size:12px; color:rgba(255,255,255,.5); line-height:1.6; }
.lightbox-close { position:absolute; top:20px; right:20px; width:40px; height:40px; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.lightbox-close:hover { background:rgba(255,255,255,.1); }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,.1); }
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }
.lightbox-counter { position:absolute; bottom:20px; font-size:11px; letter-spacing:1.5px; color:rgba(255,255,255,.4); }

.proj-content { padding:88px 0; position:relative; }
.proj-content-grid { max-width:1280px; margin:0 auto; padding:0 64px 0 calc(40px + 52px); display:grid; grid-template-columns:1fr 360px; gap:64px; align-items:start; }
.proj-main h1 { font-size:56px; font-weight:700; margin-bottom:32px; }
.proj-section { margin-bottom:40px; }
.proj-section h3 { font-size:24px; font-weight:700; margin-bottom:12px; }
.proj-section p { font-size:20px; color:var(--gray-700); line-height:1.85; }
.proj-section + .proj-section { border-top:1px solid var(--gray-200); padding-top:36px; }

/* Case study section blocks */
.proj-section-block { margin-bottom:48px; padding-bottom:48px; border-bottom:1px solid var(--gray-200); }
.proj-section-block:last-child { border-bottom:none; padding-bottom:0; }
.proj-section-label { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.proj-section-block p { font-size:18px; color:var(--gray-700); line-height:1.85; margin-bottom:20px; }
.proj-section-block h2 { font-size:32px; font-weight:700; margin-bottom:16px; }

/* Photo gallery grid (Art Direction / photo gallery mode) */
.proj-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:40px; }
.proj-photo-item { overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; }
.proj-photo-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.proj-photo-item:hover img { transform:scale(1.05); }
.numbered-h { font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; color:var(--black); }
.proj-sidebar { position:sticky; top:calc(var(--nav-h) + 32px); }
.proj-info-box { border:1px solid var(--gray-200); padding:28px; background:var(--gray-100); }
.proj-info-box h4 { font-size:14px; font-weight:700; margin-bottom:20px; letter-spacing:.5px; }
.proj-info-row { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; margin-bottom:20px; }
.proj-info-row .label { color:var(--gray-600); font-weight:500; }
.proj-info-row .value { color:var(--black); font-weight:400; }
.proj-share { margin-bottom:20px; }
.proj-share .label { font-size:13px; color:var(--gray-600); font-weight:500; margin-bottom:10px; }
.share-icons { display:flex; gap:12px; }
.share-icons a { color:var(--gray-700); transition:color .2s; }
.share-icons a:hover { color:var(--black); }

.related-sec { padding:88px 0; background:var(--gray-100); }
.related-hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:40px; flex-wrap:wrap; gap:16px; }
.related-hdr h2 { font-size:60px; font-weight:400; }
.related-hdr h2 strong { font-weight:700; }
.related-hdr p { font-size:13px; color:var(--gray-600); max-width:420px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rel-card { overflow:hidden; display:block; }
.rel-card-thumb { width:100%; height:240px; object-fit:cover; transition:transform .4s; display:block; }
.rel-card:hover .rel-card-thumb { transform:scale(1.05); }

/* ================================================================
   SHARED SECTIONS
   ================================================================ */
.testimonials { padding:108px 0; background:var(--gray-100); text-align:center; }
.testimonials .section-h { margin-bottom:12px; }
.t-lead { font-size:14px; color:var(--gray-600); max-width:520px; margin:0 auto 52px; line-height:1.8; }
.t-track-wrap { position:relative; margin-top:52px; }
.t-card { max-width:640px; margin:0 auto; display:none; }
.t-card.t-active { display:block; }
.t-carousel .t-card.t-active { animation:tFadeIn .45s ease; }
@keyframes tFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.t-quote { font-size:22px; font-weight:700; font-style:italic; margin-bottom:18px; }
.t-body { font-size:14px; color:var(--gray-700); line-height:1.9; margin-bottom:32px; }
.t-author { display:flex; flex-direction:column; align-items:center; gap:5px; }
.t-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:6px; background:var(--gray-200); }
.t-name { font-size:14px; font-weight:700; }
.t-role { font-size:12px; color:var(--gray-600); }
.t-dots { display:flex; justify-content:center; gap:8px; margin-top:36px; }
.t-dot  { width:8px; height:8px; border-radius:50%; border:none; background:var(--gray-200); cursor:pointer; transition:background .2s, transform .2s; }
.t-dot.on { background:var(--black); transform:scale(1.25); }

.clients-sec { padding:80px 0; background:var(--white); text-align:center; overflow:hidden; }
.clients-sec h2 { font-size:40px; font-weight:700; margin-bottom:10px; }
.clients-sub { font-size:14px; color:var(--gray-600); line-height:1.8; margin-bottom:52px; }
.clients-ticker { position:relative; overflow:hidden; width:100%; }
.clients-ticker::before, .clients-ticker::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.clients-ticker::before { left:0; background:linear-gradient(to right,var(--white) 0%,transparent 100%); }
.clients-ticker::after  { right:0; background:linear-gradient(to left,var(--white) 0%,transparent 100%); }
.clients-track { display:flex; align-items:center; gap:64px; width:max-content; animation:ticker 32s linear infinite; }
.clients-track:hover { animation-play-state:paused; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.clients-track img { height:28px; width:auto; display:block; flex-shrink:0; filter:brightness(0); opacity:0.45; transition:opacity .25s ease; }
.clients-track img:hover { opacity:1; }

.dark-foot { background:var(--dark); color:var(--white); }
.cta-band  { padding:88px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.cta-band .wrap { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.cta-headline { font-size:clamp(44px,7vw,96px); font-weight:400; line-height:.95; color:var(--white); margin-bottom:10px; }
.cta-headline strong { font-weight:800; }
.cta-sub { font-size:14px; color:rgba(255,255,255,.45); max-width:280px; line-height:1.7; }

.site-foot { padding:40px 0 24px; }
.foot-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; gap:32px; }
.foot-nav { display:flex; gap:32px; flex-wrap:wrap; }
.foot-nav a { font-size:13px; color:rgba(255,255,255,.55); transition:color .2s; }
.foot-nav a:hover { color:var(--white); }
.foot-right { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.foot-social { display:flex; gap:24px; }
.foot-social a { font-size:13px; color:rgba(255,255,255,.55); transition:color .2s; }
.foot-social a:hover { color:var(--white); }
.foot-contact { display:flex; gap:14px; align-items:center; }
.foot-contact a { font-size:13px; color:rgba(255,255,255,.5); transition:color .2s; }
.foot-contact a:hover { color:var(--white); }
.foot-sep { color:rgba(255,255,255,.2); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:20px; display:flex; justify-content:space-between; align-items:center; }
.foot-bottom p { font-size:12px; color:rgba(255,255,255,.28); }
.foot-bottom a { color:var(--accent); }

/* ================================================================
   CASE STUDY LAYOUT (new numbered-section format)
   ================================================================ */
.proj-back-bar { background:var(--white); border-bottom:1px solid rgba(0,0,0,.08); padding:16px 0; }
.proj-back-bar .wrap { display:flex; align-items:center; }

.case-study { background:var(--white); }
.case-page-title { max-width:1280px; margin:0 auto; padding:80px 64px 64px; border-bottom:1px solid var(--gray-200); }
.case-page-title h1 { font-size:52px; font-weight:700; line-height:1.1; margin-bottom:8px; }
.case-page-subtitle { font-size:22px; color:var(--gray-600); font-style:italic; }
.case-page-intro { font-size:18px; color:var(--gray-700); line-height:1.75; margin-top:20px; max-width:760px; }

.case-section { max-width:1280px; margin:0 auto; padding:72px 64px; border-bottom:1px solid var(--gray-200); }
.case-section-hdr { display:flex; align-items:center; gap:20px; margin-bottom:44px; }
.case-num { font-size:52px; font-weight:800; color:#E60000; line-height:1; min-width:64px; }
.case-divider-v { width:1px; height:44px; background:var(--gray-400); flex-shrink:0; }
.case-section-label { font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gray-600); }
.case-section h2 { font-size:30px; font-weight:700; line-height:1.25; margin-bottom:24px; color:var(--black); }
.case-section p { font-size:16px; color:var(--gray-700); line-height:1.85; margin-bottom:16px; }
.case-section p:last-child { margin-bottom:0; }
.case-objective { padding:20px 24px; border-left:3px solid var(--accent); background:var(--gray-100); font-style:italic; margin-top:8px; }

.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.case-text-wide { max-width:760px; }

.phone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.phone-grid img { width:100%; display:block; }

.case-study img { cursor:zoom-in; transition:opacity .2s, transform .3s ease; }
.case-study img:hover { opacity:.88; transform:scale(1.02); }
.phone-grid img:hover, .process-imgs img:hover { transform:scale(1.03); }

.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:52px; }
.charts-row img { width:100%; display:block; }

.process-table { width:100%; border-collapse:collapse; margin-bottom:52px; }
.process-table th { text-align:left; font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gray-600); padding:12px 20px; border-bottom:2px solid var(--black); }
.process-table td { padding:24px 20px; font-size:15px; line-height:1.75; vertical-align:top; border-bottom:1px solid var(--gray-200); color:var(--gray-700); }
.process-table td:first-child { font-weight:700; color:var(--black); width:260px; font-size:14px; }
.process-table tr:last-child td { border-bottom:none; }

.stat-boxes { display:grid; grid-template-columns:repeat(4,1fr); background:#1a1a1a; border-radius:8px; border:1px solid rgba(255,255,255,.08); margin-top:52px; overflow:hidden; }
.stat-box { padding:28px 32px; }
.stat-box .stat-label { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#E60000; margin-bottom:10px; line-height:1; }
.stat-box .stat-value { font-size:22px; font-weight:700; color:var(--white); margin-bottom:0; line-height:1.2; }

.process-imgs { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.process-imgs img { width:100%; height:300px; object-fit:cover; display:block; }
.process-imgs img.contain { object-fit:contain; background:var(--gray-100); }

.logo-display { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:48px; }
.logo-display-item { background:var(--gray-100); padding:40px; display:flex; align-items:center; justify-content:center; }
.logo-display-item.dark { background:#1a1a1a; }
.logo-display-item img { width:100%; max-height:180px; object-fit:contain; display:block; cursor:zoom-in; transition:transform .3s ease; }
.logo-display-item img:hover { transform:scale(1.04); opacity:1; }
.logo-display-item.span2 { grid-column:span 2; padding:48px 80px; }
.logo-display-item.span2 img { max-height:120px; }

.stationery-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:48px; }
.stationery-grid img { width:100%; height:420px; object-fit:cover; display:block; cursor:zoom-in; transition:opacity .2s, transform .3s ease; }
.stationery-grid img:hover { opacity:.88; transform:scale(1.02); }
.stationery-grid img.portrait { height:520px; }

.project-cta { background:var(--dark); padding:72px 0; }
.project-cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.project-cta p { font-size:56px; font-weight:400; color:var(--white); }
.project-cta p strong { font-weight:700; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .wrap { padding: 0 40px; }
    .about-intro .inner, .port-intro .inner { padding-left:40px; padding-right:40px; grid-template-columns:1fr; gap:40px; }
    /* Homepage service rows: stack image over text (one below the other) */
    .svc-row { grid-template-columns:1fr; }
    .svc-row:nth-child(even) .svc-img  { order:0; }
    .svc-row:nth-child(even) .svc-body { order:0; }
    .svc-img { min-height:320px; }
    .svc-intro-grid, .svc-overview { padding-left:40px; padding-right:40px; grid-template-columns:1fr; }
    .about-block .inner { padding-left:40px; padding-right:40px; grid-template-columns:1fr; }
    .about-full { padding-left:40px; padding-right:40px; }
    .contact-inner { padding-left:40px; padding-right:40px; }
    .proj-content-grid { padding-left:40px; padding-right:40px; grid-template-columns:1fr; }
    .proj-sidebar { position:static; }
    .gallery-grid, .filter-bar, .gallery-hdr { padding-left:40px; padding-right:40px; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .svc-detail .wrap { grid-template-columns:1fr; }
    .svc-d-img { height:320px; }
    .related-grid { grid-template-columns:repeat(2,1fr); }
    .about-portrait { height:360px; }
    .case-page-title { padding:64px 40px 48px; }
    .case-section { padding:56px 40px; }
    .case-grid { grid-template-columns:1fr; gap:40px; }
    .logo-display { grid-template-columns:1fr; }
    .logo-display-item.span2 { grid-column:span 1; }
    .stat-boxes { grid-template-columns:repeat(2,1fr); }
    .process-table td:first-child { width:180px; }
    .process-imgs { grid-template-columns:1fr; }
    .process-imgs img { height:220px; }
}
@media (max-width: 768px) {
    :root { --side-w: 0px; }
    .wrap { padding: 0 20px; }
    .site-nav { padding: 0 20px; }
    .nav-links, .site-nav > .btn { display: none; }
    .hamburger { display: flex; }
    /* Homepage hero — mobile */
    .hero-title { font-size: 56px !important; letter-spacing: -1px; }
    .hero-copy { font-size: 15px; }
    /* Services page hero — mobile */
    .svc-hero-title { font-size: 36px; }
    .svc-hero-content { padding: 0 24px 48px 24px; }
    /* Service rows — reduce oversized title and padding */
    .svc-body { padding: 40px 20px; }
    .svc-body h3 { font-size: 36px; }
    .svc-body .tagline { font-size: 18px; }
    .svc-body p { font-size: 16px; }
    /* Services detail page */
    .svc-d-body { padding: 40px 20px; }
    .svc-d-body h2 { font-size: 32px; }
    /* About block */
    .about-block .inner { gap: 40px; }
    .side-strip, .page-hero-side, .svc-hero-side, .proj-slider-side, .sub-hero-side, .contact-hero-side, .proj-social-bar { display: none; }
    /* Hero text clears the left strip (©year + "Welcome to G2F Design") so they don't overlap */
    .hero-body { padding: 0 24px 60px 64px; }
    .hero-strip { padding: 80px 0 40px; }
    .about-intro .inner, .port-intro .inner { grid-template-columns:1fr; padding:0 20px; gap:40px; }
    .about-img-wrap { height: 300px; }
    .about-portrait { height: 280px; }
    .about-block .inner { padding: 0 20px; }
    .about-full { padding: 0 20px 64px; }
    .proj-slider { height:62vh; min-height:440px; }
    .case-page-title { padding:48px 20px 40px; }
    .case-section { padding:48px 20px; }
    .case-num { font-size:40px; min-width:48px; }
    .case-section h2 { font-size:24px; }
    .phone-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .charts-row { grid-template-columns:1fr; gap:24px; }
    .stat-boxes { grid-template-columns:1fr 1fr; }
    .process-table { font-size:13px; }
    .process-table td { padding:16px 12px; }
    .process-table td:first-child { width:120px; font-size:13px; }
    .stationery-grid { grid-template-columns:1fr; }
    .stationery-grid img, .stationery-grid img.portrait { height:300px; }
    .project-cta .wrap { flex-direction:column; text-align:center; }
    .proj-slider-content { padding:0 24px 40px 24px; }
    .slider-controls { right: 24px; }
    .proj-content-grid { padding: 0 20px; }
    .gallery-grid, .filter-bar, .gallery-hdr { padding: 0 20px; }
    .gallery-grid { grid-template-columns: 1fr; }
    .g-thumb { height: 240px; }
    .sub-hero { height: 360px; }
    .sub-hero-content { padding:0 24px 40px 24px; }
    .sub-hero-title { font-size: 36px; }
    .sub-hero-desc { font-size: 15px; }
    .svc-intro-grid, .svc-overview { padding: 0 20px; }
    .contact-inner { padding: 0 20px; }
    .contact-hero-content { padding: 0 24px 44px 24px; }
    .contact-body { padding: 56px 0; }
    .cta-band .wrap { flex-direction:column; text-align:center; }
    .cta-sub { display: none; }
    .foot-row { flex-direction: column; }
    .foot-right { align-items: flex-start; }
    .foot-bottom { flex-direction:column; gap:8px; text-align:center; }
    .project-cta .wrap { flex-direction:column; text-align:center; }
    .related-grid { grid-template-columns: 1fr; }
    .proj-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hero-body { padding: 0 16px 48px 56px; }
    .hero-title { font-size: 40px !important; }
    .svc-hero-title { font-size: 28px; }
    .svc-body { padding: 32px 16px; }
    .svc-body h3 { font-size: 28px; }
    .wrap { padding: 0 16px; }
    .about-intro .inner, .port-intro .inner { padding: 0 16px; }
    .about-block .inner { padding: 0 16px; }
    .about-full { padding: 0 16px 48px; }
    .gallery-grid, .filter-bar, .gallery-hdr { padding: 0 16px; }
    .proj-content-grid { padding: 0 16px; }
    .foot-nav { flex-direction: column; gap: 12px; }
    .port-big-h { font-size: 52px; }
    .section-h { font-size: 28px; }
}

/* ================================================================
   DARK PHOTO / POSTER PROJECT PAGES
   ================================================================ */
.photo-hero { position:relative; height:100vh; min-height:680px; overflow:hidden; background:#000; }
.photo-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.82; transition:transform 8s ease; }
.photo-hero:hover .photo-hero-bg { transform:scale(1.03); }
.photo-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.4) 100%); }
.photo-hero-strip { position:absolute; top:0; bottom:0; left:0; width:40px; border-right:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; }
.photo-hero-strip span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.35); white-space:nowrap; }
.photo-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 72px 64px 80px; color:#fff; }
.photo-hero-label { font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
.photo-hero-title { font-family:var(--font-cond); font-size:clamp(64px,9vw,128px); font-weight:800; line-height:.95; letter-spacing:-1px; text-transform:uppercase; margin-bottom:24px; }
.photo-hero-meta { display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.photo-hero-meta span { font-size:12px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.photo-hero-meta span strong { color:rgba(255,255,255,.85); font-weight:600; }
.hero-scroll { position:absolute; bottom:40px; right:52px; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.4); }
.hero-scroll span { font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.hero-scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.4;transform:scaleY(1);} 50%{opacity:1;transform:scaleY(1.2);} }
.photo-back-bar { background:#111; border-bottom:1px solid rgba(255,255,255,.06); padding:14px 0; }
.photo-back-bar .wrap { display:flex; align-items:center; }
.photo-back-bar .btn-outline { border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.7); }
.photo-back-bar .btn-outline:hover { background:#fff; color:#000; border-color:#fff; }
.album-intro { background:#0d0d0d; padding:72px 0 56px; border-bottom:1px solid rgba(255,255,255,.06); }
.album-intro .wrap { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.album-intro h2 { font-family:var(--font-cond); font-size:clamp(40px,6vw,72px); font-weight:800; text-transform:uppercase; letter-spacing:-1px; line-height:1; color:#fff; margin-bottom:0; }
.album-intro h2 em { font-style:normal; color:rgba(255,255,255,.35); }
.album-intro-right p { font-size:16px; color:rgba(255,255,255,.55); line-height:1.8; margin-bottom:20px; }
.album-tags { display:flex; gap:8px; flex-wrap:wrap; }
.album-tag { padding:6px 14px; border:1px solid rgba(255,255,255,.15); font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.45); }
.photo-gallery { background:#0d0d0d; padding:4px 0 0; }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; max-width:100%; }
.photo-item { overflow:hidden; position:relative; cursor:zoom-in; background:#111; }
.photo-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease,opacity .3s ease; }
.photo-item:hover img { transform:scale(1.04); opacity:.85; }
.photo-item-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.photo-item:hover .photo-item-overlay { opacity:1; }
.photo-item-label { position:absolute; bottom:16px; left:20px; font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.75); opacity:0; transform:translateY(6px); transition:opacity .3s ease,transform .3s ease; }
.photo-item:hover .photo-item-label { opacity:1; transform:translateY(0); }
.photo-item--portrait { height:520px; }
.photo-item--landscape { height:380px; }
.photo-item--span2 { grid-column:span 2; }
.photo-item--span3 { grid-column:span 3; height:420px; }
.photo-cta { background:#111; padding:80px 0; border-top:1px solid rgba(255,255,255,.06); text-align:center; }
.photo-cta p { font-size:clamp(32px,5vw,56px); font-weight:400; color:#fff; margin-bottom:32px; }
.photo-cta p strong { font-weight:700; }
@media (max-width:1024px) {
    .photo-hero-content { padding:0 40px 56px; }
    .album-intro .wrap { grid-template-columns:1fr; gap:32px; }
    .photo-item--portrait { height:400px; }
    .photo-item--landscape { height:300px; }
    .photo-item--span3 { height:320px; }
}
@media (max-width:768px) {
    .photo-hero-strip { display:none; }
    .photo-hero-content { padding:0 24px 48px; }
    .photo-grid { grid-template-columns:repeat(2,1fr); }
    .photo-item--span2 { grid-column:span 2; }
    .photo-item--span3 { grid-column:span 2; height:260px; }
    .photo-item--portrait { height:300px; }
    .photo-item--landscape { height:220px; }
    .album-intro-right p { font-size:14px; }
}
@media (max-width:480px) {
    .photo-grid { grid-template-columns:1fr; }
    .photo-item--span2,.photo-item--span3 { grid-column:span 1; }
    .photo-item--portrait,.photo-item--landscape { height:280px; }
    .photo-hero-content { padding:0 16px 40px; }
    .album-intro { padding:48px 0 40px; }
}