/* ===== shared styles for all pages ===== */
:root{
  --bg:#0d0d0e;--bg-soft:#141416;--ink:#ece9e3;--ink-dim:#8a8782;--line:#26252a;--accent:#c98a5e;
  --header-h:64px;
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}

/* header */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;min-height:var(--header-h);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.mark{font-family:var(--display);font-size:26px;letter-spacing:.04em}
.mark a{color:var(--ink);text-decoration:none}
.name-small{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.header-contact{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .25s,border-color .25s;
}
.header-contact:hover{color:var(--ink);border-color:var(--accent)}
.back{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .25s,border-color .25s}
.back:hover{color:var(--ink);border-color:var(--accent)}

/* hero */
/* hero */
.hero{min-height:84vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 80px) 32px 70px;max-width:1100px;margin:0 auto}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,7.2vw,92px);line-height:1.04;letter-spacing:-.01em;max-width:100%}
.flair-title{max-width:100%}
.flair-title .w-light,.flair-title .w-texture,.flair-title .w-andthe,.flair-title .w-spaces{white-space:nowrap}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{margin-top:34px;max-width:46ch;font-size:clamp(15px,2.2vw,18px);color:var(--ink-dim)}
.hero .loc{margin-top:22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}

/* ===== headline flair: words that act out their meaning ===== */
.flair-title{margin-bottom:6px}

