/* 7. header-height +10%: 40px → 44px */
:root {
   --bg: #e9edf5;
   --surface: #ffffff;
   --surface-soft: rgba(255, 255, 255, .68);
   --text: #0f1117;
   --muted: #666f80;
   --line: rgba(15, 17, 23, .11);
   --line-strong: rgba(15, 17, 23, .2);
   --gap: 5px;
   --header-height: 51px;
   --glow: 106 169 255
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scrollbar-gutter: stable
}

body {
   min-height: 100vh;
   margin: 0;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   color: var(--text);
   background: var(--bg)
}

img {
   display: block;
   max-width: 100%
}

a {
   color: inherit;
   text-decoration: none
}

/* ── Header ── */
.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   min-height: var(--header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   padding: 8px clamp(18px, 4vw, 56px);
   border-bottom: none;
   background: rgba(233, 237, 245, .45);
   backdrop-filter: blur(24px) saturate(200%);
   -webkit-backdrop-filter: blur(24px) saturate(200%);
   box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.4), 0 4px 30px rgba(0, 0, 0, 0.05)
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   font-weight: 300;
   letter-spacing: -.03em
}

.brand__logo {
   width: 24px;
   height: 24px;
   display: block;
   object-fit: contain;
   flex: 0 0 auto;
   color: var(--muted)
}

.brand__copy {
   display: inline-flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0
}

.brand__text {
   color: var(--muted);
   font-size: 15px;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap
}

.brand__tagline {
   color: var(--muted);
   font-size: 9px;
   font-weight: 500;
   letter-spacing: .01em;
   white-space: nowrap
}

.site-nav,
.footer-nav {
   display: flex;
   align-items: center;
   gap: clamp(8px, 1.5vw, 18px);
   font-size: 13px;
   line-height: 1;
   color: var(--muted);
   font-weight: 500
}

.site-nav a,
.footer-nav a {
   display: inline-flex;
   align-items: center;
   line-height: 1
}

.site-nav a,
.footer-nav a {
   transition: color .16s ease
}

.site-nav a:hover,
.footer-nav a:hover {
   color: var(--text)
}

.nav-dropdown {
   position: relative;
   display: inline-flex;
   align-items: center;
}

.nav-dropdown-toggle {
   display: inline-flex;
   align-items: center;
   padding: 0;
   border: 0;
   background: none;
   color: inherit;
   font: inherit;
   line-height: 1;
   cursor: pointer;
   transition: color .16s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle,
.nav-dropdown.is-open .nav-dropdown-toggle {
   color: var(--text);
}

.nav-dropdown-menu {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%) translateY(8px);
   display: flex;
   flex-direction: column;
   background: rgba(255, 255, 255, 0.75);
   backdrop-filter: blur(24px) saturate(200%);
   -webkit-backdrop-filter: blur(24px) saturate(200%);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 8px 0;
   opacity: 0;
   pointer-events: none;
   transition: opacity .16s ease, transform .16s ease;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
   min-width: 120px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(-50%) translateY(0);
}

.nav-tag {
   background: none;
   border: none;
   padding: 6px 16px;
   font-family: inherit;
   font-size: 13px;
   font-weight: 500;
   color: var(--muted);
   text-align: left;
   cursor: pointer;
   transition: color .16s ease, background .16s ease;
   white-space: nowrap;
}

.nav-tag:hover {
   color: var(--text);
   background: rgba(0, 0, 0, 0.04);
}

.nav-tag.is-active {
   color: var(--text);
   font-weight: 600;
}

/* Contact pulse — a soft diagonal gradient sweep that travels across the
   Contact text. Loop is seamless: at both 0% and 100% of the keyframes the
   visible slice of the gradient sits in its muted "padding" zone, so the
   colour at the boundary is identical and there's no perceivable jump.
   Only the Contact link on the home page carries the .is-pulse class. */
@keyframes contact-pulse {
   0% {
      background-position: 100% 0
   }

   100% {
      background-position: 0% 0
   }
}

