@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --cream:#f4f7f4; --ink:#102629; --blue:#0079c8; --orange:#00a887; --lime:#74bd43; --deep:#005a78; --line:rgba(16,38,41,.18); --pad:clamp(1.25rem,5vw,5.5rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',Arial,sans-serif; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }
.section-pad { padding-left:var(--pad); padding-right:var(--pad); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; background:white; padding:.8rem 1rem; }
.skip-link:focus { top:1rem; }
.site-header { position:fixed; z-index:50; top:0; left:0; right:0; min-height:82px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(244,247,244,.92); backdrop-filter:blur(12px); transition:transform .3s; }
.brand { display:flex; align-items:center; }
.brand-logo { display:block; width:clamp(155px,15vw,205px); height:auto; }
.main-nav { display:flex; align-items:center; gap:clamp(1.2rem,3vw,3rem); font-size:.85rem; font-weight:600; }
.main-nav a:not(.nav-cta) { position:relative; }
.main-nav a:not(.nav-cta)::after { content:''; position:absolute; bottom:-.4rem; left:0; width:0; height:2px; background:var(--orange); transition:width .25s; }
.main-nav a:hover::after { width:100%; }
.nav-cta { display:flex; align-items:center; gap:1.5rem; border:1px solid var(--ink); padding:.75rem .8rem .75rem 1.15rem; }
.nav-cta span { color:var(--orange); font-size:1.1rem; }
.menu-button { display:none; border:0; background:transparent; padding:.8rem; }
.menu-button span:not(.sr-only) { display:block; width:24px; height:2px; background:var(--ink); margin:5px; }

.hero { min-height:100svh; padding-top:82px; display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:1fr auto; position:relative; }
.hero-copy { align-self:center; padding:5rem 5vw 5rem 0; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:.65rem; text-transform:uppercase; font-size:.68rem; font-weight:700; letter-spacing:.18em; }
.eyebrow span { width:26px; height:2px; background:var(--orange); }
h1,h2 { margin:0; font-family:'Manrope',Arial,sans-serif; letter-spacing:-.065em; line-height:.9; }
h1 { margin-top:2rem; font-size:clamp(4.3rem,8.9vw,9.2rem); font-weight:800; }
h1 em,h2 em { color:var(--orange); font-weight:400; }
.hero-lead { max-width:540px; margin:2.4rem 0; font-size:clamp(1rem,1.4vw,1.3rem); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem 1.1rem 1rem 1.4rem; font-size:.8rem; font-weight:700; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); }
.button-dark { background:var(--ink); color:white; }
.button span { font-size:1.1rem; }
.text-link { font-size:.82rem; font-weight:700; border-bottom:1px solid; padding:.3rem 0; }
.text-link span { color:var(--orange); margin-left:.6rem; }
.hero-art { position:relative; overflow:hidden; background:var(--blue); min-height:620px; }
.shape { position:absolute; }
.shape-blue { inset:0; background:var(--blue); }
.shape-orange { width:58%; aspect-ratio:1; right:-7%; top:9%; background:var(--orange); border-radius:50% 50% 8% 50%; transform:rotate(17deg); }
.shape-ring { width:50%; aspect-ratio:1; left:-10%; bottom:-11%; border:clamp(40px,6vw,90px) solid var(--cream); border-radius:50%; }
.shape-dot { width:8%; aspect-ratio:1; right:16%; bottom:14%; background:var(--lime); border-radius:50%; }
.art-note { position:absolute; left:8%; top:11%; color:white; font-size:.65rem; font-weight:700; line-height:1.6; letter-spacing:.15em; }
.art-stamp { position:absolute; right:8%; bottom:7%; color:white; border:1px solid rgba(255,255,255,.6); border-radius:50%; width:74px; aspect-ratio:1; display:grid; place-items:center; text-align:center; font-size:.58rem; line-height:1.5; transform:rotate(10deg); }
.hero-ticker { grid-column:1/-1; margin:0 calc(var(--pad)*-1); background:var(--orange); color:var(--cream); display:flex; overflow:hidden; white-space:nowrap; padding:.9rem 0; font-family:'Manrope',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.15em; }
.hero-ticker div { animation:ticker 25s linear infinite; }
.hero-ticker b { color:var(--lime); margin:0 1.1rem; }
@keyframes ticker { to { transform:translateX(-100%); } }

