:root{
  --bg:#f5f1ea;
  --paper:#faf7f1;
  --text:#11100f;
  --muted:#706861;
  --line:rgba(17,16,15,.12);
  --max:1540px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a{font:inherit}
.site-shell{padding:18px 24px 28px}
.topbar,.hero,.portfolio-intro,.masonry,.about,.footer{max-width:var(--max);margin:0 auto}
.topbar{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  padding:8px 0 10px;
  background:linear-gradient(to bottom, rgba(245,241,234,.97), rgba(245,241,234,.86), rgba(245,241,234,0));
  backdrop-filter:blur(10px);
}
.brand img{width:126px;height:auto}
.topnav{display:flex;justify-content:center;gap:30px;align-items:center}
.topnav a,.footer-links a,.social-row a{
  color:var(--muted);
  font-size:.88rem;
  letter-spacing:.04em;
}
.topnav a:hover,.footer-links a:hover,.icon-link:hover,.social-row a:hover{color:var(--text)}
.top-actions{display:flex;align-items:center;gap:10px}
.icon-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;color:var(--muted);
}
.icon-link svg{width:18px;height:18px}
.lang-switch{display:inline-flex;gap:6px;margin-left:10px}
.lang-btn{
  border:0;background:transparent;color:var(--muted);padding:6px 0;min-width:34px;cursor:pointer;
  letter-spacing:.1em;font-size:.76rem;
}
.lang-btn.active{color:var(--text);border-bottom:1px solid var(--text)}
.eyebrow{
  margin:0;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.68rem;
}
.hero{padding:88px 0 8px}
.intro-ribbon{
  display:flex;flex-wrap:wrap;gap:14px 42px;align-items:center;
  justify-content:center;
  color:var(--muted);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:normal;
  font-weight:600;
  font-size:clamp(1.38rem,2.25vw,2.2rem);
  line-height:1.08;
  letter-spacing:.01em;
}
.intro-ribbon span[data-i18n-html]{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.intro-word-break{display:block}
.intro-ribbon .divider{
  opacity:.45;
  font-style:normal;
  transform:translateY(-1px);
}
.portfolio-intro{
  display:flex;justify-content:space-between;align-items:end;gap:28px;
  padding:78px 0 26px;
}
.filters{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.filter-btn{
  background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--muted);font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;
}
.filter-btn.active{color:var(--text)}
.masonry{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:64px 38px;
  align-items:start;
  padding-bottom:116px;
}
.project-card{
  display:block;padding:0;border:0;background:none;cursor:pointer;min-width:0;
}
.project-card:nth-child(12n+1){grid-column:1 / span 5}
.project-card:nth-child(12n+2){grid-column:8 / span 4;margin-top:7vw}
.project-card:nth-child(12n+3){grid-column:2 / span 3;margin-top:3vw}
.project-card:nth-child(12n+4){grid-column:6 / span 5;margin-top:1vw}
.project-card:nth-child(12n+5){grid-column:1 / span 4;margin-top:5vw}
.project-card:nth-child(12n+6){grid-column:7 / span 3}
.project-card:nth-child(12n+7){grid-column:4 / span 5;margin-top:5vw}
.project-card:nth-child(12n+8){grid-column:10 / span 3;margin-top:1vw}
.project-card:nth-child(12n+9){grid-column:1 / span 3}
.project-card:nth-child(12n+10){grid-column:5 / span 4;margin-top:6vw}
.project-card:nth-child(12n+11){grid-column:9 / span 4;margin-top:3vw}
.project-card:nth-child(12n+12){grid-column:3 / span 5;margin-top:2vw}

/* targeted art-direction sizing */
.project-card[data-id="freeform-interior-design-kidsroom-1"]{grid-column:1 / span 5;margin-top:1vw}
.project-card[data-id="freeform-interior-design-living-room-2"]{grid-column:7 / span 5;margin-top:2vw}
.project-card[data-id="freeform-interior-design-living-room-3"]{grid-column:1 / span 3;margin-top:0}
.project-card[data-id="freeform-interior-design-pub"]{grid-column:5 / span 5;margin-top:0}
.project-card[data-id="freeform-interior-design-kidsroom-2"]{grid-column:3 / span 5;margin-top:4vw}
.project-card[data-id="freeform-interior-design-living-room-5"]{grid-column:10 / span 3;margin-top:5vw}
.project-card[data-id="freeform-interior-design-kidsroom-3"]{grid-column:1 / span 3;margin-top:2vw}
.project-card[data-id="freeform-interior-design-playroom"]{grid-column:5 / span 5;margin-top:0}
.project-card[data-id="freeform-interior-design-living-room-4"]{grid-column:1 / span 5;margin-top:2vw}
.project-card[data-id="freeform-interior-design-living-room-5"]{grid-column:7 / span 3;margin-top:3vw}
.project-card[data-id="freeform-interior-design-kitchen"]{grid-column:10 / span 3;margin-top:1vw}
.project-card[data-id="freeform-concept-design-coliving"]{grid-column:2 / span 5;margin-top:2vw}
.project-card[data-id="freeform-art-project-sculptures"]{grid-column:8 / span 4;margin-top:4vw}

.card-media{overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.project-card:hover .card-media img{transform:scale(1.02)}
.card-body{padding:20px 0 0}
.card-meta{display:flex;justify-content:flex-start;gap:20px;align-items:flex-start;margin-bottom:10px}
.card-service{color:var(--muted);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.project-card h3,.footer h2,.project-copy h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  letter-spacing:.005em;
}
.project-card h3{
  font-size:clamp(1.45rem,2.05vw,2.2rem);
  line-height:1.02;
  margin:0 0 10px;
  max-width:none;
  text-wrap:pretty;
}
.project-card .card-text,.about p,.project-copy p{
  color:var(--muted);
  line-height:1.65;
}
.project-card .card-text{
  font-size:.9rem;
  max-width:none;
  width:min(100%, 56ch);
  margin:0;
}
.project-modal{position:fixed;inset:0;z-index:100;display:none}
.project-modal.open{display:block}
.project-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.34);backdrop-filter:blur(6px)}
.project-modal-panel{
  position:relative;
  margin:14px auto;
  max-width:min(1640px,calc(100vw - 28px));
  height:calc(100vh - 28px);
  background:var(--paper);
  overflow:hidden;
}
.modal-close{
  position:absolute;top:18px;right:18px;z-index:8;
  border:0;background:rgba(17,16,15,.58);color:#fff;
  padding:10px 12px;cursor:pointer;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;
}
.project-detail{
  display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
  gap:32px;height:100%;
}
.project-copy{
  padding:46px 18px 30px 46px;
  display:flex;flex-direction:column;justify-content:flex-start;
  min-width:0;
}
.project-service{margin-top:2px}
.project-copy h2{
  font-size:clamp(2rem,3vw,3.3rem);
  line-height:.96;
  max-width:18ch;
  text-wrap:pretty;
  margin:10px 0 14px;
}
.detail-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;
  padding:16px 0 16px;margin:14px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.info-card .label,.links-block .label-text{
  color:var(--muted);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px
}
.info-card div:last-child{line-height:1.45;font-size:.9rem}
.links-block{margin-top:12px;display:grid;gap:7px}
.links-block p{margin:0;font-size:.9rem;line-height:1.52}
.links-block a{text-decoration:underline;text-underline-offset:4px;font-size:.88rem}
.detail-links{margin-top:auto;padding-top:10px}
.project-copy p{font-size:.9rem;margin:0}
.project-image-wrap{display:flex;align-items:stretch;min-width:0}
.project-image-wrap img{width:100%;height:100%;object-fit:cover}
.about{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:86px;align-items:start;
  padding:32px 0 128px;border-top:1px solid var(--line)
}
.about-copy{max-width:760px;padding-top:4px}
.about-copy p{font-size:.9rem;max-width:56ch;margin:0 0 18px}
.about-media img{width:100%;height:auto}
.footer{
  border-top:1px solid var(--line);padding:28px 0 56px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end
}
.footer-links{display:grid;gap:6px;justify-items:end}
.footer h2{font-size:clamp(1.9rem,3vw,3.2rem);line-height:.96;margin:.35rem 0 0}

@media (max-width: 1280px){
  .masonry{gap:68px 30px}
  .project-card:nth-child(n){grid-column:span 4;margin-top:0}
  .project-card:nth-child(5n+1){grid-column:1 / span 5}
  .project-card:nth-child(5n+2){grid-column:7 / span 4;margin-top:3vw}
  .project-card:nth-child(5n+3){grid-column:2 / span 3}
  .project-card:nth-child(5n+4){grid-column:6 / span 5;margin-top:2vw}
  .project-card:nth-child(5n+5){grid-column:9 / span 3}
  .project-card[data-id="freeform-interior-design-kidsroom-1"]{grid-column:1 / span 5}
  .project-card[data-id="freeform-interior-design-living-room-2"]{grid-column:7 / span 5}
  .project-card[data-id="freeform-interior-design-kidsroom-2"]{grid-column:3 / span 5}
  .project-card[data-id="freeform-interior-design-living-room-5"]{grid-column:9 / span 3}
  .project-card[data-id="freeform-interior-design-kidsroom-3"]{grid-column:1 / span 3}
}
@media (max-width: 1100px){
  .project-detail,.about{grid-template-columns:1fr;gap:28px}
  .project-modal-panel{overflow:auto}
  .project-detail{height:auto;min-height:100%}
  .project-image-wrap{max-height:56vh;order:-1}
  .project-copy{padding:24px 22px 32px}
  .project-copy h2{max-width:none}
  .detail-links{margin-top:0}
}
@media (max-width: 860px){
  .site-shell{padding:10px 14px 22px}
  .topbar{grid-template-columns:auto 1fr auto;gap:8px;padding:4px 0 6px}
  .topnav{justify-content:center;gap:12px}
  .topnav a{font-size:.75rem;letter-spacing:.02em}
  .brand img{width:72px}
  .top-actions{gap:4px}
  .icon-link{width:28px;height:28px}
  .icon-link svg{width:14px;height:14px}
  .lang-switch{margin-left:4px;gap:2px}
  .lang-btn{min-width:24px;font-size:.68rem;padding:4px 0}
  .hero{padding-top:28px}
  .intro-ribbon{justify-content:center;gap:4px 10px;line-height:1.2;font-size:clamp(.88rem,4vw,1.25rem);flex-wrap:nowrap}
  .intro-ribbon .divider{font-size:.8em}
  .portfolio-intro{padding:42px 0 16px;display:block}
  .filters{margin-top:10px;justify-content:flex-start;gap:6px;flex-wrap:wrap;overflow:visible}
  .filter-btn{font-size:.62rem;letter-spacing:.08em;white-space:nowrap;padding:5px 10px;border:1px solid var(--line);border-radius:100px}
  .filter-btn.active{border-color:var(--text)}
  .masonry{grid-template-columns:1fr;gap:32px;padding-bottom:60px}
  .project-card:nth-child(n), .project-card[data-id]{grid-column:auto;margin-top:0}
  .project-card h3{max-width:none;font-size:1.3rem}
  .project-card .card-text{max-width:none;width:min(100%, 42ch);font-size:.82rem}
  .card-service{font-size:.6rem}
  .about{padding-bottom:60px;gap:22px}
  .about-copy p{font-size:.82rem}
  .footer{grid-template-columns:1fr;align-items:start;padding-bottom:32px}
  .footer-links{justify-items:start}
  .footer-links a{font-size:.82rem}
  .footer h2{font-size:1.6rem}
  .project-modal-panel{margin:0;max-width:100vw;height:100vh}
  .detail-grid{grid-template-columns:1fr;gap:12px}
  .project-copy{padding:18px 16px 24px}
  .project-copy h2{max-width:none;font-size:1.6rem}
  .project-copy p{font-size:.82rem}
  .info-card div:last-child{font-size:.82rem}
  .links-block a{font-size:.8rem}
}