/* V18 — approved palette + Manrope direction + compact bookmark ribbons. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  --accent:#FF6E18;
  --ink:#000000;
  --gray:#EEEEEE;
  --paper:#FFFFFF;
}

body,
button,
input,
textarea,
select,
.hero h1,
.project-intro h2,
.logo-title h2,
.service-heading h2,
.trust-copy h2,
.contact-grid h2,
.card-info strong,
nav,
.filter{
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
}

body{background:var(--paper);color:var(--ink);}
::selection{background:var(--accent);color:#fff;}
button:focus-visible,a:focus-visible{outline-color:var(--accent);}

/* Keep the orange strictly as a micro-accent. */
.button-black .arr,
.text-link .arr{color:var(--accent);}
.hero-indicators button.active{background:var(--accent)!important;}
.filter.active:before{background:var(--accent);}
.hero-corner-cta:hover{border-color:var(--accent);}

/* Project canvas / tags: neutral monochrome base. */
.projects{background:#F6F6F6;}
.card-tags span{
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  font-weight:600;
}

/* Disable the previous horizontal badge treatment. */
.project-ribbon{display:none!important;}

/* Small vertical bookmark ribbons, inspired by the supplied reference. */
.bookmark-ribbons{
  position:absolute;
  top:0;
  right:18px;
  z-index:6;
  display:flex;
  align-items:flex-start;
  gap:5px;
  pointer-events:none;
}
.bookmark-ribbon{
  width:34px;
  height:49px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px 2px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 81%,0 100%);
  color:#fff;
  font-family:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  box-shadow:0 7px 16px rgba(0,0,0,.12);
}
.bookmark-ribbon.ribbon-orange{background:var(--accent);}
.bookmark-ribbon.ribbon-black{background:#000;}
.bookmark-ribbon.ribbon-orange:first-child{font-size:13px;padding-top:8px;}

/* A little more editorial polish around project cards. */
.card-thumb{border-radius:13px;}
.card-info strong{font-weight:650;}
.card-info small{color:#777;}
.work-card:hover .card-arrow{color:var(--accent);}

/* Keep gray truly neutral. */
.pale{color:#A7A7A7;}
.section-rule{color:#8D8D8D;}

@media(max-width:760px){
  .bookmark-ribbons{right:12px;gap:4px;}
  .bookmark-ribbon{width:30px;height:43px;padding-top:8px;font-size:7px;}
  .bookmark-ribbon.ribbon-orange:first-child{font-size:12px;padding-top:7px;}
}