.services { background:var(--ink); color:var(--cream); padding-top:clamp(5rem,10vw,9rem); padding-bottom:clamp(5rem,10vw,9rem); display:grid; grid-template-columns:.82fr 1.18fr; gap:7vw; }
.eyebrow-light span { background:var(--orange); }
.section-heading { position:sticky; top:130px; align-self:start; }
.section-heading h2,.projects h2,.about h2,.contact h2 { margin:1.8rem 0 2rem; font-size:clamp(3rem,5.4vw,6.2rem); }
.section-heading>p:last-child { max-width:430px; color:#aaa99f; line-height:1.7; }
.service { display:grid; grid-template-columns:45px 62px 1fr; gap:1.1rem; align-items:start; padding:2rem 0; border-top:1px solid rgba(244,239,230,.22); }
.service:last-child { border-bottom:1px solid rgba(244,239,230,.22); }
.service-number { color:#74736d; font-size:.7rem; }
.service-icon { display:grid; place-items:center; width:46px; height:46px; color:var(--orange); border:1px solid #55544e; border-radius:50%; font-size:1.3rem; }
.service h3 { margin:0 0 .65rem; font-family:'Manrope',sans-serif; font-size:clamp(1.3rem,2vw,1.8rem); }
.service p { margin:0; color:#a9a89f; line-height:1.6; font-size:.88rem; max-width:520px; }

.projects { padding-top:clamp(5rem,10vw,9rem); padding-bottom:clamp(5rem,10vw,9rem); }
.projects-top { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.carousel-controls { display:flex; align-items:center; gap:1.2rem; padding-bottom:2.5rem; }
.carousel-controls button { width:47px; height:47px; background:transparent; border:1px solid var(--ink); cursor:pointer; transition:.2s; }
.carousel-controls button:hover { color:white; background:var(--ink); }
.carousel-controls span { font-size:.75rem; letter-spacing:.1em; }
.carousel { overflow:hidden; outline:none; }
.carousel:focus-visible { box-shadow:0 0 0 3px var(--orange); }
.carousel-track { display:flex; transition:transform .65s cubic-bezier(.22,.8,.25,1); }
.project-card { min-width:100%; }
.project-card picture { display:block; }
.project-card img { width:100%; height:min(64vw,690px); object-fit:cover; }
.project-card.is-portrait img { object-fit:contain; background:#e6e9e4; }
.project-meta { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; border-bottom:1px solid var(--ink); }
.project-meta span:first-child { font-size:.63rem; font-weight:700; letter-spacing:.15em; color:#6d6c65; }
.project-meta h3 { margin:.5rem 0 0; font-family:'Manrope',sans-serif; font-size:clamp(1.2rem,2.3vw,2rem); }
.project-arrow { font-size:1.7rem; color:var(--orange); }
.portfolio-note { color:#77756f; font-size:.72rem; margin-top:1.2rem; }
.portfolio-note code { color:var(--ink); }

.brands { overflow:hidden; padding-top:clamp(5rem,9vw,8rem); padding-bottom:clamp(5rem,9vw,8rem); background:#fff; color:var(--ink); }
.brands-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:3rem; margin-bottom:3.5rem; }
.brands-heading h2 { margin:0; font-size:clamp(3rem,5.4vw,6.2rem); }
.brands-heading .eyebrow { max-width:240px; }
.brand-marquee { margin:0 calc(var(--pad)*-1); overflow:hidden; }
.brand-marquee-track { width:max-content; display:flex; animation:brand-scroll 24s linear infinite; }
.brand-marquee:hover .brand-marquee-track { animation-play-state:paused; }
.client-logo { width:clamp(250px,31vw,430px); min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:0 clamp(1rem,3vw,2.5rem); }
.client-logo picture { width:78%; height:155px; display:grid; place-items:center; }
.client-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:155px; object-fit:contain; }
.client-logo span { color:#586765; font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
@keyframes brand-scroll { to { transform:translateX(-50%); } }

.about { background:var(--blue); color:white; display:grid; grid-template-columns:.8fr 1.2fr; min-height:720px; padding-top:clamp(5rem,9vw,8rem); padding-bottom:clamp(5rem,9vw,8rem); gap:8vw; align-items:center; }
.about-graphic { position:relative; min-height:480px; display:grid; place-items:center; }
.about-graphic>img { position:relative; z-index:2; width:min(90%,480px); height:auto; border:10px solid white; box-shadow:0 26px 70px rgba(0,55,80,.28); transform:rotate(-4deg); }
.logo-halo { position:absolute; z-index:1; width:min(75%,390px); aspect-ratio:1; border-radius:50%; background:var(--lime); transform:translate(16%,-8%); }
.brand-seal { position:absolute; z-index:3; right:0; bottom:6%; width:112px; aspect-ratio:1; display:grid; place-items:center; padding:1rem; border-radius:50%; background:var(--ink); color:white; font-size:.55rem; text-align:center; line-height:1.55; letter-spacing:.12em; transform:rotate(9deg); }
.about-copy>p:nth-of-type(2) { max-width:660px; color:#cfdaff; font-size:1.05rem; line-height:1.75; }
.about-values { display:grid; grid-template-columns:repeat(3,1fr); margin-top:3rem; border-top:1px solid rgba(255,255,255,.35); }
.about-values div { padding:1.5rem 1rem 0 0; }
.about-values strong { display:block; font-family:'Manrope',sans-serif; font-size:2rem; color:var(--orange); }
.about-values span { display:block; margin-top:.4rem; font-size:.72rem; color:#bdc9ee; }

.contact { padding-top:clamp(5rem,9vw,8rem); padding-bottom:clamp(5rem,9vw,8rem); }
.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:4rem 7vw; align-items:end; }
.contact h2 { font-size:clamp(4rem,8vw,9rem); }
.contact-copy { padding-bottom:2rem; }
.contact-copy>p { line-height:1.7; margin:0 0 2rem; }
.button-orange { background:var(--orange); color:white; width:100%; }
.phone-link { display:block; margin-top:1.4rem; font-weight:700; }
.whatsapp-link { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.25rem; padding-bottom:.25rem; border-bottom:1px solid; font-size:.8rem; font-weight:700; color:var(--deep); }
.whatsapp-link span { color:var(--lime); }
.contact-copy small { display:block; color:#88867f; font-size:.65rem; margin-top:1rem; }
.contact-form { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 2rem; margin-top:1rem; padding:clamp(1.5rem,4vw,3.5rem); background:white; border:1px solid var(--line); }
.form-intro { grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line); }
.form-intro span { font-family:'Manrope',sans-serif; font-size:clamp(1.35rem,2vw,2rem); font-weight:700; }
.form-intro p { margin:0; color:#737c7b; font-size:.7rem; }
.form-field { display:flex; flex-direction:column; gap:.55rem; }
.form-field-wide { grid-column:1/-1; }
.form-field label { font-size:.72rem; font-weight:700; letter-spacing:.04em; }
.form-field input,.form-field select,.form-field textarea { width:100%; border:0; border-bottom:1px solid #9da7a5; border-radius:0; background:transparent; color:var(--ink); padding:.8rem 0; font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }
.form-field textarea { resize:vertical; min-height:130px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--orange); box-shadow:0 1px 0 var(--orange); }
.form-trap { position:absolute; left:-9999px; }
.form-captcha { align-self:end; display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.form-captcha small { max-width:390px; color:#737c7b; font-size:.63rem; line-height:1.45; }
.form-submit { align-self:end; justify-self:end; min-width:230px; border:0; background:var(--ink); color:white; cursor:pointer; }
.form-message { grid-column:1/-1; margin:0; font-size:.8rem; font-weight:700; }
.form-message.success { color:#08795f; }
.form-message.error { color:#a52b2b; }

.site-footer {
  min-height:170px;
  padding-top:2.5rem;
  padding-bottom:2rem;
  background:#ffffff;
  color:var(--ink);
  display:grid;
  grid-template-columns:1fr auto;
  gap:5vw;
  align-items:center;
  border-top:1px solid #d9d9d9;
}

.site-footer a {
  color:var(--ink);
}

.site-footer > p {
  grid-column:1/-1;
  margin:0;
  padding-top:1.3rem;
  border-top:1px solid #d9d9d9;
  color:#666666;
  font-size:.65rem;
}
.brand-footer .brand-logo { width:190px; }
.footer-links { display:flex; gap:2rem; font-size:.75rem; }
.site-footer>p { grid-column:1/-1; margin:0; padding-top:1.3rem; border-top:1px solid #42413e; color:#777670; font-size:.65rem; }
.footer-credit { float:right; }
.footer-credit a { color:#b9c2bf; border-bottom:1px solid #646b68; }
.whatsapp-float { position:fixed; z-index:45; right:1.25rem; bottom:1.25rem; width:54px; height:54px; display:grid; place-items:center; border:3px solid var(--cream); border-radius:50%; background:var(--lime); color:white; box-shadow:0 10px 30px rgba(16,38,41,.24); font-size:.72rem; font-weight:800; letter-spacing:.05em; transition:transform .2s; }
.whatsapp-float:hover { transform:translateY(-4px) scale(1.03); }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:900px) {
  body.menu-open .site-header { transform:none!important; }
  .site-header { background:#fff; backdrop-filter:none; }
  .main-nav { position:fixed; z-index:60; inset:82px 0 0; background:#fff; opacity:1; flex-direction:column; align-items:flex-start; padding:3rem var(--pad); font-size:1.5rem; transform:translateX(100%); transition:transform .35s; }
  .main-nav.open { transform:none; }
  .nav-cta { margin-top:auto; width:100%; justify-content:space-between; }
  .menu-button { display:block; }
  .hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .hero-copy { padding:5rem 0 3.5rem; }
  .hero-art { min-height:520px; margin:0 calc(var(--pad)*-1); }
  .services,.about,.contact-grid { grid-template-columns:1fr; }
  .section-heading { position:static; }
  .projects-top { align-items:flex-end; }
  .brands-heading { display:block; }
  .brands-heading .eyebrow { margin-bottom:2rem; }
  .about-graphic { min-height:400px; max-width:550px; }
  .contact-grid { gap:1rem; }
  .site-footer { grid-template-columns:1fr auto; }
  .footer-links { display:none; }
}
@media (max-width:560px) {
  .site-header { min-height:72px; }
  .main-nav { inset:72px 0 0; }
  .brand-logo { width:145px; }
  h1 { font-size:clamp(3.75rem,19vw,5.5rem); }
  .hero-copy { padding-top:4rem; }
  .hero-art { min-height:430px; }
  .service { grid-template-columns:35px 1fr; }
  .service-icon { grid-row:1/3; grid-column:2; margin-bottom:.6rem; }
  .service>div:last-child { grid-column:2; }
  .projects-top { display:block; }
  .carousel-controls { justify-content:space-between; padding-bottom:1.5rem; }
  .project-card img { height:67vw; }
  .about { overflow:hidden; }
  .about-graphic { min-height:300px; }
  .about-values { gap:.6rem; }
  .about-values strong { font-size:1.6rem; }
  .contact h2 { font-size:clamp(3.55rem,17vw,5.4rem); }
  .contact-form { grid-template-columns:1fr; padding:1.4rem; gap:1.35rem; }
  .form-intro,.form-field-wide,.form-message { grid-column:1; }
  .form-intro { display:block; }
  .form-intro p { margin-top:.5rem; }
  .form-captcha { overflow:hidden; }
  .form-submit { width:100%; min-width:0; justify-self:stretch; }
  .site-footer { grid-template-columns:1fr; }
  .social-links { margin-top:1rem; }
  .footer-credit { display:block; float:none; margin-top:.7rem; }
}
@media (max-width:650px) { .whatsapp-float { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }