@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/josefin-sans-latin.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/hanken-grotesk-latin.woff2) format('woff2')}
:root{--ink:#15181C;--graphite:#2C313A;--aluminium:#A7ADB4;--silver:#E7EAEC;--paper:#FAFAFA;--bronze:#B0742E;--deep-bronze:#6E4A1E;--slate:#2F6E7A;--slate-deep:#204A52;--white:#FFFFFF;--accent:var(--bronze);color-scheme:dark;font-family:'Hanken Grotesk',sans-serif;color:var(--silver);background:var(--ink);font-synthesis:none}
*{box-sizing:border-box;fill:currentColor}
html{scroll-behavior:smooth}
body{margin:0;font-size:16px;line-height:24px;background:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:rgba(176,116,46,.16)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0}
img{display:block;max-width:100%}
figure,p,h1,h2,h3,blockquote{margin:0}
ul,ol{padding:0;margin:0;list-style:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
:target{scroll-margin-top:184px}
h1,h2{font-family:'Josefin Sans',sans-serif;font-weight:600;color:var(--paper)}
h1{font-size:40px;line-height:44px;letter-spacing:.01em}
h2{font-size:40px;line-height:48px;letter-spacing:.01em}
h3{font-weight:400}
.wrap{width:calc(100% - 192px);max-width:1248px;margin-inline:auto}
.eyebrow{font-size:11px;font-weight:600;line-height:16px;letter-spacing:.1em;color:var(--aluminium)}
.caption{font-size:12px;line-height:16px;letter-spacing:.01em;color:var(--aluminium)}
.button,.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;font-size:14px;font-weight:600;line-height:20px;transition:background-color 160ms,border-color 160ms,color 160ms}
.button{border-radius:999px;padding:10px 20px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);white-space:nowrap}
.button:hover{background:var(--silver);border-color:var(--bronze)}
.text-link:hover{color:var(--paper)}
.arrow{font-size:17px;line-height:20px;display:inline-block;transition:transform 180ms cubic-bezier(.33,1,.68,1)}
a:hover .arrow,a:focus-visible .arrow,button:hover .arrow,button:focus-visible .arrow{transform:translate(4px,-4px)}
.skip-link{position:fixed;z-index:60;top:8px;left:24px;padding:12px 20px;background:var(--paper);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Header */
.site-header{position:fixed;inset:0 0 auto;height:152px;z-index:20;pointer-events:none}
.site-header::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(21,24,28,.97) 0%,rgba(21,24,28,.9) 45%,rgba(21,24,28,.6) 72%,rgba(21,24,28,0) 100%);opacity:0;transition:opacity .24s;pointer-events:none}
.site-header.is-scrolled::before{opacity:1}
.site-header>*{pointer-events:auto}
.brand-link{position:absolute;left:max(32px,calc((100vw - 1440px)/2 + 64px));top:28px;width:120px;height:120px}
.brand-link img{width:100%;height:100%;object-fit:contain}
.header-pill{background:rgba(21,24,28,.88);border:1px solid rgba(250,250,250,.16);border-radius:999px;color:var(--paper);height:40px}
.header-whatsapp{position:absolute;top:32px;right:max(32px,calc((100vw - 1440px)/2 + 64px));width:144px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:14px;font-weight:600}
.section-nav{position:fixed;top:32px;left:50%;transform:translateX(-50%);z-index:21;padding:3px;display:flex;gap:2px}
.section-nav a{display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px;font-weight:600;line-height:16px;padding:0 18px;min-height:34px;transition:background-color 160ms}
.section-nav a:hover,.section-nav a[aria-current]{background:var(--graphite)}

/* Hero */
main{display:block}
.hero{padding:248px 0 96px}
.hero-inner{max-width:760px}
.hero h1{margin-bottom:24px}
.hero-intro{font-size:18px;line-height:28px;max-width:640px}
.hero-back{margin-top:32px}
.showcase-section{padding-bottom:96px}
.showcase-section:last-of-type{padding-bottom:96px}
.section-head{max-width:760px;margin-bottom:32px}
.section-head h2{margin-bottom:16px}
.section-head p{font-size:18px;line-height:28px}