.site-nav a.is-pulse {
   background-image: linear-gradient(30deg, var(--muted) 0%, var(--muted) 25%, #0f1117 50%, var(--muted) 75%, var(--muted) 100%);
   background-size: 450% 100%;
   background-repeat: no-repeat;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   animation: contact-pulse 6.5s linear infinite
}

.site-nav a.is-pulse:hover {
   animation: none;
   background: transparent;
   -webkit-text-fill-color: var(--text);
   color: var(--text)
}

/* ── Gallery ── */
.portfolio {
   padding: 5px 5px 55px
}

.gallery {
   position: relative;
   width: 100%
}

.ba-card {
   --split: 50%;
   --glow: 106 169 255;
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   margin: 0;
   border: 0;
   padding: 0;
   background: transparent;
   color: inherit;
   text-align: left;
   cursor: pointer;
   transition: box-shadow .18s ease
}

.ba-card:hover {
   box-shadow: 0 0 18px 3px rgb(var(--glow)/.05), 0 0 6px 1px rgba(0, 0, 0, .05)
}

.ba-frame {
   position: relative;
   overflow: hidden;
   margin: 0;
   padding: 0;
   background: #12151d;
   isolation: isolate
}

.ba-image {
   width: 100%;
   height: auto;
   user-select: none;
   -webkit-user-drag: none
}

/* before layer — only opacity transition, clip-path instant */
.ba-before-layer {
   position: absolute;
   inset: 0;
   overflow: hidden;
   clip-path: inset(0 calc(100% - var(--split)) 0 0);
   opacity: 0;
   transition: opacity .25s cubic-bezier(.37, 0, .63, 1)
}

.ba-before-layer .ba-image {
   position: absolute;
   inset: 0;
   height: 100%;
   object-fit: cover
}

/* .ba-card:hover .ba-before-layer,.ba-card:focus-visible .ba-before-layer{opacity:1} */

/* 2. line moves instant (no left transition), only opacity fades */
.ba-line {
   display: none
}

/* hover labels */
.ba-label {
   position: absolute;
   top: 8px;
   z-index: 4;
   font-size: 9px;
   font-weight: 600;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .22);
   opacity: 0;
   transition: opacity .4s ease;
   pointer-events: none;
   user-select: none
}

.ba-label--after {
   right: 8px
}

.ba-label--before {
   left: 8px
}

/* .ba-card:hover .ba-label{opacity:1} */

.gallery-status {
   margin: 32px 0 0;
   color: var(--muted);
   font-size: 11px;
   letter-spacing: .18em;
   text-transform: uppercase;
   text-align: center;
   font-weight: 500
}

.gallery-status.is-done {
   display: none
}

/* ── Footer ── */
.site-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   padding: 10px clamp(18px, 4vw, 56px);
   border-top: 1px solid var(--line);
   color: var(--muted);
   background: rgba(233, 237, 245, .52)
}

.site-footer p {
   margin: 0;
   font-size: 11px
}

/* ── Lightbox ──
   4. lightbox is a flex column so caption naturally sits below stage
   5. overflow:hidden on lightbox (viewport clip); stage has overflow:visible so zoomed image expands to screen */
.lightbox {
   --split: 50%;
   --photo-l: 0px;
   --photo-r: 100%;
   position: fixed;
   inset: 0;
   z-index: 100;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 14px;
   padding: 52px 8px 18px;
   overflow: hidden;
   background: rgba(255, 255, 255, 0);
   backdrop-filter: blur(0) saturate(100%);
   -webkit-backdrop-filter: blur(0) saturate(100%);
   opacity: 0;
   pointer-events: none;
   transition: opacity .25s ease, background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease
}

.lightbox.is-open {
   opacity: 1;
   pointer-events: auto;
   background: rgba(0, 0, 0, .85);
   backdrop-filter: blur(24px) saturate(150%);
   -webkit-backdrop-filter: blur(24px) saturate(150%)
}

.lightbox__stage {
   position: relative;
   overflow: visible;
   background: transparent;
   flex-shrink: 0;
   z-index: 2
}

.lightbox__after-layer {
   position: absolute;
   inset: 0;
   overflow: visible
}

.lightbox__compare-wrapper {
   position: absolute;
   inset: 0;
   z-index: 2
}

/* 2. lightbox before-layer: no left transition on line, only opacity */
.lightbox__before-layer {
   position: absolute;
   inset: 0;
   overflow: visible;
   z-index: 1;
   clip-path: inset(-100vh calc(100% - var(--split)) -100vh -100vw);
   opacity: 0;
   transition: opacity .125s cubic-bezier(.37, 0, .63, 1)
}

.lightbox.is-comparing .lightbox__before-layer {
   opacity: 1
}

.lightbox__line {
   position: absolute;
   top: 0;
   bottom: 0;
   left: var(--split);
   width: 1px;
   margin-left: -0.5px;
   background: rgba(255, 255, 255, .25);
   z-index: 5;
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   will-change: transform;
   transition: opacity .25s ease
}

.lightbox.is-comparing .lightbox__line {
   opacity: 1
}

.lightbox__line::after {
   content: "BEFORE / AFTER";
   color: rgba(255, 255, 255, 0.4);
   font-size: 9px;
   letter-spacing: 2px;
   white-space: nowrap;
   position: absolute;
   top: calc(-26px / var(--zoom-scale, 1));
   left: 0;
   transform: translateX(-50%) scaleY(calc(1 / var(--zoom-scale, 1)));
   transform-origin: 50% 0
}

