@import url('assets/fonts/fonts.css');

:root { --ink: #17211b; --muted: #68736c; --paper: #f4f3ed; --lime: #d8f06b; --line: #d9ddd4; --white: #fffef9; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; backdrop-filter: blur(8px); background: rgba(244, 243, 237, .92); display: flex; justify-content: space-between; max-width: 1280px; margin: auto; padding: 24px 5vw; position: sticky; top: 0; width: 100%; z-index: 10; }
.brand { align-items: center; display: flex; gap: 12px; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 50%; color: var(--lime); display: inline-flex; font-family: 'Space Grotesk', sans-serif; font-size: 12px; height: 38px; justify-content: center; width: 38px; }
.hero { align-items: center; display: grid; gap: 5vw; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin: 4vw auto 0; max-width: 1280px; padding: 0 5vw; }
.hero-copy { align-self: center; padding: 5vw 0; }
.eyebrow, .section-kicker { color: #73816f; font-size: 12px; font-weight: 700; letter-spacing: .13em; margin: 0 0 20px; text-transform: uppercase; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.065em; line-height: .98; margin: 0; }
h1 { font-size: clamp(3rem, 5vw, 5.5rem); max-width: 100%; }
.hero-text { color: var(--muted); font-size: 18px; max-width: 410px; margin: 30px 0; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; }
.button { display: inline-flex; font-weight: 700; gap: 20px; padding: 17px 22px; }
.button-primary { background: var(--ink); color: var(--white); }
.button-primary span, .card-link span, .map-link b { color: var(--lime); }
.text-link { border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; padding-bottom: 4px; }
.hero-image { aspect-ratio: 4 / 3; background-position: center; background-repeat: no-repeat; background-size: contain; justify-self: end; max-width: 620px; width: 100%; }
.section-wide { margin: 0 auto; max-width: 1280px; padding: 120px 5vw; }
.section-narrow { margin: auto; max-width: 800px; padding: 150px 5vw; text-align: center; }
.section-narrow h2 { font-size: clamp(2.5rem, 5vw, 5rem); }
.section-narrow > p:last-child { color: var(--muted); font-size: 18px; margin: 28px auto 0; max-width: 580px; }
.services { border-top: 1px solid var(--line); }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 45px; }
.section-heading h2, .strings h2, .location h2 { font-size: clamp(2.6rem, 5vw, 5.4rem); }
.service-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.service-card { min-height: 410px; padding: 34px; position: relative; }
.service-card-dark { background: var(--ink); color: var(--white); }
.service-card-light { background: var(--lime); }
.service-number { font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
.service-card h3 { font-size: clamp(2rem, 4vw, 3.7rem); margin-top: 90px; max-width: 370px; }
.service-card p { color: #aeb8ad; max-width: 240px; }
.service-card-light p { color: #506023; }
.price { align-items: baseline; bottom: 34px; display: flex; gap: 12px; position: absolute; }
.price strong { font-family: 'Space Grotesk', sans-serif; font-size: 32px; }
.price span { font-size: 13px; }
.card-link { bottom: 36px; font-size: 14px; font-weight: 700; position: absolute; right: 34px; }
.card-link span { margin-left: 12px; }
.strings { align-items: center; background: #e8eadf; display: grid; gap: 8vw; grid-template-columns: .85fr 1.15fr; }
.strings-copy > p:last-child { color: var(--muted); max-width: 380px; }
.string-options { border-top: 1px solid #cbd0c5; }
.string-option { align-items: center; background: transparent; border: 0; border-bottom: 1px solid #cbd0c5; color: var(--ink); cursor: pointer; display: grid; grid-template-columns: 1fr 1fr 30px; padding: 22px 0; text-align: left; width: 100%; }
.string-option span { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 600; }
.string-option small { color: var(--muted); font-size: 13px; }
.string-option b { font-size: 20px; font-weight: 400; }
.string-option:hover span { color: #789319; }
.location { align-items: end; display: grid; gap: 8vw; grid-template-columns: .8fr 1.2fr; }
.location-copy { max-width: 430px; }
.location h2 { margin-bottom: 28px; }
.location p:last-child { color: var(--muted); }
.map-link { align-items: center; border-bottom: 1px solid var(--ink); display: inline-flex; font-weight: 700; gap: 26px; margin-top: 28px; padding-bottom: 8px; }
.map-link b { background: var(--ink); border-radius: 50%; display: grid; height: 32px; place-items: center; width: 32px; }
.map-frame { border: 0; filter: grayscale(1) contrast(.9); height: 340px; width: 100%; }
.knowledge { border-top: 1px solid var(--line); }
.knowledge-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.knowledge-card { background: #e8eadf; min-height: 490px; padding: 34px; position: relative; }
.knowledge-card h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; margin: 38px 0 25px; max-width: 470px; }
.knowledge-card ul { color: var(--muted); margin: 0; max-width: 540px; padding-left: 18px; }
.knowledge-card li { margin: 12px 0; padding-left: 4px; }
.knowledge-card strong { color: var(--ink); }
.card-link-static { display: inline-flex; margin-top: 24px; position: static; }
.faq { display: grid; gap: 8vw; grid-template-columns: .75fr 1.25fr; }
.faq-intro h2 { font-size: clamp(2.6rem, 5vw, 5.4rem); }
.faq-intro > p:last-child { color: var(--muted); margin-top: 28px; max-width: 280px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; list-style: none; padding: 23px 35px 23px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-family: 'DM Sans', sans-serif; font-size: 25px; font-weight: 400; position: absolute; right: 0; top: 18px; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { color: var(--muted); margin: -5px 35px 24px 0; max-width: 600px; }
.faq-list details[open] > p,
.faq-list details[open] .faq-answer { animation: faq-reveal .35s ease both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-whatsapp { border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 700; }
.faq-answer { color: var(--muted); margin: -5px 35px 24px 0; max-width: 600px; }
.faq-answer ul { margin: 0 0 18px; padding-left: 20px; }
.faq-answer li { margin: 5px 0; }
.faq-answer p { margin: 0; }
.string-list { list-style: none; padding-left: 0 !important; }
.string-list li { align-items: flex-start; display: flex; gap: 12px; margin: 14px 0; }
.string-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.string-list strong { color: var(--ink); font-weight: 600; }
.string-list small { color: var(--muted); font-size: 13px; }
.profile { background: var(--ink); display: inline-block; flex: 0 0 18px; height: 18px; margin-top: 3px; width: 18px; }
.profile-round { border-radius: 50%; }
.profile-5 { clip-path: polygon(50% 0, 98% 35%, 79% 92%, 21% 92%, 2% 35%); }
.profile-6 { clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
.profile-8 { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.profile-mono::after { background: var(--lime); content: ''; display: block; height: 3px; margin: 7px 3px; width: 12px; }
.profile-multi::after { background-image: radial-gradient(circle, var(--lime) 1px, transparent 1.5px); background-size: 4px 4px; content: ''; display: block; height: 10px; margin: 4px 3px; width: 12px; }
.profile-solid::after { content: none; }
.profile-wrapped { box-shadow: inset 0 0 0 3px var(--lime); }
.string-legend { border-bottom: 1px solid #cbd0c5; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 18px; margin-bottom: 14px; padding-bottom: 16px; }
.string-legend span { align-items: center; display: inline-flex; gap: 7px; }
.string-legend .profile { flex-basis: 14px; height: 14px; width: 14px; }
.string-legend .profile-mono::after { height: 2px; margin: 6px 2px; width: 10px; }
.string-legend .profile-multi::after { background-size: 3px 3px; height: 8px; margin: 3px 2px; width: 10px; }
.string-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.string-metrics > span { align-items: center; color: var(--muted); display: inline-flex; font-size: 11px; gap: 4px; }
.meter { background: #c9cec4; display: inline-block; height: 5px; overflow: hidden; width: 34px; }
.meter b { background: #789319; display: block; height: 100%; width: 20%; }
.meter b.level-2 { width: 40%; }
.meter b.level-3 { width: 60%; }
.meter b.level-4 { width: 80%; }
.meter b.level-5 { width: 100%; }
.article-page { margin: 0 auto; max-width: 900px; padding: 70px 5vw 120px; }
.back-link { display: inline-block; font-size: 14px; font-weight: 700; margin-bottom: 90px; }
.article-page h1 { font-size: clamp(3.5rem, 8vw, 7rem); max-width: 850px; }
.article-lead { color: var(--muted); font-size: 21px; margin: 35px 0 90px; max-width: 600px; }
.article-content { border-top: 1px solid var(--line); padding-top: 55px; }
.article-content h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: 65px 0 22px; }
.article-content h2:first-child { margin-top: 0; }
.article-content p { color: var(--muted); font-size: 17px; max-width: 700px; }
.article-content strong { color: var(--ink); }
.article-contact { background: var(--ink); color: var(--white); display: inline-block; font-weight: 700; margin-top: 65px; padding: 17px 22px; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 13px; justify-content: space-between; margin: 0 5vw; padding: 28px 0; }
.site-footer a { color: var(--ink); font-weight: 700; }
@media (max-width: 700px) { .site-header { padding: 18px 6vw; } .brand { font-size: 14px; } .hero { display: flex; flex-direction: column; margin-top: 20px; padding: 0 6vw; } .hero-copy { padding: 55px 0 35px; } .hero-image { min-height: 0; order: 2; } h1 { font-size: clamp(3.6rem, 18vw, 6rem); } .section-wide, .section-narrow { padding: 85px 6vw; } .section-narrow { text-align: left; } .section-heading { align-items: start; display: block; } .section-heading h2 { margin-top: 40px; } .service-grid, .strings, .knowledge-grid, .faq { grid-template-columns: 1fr; } .service-card { min-height: 360px; } .service-card h3 { margin-top: 70px; } .strings, .faq { gap: 50px; } .string-option { grid-template-columns: 1fr 30px; } .string-option small { display: none; } .knowledge-card { min-height: 540px; } .location { align-items: start; display: block; } .map-link { display: inline-flex; margin-top: 35px; } .article-page { padding: 45px 6vw 80px; } .back-link { margin-bottom: 55px; } .article-lead { font-size: 18px; margin-bottom: 60px; } .article-content p { font-size: 16px; } .site-footer { align-items: start; flex-direction: column; gap: 12px; margin: 0 6vw; } }
@media (min-width: 701px) and (max-width: 950px) { .hero { display: flex; flex-direction: column; gap: 45px; padding: 0 8vw; } .hero-copy { align-self: stretch; padding: 45px 0 0; } .hero-image { align-self: center; width: min(100%, 560px); } h1 { max-width: 700px; } }
@media (max-width: 700px) { .map-frame { height: 280px; margin-top: 50px; } }

/* Full-width hero with a deliberate translucent text overlay. */
.hero { display: block; margin: 0 auto; max-width: 1280px; padding: 0 5vw; position: relative; }
.hero-visual { --hero-image-height: clamp(500px, 55vw, 700px); height: calc(var(--hero-image-height) - 60px); overflow: clip; position: relative; width: 100%; }
.hero-image { aspect-ratio: auto; background: none; display: block; height: var(--hero-image-height); position: absolute; top: -30px; left: 0; justify-self: auto; max-width: none; object-fit: cover; object-position: center 88%; transform: scale(1.06); width: 100%; }
.hero-copy { background: rgba(244, 243, 237, .5); backdrop-filter: blur(1px); container-type: inline-size; bottom: auto; left: 0; max-width: none; padding: 24px 3vw; position: absolute; text-align: center; top: 30%; transform: translateY(-50%); width: 100%; z-index: 1; }
.hero-copy h1 { font-size: clamp(2.2rem, 4.8cqi, 3.6rem); max-width: none; white-space: normal; text-wrap: balance; }
.hero-details { padding: 28px 0 12px; }
.hero-details .hero-text { margin: 0 0 20px; }
.hero { display: block; overflow: clip; position: relative; }
@media (max-width: 700px) { .hero { padding: 0 6vw; } .hero-copy { bottom: auto; left: 6vw; max-width: none; padding: 22px 6vw 26px; top: 30%; transform: translateY(-50%); width: calc(100% - 12vw); } .hero-copy h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); white-space: normal; } .hero-image { height: 540px; object-fit: cover; object-position: center 88%; } .hero-details { padding: 26px 0 10px; } }
@media (max-width: 700px) { .hero-visual { --hero-image-height: 540px; } .hero-copy { left: 0; width: 100%; } }

[hidden] { display: none !important; }
[id] { scroll-margin-top: 110px; }
button { font: inherit; cursor: pointer; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer { flex-wrap: wrap; gap: 20px; }
.map-placeholder { min-height: 340px; padding: 32px; background: #e8eadf; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.map-placeholder p { color: var(--muted); max-width: 440px; }
.map-placeholder a, .legal-page .article-content a { text-decoration: underline; text-underline-offset: 3px; }
.map-placeholder .button { border: 0; }
.map-close { background: none; border: 0; border-bottom: 1px solid; margin-top: 12px; padding: 0 0 4px; }
.legal-page h1 { font-size: clamp(2.4rem, 7vw, 5rem); overflow-wrap: anywhere; }
.legal-page .article-content { margin-top: 45px; overflow-wrap: anywhere; }
.legal-page .article-content li { color: var(--muted); margin: 10px 0; }
@media (max-width: 700px) { .map-container { margin-top: 50px; } .map-container .map-frame { margin-top: 0; } .map-placeholder { min-height: 280px; padding: 24px; } .service-card .price { position: static; margin-top: 24px; } .service-card .card-link { display: inline-flex; position: static; margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq-list details[open] > p, .faq-list details[open] .faq-answer { animation: none; } }