/* "Light" — luminous gradient sweep PLUS a soft warm back glow */
.flair-title .w-light{
  position:relative;display:inline-block;isolation:isolate;
  background:linear-gradient(100deg,
    #d8d4cc 0%, #d8d4cc 26%,
    #fff6e8 44%, #ffffff 50%, #fff6e8 56%,
    #d8d4cc 74%, #d8d4cc 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:lightSweep 4.5s linear infinite;
}
/* the glow sits behind the word and softly pulses */
.flair-title .w-light::before{
  content:"Light";
  position:absolute;left:0;top:0;z-index:-1;
  color:#fff3e0;
  filter:blur(22px);
  opacity:.45;
  -webkit-text-fill-color:#fff3e0;
  animation:glowPulse 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes lightSweep{
  0%{background-position:160% 0}
  100%{background-position:-60% 0}
}
@keyframes glowPulse{
  0%,100%{opacity:.30}
  50%{opacity:.6}
}

/* "texture" — warm italic that subtly shifts */
.flair-title .w-texture{
  font-style:italic;
  background:linear-gradient(92deg,#b9774d 0%,#c98a5e 35%,#e0a87b 50%,#c98a5e 65%,#b9774d 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.06);
  animation:textureShift 7s ease-in-out infinite;
}
@keyframes textureShift{
  0%,100%{background-position:0% 0}
  50%{background-position:120% 0}
}

/* "and the" — a quiet transitional line bridging into "spaces between" */
.flair-title .w-andthe{
  display:inline-block;
  font-style:italic;
  font-size:.46em;
  color:var(--ink-dim);
  opacity:.55;
  letter-spacing:.04em;
  animation:andtheFade 1.4s ease .9s both;
}
@keyframes andtheFade{
  0%{opacity:0;transform:translateY(4px)}
  100%{opacity:.55;transform:none}
}

/* "spaces between" — expands once, dramatically, from very tight to wide on load */
.flair-title .w-spaces{
  color:#cfcbc3;font-style:italic;display:inline-block;
  font-size:1.1em;
  letter-spacing:.2em;margin-right:-.2em;max-width:100%;
  animation:spacesExpand 2.2s cubic-bezier(.16,.84,.3,1) .25s both;
}
@keyframes spacesExpand{
  0%{letter-spacing:-.06em;opacity:.35}
  60%{opacity:1}
  100%{letter-spacing:.2em;opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .flair-title .w-light{animation:none;background-position:50% 0}
  .flair-title .w-light::before{animation:none;opacity:.4}
  .flair-title .w-texture{animation:none;background-position:50% 0}
  .flair-title .w-andthe{animation:none;opacity:.55}
  .flair-title .w-spaces{animation:none;letter-spacing:.2em;margin-right:-.2em}
}

/* ===== services chips — easy to spot, invite browsing ===== */
.services{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.service-chip{
  font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding:11px 20px;border:1px solid var(--line);border-radius:100px;
  background:rgba(201,138,94,.0);
  transition:background .3s, border-color .3s, color .3s, transform .2s;
}
.service-chip:hover{
  background:var(--accent);color:var(--bg);border-color:var(--accent);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .flair-title .w-light{animation:none;background-position:50% 0}
  .flair-title .w-texture{animation:none;background-position:50% 0}
  .flair-title .w-andthe{animation:none;opacity:.55}
  .flair-title .w-spaces{animation:none;letter-spacing:.2em;margin-right:-.2em}
  .service-chip:hover{transform:none}
}


/* desktop filter bar */
nav.filters{
  position:sticky;top:var(--header-h);z-index:40;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  padding:18px 32px;background:transparent;
}
.filters button{
  font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:rgba(13,13,14,.55);border:none;cursor:pointer;padding:8px 14px;border-radius:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);transition:color .25s,background .25s;
}
.filters button:hover{color:#fff;background:rgba(13,13,14,.78)}
.filters button.active{color:var(--bg);background:var(--accent);text-shadow:none}

/* masonry gallery */
.gallery{columns:3;column-gap:14px;padding:32px;max-width:1500px;margin:0 auto}
@media(max-width:1000px){.gallery{columns:2}}
@media(max-width:620px){.gallery{columns:1}}
.tile{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;background:var(--bg-soft);cursor:zoom-in;opacity:0;transform:translateY(12px);animation:rise .6s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.tile img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.04)}
.tile .tag{position:absolute;left:12px;bottom:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(13,13,14,.6);padding:5px 9px;border-radius:2px;opacity:0;transition:opacity .3s}
.tile:hover .tag{opacity:1}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(8,8,9,.96);padding:5vh 5vw}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:90vh;width:auto;object-fit:contain}
.lb .x{position:absolute;top:24px;right:30px;font-size:30px;color:var(--ink-dim);cursor:pointer;line-height:1;font-family:var(--display)}
.lb .x:hover{color:var(--ink)}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:44px;color:var(--ink-dim);cursor:pointer;padding:0 24px;user-select:none;font-family:var(--display)}
.lb .nav:hover{color:var(--ink)}
.lb .prev{left:0}.lb .next{right:0}

/* about / contact strip */
.about{max-width:680px;margin:40px auto;padding:80px 32px;border-top:1px solid var(--line);text-align:center}
.about h2{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}
.about p{font-size:clamp(17px,3vw,21px);font-family:var(--display);line-height:1.5;color:var(--ink)}
.contact-links{margin-top:40px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.contact-links a{color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:4px;transition:border-color .25s}
.contact-links a:hover{border-color:var(--accent)}

footer{text-align:center;padding:40px 32px 56px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}

/* ===== MOBILE LANDING (doorways) — hidden on desktop ===== */
.m-landing{display:none}
.cat-card{
  position:relative;display:block;text-decoration:none;color:var(--ink);
  margin:0 10px 10px;border-radius:3px;overflow:hidden;background:var(--bg-soft);
  opacity:0;transform:translateY(14px);animation:rise .6s forwards;
}
/* one big full-width image per category */
.cat-card .duo{display:block}
.cat-card .duo img{aspect-ratio:3/4;object-fit:cover}
.cat-card .duo img:nth-child(2){display:none}  /* show only the lead hero, full size */
.cat-card .label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:18px 18px 16px;
  background:linear-gradient(to top, rgba(8,8,9,.55) 0%, rgba(8,8,9,.12) 50%, rgba(8,8,9,0) 100%);
  pointer-events:none;
}
.cat-card .label .name{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.02em;line-height:1;color:rgba(236,233,227,.82);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cat-card .label .arrow{font-family:var(--display);font-size:24px;color:rgba(201,138,94,.85);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cat-card .label .count{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(236,233,227,.5);margin-top:6px}

.m-hero{padding:calc(var(--header-h) + 30px) 20px 8px}
.m-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,10vw,48px);line-height:1.05}
.m-hero .w-spaces{font-size:1.0em;letter-spacing:.16em;margin-right:-.16em}
.m-hero h1 em{font-style:italic;color:var(--accent)}
.m-hero p{margin-top:12px;font-size:13px;color:var(--ink-dim);max-width:34ch}
.m-hero .services{margin-top:22px}
.m-hero .service-chip{padding:10px 16px;font-size:11px}

.m-section-label{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);padding:22px 20px 12px;
}
.m-section-label .scroll-cue{color:var(--accent);font-size:14px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media (max-width:680px){
  header{padding:14px 20px}
  :root{--header-h:58px}
  .mark{font-size:22px}
  .name-small{font-size:10px;letter-spacing:.16em}

  /* hide the desktop experience, show the mobile doorways */
  .desktop-only{display:none !important}
  .m-landing{display:block}
}

@media (min-width:681px){
  .m-landing{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  .tile,.cat-card{animation:none;opacity:1;transform:none}
  .tile img,.tile:hover img{transition:none;transform:none}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}