.lightbox__image {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   transform-origin: 0 0;
   user-select: none;
   -webkit-user-drag: none;
   will-change: transform
}

/* 4. caption BELOW stage — as a flex sibling, not inside stage */
.lightbox__caption {
   flex-shrink: 0;
   font-size: 13px;
   font-weight: 500;
   letter-spacing: .02em;
   color: rgba(255, 255, 255, .5);
   pointer-events: auto;
   opacity: 0;
   transition: opacity .2s ease;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 90vw;
   z-index: 1
}

.lightbox.is-open .lightbox__caption {
   opacity: 1
}

.lightbox__caption-tags {
   display: inline-flex;
   gap: 8px;
   margin-left: 12px;
   vertical-align: middle;
}

.caption-tag {
   background: none;
   border: none;
   padding: 0;
   margin-right: 6px;
   font-family: inherit;
   font-size: 13px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   transition: color .16s ease;
}

.caption-tag:hover {
   color: #fff;
}

.lightbox__close {
   position: fixed;
   top: 14px;
   right: 16px;
   z-index: 110;
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
   color: #ffffff;
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transition: opacity .16s ease, transform .16s ease;
   display: flex;
   align-items: center;
   justify-content: center
}

.lightbox.is-open .lightbox__close {
   opacity: .84;
   pointer-events: auto;
   transition: opacity .16s ease, transform .16s ease;
}

.lightbox.is-open .lightbox__close:hover {
   opacity: 1;
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.04)
}

.lightbox__nav {
   position: fixed;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 110;
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s ease
}

.lightbox.is-open .lightbox__nav {
   opacity: 1;
   pointer-events: auto;
   transition: opacity .2s ease;
}

.lightbox__nav-btn {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.12);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
   color: #ffffff;
   cursor: pointer;
   opacity: .84;
   transition: opacity .16s ease, transform .16s ease;
   display: flex;
   align-items: center;
   justify-content: center
}

.lightbox__nav-btn:hover {
   opacity: 1;
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.04)
}

.lightbox__nav-btn:disabled {
   opacity: .3;
   cursor: default;
   transform: none
}

/* 1. scroll lock — no position:fixed to avoid grid reflow; scrollbar-gutter:stable handles width */
body.lightbox-open {
   overflow: hidden
}

/* 6. back-to-top: equal gap to footer and to right edge */
.back-to-top {
   position: fixed;
   right: clamp(14px, 2.2vw, 26px);
   bottom: clamp(46px, 6vw, 60px);
   z-index: 50;
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.45);
   backdrop-filter: blur(24px) saturate(200%);
   -webkit-backdrop-filter: blur(24px) saturate(200%);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.05);
   color: var(--text);
   cursor: pointer;
   opacity: 0;
   transform: translateY(8px);
   pointer-events: none;
   transition: opacity .18s ease, transform .18s ease, background .18s ease;
   display: flex;
   align-items: center;
   justify-content: center
}

.back-to-top.is-visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto
}

.back-to-top:hover {
   background: var(--surface)
}

.placeholder-page {
   min-height: calc(100vh - var(--header-height) - 85px);
   padding: clamp(58px, 9vw, 110px) clamp(18px, 4vw, 56px);
   max-width: 900px
}

.placeholder-page h1 {
   margin: 0;
   font-size: clamp(44px, 8vw, 92px);
   line-height: .96;
   letter-spacing: -.07em
}

.placeholder-page p {
   margin: 22px 0 0;
   max-width: 620px;
   color: var(--muted);
   font-size: 18px;
   line-height: 1.55
}

@media(max-width:980px) {
   .brand__copy {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px
   }
}

@media(max-width:680px) {
   :root {
      --gap: 14px;
      --header-height: auto
   }

   .site-header {
      position: sticky;
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
      padding-top: 14px;
      padding-bottom: 14px
   }

   .brand__logo {
      width: 18px;
      height: 18px
   }

   .site-nav,
   .footer-nav {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 2px
   }

   .lightbox__close {
      top: 10px;
      right: 10px
   }

   .site-footer {
      align-items: flex-start;
      flex-direction: column
   }

   .footer-left {
      flex-direction: row
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 1ms !important
   }
}

/* Footer left group: icons + copyright */
.footer-left {
   display: inline-flex;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap
}

.footer-left p {
   margin: 0;
   font-size: 11px
}

/* Footer social icons */
.footer-icons {
   display: inline-flex;
   align-items: center;
   gap: 14px
}

.footer-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   color: var(--muted);
   transition: color .16s ease, transform .16s ease
}

