@font-face {
  font-family: Montserrat;
  src: url("fonts/montserrat-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root { --ink:#080808; --muted:#454545; --line:#c7c7c7; --paper:#fff; --soft:#f5f5f5; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-padding-top:116px; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Montserrat,Arial,sans-serif; font-size:17px; line-height:1.8; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:5px; }
button,select { font:inherit; }
a,button,select { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
::selection { color:#fff; background:#111; }
:focus-visible { outline:3px solid #777; outline-offset:5px; }
.wrap { width:min(calc(100% - 72px),var(--max)); margin-inline:auto; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.icon { display:inline-block; width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:10px; left:12px; z-index:100; background:#fff; padding:10px 18px; transform:translateY(-180%); border:2px solid #111; }
.skip-link:focus { transform:translateY(0); }

/* Navigation remains available during the page journey. */
.site-header { position:relative; top:0; z-index:30; background:#fff; transition:box-shadow 180ms ease; }
.js .site-header { position:sticky; }
.site-header.is-scrolled { box-shadow:0 4px 18px #0000000d; }
.header-inner { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand img { width:64px; height:64px; border-radius:50%; }
.brand span { font-size:12px; font-weight:600; line-height:1.6; }
.main-nav { display:flex; align-items:center; gap:25px; }
.main-nav>a { font-size:14px; font-weight:600; text-decoration:none; padding-block:12px; }
.main-nav>a:hover,.main-nav>a[aria-current="location"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
.main-nav .nav-quote { display:inline-flex; align-items:center; gap:12px; padding:10px 20px; border:1px solid #111; border-radius:30px; }
.menu-toggle { display:none; }
h1,h2,h3,p { margin-top:0; }

/* The poster identity: original logo, strong type and a black WhatsApp action. */
.hero { position:relative; padding-top:42px; padding-bottom:35px; text-align:center; overflow:hidden; }
.diagonal { position:absolute; top:0; right:0; width:145px; height:65px; overflow:hidden; pointer-events:none; }
.diagonal::before { content:""; position:absolute; right:-35px; top:0; width:205px; height:5px; background:#111; box-shadow:0 12px #111,0 24px #111; transform:rotate(32deg); }
.hero-identity { display:flex; align-items:center; justify-content:center; gap:30px; margin-bottom:20px; }
.hero-identity>img { width:132px; height:132px; flex-shrink:0; border-radius:50%; }
h1 { font-size:50px; font-weight:800; letter-spacing:-1.5px; line-height:1.2; margin:0; text-align:left; }
h1 span { font-weight:800; }
.hero-motto { font-size:23px; font-weight:500; line-height:1.6; margin-bottom:15px; }
.hero-description { font-size:18px; color:#333; line-height:1.85; margin-bottom:25px; }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:15px 25px; border:1px solid transparent; border-radius:50px; text-decoration:none; font-size:16px; font-weight:650; line-height:1.5; transition:background 160ms ease,box-shadow 160ms ease; }
.button-dark { background:#000; color:#fff; min-width:350px; }
.button-dark .icon { width:26px; height:26px; }
.button-dark:hover { background:#292929; box-shadow:0 5px 15px #0000001a; }
.cta-arrow { font-size:32px; line-height:1; margin-left:14px; font-weight:500; }
.text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:15px; font-weight:600; }
.text-link:hover { text-decoration-thickness:2px; }
.hero-location { font-size:14px; margin:18px 0 0; color:#444; }
.hero-location span { margin-inline:14px; color:#888; }
.section-space { padding-block:76px; }
h2 { font-size:32px; font-weight:750; letter-spacing:-.7px; line-height:1.4; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:38px; margin-bottom:30px; }
.section-heading h2 { margin:0; }
.section-heading>p { font-size:16px; max-width:410px; margin:0; color:var(--muted); }

/* The same four areas, with more breathing room and crisp vector icons. */
.services { padding-top:18px; padding-bottom:60px; }
.service-list { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.service { min-width:0; padding:30px; border:1px solid #b9b9b9; border-radius:16px; background:#fff; transition:border-color 180ms ease,box-shadow 180ms ease; }
.service:hover,.service:focus-within { border-color:#333; box-shadow:0 9px 28px #0000000b; }
.service-heading { display:grid; grid-template-columns:70px minmax(0,1fr); gap:0 20px; align-items:start; margin-bottom:20px; }
.service-icon { width:70px; height:70px; padding:16px; object-fit:contain; background:#f4f4f4; border:1px solid #e5e5e5; border-radius:18px; grid-row:span 2; }
.service h3 { font-size:23px; font-weight:750; line-height:1.4; letter-spacing:-.4px; margin:0 0 10px; }
.service-contact { grid-column:2; display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; line-height:1.7; min-height:38px; width:fit-content; max-width:100%; }
.service-contact .icon { width:17px; height:17px; }
.service-detail>p { font-size:15px; color:var(--muted); margin-bottom:15px; }
.service ul { display:grid; grid-template-columns:1fr 1fr; gap:11px 27px; font-size:16px; line-height:1.8; padding-left:18px; margin:0; }
.service li { padding-left:2px; }
.service li::marker { font-size:9px; }

.work-gallery { padding-bottom:68px; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.work-grid figure { margin:0; min-width:0; }
.work-grid img { width:100%; height:230px; object-fit:cover; border-radius:9px; }
.work-grid figure:last-child img { object-position:50% 58%; }
.work-grid figcaption { padding-top:14px; font-size:15px; line-height:1.7; color:#3c3c3c; }
.portfolio { background:var(--soft); border-block:1px solid #ddd; }
.portfolio .section-heading { align-items:center; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px 32px; }
.project { min-width:0; }
.project-image { display:block; border:1px solid #bcbcbc; border-radius:9px; overflow:hidden; background:#fff; }
.project-image img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; transition:transform 220ms ease; }
.project-image:hover img,.project-image:focus-visible img { transform:scale(1.018); }
.project-info { display:flex; align-items:flex-start; justify-content:space-between; gap:17px; margin-top:20px; }
.project-info h3 { font-size:24px; font-weight:700; letter-spacing:-.4px; line-height:1.4; margin-bottom:9px; }
.project-info p { font-size:16px; color:var(--muted); line-height:1.85; margin:0; max-width:360px; }
.project-visit { display:inline-flex; align-items:center; gap:8px; min-height:44px; white-space:nowrap; font-size:14px; font-weight:600; }
.project-visit .icon { width:17px; height:17px; }
.project-note { font-size:13px; line-height:1.85; color:var(--muted); margin:15px 0 0; max-width:540px; }
.portfolio-end { display:flex; justify-content:space-between; align-items:center; gap:22px; border-top:1px solid var(--line); padding-top:24px; margin-top:42px; }
.portfolio-end p { margin:0; font-size:17px; }
.about { display:grid; grid-template-columns:31% minmax(0,1fr); gap:20px; }
.about-heading h2 { font-size:28px; margin-bottom:13px; }
.about-heading>p { font-size:15px; color:var(--muted); }
.about-copy { max-width:720px; }
.about-copy p { font-size:17px; line-height:1.9; color:#383838; margin-bottom:22px; }
.about-copy .about-lead { font-size:23px; font-weight:500; line-height:1.7; color:#111; }
.about-copy .text-link { margin-top:7px; }
.contact { background:#080808; color:#fff; position:relative; overflow:hidden; }
.contact::after { content:""; position:absolute; right:-20px; top:18px; width:155px; height:4px; transform:rotate(35deg); background:#fff; box-shadow:0 12px #fff,0 24px #fff; }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:75px; padding-block:68px; }
.contact-intro h2 { font-size:38px; font-weight:750; margin-bottom:20px; }
.contact-intro>p { font-size:16px; color:#e0e0e0; max-width:420px; }
.contact-intro .contact-location { display:flex; align-items:center; gap:9px; font-size:14px; margin-top:29px; margin-bottom:0; }
.contact-location .icon { width:19px; height:19px; }
.contact-action label { display:block; font-size:16px; margin-bottom:13px; }
.contact-action select { display:block; width:100%; min-height:54px; padding:13px 33px 13px 14px; border:1px solid #9b9b9b; border-radius:8px; background:#181818; color:#fff; font-size:15px; margin-bottom:20px; cursor:pointer; }
.contact-action select option { background:#181818; color:#fff; }
.button-light { background:#fff; color:#111; }
.button-light:hover { background:#e0e0e0; }
.contact-action .button { width:100%; }
.contact-number { font-size:16px; text-align:center; margin:15px 0; }
.contact-instagram { display:flex; gap:10px; align-items:center; justify-content:center; min-height:44px; font-size:15px; width:fit-content; margin-inline:auto; }
.site-footer { background:#080808; color:#d5d5d5; border-top:1px solid #444; font-size:13px; }
.footer-inner { display:flex; align-items:center; gap:28px; padding-block:26px; }
.footer-brand img { width:75px; height:auto; }
.footer-inner>p { margin:0; flex:1; }
.footer-inner>a:not(.footer-brand) { padding-block:12px; }
.footer-inner>span { margin-left:7px; }

/* Content starts visible. JavaScript opts only off-screen cards into this effect. */
.motion-ready { opacity:0; transform:translateY(10px); transition:opacity 350ms ease-out,transform 350ms ease-out,border-color 180ms ease,box-shadow 180ms ease; }
.motion-ready.is-visible { opacity:1; transform:none; }
.motion-ready:focus-within { opacity:1; transform:none; }

@media (max-width:1100px) {
  .brand span { display:none; }
  .main-nav { gap:22px; }
  .hero-identity { gap:24px; }
  h1 { font-size:43px; }
  .hero-identity>img { width:115px; height:115px; }
  .service { padding:26px; }
  .service h3 { font-size:22px; }
  .service-heading { grid-template-columns:62px minmax(0,1fr); gap:0 17px; }
  .service-icon { width:62px; height:62px; padding:14px; border-radius:16px; }
  .service ul { grid-template-columns:1fr; font-size:16px; gap:8px; }
  .project-info { flex-wrap:wrap; gap:5px; }
  .about { grid-template-columns:30% minmax(0,1fr); gap:20px; }
  .contact-inner { gap:42px; }
}

@media (max-width:900px) {
  html { scroll-padding-top:106px; }
  .header-inner { min-height:88px; flex-wrap:wrap; gap:0; }
  .brand { padding-block:10px; }
  .brand img { width:60px; height:60px; }
  .brand span { display:block; font-size:12px; }
  .js .menu-toggle { display:flex; align-items:center; gap:11px; padding:10px 14px; min-height:44px; border:1px solid #888; border-radius:6px; background:#fff; color:#111; font-size:14px; }
  .menu-lines { width:18px; height:12px; border-block:1px solid #111; position:relative; }
  .menu-lines::after { content:""; position:absolute; left:0; top:5px; width:18px; border-top:1px solid #111; }
  .menu-toggle[aria-expanded="true"] .menu-lines { border:0; }
  .menu-toggle[aria-expanded="true"] .menu-lines::before,.menu-toggle[aria-expanded="true"] .menu-lines::after { content:""; position:absolute; width:18px; left:0; top:5px; border-top:1px solid #111; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { transform:rotate(-45deg); }
  .main-nav { width:100%; display:flex; flex-direction:column; align-items:stretch; gap:0; border-top:1px solid #ccc; padding:7px 0 18px; }
  .js .main-nav { max-height:calc(100dvh - 88px); overflow-y:auto; }
  .js .main-nav:not(.is-open) { display:none; }
  .main-nav>a { font-size:16px; padding-block:13px; }
  .main-nav .nav-quote { justify-content:center; margin-top:9px; }
}

@media (max-width:780px) {
  .wrap { width:calc(100% - 44px); }
  .hero { padding-top:36px; }
  h1 { font-size:35px; letter-spacing:-1px; }
  .hero-identity>img { width:101px; height:101px; }
  .hero-identity { gap:21px; }
  .hero-motto { font-size:21px; }
  .hero-description { font-size:17px; }
  .hero-actions { gap:14px 23px; }
  .hero-location { font-size:13px; }
  .section-space { padding-block:58px; }
  .section-heading { gap:24px; }
  .section-heading h2 { font-size:29px; }
  .section-heading>p { font-size:15px; max-width:290px; }
  .services { padding-top:12px; padding-bottom:52px; }
  .service-list { grid-template-columns:1fr; }
  .service { padding:28px; }
  .service ul { grid-template-columns:1fr 1fr; }
  .work-grid { gap:18px; }
  .work-grid img { height:185px; }
  .work-grid figcaption { font-size:14px; }
  .work-gallery { padding-bottom:54px; }
  .project-grid { gap:38px 25px; }
  .project-info h3 { font-size:22px; }
  .about-copy .about-lead { font-size:22px; }
  .about-copy p { font-size:16px; }
  .about-heading h2 { font-size:26px; }
  .contact-inner { gap:29px; padding-block:55px; }
  .contact-intro h2 { font-size:34px; }
  .footer-inner { flex-wrap:wrap; gap:19px 25px; }
  .footer-inner>p { min-width:50%; }
}

@media (max-width:640px) {
  html { scroll-padding-top:100px; }
  body { font-size:16px; }
  .wrap { width:calc(100% - 36px); }
  .header-inner { min-height:82px; }
  .brand { gap:10px; }
  .brand img { width:56px; height:56px; }
  .brand span { font-size:10px; }
  .js .menu-toggle { font-size:13px; padding-inline:12px; }
  .hero { padding-top:31px; padding-bottom:30px; }
  .diagonal { width:85px; height:34px; }
  .diagonal::before { width:130px; right:-30px; top:-6px; height:3px; box-shadow:0 8px #111,0 16px #111; }
  .hero-identity { display:block; margin-bottom:18px; }
  .hero-identity>img { width:92px; height:92px; margin:0 auto 22px; }
  h1 { font-size:clamp(27px,7.45vw,39px); letter-spacing:-.9px; line-height:1.24; text-align:center; }
  .hero-motto { font-size:18px; line-height:1.7; margin-bottom:15px; }
  .hero-description { font-size:16px; line-height:1.85; margin-bottom:23px; }
  .hero-description br { display:none; }
  .hero-actions { flex-direction:column; gap:9px; }
  .button { font-size:15px; min-height:54px; padding:14px 20px; }
  .button-dark { min-width:0; width:min(100%,360px); gap:12px; }
  .button-dark .icon { width:24px; height:24px; }
  .cta-arrow { margin-left:9px; font-size:29px; }
  .text-link { font-size:14px; min-height:44px; }
  .hero-location { font-size:13px; line-height:1.9; margin-top:13px; }
  .hero-location span { margin-inline:6px; }
  .section-space { padding-block:49px; }
  .section-heading { display:block; margin-bottom:24px; }
  .section-heading h2 { font-size:28px; }
  .section-heading>p { font-size:15px; max-width:none; margin-top:11px; }
  .services { padding-top:14px; padding-bottom:48px; }
  .service-list { gap:20px; }
  .service { padding:24px 22px; border-radius:14px; }
  .service-heading { grid-template-columns:58px minmax(0,1fr); column-gap:16px; margin-bottom:19px; }
  .service-icon { width:58px; height:58px; padding:13px; border-radius:15px; }
  .service h3 { font-size:21px; line-height:1.4; margin-bottom:11px; }
  .service-contact { font-size:14px; min-height:38px; }
  .service-detail>p { font-size:15px; }
  .service ul { grid-template-columns:1fr; font-size:15px; gap:10px; }
  .work-gallery { padding-bottom:48px; }
  .work-grid { grid-template-columns:1fr; gap:21px; }
  .work-grid figure { display:grid; grid-template-columns:100px minmax(0,1fr); align-items:center; gap:17px; }
  .work-grid img { height:110px; border-radius:6px; }
  .work-grid figcaption { font-size:15px; padding:0; }
  .project-grid { grid-template-columns:1fr; gap:37px; }
  .project-info { display:block; margin-top:19px; }
  .project-info h3 { font-size:23px; }
  .project-info p { font-size:16px; max-width:none; }
  .project-visit { font-size:14px; min-height:46px; }
  .project-note { font-size:13px; margin-top:7px; }
  .portfolio-end { display:block; margin-top:35px; padding-top:23px; }
  .portfolio-end p { font-size:16px; margin-bottom:7px; }
  .about { grid-template-columns:1fr; gap:20px; }
  .about-heading h2 { font-size:28px; margin-bottom:9px; }
  .about-heading>p { font-size:15px; margin-bottom:0; }
  .about-heading>p br { display:none; }
  .about-copy .about-lead { font-size:21px; line-height:1.75; }
  .about-copy p { font-size:16px; }
  .contact-inner { grid-template-columns:1fr; gap:28px; padding-block:50px; }
  .contact-intro h2 { font-size:34px; }
  .contact-intro>p { font-size:16px; max-width:none; }
  .contact-intro .contact-location { font-size:14px; margin-top:25px; }
  .contact-action select { font-size:16px; }
  .contact-action label { font-size:16px; }
  .contact::after { right:-27px; width:120px; height:3px; box-shadow:0 9px #fff,0 18px #fff; }
  .footer-inner { display:grid; grid-template-columns:68px minmax(0,1fr); gap:6px 18px; padding-block:26px; }
  .footer-brand { grid-row:span 2; }
  .footer-brand img { width:64px; }
  .footer-inner>p { font-size:13px; }
  .footer-inner>a:not(.footer-brand) { font-size:13px; padding-block:9px; }
  .footer-inner>span { grid-column:2; font-size:13px; margin:0; }
}

@media (max-width:380px) {
  .brand span { font-size:9px; }
  .service { padding:23px 19px; }
  .service-heading { grid-template-columns:48px minmax(0,1fr); gap:0 13px; }
  .service-icon { width:48px; height:48px; padding:10px; border-radius:13px; }
  .service h3 { font-size:20px; }
  .work-grid figure { grid-template-columns:90px minmax(0,1fr); gap:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .motion-ready { opacity:1; transform:none; }
  .project-image img { transform:none!important; }
}