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

:root{
  --ivory:#f4efe5;
  --cream:#fbf7ee;
  --sand:#e5dccd;
  --taupe:#a99e90;
  --brown:#453d35;
  --ink:#292724;
  --muted:#6e685f;
  --olive:#66705c;
  --line:rgba(69,61,53,.2);
  --white:#fffdf8;
  --header-h:94px;
  --page-x:clamp(24px,6vw,104px);
  --section-y:clamp(88px,10vw,152px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--ivory);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  line-height:1.8;
}
body.menu-open,body.lightbox-open{ overflow:hidden; }
img{ display:block; width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ color:inherit; font:inherit; }
button{ border:0; }
ul{ list-style:none; }
::selection{ background:var(--olive); color:var(--white); }

.fade-in{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity 1.4s cubic-bezier(.22,1,.36,1),
    transform 1.4s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--fade-delay,0ms);
}
.fade-in.is-visible{
  opacity:1;
  transform:translateY(0);
}

.serif{ font-family:'Lora',serif; }
.eyebrow{
  display:block;
  margin-bottom:16px;
  color:var(--olive);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.section-title,.page-title{
  font-family:'Lora',serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
}
.section-title{ font-size:clamp(2.5rem,5vw,5rem); }
.page-title{ font-size:clamp(3.8rem,8vw,8rem); }
.body-copy{ max-width:56ch; color:var(--muted); }
.section-shell{ padding:var(--section-y) var(--page-x); }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:clamp(42px,6vw,78px);
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.section-head .body-copy{ max-width:40ch; }

.site-header{
  position:fixed;
  z-index:200;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  padding:12px var(--page-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(244,239,229,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.home .site-header:not(.is-scrolled){
  color:var(--white);
  background:linear-gradient(180deg,rgba(28,25,22,.3),transparent);
  border-bottom:0;
  box-shadow:none;
  backdrop-filter:none;
}
.site-logo{ position:relative; z-index:202; width:104px; }
.site-logo img{ aspect-ratio:1; object-fit:contain; transform:scale(.88); transform-origin:left center; transition:filter .25s ease; }
.home .site-header:not(.is-scrolled) .site-logo img{ content:url("images/paw.da-ku.png"); filter:none; transform:scale(1); }
.desktop-nav ul{ display:flex; align-items:center; gap:clamp(24px,3vw,48px); }
.desktop-nav a{
  padding:8px 0;
  border-bottom:1px solid transparent;
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.home .site-header:not(.is-scrolled) .desktop-nav a{ color:rgba(255,253,248,.88); }
.desktop-nav a:hover,.desktop-nav a[aria-current='page']{ border-bottom-color:currentColor; color:var(--ink); }
.home .site-header:not(.is-scrolled) .desktop-nav a:hover{ color:#fff; }
.menu-toggle,.mobile-cta{ display:none; }

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--white);
  background-color:var(--brown);
  background-image:var(--hero-image);
  background-position:center 52%;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(28,25,22,.08) 35%,rgba(28,25,22,.62) 100%);
}
.hero-copy{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(130px,16vw,210px) var(--page-x) clamp(52px,7vw,92px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
}
.hero h1{
  max-width:11ch;
  font-family:'Lora',serif;
  font-size:clamp(3.2rem,6.7vw,7.2rem);
  font-weight:400;
  line-height:1.13;
  letter-spacing:-.045em;
}
.hero-note{ max-width:35ch; color:rgba(255,253,248,.84); font-size:.88rem; }

.intro-strip{
  padding:clamp(46px,6vw,78px) var(--page-x);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(44px,9vw,140px);
  align-items:start;
  background:var(--sand);
  border-bottom:1px solid var(--line);
}
.intro-strip strong{ font-family:'Lora',serif; font-size:clamp(1.6rem,2.4vw,2.8rem); font-weight:400; }
.intro-strip p{ max-width:60ch; color:var(--muted); }

.gallery-preview{ background:var(--cream); }
.preview-grid,.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.5vw,38px);
}
.gallery-card{ min-width:0; }
.gallery-figure{
  position:relative;
  overflow:hidden;
  aspect-ratio:3/2;
  background:var(--sand);
}
.gallery-figure img{ height:100%; object-fit:cover; transition:transform .55s ease; }
.gallery-card:nth-child(2n) .gallery-figure img{ object-position:center 35%; }
.gallery-overlay{
  position:absolute;
  inset:0;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;
  color:#fff;
  background:linear-gradient(180deg,transparent 52%,rgba(33,29,25,.68));
  transition:opacity .25s ease;
}
.gallery-card:hover .gallery-overlay,.gallery-open:focus-visible .gallery-overlay{ opacity:1; }
.gallery-card:hover .gallery-figure img{ transform:scale(1.018); }
.gallery-name{ font-family:'Lora',serif; font-size:1.35rem; }
.gallery-category{ margin-top:3px; font-size:.61rem; letter-spacing:.13em; text-transform:uppercase; }
.gallery-meta{
  margin-top:11px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:.61rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.gallery-open{ width:100%; cursor:pointer; text-align:left; background:none; }
.more-row{ margin-top:clamp(38px,5vw,64px); display:flex; justify-content:center; }
.text-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:12px 0 8px;
  border-bottom:1px solid currentColor;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.text-link::after{ content:'→'; font-size:1rem; }

.about-preview{ background:var(--ivory); }
.portrait-placeholder{
  position:relative;
  min-height:clamp(440px,58vw,680px);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:28px;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(102,112,92,.18),transparent 52%),
    linear-gradient(325deg,rgba(69,61,53,.12),transparent 45%),
    var(--sand);
  color:var(--muted);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.service-preview{ background:var(--sand); }
.service-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,60px); }
.service-card{ border-top:1px solid var(--line); }
.service-visual{ overflow:hidden; aspect-ratio:16/10; background:var(--ivory); }
.service-visual img{ height:100%; object-fit:cover; object-position:center 38%; }
.service-visual.placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--muted);
  background:linear-gradient(145deg,rgba(102,112,92,.12),transparent 58%),var(--ivory);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.service-visual.placeholder small{ color:var(--olive); font-size:.57rem; }
