:root { --ink:#12100f; --paper:#f4f0e9; --accent:#c69a75; --muted:#77706a; --line:rgba(18,16,15,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; }
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { height:94px; padding:0 4vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); position:relative; z-index:10; }
.brand { display:flex; flex-direction:column; line-height:1; text-transform:uppercase; letter-spacing:.08em; }
.brand span { font-family:"Italiana",serif; font-size:1.6rem; }
.brand small { margin-top:.45rem; font-size:.62rem; letter-spacing:.35em; color:var(--muted); }
nav { display:flex; gap:2.2rem; }
.language-switch { justify-self:end; display:flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.12em; }
.lang { border:0; padding:.35rem .2rem; background:transparent; color:var(--muted); cursor:pointer; }
.lang.active { color:var(--ink); font-weight:700; }
nav a,.footer-links a { font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; position:relative; }
nav a:after,.footer-links a:after { content:""; height:1px; background:currentColor; position:absolute; left:0; right:100%; bottom:-6px; transition:.25s; }
nav a:hover:after,.footer-links a:hover:after { right:0; }
.menu-button { display:none; border:0; background:none; text-transform:uppercase; letter-spacing:.12em; }
.hero { min-height:calc(100vh - 94px); display:grid; grid-template-columns:46% 46% 8%; align-items:stretch; border-bottom:1px solid var(--line); }
.hero-copy { padding:9vh 5vw 7vh 8vw; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 1.3rem; text-transform:uppercase; letter-spacing:.24em; font-size:.72rem; font-weight:600; color:#8c664c; }
h1,h2 { font-family:"Italiana",serif; font-weight:400; line-height:.92; margin:0; }
h1 { font-size:clamp(4rem,8vw,8rem); letter-spacing:-.035em; }
h1 em,h2 em { font-weight:400; color:#9a6746; }
.intro { max-width:31rem; color:#57514d; font-size:1.08rem; margin:2.2rem 0 2.5rem; }
.hero-actions { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.button { min-height:52px; padding:.95rem 1.5rem; display:inline-flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:600; }
.whatsapp-button { gap:.7rem; }
.whatsapp-button svg { width:1.25rem; height:1.25rem; flex:0 0 auto; }
.button-primary { background:var(--ink); color:#fff; transition:transform .2s,background .2s; }
.button-primary:hover { background:#8c664c; transform:translateY(-2px); }
.text-link { display:inline-block; border-bottom:1px solid currentColor; padding-bottom:.25rem; font-size:.83rem; text-transform:uppercase; letter-spacing:.12em; }
.hero-image { margin:0; position:relative; min-height:620px; overflow:hidden; }
.hero-image img { height:100%; object-fit:cover; object-position:center 25%; filter:saturate(.86); transition:transform 1.2s ease; }
.hero-image:hover img { transform:scale(1.025); }
.hero-image figcaption { position:absolute; bottom:1.4rem; left:1.4rem; background:rgba(244,240,233,.9); padding:.55rem .8rem; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; }
.vertical-note { margin:auto; writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; letter-spacing:.32em; font-size:.65rem; color:var(--muted); }
.portfolio { padding:8rem 6vw; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:3rem; }
.section-heading h2,.about h2,.contact h2 { font-size:clamp(3.3rem,7vw,7rem); }
.section-heading>p { max-width:28rem; color:var(--muted); margin:0 0 .7rem; }
.filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter { border:1px solid var(--line); background:transparent; border-radius:999px; padding:.65rem 1.1rem; cursor:pointer; color:#625c57; }
.filter.active,.filter:hover { background:var(--ink); color:#fff; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:70px; gap:1rem; }
.work { grid-column:span 4; grid-row:span 6; padding:0; border:0; background:#ded8d0; overflow:hidden; cursor:zoom-in; position:relative; color:#fff; text-align:left; }
.work-wide { grid-column:span 8; grid-row:span 5; }
.work-square { grid-column:span 4; grid-row:span 5; }
.work img { height:100%; object-fit:cover; transition:transform .55s,filter .55s; }
.work:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.68)); }
.work span { position:absolute; z-index:1; left:1.25rem; bottom:1.15rem; display:flex; flex-direction:column; }
.work b { font-family:"Italiana",serif; font-size:1.65rem; font-weight:400; }
.work small { text-transform:uppercase; letter-spacing:.16em; font-size:.62rem; margin-top:.2rem; }
.work:hover img { transform:scale(1.045); filter:saturate(1.08); }
.work[hidden] { display:none; }
.portfolio-controls { display:flex; justify-content:center; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:2.5rem; }
.portfolio-toggle,.portfolio-about-link { min-height:48px; padding:.8rem 1.2rem; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.portfolio-toggle[hidden] { display:none; }
.portfolio-toggle:hover,.portfolio-about-link:hover { background:var(--ink); color:#fff; }
.back-to-top { position:fixed; z-index:20; right:1.25rem; bottom:1.25rem; min-height:46px; padding:.75rem 1rem; border:0; background:var(--ink); color:#fff; box-shadow:0 8px 28px rgba(0,0,0,.22); cursor:pointer; text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:600; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s,transform .25s,visibility .25s; }
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.services { padding:2rem 6vw 8rem; }
.service-list { border-top:1px solid var(--line); }
.service-list span { padding:1.45rem 0; border-bottom:1px solid var(--line); display:flex; align-items:center; font-family:"Italiana",serif; font-size:clamp(1.7rem,3.2vw,3.2rem); }
.service-list i { font-style:normal; }
.service-list b { width:5rem; font:500 .68rem "DM Sans",sans-serif; letter-spacing:.14em; color:#9a6746; }
.about { background:var(--ink); color:var(--paper); display:grid; grid-template-columns:minmax(280px,38%) 1fr; padding:9rem 6vw; gap:6vw; align-items:start; }
.about-visual { position:sticky; top:2rem; }
.about-visual>img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 20%; filter:saturate(.78) contrast(1.03); }
.about-number { margin-top:2rem; font-family:"Italiana",serif; font-size:clamp(6rem,10vw,10rem); line-height:.75; color:var(--accent); display:flex; flex-wrap:wrap; align-content:flex-start; }
.about-number sup { font-size:.25em; margin-top:-.2em; }
.about-number small { flex-basis:100%; font:500 .7rem "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#aaa19a; margin-top:1.8rem; }
.about-copy { max-width:50rem; }
.about-copy>p:not(.eyebrow) { color:#bfb7b0; max-width:40rem; font-size:1.02rem; }
.about-copy .about-lead { font-size:1.18rem; color:#ded8d1; }
.about-copy h2 { margin-bottom:2.5rem; }
.light { margin-top:1.5rem; }
.international { margin:2rem 0; padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.international span { display:block; color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:600; }
.international p { margin:.7rem 0 0; color:#d0c8c1; max-width:42rem; }
.career-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.16); margin:2.5rem 0; }
.career-grid article { background:var(--ink); padding:1.5rem; min-height:170px; }
.career-grid b { display:block; color:var(--paper); font:400 1.45rem "Italiana",serif; margin-bottom:.75rem; }
.career-grid p { margin:0; color:#aaa19a; font-size:.9rem; line-height:1.6; }
.contact { padding:10rem 6vw; text-align:center; }
.contact h2 { margin-bottom:2rem; }
.contact>p:not(.eyebrow) { color:var(--muted); max-width:35rem; margin:0 auto 2.2rem; }
.location-link { display:block; width:max-content; max-width:100%; margin:0 auto 2.2rem; color:var(--muted); font-size:.88rem; border-bottom:1px solid var(--line); padding-bottom:.65rem; }
.location-link span { display:block; color:var(--ink); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; margin-bottom:.3rem; }
footer { min-height:180px; background:#e7e1d9; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; padding:3rem 6vw; }
.footer-links { display:flex; gap:1.8rem; }
footer>small { justify-self:end; color:var(--muted); }
.lightbox { width:min(92vw,1000px); max-height:92vh; padding:0; border:0; background:transparent; overflow:visible; }
.lightbox::backdrop { background:rgba(10,9,8,.92); backdrop-filter:blur(8px); }
.lightbox img { max-height:88vh; object-fit:contain; }
.lightbox-close { position:absolute; right:-.5rem; top:-2.6rem; border:0; background:none; color:#fff; font-size:2rem; cursor:pointer; }
@media (max-width:900px) {
  .site-header { height:78px; }
  .site-header { grid-template-columns:1fr auto auto; gap:1rem; }
  .menu-button { display:block; }
  nav { position:absolute; left:0; right:0; top:78px; display:none; flex-direction:column; background:var(--paper); padding:2rem 6vw; border-bottom:1px solid var(--line); }
  nav.open { display:flex; }
  .hero { min-height:auto; grid-template-columns:1fr; }
  .hero-copy { padding:6rem 6vw 4rem; }
  .hero-image { min-height:68vh; }
  .vertical-note { display:none; }
  .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:240px; }
  .work,.work-wide,.work-square { grid-column:span 1; grid-row:span 1; }
  .about { grid-template-columns:1fr; padding:7rem 6vw; }
  .about-visual { position:relative; top:auto; max-width:520px; }
  footer { grid-template-columns:1fr; }
  footer>small { justify-self:start; }
}
@media (max-width:600px) {
  .brand span { font-size:1.3rem; }
  .hero-copy { padding-top:5rem; }
  h1 { font-size:clamp(3.8rem,18vw,5.2rem); }
  .intro { font-size:1rem; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-image { min-height:70vh; }
  .portfolio { padding:6rem 4vw; }
  .section-heading { align-items:start; flex-direction:column; }
  .gallery { grid-template-columns:1fr; grid-auto-rows:120vw; gap:.7rem; }
  .work,.work-wide,.work-square { grid-column:1; }
  .portfolio-controls { align-items:stretch; flex-direction:column; }
  .portfolio-toggle,.portfolio-about-link { width:100%; }
  .back-to-top { right:.75rem; bottom:.75rem; }
  .services { padding:1rem 6vw 6rem; }
  .service-list b { width:3rem; }
  .about-number { font-size:9rem; }
  .about-copy h2 { font-size:3.3rem; }
  .career-grid { grid-template-columns:1fr; }
  .career-grid article { min-height:auto; }
  .contact { padding:7rem 6vw; }
  .footer-links { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{transition:none!important} }