/* Filters */
.filters{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.filter-field{display:block;width:240px;max-width:100%}
.filter-field span{display:block;font-size:14px;line-height:20px;font-weight:500;margin-bottom:8px}
.filters select{width:100%;height:48px;border:1px solid rgba(167,173,180,.48);background:var(--graphite);border-radius:8px;padding:11px 40px 11px 14px;font-size:16px;line-height:24px;color:var(--paper);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23A7ADB4' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.filter-actions{display:flex;gap:16px;align-items:center;min-height:48px}
.filter-submit{border-radius:999px;padding:10px 20px;min-height:44px;background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-size:14px;font-weight:600}
.filter-clear{background:none;color:var(--silver);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px;font-size:14px;font-weight:600}
.filter-clear:hover{color:var(--paper)}
.result-count{font-size:14px;line-height:20px;color:var(--aluminium);margin-bottom:24px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--graphite);border:1px solid rgba(250,250,250,.08);border-radius:12px;overflow:hidden}
.card-link{display:block;color:inherit}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 240ms cubic-bezier(.33,1,.68,1)}
.card-link:hover .card-media img,.card-link:focus-visible .card-media img{transform:scale(1.025)}
.card-count{position:absolute;right:12px;bottom:12px;background:rgba(21,24,28,.82);border:1px solid rgba(250,250,250,.16);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:600;line-height:16px;letter-spacing:.06em;color:var(--paper)}
.card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-kind{font-size:12px;font-weight:600;line-height:16px;letter-spacing:.06em;color:var(--accent)}
.card-title{font-family:'Josefin Sans',sans-serif;font-size:20px;line-height:28px;font-weight:600;color:var(--paper)}
.card-meta{font-size:13px;line-height:20px;color:var(--aluminium)}
.card-note{font-size:15px;line-height:22px;color:var(--silver)}
.card-cta{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--paper);display:inline-flex;gap:12px;align-items:center}
.gallery-more{margin-top:48px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.pager{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;line-height:20px}
.pager a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid rgba(250,250,250,.16);border-radius:999px}
.pager a:hover{background:var(--graphite)}
.pager [aria-current]{background:var(--graphite);color:var(--paper)}
.no-results{padding:32px 0}
.no-results p{font-size:18px;line-height:28px;color:var(--paper);margin-bottom:24px}

/* Empty state panel */
.empty-panel{max-width:640px;border-left:2px solid var(--accent);padding:8px 0 8px 24px}
.empty-panel h2{font-size:28px;line-height:36px;margin-bottom:16px}
.empty-panel p{font-size:18px;line-height:28px;margin-bottom:32px}

/* Feedback */
.testimonials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.testimonial{background:var(--graphite);border:1px solid rgba(250,250,250,.08);border-radius:12px;padding:32px}
.testimonial blockquote{font-size:20px;line-height:30px;color:var(--paper)}
.testimonial figcaption{margin-top:24px;font-size:14px;line-height:20px;color:var(--aluminium)}
.testimonial figcaption .text-link{display:flex;width:fit-content;justify-content:flex-start;gap:12px;margin-top:16px;color:var(--paper)}

/* Catalogue preview */
.catalogue-note{font-size:16px;line-height:24px;color:var(--aluminium);max-width:640px;margin-top:16px}
.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin-top:32px}
.catalogue-item .photo-mount{background:var(--paper);padding:20px}
.catalogue-item img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.catalogue-label{display:block;margin-top:12px;font-size:12px;font-weight:600;line-height:16px;letter-spacing:.06em;color:var(--aluminium)}
.catalogue-product{display:block;margin-top:8px;font-size:16px;line-height:24px;color:var(--paper)}

/* Share */
.share-panel{max-width:640px}
.share-panel h2{margin-bottom:16px}
.share-panel p{font-size:18px;line-height:28px;margin-bottom:32px}
.share-small{font-size:14px;line-height:22px;color:var(--aluminium);margin-top:24px;max-width:520px}

/* Project page */
.project-head{padding:248px 0 48px}
.project-head .eyebrow{margin-bottom:16px}
.project-head h1{margin-bottom:24px;font-size:36px;line-height:42px}
.project-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;line-height:24px;color:var(--aluminium)}
.project-note{margin-top:24px;font-size:18px;line-height:28px;max-width:640px}
.project-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:48px}
.project-photos figure{background:var(--graphite);border:1px solid rgba(250,250,250,.08);border-radius:12px;overflow:hidden}
.project-photos img{width:100%;height:auto;background:var(--ink)}
.project-photos figcaption{padding:16px 20px;font-size:14px;line-height:22px;color:var(--aluminium)}
.project-quote{background:var(--graphite);border:1px solid rgba(250,250,250,.08);border-radius:12px;padding:32px;max-width:760px;margin-bottom:48px}
.project-quote blockquote{font-size:20px;line-height:30px;color:var(--paper)}
.project-quote figcaption{margin-top:24px;font-size:14px;line-height:20px;color:var(--aluminium)}
.project-back{padding-bottom:96px}

/* Viewer */
.viewer{border:0;padding:0;max-width:1248px;width:calc(100vw - 48px);max-height:calc(100dvh - 96px);background:var(--ink);color:var(--silver);overflow:visible}
.viewer::backdrop{background:rgba(21,24,28,.72)}
.viewer[open]::backdrop{animation:viewer-backdrop 180ms linear}
@keyframes viewer-backdrop{from{background:rgba(21,24,28,0)}to{background:rgba(21,24,28,.72)}}
.viewer-inner{display:flex;flex-direction:column;height:100%;max-height:calc(100dvh - 96px);border:1px solid rgba(250,250,250,.16);border-radius:12px;overflow:hidden;background:var(--ink)}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 20px;border-bottom:1px solid rgba(250,250,250,.12)}
.viewer-position{font-size:13px;line-height:20px;color:var(--aluminium)}
.viewer-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:none;color:var(--paper);border-radius:999px;padding:0 16px;font-size:14px;font-weight:600}
.viewer-close:hover{background:var(--graphite)}
.viewer-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--ink);aspect-ratio:3/2}
.viewer-frame{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.viewer-frame picture{display:block;width:100%;height:100%}
.viewer-frame img{width:100%;height:100%;object-fit:contain;transition:opacity 160ms linear}
.viewer-frame img.is-swapping{opacity:0}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:rgba(21,24,28,.82);border:1px solid rgba(250,250,250,.16);border-radius:999px;color:var(--paper);font-size:20px;line-height:1}
.viewer-prev{left:12px}
.viewer-next{right:12px}
.viewer-nav:hover{background:var(--graphite)}
.viewer-nav[disabled]{opacity:.4;cursor:not-allowed}
.viewer-foot{padding:16px 20px;border-top:1px solid rgba(250,250,250,.12);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.viewer-caption{font-size:15px;line-height:22px;color:var(--silver);max-width:720px}
.viewer-meta{font-size:13px;line-height:20px;color:var(--aluminium);margin-top:4px}
.viewer-open{font-size:14px;font-weight:600;color:var(--paper);display:inline-flex;gap:12px;align-items:center;min-height:44px}

/* Footer */
.site-footer{background:var(--graphite);padding:64px 0;min-height:256px}
.footer-inner{display:grid;grid-template-columns:96px 1fr auto;gap:48px;align-items:center}
.footer-logo img{width:120px;height:120px;object-fit:contain}
.legal{font-size:14px;line-height:24px}
.legal span{color:var(--aluminium);font-size:12px}
.footer-links{font-size:14px;line-height:20px}
.footer-links>div{display:flex;gap:24px;flex-wrap:wrap}
.footer-links>div a{display:inline-flex;align-items:center;min-height:44px;gap:12px}
.footer-links>.text-link{display:flex;margin-top:12px;color:var(--aluminium)}

/* Arrivals: JS adds .is-armed only when it is about to animate */
@media(min-width:768px) and (max-width:1199px){
  .wrap{width:calc(100% - 64px)}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .brand-link{left:32px}
  .header-whatsapp{right:32px}
}
@media(max-width:767px){
  body{font-size:15px;line-height:24px}
  :target{scroll-margin-top:24px}
  .wrap{width:calc(100% - 48px)}
  h1{font-size:30px;line-height:34px}
  h2{font-size:28px;line-height:32px}
  .button,.text-link{min-height:44px}
  .button{padding-block:11px}
  .site-header{height:104px}
  .brand-link{left:24px;top:16px;width:80px;height:80px}
  .header-whatsapp{top:24px;right:24px;width:128px;height:44px;padding-inline:14px}
  .section-nav{position:static;transform:none;display:flex;flex-wrap:wrap;gap:4px;margin:120px 24px 0;justify-content:flex-start}
  .section-nav a{flex:1 1 auto;min-height:44px;padding:0 16px}
  .hero{padding:32px 0 64px}
  .no-nav .hero{padding-top:160px}
  .hero-intro{font-size:16px;line-height:24px}
  .showcase-section{padding-bottom:64px}
  .section-head{margin-bottom:24px}
  .section-head p{font-size:16px;line-height:24px}
  .filters{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:24px}
  .filter-field{width:100%}
  .filter-actions{flex-wrap:wrap}
  .gallery{grid-template-columns:minmax(0,1fr);gap:32px}
  .gallery-more,.pager{margin-top:32px}
  .empty-panel{padding-left:16px}
  .empty-panel h2{font-size:24px;line-height:32px}
  .empty-panel p,.share-panel p{font-size:16px;line-height:24px}
  .testimonials{grid-template-columns:minmax(0,1fr);gap:24px}
  .testimonial{padding:24px}
  .testimonial blockquote{font-size:18px;line-height:28px}
  .catalogue-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .catalogue-item .photo-mount{padding:16px}
  .project-head{padding:32px 0 32px}
  .no-nav .project-head{padding-top:160px}
  .project-head h1{font-size:28px;line-height:34px}
  .project-note{font-size:16px;line-height:24px}
  .project-photos{grid-template-columns:minmax(0,1fr);gap:24px}
  .project-quote{padding:24px}
  .project-quote blockquote{font-size:18px;line-height:28px}
  .viewer{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}
  .viewer-inner{border:0;border-radius:0;max-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .viewer-stage{aspect-ratio:auto}
  .viewer-caption{font-size:14px;line-height:20px}
  .site-footer{padding:48px 0;min-height:0}
  .footer-inner{grid-template-columns:80px minmax(0,1fr);gap:32px 24px}
  .footer-logo img{width:96px;height:96px}
  .footer-links{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;flex-wrap:wrap}
  .footer-links>div{gap:16px}
  .footer-links>.text-link{margin:0;gap:12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}