.service-card-copy{ padding:28px 0 0; }
.service-card h3{ margin-bottom:14px; font-family:'Lora',serif; font-size:clamp(2rem,3.4vw,3.8rem); font-weight:400; }
.service-card .text-link{ margin-top:24px; }

.contact-band{
  padding:clamp(76px,9vw,126px) var(--page-x);
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);
  gap:clamp(52px,10vw,160px);
  align-items:end;
  background:var(--brown);
  color:var(--white);
}
.contact-band .eyebrow{ color:#cbbfaf; }
.contact-band h2{ max-width:10ch; }
.contact-band p{ max-width:50ch; color:rgba(255,253,248,.72); }
.contact-band .text-link{ margin-top:30px; }

.page-hero{
  padding:calc(var(--header-h) + clamp(68px,8vw,118px)) var(--page-x) clamp(60px,8vw,108px);
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(320px,1fr);
  gap:clamp(48px,9vw,150px);
  align-items:end;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.page-hero .body-copy{ padding-bottom:10px; }
.page-content{ padding:clamp(64px,8vw,112px) var(--page-x) var(--section-y); }

.filter-bar{
  margin-bottom:clamp(40px,5vw,62px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.filters{ display:flex; flex-wrap:wrap; gap:22px; }
.filter-btn{
  padding:5px 0;
  cursor:pointer;
  background:none;
  border-bottom:1px solid transparent;
  color:var(--muted);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.filter-btn:hover,.filter-btn.active{ border-color:currentColor; color:var(--ink); }
.work-count{ color:var(--muted); font-size:.67rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.gallery-card[hidden],.empty-gallery[hidden]{ display:none; }
.empty-gallery{
  grid-column:1/-1;
  padding:78px 24px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed;
  z-index:1000;
  inset:0;
  padding:32px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;
  gap:18px;
  color:#fff;
  background:rgba(25,22,19,.92);
}
.lightbox-figure{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:13px; }
.lightbox-image{ width:auto; max-width:100%; height:auto; max-height:82vh; object-fit:contain; }
.lightbox-caption{ color:rgba(255,255,255,.72); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.lightbox-close,.lightbox-arrow{ cursor:pointer; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.35); }
.lightbox-close{ position:absolute; top:22px; right:22px; width:44px; height:44px; border-radius:50%; font-size:1.5rem; }
.lightbox-arrow{ width:52px; height:64px; justify-self:center; font-size:2rem; }

.about-detail-hero{ align-items:start; }
.about-detail-copy .page-title{ margin-bottom:clamp(54px,7vw,102px); }
.about-detail-body{ max-width:58ch; color:var(--muted); }
.about-detail-body p + p{ margin-top:24px; }
.about-detail-photo{
  width:100%;
  max-width:580px;
  overflow:hidden;
  justify-self:end;
  aspect-ratio:3 / 4;
  background:var(--sand);
}
.about-detail-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 48%; }

.service-page-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,5vw,72px); }
.service-page-card{ background:var(--cream); border:1px solid var(--line); }
.service-page-card .service-visual{ aspect-ratio:16/9; }
.service-page-copy{ padding:clamp(28px,4vw,52px); }
.service-page-copy h2{ margin-bottom:18px; font-family:'Lora',serif; font-size:clamp(2.4rem,4vw,4.5rem); font-weight:400; }
.service-page-copy .text-link{ margin-top:28px; }
.approach-strip{ margin-top:clamp(70px,9vw,130px); padding:clamp(40px,6vw,72px); display:grid; grid-template-columns:auto 1fr; gap:clamp(36px,8vw,120px); background:var(--sand); }
.approach-strip h2{ font-family:'Lora',serif; font-size:clamp(1.8rem,3vw,3.2rem); font-weight:400; }

.detail-hero-image{ height:clamp(360px,52vw,700px); overflow:hidden; background:var(--sand); }
.detail-hero-image img{ height:100%; object-fit:cover; object-position:center 42%; }
.detail-hero-image.placeholder{ display:flex; align-items:center; justify-content:center; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
.detail-intro{ display:grid; grid-template-columns:minmax(260px,.75fr) minmax(320px,1fr); gap:clamp(48px,9vw,140px); align-items:start; }
.detail-intro h2{ font-family:'Lora',serif; font-size:clamp(2.2rem,4.4vw,4.8rem); font-weight:400; line-height:1.25; }
.detail-points{ margin-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.detail-points li{ padding:16px 16px 16px 0; color:var(--muted); border-bottom:1px solid var(--line); font-size:.78rem; }
.plans-section{ background:var(--sand); }
.plan-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.plan-card{ padding:clamp(30px,4vw,54px); background:var(--cream); }
.plan-type{ color:var(--olive); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }
.plan-card h3{ margin:14px 0 24px; font-family:'Lora',serif; font-size:clamp(2rem,3.2vw,3.6rem); font-weight:400; }
.plan-data{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.plan-data dt{ color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.plan-data dd{ margin-top:3px; font-size:1rem; }
.plan-price{ margin-top:28px; font-family:'Lora',serif; font-size:clamp(1.7rem,2.5vw,2.7rem); }
.delivery-note{ margin-top:24px; color:var(--muted); font-size:.82rem; }

.contact-layout{ display:grid; grid-template-columns:minmax(260px,.75fr) minmax(340px,1fr); gap:clamp(54px,9vw,142px); align-items:start; }
.contact-info h2{ margin-bottom:24px; font-family:'Lora',serif; font-size:clamp(2.2rem,4vw,4.5rem); font-weight:400; }
.contact-info .body-copy + .body-copy{ margin-top:16px; }
.contact-channels{ margin-top:38px; border-top:1px solid var(--line); }
.contact-channel{ padding:18px 0; display:flex; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.contact-channel span:last-child{ color:var(--muted); }
.contact-form{ padding:clamp(30px,4vw,52px); background:var(--sand); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.field label{ color:var(--muted); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.field input,.field textarea,.field select{ width:100%; padding:12px 0; background:transparent; border:0; border-bottom:1px solid var(--line); outline:0; border-radius:0; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ border-bottom-color:var(--ink); }
.submit-btn{ padding:13px 0 8px; cursor:pointer; background:none; border-bottom:1px solid var(--ink); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; }

.site-footer{
  padding:40px var(--page-x);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  background:var(--brown);
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,253,248,.66);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.footer-links{ display:flex; flex-wrap:wrap; gap:20px; }

@media(max-width:900px){
  :root{ --header-h:78px; --page-x:24px; --section-y:88px; }
  .site-header{ justify-content:center; padding:8px 20px; }
  .site-logo{ width:82px; }
  .home .site-header:not(.is-scrolled) .site-logo img{ filter:none; }
  .desktop-nav{
    position:fixed;
    z-index:200;
    inset:0;
    padding:118px 28px 90px;
    background:rgba(41,39,36,.98);
    transform:translateX(100%);
    transition:transform .25s ease;
  }
  .desktop-nav.open{ transform:translateX(0); }
  .desktop-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .desktop-nav a,.home .site-header:not(.is-scrolled) .desktop-nav a{ font-family:'Lora',serif; font-size:2rem; font-weight:400; letter-spacing:0; text-transform:none; color:#fff; }
  .menu-toggle{ position:absolute; z-index:202; right:20px; display:flex; flex-direction:column; gap:6px; padding:10px; cursor:pointer; background:none; }
  .menu-toggle span{ width:25px; height:1px; background:var(--ink); transition:transform .2s ease; }
  .home .site-header:not(.is-scrolled) .menu-toggle span{ background:#fff; }
  .menu-toggle.active span{ background:#fff!important; }
  .menu-toggle.active span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle.active span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
  .menu-toggle.active ~ .site-logo img{ filter:none!important; }
  .mobile-cta{
    position:fixed;
    z-index:190;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:rgba(69,61,53,.97);
    color:#fff;
    box-shadow:0 -1px 0 rgba(255,255,255,.2);
  }
  .mobile-cta a{ display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(255,255,255,.18); font-size:.58rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
  .mobile-cta a:last-child{ border-right:0; background:var(--olive); }
  body{ padding-bottom:58px; }
  .hero{ min-height:100svh; }
  .hero-copy{ padding:120px 24px 42px; display:block; }
  .hero h1{ font-size:clamp(3rem,11vw,5.4rem); }
  .hero-note{ margin-top:22px; }
  .intro-strip,.page-hero,.detail-intro,.contact-band{ grid-template-columns:1fr; gap:28px; }
  .section-head{ align-items:flex-start; flex-direction:column; gap:22px; }
  .contact-layout{ grid-template-columns:1fr; gap:52px; }
  .portrait-placeholder{ min-height:clamp(400px,112vw,620px); }
  .about-detail-copy .page-title{ margin-bottom:38px; }
  .about-detail-photo{ max-width:none; justify-self:stretch; }
  .service-grid,.service-page-grid{ gap:24px; }
  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; }
  .gallery-overlay{ opacity:1; padding:12px; }
  .gallery-name{ font-size:1.05rem; }
  .gallery-category{ font-size:.54rem; }
  .detail-points{ grid-template-columns:1fr; }
  .approach-strip{ grid-template-columns:1fr; gap:22px; }
  .lightbox{ grid-template-columns:42px minmax(0,1fr) 42px; gap:6px; padding:64px 8px 24px; }
  .lightbox-arrow{ width:38px; height:52px; font-size:1.5rem; }
  .lightbox-image{ max-height:72vh; }
}

@media(max-width:620px){
  .section-title{ font-size:clamp(2.65rem,13vw,4rem); }
  .page-title{ font-size:clamp(3.6rem,18vw,5.8rem); }
  .page-hero{ padding-top:calc(var(--header-h) + 54px); padding-bottom:54px; }
  .hero{ background-position:56% center; }
  .intro-strip{ padding-top:40px; padding-bottom:40px; }
  .preview-grid{ grid-template-columns:1fr; gap:30px; }
  .preview-grid .gallery-card:nth-child(3){ display:none; }
  .service-grid,.service-page-grid,.plan-grid{ grid-template-columns:1fr; }
  .service-card + .service-card{ margin-top:12px; }
  .service-card-copy{ padding-top:22px; }
  .contact-band{ padding-top:72px; padding-bottom:72px; }
  .filter-bar{ align-items:flex-end; }
  .work-count{ display:none; }
  .gallery-grid{ gap:20px 12px; }
  .gallery-meta{ display:none; }
  .gallery-overlay{ padding:9px; }
  .gallery-name{ font-size:.92rem; }
  .gallery-category{ font-size:.5rem; }
  .contact-form{ padding:28px 22px; }
  .site-footer{ padding-bottom:32px; }
}

@media(max-width:340px){ .gallery-grid{ grid-template-columns:1fr; } }
@media(hover:none){ .gallery-overlay{ opacity:1; } }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto!important; transition:none!important; }
  .fade-in,
  .fade-in.is-visible{
    opacity:1!important;
    transform:none!important;
  }
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }