:root{
    --navy:#262a52;
    --navy-dark:#181b38;
    --carmine:#a3353b;
    --carmine-dark:#7c2429;
    --paper:#f6f5f1;
    --ink:#111114;
    --line: rgba(17,17,20,.12);
    --sq: 10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .display{
    font-family:'Barlow Condensed', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.01em;
    line-height:.95;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--carmine);
  }

  /* mosaic motif, echoes the logo mark */
  .mosaic{ display:grid; grid-template-columns:repeat(4, var(--sq)); grid-template-rows:repeat(4, var(--sq)); gap:3px; }
  .mosaic span{ width:var(--sq); height:var(--sq); }
  .mosaic span.n{background:var(--navy);}
  .mosaic span.c{background:var(--carmine);}
  .mosaic span.o{background:transparent;}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(246,245,241,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:84px; }
  .nav img.logo{ height:40px; width:auto; }
  .nav-links{ display:flex; gap:34px; font-weight:600; font-size:.92rem; }
  .nav-links a{ position:relative; padding:4px 0; }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--carmine);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{
    background:var(--carmine); color:#fff; font-weight:700; font-size:.85rem;
    padding:11px 22px; letter-spacing:.02em; text-transform:uppercase;
    border-radius:2px; transition:background .2s;
  }
  .nav-cta:hover{ background:var(--carmine-dark); }
  .nav-mobile-note{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    background:var(--navy);
    color:#fff;
    padding:100px 0 90px;
  }
  .hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
  .hero .eyebrow{color:#e8b3b3;}
  .hero h1{
    font-size:clamp(2.6rem, 5.6vw, 4.4rem);
    color:#fff;
    margin:14px 0 22px;
  }
  .hero h1 em{ font-style:normal; color:var(--carmine); background:linear-gradient(transparent 62%, rgba(163,53,59,.55) 0); }
  .hero p.lead{
    font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,.78);
    max-width:44ch; margin-bottom:32px;
  }
  .hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn-primary{
    background:var(--carmine); color:#fff; font-weight:700; font-size:.9rem;
    padding:15px 26px; text-transform:uppercase; letter-spacing:.03em; border-radius:2px;
    transition:transform .2s, background .2s;
    display:inline-block;
  }
  .btn-primary:hover{ background:#8f2e33; transform:translateY(-2px); }
  .btn-ghost{
    border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:700; font-size:.9rem;
    padding:15px 26px; text-transform:uppercase; letter-spacing:.03em; border-radius:2px;
    transition:border-color .2s, background .2s;
    display:inline-block;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }

  .hero-badge-row{ display:flex; gap:34px; margin-top:46px; }
  .hero-badge b{ font-family:'Barlow Condensed'; font-size:2.1rem; display:block; color:#fff; }
  .hero-badge span{ font-size:.78rem; color:rgba(255,255,255,.6); }

  .hero-art{ position:relative; }
  .mosaic-big{
    display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:34px; gap:6px;
  }
  .mosaic-big span{ border-radius:1px; }
  .mosaic-big span.n{background:var(--navy-dark); border:1px solid rgba(255,255,255,.06);}
  .mosaic-big span.c{background:var(--carmine);}
  .mosaic-big span.w{background:rgba(255,255,255,.06);}
  .mosaic-big span.o{background:transparent;}

  /* ---------- CLIENT STRIP ---------- */
  .clients{ background:#fff; border-bottom:1px solid var(--line); padding:34px 0; overflow:hidden;}
  .clients .wrap{display:flex; align-items:center; gap:40px;}
  .clients .label{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); white-space:nowrap; }
  .marquee{ overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .marquee-track{ display:flex; gap:46px; width:max-content; animation:scroll 32s linear infinite; }
  .marquee-track span{ font-family:'Barlow Condensed'; font-weight:600; font-size:1.05rem; color:#4a4e6b; white-space:nowrap; text-transform:uppercase; letter-spacing:.02em;}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- SERVICES ---------- */
  .services{ padding:110px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(2rem,4vw,2.8rem); color:var(--navy); margin-top:10px; }
  .section-head p{ color:#54566b; margin-top:14px; line-height:1.6; }

  .svc-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .svc-card{
    background:var(--paper); padding:34px 28px; min-height:170px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:background .2s;
  }
  .svc-card:hover{ background:#fff; }
  .svc-num{ font-family:'Barlow Condensed'; font-size:.85rem; color:var(--carmine); font-weight:700; }
  .svc-card h3{ font-size:1.35rem; color:var(--navy); margin-top:14px; text-transform:none; letter-spacing:0; font-weight:700;}

  /* ---------- ABOUT / MISSION ---------- */
  .about{ background:var(--navy); color:#fff; padding:110px 0; position:relative; }
  .about .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
  .about .eyebrow{ color:#e8b3b3;}
  .about h2{ color:#fff; font-size:clamp(2rem,4vw,2.6rem); margin:12px 0 20px;}
  .about .stat{ margin-top:40px; }
  .about .stat b{ font-family:'Barlow Condensed'; font-size:3.2rem; color:var(--carmine); display:block; }
  .about .stat span{ font-size:.85rem; color:rgba(255,255,255,.65); }

  .mv-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:30px 32px; margin-bottom:18px; border-radius:3px;}
  .mv-card h4{ font-family:'Barlow Condensed'; text-transform:uppercase; font-size:1.1rem; letter-spacing:.05em; color:var(--carmine); margin-bottom:10px;}
  .mv-card p{ color:rgba(255,255,255,.82); line-height:1.65; font-size:.97rem;}

  /* ---------- PORTFOLIO ---------- */
  .portfolio{ padding:110px 0; }
  .pf-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:14px; margin-top:10px;}
  .pf-item{ background:linear-gradient(135deg,var(--navy),var(--navy-dark)); position:relative; overflow:hidden; border-radius:2px; }
  .pf-item:nth-child(3n+1){ background:linear-gradient(135deg,var(--carmine),var(--carmine-dark)); }
  .pf-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .pf-item .tag{ position:absolute; left:16px; bottom:14px; color:#fff; font-family:'Barlow Condensed'; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; opacity:.9;}
  .pf-item::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px); }
  .ig-note{ display:flex; align-items:center; gap:10px; margin-top:24px; color:#54566b; font-size:.88rem; }
  .ig-dot{ width:8px; height:8px; border-radius:50%; background:var(--carmine); }

  /* ---------- CTA / ORÇAMENTO ---------- */
  .quote{ background:#fff; padding:110px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .quote .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
  .quote h2{ font-size:clamp(2rem,4vw,2.6rem); color:var(--navy); margin:12px 0 18px;}
  .quote p{ color:#54566b; line-height:1.65; max-width:42ch;}
  .quote .contact-line{ margin-top:34px; display:flex; flex-direction:column; gap:10px; font-weight:600; }
  .quote .contact-line a{ color:var(--navy); }
  .quote .contact-line a:hover{ color:var(--carmine); }

  form.qform{ display:grid; gap:16px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); display:block; margin-bottom:7px;}
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--line); background:var(--paper); padding:13px 14px;
    font-family:'Inter'; font-size:.95rem; border-radius:2px; color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--carmine); outline-offset:1px; border-color:var(--carmine);}
  .field textarea{ resize:vertical; min-height:100px; }
  .qform button{
    justify-self:start; background:var(--carmine); color:#fff; font-weight:700; font-size:.9rem;
    padding:16px 34px; text-transform:uppercase; letter-spacing:.03em; border:none; border-radius:2px; cursor:pointer;
    transition:background .2s;
  }
  .qform button:hover{ background:var(--carmine-dark); }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--navy-dark); color:rgba(255,255,255,.7); padding:70px 0 30px; }
  .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
  footer img.logo{ height:34px; margin-bottom:16px; filter:brightness(0) invert(1); }
  footer h5{ color:#fff; font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; margin-bottom:16px;}
  footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
  footer ul a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:50px; padding-top:24px; display:flex; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px;}

  @media (max-width: 860px){
    .nav-links{ display:none; }
    .hero .wrap, .about .wrap, .quote .wrap{ grid-template-columns:1fr; }
    .hero{ padding:70px 0 60px; }
    .svc-grid{ grid-template-columns:1fr 1fr; }
    .pf-grid{ grid-template-columns:repeat(2,1fr); }
    .pf-item:nth-child(1){ grid-column:span 2; grid-row:span 1; }
    .row2{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }

/* ---------- CTA BAND (home) ---------- */
.cta-band{ background:var(--navy-dark); padding:64px 0; }
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-band-inner h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin-top:6px; }

/* ---------- INNER PAGE HERO ---------- */
.page-hero{ background:var(--navy); color:#fff; padding:70px 0 56px; }
.page-hero .eyebrow{ color:#e8b3b3; }
.page-hero h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.4rem); margin-top:10px; }
.page-hero p{ color:rgba(255,255,255,.78); max-width:56ch; margin-top:16px; line-height:1.6; }
.breadcrumb{ font-size:.8rem; color:rgba(255,255,255,.55); margin-bottom:16px; }
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ color:var(--carmine); }

/* ---------- SERVICES (detail page) ---------- */
.svc-detail-list{ display:flex; flex-direction:column; }
.svc-detail{
  display:grid; grid-template-columns:120px 1fr; gap:34px; padding:40px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.svc-detail:first-child{ padding-top:0; }
.svc-detail .svc-num{ font-size:2.4rem; color:var(--carmine); font-family:'Barlow Condensed'; font-weight:700; }
.svc-detail h3{ font-size:1.6rem; color:var(--navy); text-transform:none; letter-spacing:0; margin-bottom:10px; }
.svc-detail p{ color:#54566b; line-height:1.65; max-width:64ch; }
.svc-detail ul{ margin-top:14px; padding-left:18px; color:#54566b; font-size:.92rem; line-height:1.8; }

/* ---------- ABOUT page extras ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:20px;}
.value-card{ background:#fff; padding:28px 24px; }
.value-card h4{ font-family:'Barlow Condensed'; color:var(--navy); text-transform:uppercase; letter-spacing:.03em; font-size:1.1rem; margin-bottom:8px;}
.value-card p{ font-size:.88rem; color:#54566b; line-height:1.55;}

.clients-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:10px;}
.client-chip{
  background:#fff; border:1px solid var(--line); padding:20px 18px; text-align:center;
  font-family:'Barlow Condensed'; font-weight:600; color:var(--navy); text-transform:uppercase; font-size:.95rem; letter-spacing:.02em;
  transition:border-color .2s, color .2s;
}
.client-chip:hover{ border-color:var(--carmine); color:var(--carmine); }

/* ---------- PORTFOLIO page extras ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px; }
.filter-pill{
  border:1px solid var(--line); padding:9px 18px; border-radius:20px; font-size:.82rem; font-weight:600;
  color:#54566b; cursor:pointer; transition:all .2s;
}
.filter-pill.active, .filter-pill:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pf-grid-full{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:14px; }
.pf-grid-full .pf-item{ grid-column:span 1; grid-row:span 1; }
.pf-grid-full .pf-item:nth-child(5n+2){ grid-row:span 2; }

/* ---------- CONTACT page extras ---------- */
.contact-page .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:100px 28px; }
.info-block{ margin-bottom:30px; }
.info-block h4{ font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); font-size:.95rem; margin-bottom:8px; }
.info-block p, .info-block a{ color:#54566b; font-size:.95rem; line-height:1.6; }
.info-block a:hover{ color:var(--carmine); }
.map-box{
  margin-top:34px; height:220px; border:1px solid var(--line); border-radius:2px;
  background:
    linear-gradient(135deg, transparent 48%, var(--line) 49%, var(--line) 51%, transparent 52%),
    var(--paper);
  display:flex; align-items:center; justify-content:center; color:#8a8ca0; font-size:.82rem; text-align:center; padding:20px;
}

@media (max-width: 860px){
  .svc-detail{ grid-template-columns:1fr; gap:10px; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .clients-grid{ grid-template-columns:1fr 1fr; }
  .pf-grid-full{ grid-template-columns:1fr 1fr; }
  .contact-page .wrap{ grid-template-columns:1fr; padding:70px 20px; }
}