.footer-icons a:hover {
   color: var(--text);
   transform: translateY(-1px)
}

.footer-icons svg {
   width: 16px;
   height: 16px;
   display: block
}

/* About page — editorial layout */
.about-page {
   flex: 1;
   display: flex;
   align-items: center;
   padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 56px)
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(36px, 6vw, 90px);
   max-width: 1280px;
   margin: 0 auto;
   width: 100%;
   align-items: center
}

.about-portrait {
   position: relative;
   width: 85%;
   margin: 0 auto;
   aspect-ratio: 4/5;
   background: #1a1f2a linear-gradient(135deg, #1a1f2a, #0d1118);
   overflow: hidden
}

.about-portrait img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.about-content h1 {
   margin: 0 0 clamp(28px, 4vw, 48px);
   font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
   font-weight: 300;
   font-size: clamp(38px, 5.2vw, 68px);
   line-height: 1.05;
   letter-spacing: -.01em;
   color: var(--text)
}

.about-content p {
   margin: 0 0 22px;
   color: var(--muted);
   font-size: 16px;
   line-height: 1.7;
   max-width: 50ch
}

.about-content p:last-of-type {
   margin-bottom: clamp(34px, 5vw, 52px)
}

.about-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 32px;
   border: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.45);
   backdrop-filter: blur(24px) saturate(200%);
   -webkit-backdrop-filter: blur(24px) saturate(200%);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.05);
   color: var(--text);
   font-size: 11px;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 500;
   cursor: pointer;
   transition: background .18s ease, border-color .18s ease, transform .18s ease
}

.about-cta:hover {
   background: rgba(255, 255, 255, 0.65);
   transform: translateY(-1px)
}

@media(max-width:820px) {
   .about-grid {
      grid-template-columns: 1fr;
      gap: 36px
   }

   .about-portrait {
      max-width: 420px;
      margin: 0 auto
   }
}

/* Contact page */
.contact-page {
   flex: 1;
   display: flex;
   justify-content: center;
   padding: clamp(40px, 6vw, 80px) clamp(18px, 4vw, 56px)
}

.contact-wrap {
   width: 100%;
   max-width: 640px
}

.contact-wrap h1 {
   margin: 0 0 clamp(20px, 3vw, 32px);
   font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
   font-weight: 300;
   font-size: clamp(38px, 5vw, 60px);
   line-height: 1.05;
   letter-spacing: -.01em
}

.contact-intro {
   color: var(--muted);
   font-size: 16px;
   line-height: 1.65;
   margin: 0 0 12px;
   max-width: 48ch
}

.contact-direct {
   font-size: 14px;
   color: var(--muted);
   margin: 0 0 clamp(28px, 4vw, 40px)
}

.contact-direct a {
   color: var(--text);
   border-bottom: 1px solid var(--line-strong);
   padding-bottom: 1px;
   transition: border-color .16s ease
}

.contact-direct a:hover {
   border-color: var(--text)
}

.contact-form {
   display: grid;
   gap: 18px
}

.field {
   display: flex;
   flex-direction: column;
   gap: 7px
}

.field label {
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--muted);
   font-weight: 500
}

.field input,
.field textarea {
   width: 100%;
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: 0;
   background: rgba(233, 237, 245, .5);
   color: var(--text);
   font-family: inherit;
   font-size: 14px;
   line-height: 1.5;
   transition: border-color .16s ease, background .16s ease;
   -webkit-appearance: none;
   appearance: none
}

.field textarea {
   resize: vertical;
   min-height: 140px
}

.field input:focus,
.field textarea:focus {
   outline: none;
   border-color: rgba(106, 169, 255, .55);
   background: rgba(233, 237, 245, .78)
}

.field input:focus-visible,
.field textarea:focus-visible {
   outline: none
}

.honeypot {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none
}

.contact-submit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 32px;
   margin-top: 6px;
   border: none;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.45);
   backdrop-filter: blur(24px) saturate(200%);
   -webkit-backdrop-filter: blur(24px) saturate(200%);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.05);
   color: var(--text);
   font-family: inherit;
   font-size: 11px;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 500;
   cursor: pointer;
   transition: background .18s ease, transform .18s ease, opacity .18s ease;
   align-self: flex-start;
   justify-self: start
}

.contact-submit:hover:not(:disabled) {
   background: rgba(255, 255, 255, 0.65);
   transform: translateY(-1px)
}

.contact-submit:disabled {
   opacity: .55;
   cursor: wait
}

.form-status {
   margin: 8px 0 0;
   font-size: 13px;
   color: var(--muted);
   min-height: 1.4em
}

.form-status.is-success {
   color: #013220
}

.form-status.is-error {
   color: #e58a8a
}