/* Services */
.service-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { padding:32px 26px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; transition:background .2s; min-width:0; }
.service-card:hover { background:#eeeee5; }
.service-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; }
.service-card-top>.icon { width:34px; height:34px; color:var(--blue); }
.service-card-top>span { font-size:10px; color:var(--muted); }
.card-kicker { font-size:10px; color:var(--muted); margin-bottom:12px; }
.service-card h3 { font-size:23px; line-height:1.15; letter-spacing:-.04em; margin-bottom:18px; min-height:54px; }
.service-card>p:not(.card-kicker) { font-size:12px; line-height:1.9; color:var(--muted); margin-bottom:28px; }
.service-more { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); font-size:11px; font-weight:600; min-height:44px; }
.service-more .icon { width:18px; height:18px; }
.service-more:hover { color:var(--blue); }
.section-tail { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:24px; font-size:11px; color:var(--muted); }
.section-tail a { color:var(--ink); }
/* Concept work: original CSS illustrations, not stock client case studies. */
.work-section { background:#eaece4; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
.project-card { min-width:0; }
.project-image { display:block; position:relative; overflow:hidden; aspect-ratio:1.13; }
.project-image>img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.project-image:hover>img { transform:scale(1.025); }
.project-arrow { position:absolute; right:14px; bottom:14px; width:36px; height:36px; display:grid; place-items:center; background:var(--paper); color:var(--ink); border-radius:50%; transition:background .2s; }
.project-arrow .icon { width:18px; height:18px; }
.project-image:hover .project-arrow { background:var(--lime); }
.concept-badge { position:absolute; left:16px; top:16px; font-size:8px; letter-spacing:.1em; font-weight:700; color:var(--ink); background:var(--paper); padding:5px 8px; }
.project-card-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:20px; }
.project-card h3 { font-size:19px; letter-spacing:-.025em; line-height:1.35; }
.project-card-heading>span { font-size:10px; color:var(--muted); flex-shrink:0; }
.project-card>p { margin-top:5px; color:var(--muted); font-size:11px; }
.project-art { height:100%; width:100%; min-height:280px; position:relative; overflow:hidden; isolation:isolate; }
.art-blue { background:#bfcbdc; }
.mock-stationery { background:#f7f4eb; position:absolute; inset:13% 19% 2% 8%; transform:rotate(-14deg); padding:13% 9%; box-shadow:4px 8px 15px #31476222; color:#2132c3; display:flex; flex-direction:column; justify-content:space-between; }
.mock-stationery>span { font-size:10px; font-weight:700; line-height:1.5; }
.mock-stationery b { display:block; font-size:24px; line-height:1.05; margin-top:24px; letter-spacing:-.06em; }
.mock-stationery small { font-size:5px; letter-spacing:.1em; }
.mock-stationery i { position:absolute; width:70px; height:70px; border:1px solid #2132c3; border-radius:50%; bottom:12%; right:12%; }
.mock-card { position:absolute; width:43%; height:43%; background:#2737cc; color:#d3f56a; right:7%; bottom:9%; transform:rotate(13deg); box-shadow:5px 9px 20px #1c2d682b; font-size:94px; font-weight:700; line-height:1; padding:3% 5%; letter-spacing:-.08em; }
.mock-card>span { display:block; font-size:8px; letter-spacing:0; margin-top:5px; color:#fff; }
.art-lime { background:#d2e999; }
.mock-search { position:absolute; inset:14% 8% 9%; padding:22px; background:#f5f4ee; transform:rotate(-5deg); box-shadow:7px 8px 15px #4d5f2720; color:var(--ink); }
.mock-search-label { font-size:6px; letter-spacing:.12em; font-weight:600; }
.mock-input { font-size:8px; padding:9px 10px; border:1px solid #bfc5b8; border-radius:20px; display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.mock-input .icon { width:12px; height:12px; }
.mock-search b { display:block; font-size:33px; letter-spacing:-.065em; line-height:1; margin-top:22px; }
.mock-pill { display:flex; justify-content:space-between; align-items:center; background:var(--blue); color:#fff; padding:8px 10px; font-size:7px; margin-top:20px; }
.mock-pill .icon { width:12px; height:12px; }
.art-coral,.art-ink { background:#eca38b; }
.art-ink { background:var(--ink); }
.project-neutral { position:absolute; inset:0; padding:12%; display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); }
.project-neutral>span { font-size:8px; letter-spacing:.12em; }
.project-neutral>.icon { width:80px; height:80px; align-self:flex-end; stroke-width:.8; }
.project-neutral>b { font-size:44px; letter-spacing:-.05em; line-height:1; }
.art-ink .project-neutral { color:var(--lime); }
.mock-local { position:absolute; inset:0; background:linear-gradient(0deg,#a8492e0e 1px,transparent 1px),linear-gradient(90deg,#a8492e0e 1px,transparent 1px); background-size:36px 36px; padding:18% 10% 9%; color:#572219; }
.mock-local>span { font-size:6px; letter-spacing:.1em; }
.mock-local b { display:block; position:absolute; top:46%; font-size:41px; letter-spacing:-.05em; line-height:1; }
.mock-local b em { font-size:42px; }
.mock-local small { position:absolute; bottom:10%; left:10%; font-size:8px; }
.mock-pin { background:#f5f4ee; width:77px; height:77px; border-radius:50%; display:grid; place-items:center; position:absolute; right:11%; top:18%; transform:rotate(14deg); }
.mock-pin .icon { width:43px; height:43px; stroke-width:1.2; }
/* Process and frequently asked questions */
.approach { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.approach h2 { font-size:clamp(2.5rem,4vw,3.8rem); }
.approach h2 em { color:var(--blue); }
.approach-intro>p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-top:30px; max-width:380px; line-height:1.9; }
.location-label { display:flex; align-items:center; gap:10px; margin-top:28px; font-size:10px; }
.location-label .icon { width:16px; height:16px; }
.process-list { list-style:none; padding-top:14px; }
.process-list li { display:grid; grid-template-columns:30px 1fr 20px; gap:18px; border-top:1px solid var(--line); padding-block:28px; }
.process-list li:last-child { border-bottom:1px solid var(--line); }
.step-number { font-size:10px; color:var(--blue); line-height:2.4; }
.process-list h3 { font-size:23px; letter-spacing:-.025em; }
.process-list p { font-size:12px; line-height:1.85; color:var(--muted); margin-top:12px; }
.process-list .icon { width:18px; height:18px; }
.local-band { background:var(--lime); padding-block:62px; }
.local-band>.shell { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:48px; }
.local-star .icon { width:96px; height:96px; stroke-width:.8; }
.local-band .eyebrow { font-size:9px; margin-bottom:16px; }
.local-band h2 { font-size:42px; line-height:1.02; }
.local-band p:not(.eyebrow) { font-size:12px; line-height:1.9; }
.local-band .text-link { margin-top:12px; }
.faq-section { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; }
.faq-section h2 { font-size:43px; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:24px; list-style:none; font-size:14px; font-weight:600; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .icon { width:18px; height:18px; transition:transform .2s; }
.faq-list details[open] summary .icon { transform:rotate(45deg); }
.faq-list details>p { padding:0 30px 26px 0; font-size:13px; color:var(--muted); line-height:1.9; }
/* Contact and footer */
.quote-section { background:var(--ink); color:var(--paper); }
.quote-grid { display:grid; grid-template-columns:.9fr 1.15fr; gap:100px; align-items:start; }
.quote-copy { padding-top:24px; }
.quote-copy .eyebrow { color:var(--lime); font-size:9px; }
.quote-copy h2 { font-size:clamp(2.75rem,4vw,3.9rem); line-height:1.05; }
.quote-copy h2 em { color:var(--lime); }
.quote-copy>p:not(.eyebrow) { margin-top:28px; color:#c5cbbf; font-size:14px; max-width:310px; line-height:1.9; }
.quote-arrow { margin-top:44px; }
.quote-arrow .icon { width:115px; height:115px; stroke-width:.7; color:var(--lime); }
.quote-copy .quote-note { font-size:11px!important; margin-top:40px!important; }
.quote-copy .text-link { margin-top:18px; }
.quote-panel { min-width:0; }
.quote-section .cr-quote-form { border:none; }
.quote-section .cr-form-intro h2 { font-size:30px; }
.quote-section .cr-form-intro p:not(.cr-form-kicker) { font-size:11px; }
.quote-section .cr-quote-form label { font-size:11px; }
.quote-section .cr-quote-form .cr-form-consent { font-size:11px; }
.quote-section .cr-quote-form input,.quote-section .cr-quote-form select,.quote-section .cr-quote-form textarea { font-size:13px!important; }
.quote-section .cr-quote-form .cr-form-hint { font-size:10px; }
.quote-section .cr-quote-form :focus-visible { outline-color:var(--blue); }
.site-footer { background:var(--ink); color:var(--paper); border-top:1px solid #3c453f; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:60px; padding-block:64px; }
.footer-brand { font-size:27px; font-weight:600; letter-spacing:-.05em; display:inline-flex; gap:20px; align-items:center; }
.footer-brand>.icon { width:27px; height:27px; color:var(--lime); }
.footer-top p { color:#c5cbbf; font-size:12px; margin-top:20px; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:6px; font-size:12px; }
.footer-links h2 { font-size:11px; margin-bottom:14px; letter-spacing:0; }
.footer-links a { color:#c5cbbf; padding-block:4px; }
.footer-links a:hover { color:var(--lime); }
.footer-links>span { color:#c5cbbf; }
.footer-bottom { border-top:1px solid #3c453f; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:24px; color:#bdc4b9; font-size:9px; }
.footer-bottom>div { display:flex; gap:24px; align-items:center; }
.footer-bottom ul { list-style:none; display:flex; gap:14px; }
.footer-bottom a { display:inline-flex; padding-block:8px; }
.whatsapp-link { position:fixed; bottom:20px; right:20px; z-index:25; background:var(--lime); color:var(--ink); padding:12px 18px; font-size:11px; font-weight:600; box-shadow:0 2px 14px #0002; border:1px solid var(--ink); display:flex; align-items:center; gap:18px; }
.whatsapp-link .icon { width:17px; height:17px; }