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

:root{
  --paper:#f8f7f4;
  --ink:#171717;
  --muted:#6d6a66;
  --line:#d8d5cf;
  --pink:#f06cb3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;font-weight:300}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(248,247,244,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.08)}
.brand,.footer-brand{display:flex;flex-direction:column;line-height:1}
.brand span,.footer-brand span{font-family:"Italiana","Bodoni 72",Didot,serif;font-size:25px;letter-spacing:.04em}
.brand small,.footer-brand small{font-size:8px;letter-spacing:.48em;margin-top:8px}
.nav{display:flex;gap:35px;font-size:12px;text-transform:uppercase;letter-spacing:.17em}
.nav a{position:relative}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--ink);transition:.3s}.nav a:hover:after{right:0}
.menu-toggle{display:none;border:0;background:none;font:inherit;letter-spacing:.15em}
.hero{height:100svh;min-height:700px;position:relative;color:white}
.hero img{position:absolute;inset:0}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 65%)}
.hero-copy{position:absolute;left:7vw;bottom:12vh;max-width:710px}
.eyebrow{font-size:10px;letter-spacing:.35em;font-weight:500;margin:0 0 24px}
.eyebrow.dark{color:var(--muted)}
h1,h2{font-family:"Italiana","Bodoni 72",Didot,serif;font-weight:400;margin:0;line-height:.95}
h1{font-size:clamp(60px,8vw,125px)}
h2{font-size:clamp(48px,6.5vw,98px)}
.hero-copy>p:not(.eyebrow){font-size:17px;max-width:520px;line-height:1.6;margin:28px 0 34px}
.button{display:inline-block;border:1px solid currentColor;padding:15px 24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:.3s}
.button:hover{background:white;color:black}
.section{padding:130px 7vw}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}
.intro-text{font-size:19px;line-height:1.8;padding-top:30px}.intro-text p{margin:0 0 25px}
.services{border-top:1px solid var(--line)}
.section-heading{margin-bottom:70px}.section-heading.row{display:flex;justify-content:space-between;gap:60px;align-items:end}
.side-copy{max-width:370px;line-height:1.7;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-grid article{padding:42px 30px 50px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:230px}
.service-grid span{font-size:10px;color:var(--muted);letter-spacing:.2em}
.service-grid h3{font-family:"Italiana",serif;font-size:29px;font-weight:400;margin:35px 0 16px}
.service-grid p{color:var(--muted);line-height:1.6;margin:0}
.portfolio{background:#fff}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.project{height:68vh;min-height:520px;margin:0;position:relative;overflow:hidden;background:#ddd}
.project.large{grid-row:span 2;height:calc(136vh + 24px)}
.project.wide{grid-column:span 2;height:75vh}
.project img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.project:hover img{transform:scale(1.035)}
.project:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.58))}
figcaption{position:absolute;z-index:2;left:32px;bottom:30px;color:white;display:flex;flex-direction:column}
figcaption span{font-size:9px;letter-spacing:.3em;margin-bottom:8px}
figcaption strong{font-family:"Italiana",serif;font-size:30px;font-weight:400}
.statement{padding:15vw 7vw;text-align:center;background:var(--ink);color:white}
.statement p{font-family:"Italiana",serif;font-size:clamp(45px,7vw,105px);line-height:1.08;margin:0}
.statement em{font-weight:400;color:var(--pink)}
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw}
.contact-info{display:flex;flex-direction:column;gap:18px;padding-top:40px}
.contact-info a{font-family:"Italiana",serif;font-size:clamp(25px,3vw,42px);border-bottom:1px solid var(--line);padding-bottom:15px}
.contact-info p{max-width:450px;line-height:1.7;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:55px 7vw;display:flex;align-items:end;justify-content:space-between}
footer p{font-size:11px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:850px){
  .site-header{height:76px}
  .brand span{font-size:20px}.brand small{font-size:7px}
  .menu-toggle{display:block}
  .nav{position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:30px 7vw;flex-direction:column;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .hero{min-height:650px}
  .hero-copy{left:7vw;right:7vw;bottom:10vh}
  .intro,.contact{grid-template-columns:1fr}
  .intro-text{padding-top:0}
  .service-grid{grid-template-columns:1fr}
  .section-heading.row{display:block}.side-copy{margin-top:30px}
  .project-grid{grid-template-columns:1fr}
  .project,.project.large,.project.wide{grid-column:auto;grid-row:auto;height:70vh;min-height:480px}
  .section{padding:95px 7vw}
  footer{align-items:flex-start;gap:30px;flex-direction:column}
}
@media(max-width:500px){
  h1{font-size:55px}h2{font-size:49px}
  .hero-copy>p:not(.eyebrow){font-size:15px}
  .project,.project.large,.project.wide{height:62vh;min-height:420px}
  figcaption{left:22px;bottom:22px}figcaption strong{font-size:25px}
  .contact-info a{font-size:24px}
}

.more-projects-heading{margin:120px 0 45px}
.more-projects-heading h3{font-family:"Italiana","Bodoni 72",Didot,serif;font-size:clamp(42px,5vw,78px);font-weight:400;line-height:1;margin:0}
.extra-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.extra-gallery figure{margin:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:#ddd}
.extra-gallery figure:nth-child(4n){grid-column:span 2;aspect-ratio:16/9}
.extra-gallery img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.extra-gallery figure:hover img{transform:scale(1.035)}
.extra-gallery figure:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.extra-gallery figcaption{left:22px;bottom:20px}
.extra-gallery figcaption strong{font-size:24px}
@media(max-width:850px){
  .extra-gallery{grid-template-columns:1fr 1fr}
  .extra-gallery figure:nth-child(4n){grid-column:span 2}
}
@media(max-width:560px){
  .extra-gallery{grid-template-columns:1fr}
  .extra-gallery figure,.extra-gallery figure:nth-child(4n){grid-column:auto;aspect-ratio:4/5}
}

/* Hero title reduced to keep the neon image visible */
.hero-title-small{
  font-size:clamp(42px,5.4vw,82px);
  max-width:760px;
  line-height:.98;
}

/* Projects: only the latest images supplied */
.latest-project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.latest-project{
  position:relative;
  overflow:hidden;
  margin:0;
  min-height:520px;
  height:68vh;
  background:#ddd;
}
.latest-project.tall{
  grid-row:span 2;
  height:calc(136vh + 22px);
}
.latest-project.wide{
  grid-column:span 2;
  height:72vh;
}
.latest-project img{
  transition:transform .8s cubic-bezier(.2,.6,.2,1);
}
.latest-project:hover img{
  transform:scale(1.035);
}
.latest-project:after{
  content:"";
  position:absolute;
  inset:52% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.58));
}
.latest-project figcaption{
  position:absolute;
  z-index:2;
  left:30px;
  bottom:28px;
  color:#fff;
  display:flex;
  flex-direction:column;
}
.latest-project figcaption span{
  font-size:9px;
  letter-spacing:.3em;
  margin-bottom:8px;
}
.latest-project figcaption strong{
  font-family:"Italiana",serif;
  font-size:29px;
  font-weight:400;
}
@media(max-width:850px){
  .hero-title-small{font-size:clamp(40px,10vw,64px)}
  .latest-project-grid{grid-template-columns:1fr}
  .latest-project,
  .latest-project.tall,
  .latest-project.wide{
    grid-column:auto;
    grid-row:auto;
    height:68vh;
    min-height:470px;
  }
}