/* =========================================================
   Felizardo Arquitetura — folha de estilos
   Paleta: Moss / Sage / Ceramic / Acorn / Brown / Clay
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Fraunces:ital,opsz,wght@1,9..144,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --moss: #616D63;
  --moss-dark: #4A5449;
  --sage: #BCC9B8;
  --ceramic: #F9F5F2;
  --acorn: #D2AC97;
  --acorn-dark: #BD9174;
  --brown: #827A6F;
  --clay: #EDE6D3;
  --ink: #262924;

  --serif: 'Fraunces', serif;
  --serif-italic: 'Fraunces', serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --maxw: 1180px;
  --gutter: clamp(24px, 6vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--ceramic);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
.tag{
  font-family:var(--mono);
  font-size:13px;
  color:var(--brown);
  letter-spacing:0.02em;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tag::before{
  content:'';
  width:16px; height:1px;
  background:var(--acorn-dark);
  display:inline-block;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--moss-dark);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- corner mark motif (echoes logo's construction lines) ---------- */
.corner-mark{
  position:absolute;
  width:26px; height:26px;
  pointer-events:none;
  color:var(--brown);
}
.corner-mark svg{ width:100%; height:100%; display:block; }
.corner-mark.tl{ top:0; left:0; }
.corner-mark.br{ bottom:0; right:0; transform:rotate(180deg); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ceramic);
  border-bottom:1px solid rgba(38,41,36,0.12);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif);
  font-size:19px;
  font-weight:500;
  color:var(--ink);
}
.brand img{ height:34px; width:auto; }

nav.main-nav ul{
  display:flex; gap:34px;
  list-style:none; margin:0; padding:0;
}
nav.main-nav a{
  font-size:14.5px;
  position:relative;
  padding:6px 0;
  color:var(--ink);
}
nav.main-nav a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--moss-dark);
  transition:right 0.25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ right:0; }
nav.main-nav a.active{ color:var(--moss-dark); }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width:34px; height:34px;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{
  display:block; height:1px; width:100%; background:var(--ink);
}

@media (max-width: 780px){
  nav.main-nav{
    position:fixed; inset:78px 0 0 0;
    background:var(--moss-dark);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease, transform 0.2s ease;
    z-index:40;
    overflow-y:auto;
  }
  nav.main-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  nav.main-nav ul{
    flex-direction:column; gap:12px;
    padding:24px var(--gutter);
  }
  nav.main-nav li{ border-bottom:none; }
  nav.main-nav a{
    display:block;
    padding:18px 22px;
    font-size:17px;
    color:var(--ceramic);
    background:rgba(249,245,242,0.08);
    border:1px solid rgba(249,245,242,0.18);
  }
  nav.main-nav a::after{ display:none; }
  nav.main-nav a.active{
    color:var(--ink);
    background:var(--acorn);
    border-color:var(--acorn);
  }
  .nav-toggle{ display:flex; }
  .nav-toggle span{ background:var(--ink); }
}

@media (max-width:480px){
  .hero-actions .btn{ flex:1 1 100%; justify-content:center; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:76px 0 64px;
  overflow:hidden;
}
.hero .wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero-ring{
  position:absolute;
  top:-140px; left:-160px;
  width:420px; height:420px;
  border:1px solid rgba(97,109,99,0.35);
  border-radius:50%;
  z-index:0;
}
.hero-copy, .hero-figure{ min-width:0; }
.hero-copy{ position:relative; z-index:1; }
.hero-copy h1{
  font-size:clamp(38px, 5.4vw, 62px);
  line-height:1.04;
  margin:18px 0 22px;
  color:var(--moss-dark);
}
.hero-copy p{
  max-width:46ch;
  color:var(--ink);
  font-size:16.5px;
}
.hero-actions{
  display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;
}
.hero-figure{
  position:relative;
}
.hero-figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.hero-figure figcaption{
  font-family:var(--mono);
  font-size:12px;
  color:var(--brown);
  margin-top:10px;
}

/* ---------- automatic before/after comparison (hero) ---------- */
.before-after{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--clay);
}
.hero-figure .before-after img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:auto;
}
.ba-after{ z-index:1; }
.ba-before{
  z-index:2;
  animation:ba-clip 9s ease-in-out infinite;
}
.ba-divider{
  position:absolute;
  top:0; bottom:0;
  width:2px;
  background:var(--ceramic);
  z-index:3;
  box-shadow:0 0 10px rgba(0,0,0,0.25);
  animation:ba-line 9s ease-in-out infinite;
}
.ba-handle{
  position:absolute;
  top:50%;
  z-index:4;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--ceramic);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transform:translate(-50%,-50%);
  animation:ba-line 9s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
}
.ba-handle::before{
  content:'';
  width:14px; height:14px;
  border-left:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);
  margin-right:6px;
}
.ba-handle::after{
  content:'';
  width:14px; height:14px;
  border-right:1.5px solid var(--ink);
  border-top:1.5px solid var(--ink);
  transform:rotate(45deg);
  margin-left:-16px;
}
.ba-label{
  position:absolute;
  bottom:14px;
  z-index:5;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ceramic);
  background:rgba(38,41,36,0.6);
  padding:4px 11px;
}
.ba-label.before{ left:14px; }
.ba-label.after{ right:14px; }

@keyframes ba-clip{
  0%{ clip-path:inset(0 0 0 0); }
  45%, 50%{ clip-path:inset(0 100% 0 0); }
  95%, 100%{ clip-path:inset(0 0 0 0); }
}
@keyframes ba-line{
  0%{ left:100%; }
  45%, 50%{ left:0%; }
  95%, 100%{ left:100%; }
}
@media (prefers-reduced-motion: reduce){
  .ba-before, .ba-divider, .ba-handle{ animation:none; }
  .ba-before{ clip-path:inset(0 50% 0 0); }
  .ba-divider, .ba-handle{ left:50%; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  font-size:14.5px;
  font-family:var(--sans);
  font-weight:500;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{ background:var(--ink); color:var(--ceramic); }
.btn.primary{
  background:var(--moss-dark);
  border-color:var(--moss-dark);
  color:var(--ceramic);
}
.btn.primary:hover{ background:var(--moss); border-color:var(--moss); }
.btn.whatsapp{
  background:var(--acorn-dark);
  border-color:var(--acorn-dark);
  color:var(--ceramic);
}
.btn.whatsapp:hover{ background:#a97a5c; border-color:#a97a5c; }
.btn svg{ width:16px; height:16px; }

/* ---------- section ---------- */
section{ padding:88px 0; position:relative; }
section.alt{ background:var(--clay); }
section.dark{ background:var(--moss-dark); color:var(--ceramic); }
section.dark h2, section.dark .tag{ color:var(--ceramic); }
section.dark .tag::before{ background:var(--acorn); }

.section-head{
  max-width:640px;
  margin-bottom:44px;
}
.section-head h2{
  font-size:clamp(28px, 3.4vw, 38px);
  margin-top:14px;
}

.lede{
  font-size:19px;
  line-height:1.65;
  max-width:62ch;
  color:var(--ink);
}
.body-copy{
  max-width:62ch;
  color:var(--ink);
}
.body-copy p + p{ margin-top:16px; }
.body-copy p, .lede, .hero-copy p, .contact-hero p{
  text-align:justify;
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

.cau-badge{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--brown);
  margin-top:14px;
  display:inline-block;
  border:1px solid rgba(38,41,36,0.25);
  padding:5px 12px;
}
section.dark .cau-badge{ color:var(--sage); border-color:rgba(249,245,242,0.3); }

/* ---------- about grid ---------- */
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:start;
  min-width:0;
}
.about-grid > *{ min-width:0; }
.about-photo{ position:relative; }
.about-photo img{ aspect-ratio:3/4; object-fit:cover; }

.edu-item{
  border-top:1px solid rgba(38,41,36,0.18);
  padding:22px 0;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
}
.edu-item:last-child{ border-bottom:1px solid rgba(38,41,36,0.18); }
.edu-item .year{ font-family:var(--mono); font-size:13px; color:var(--brown); }
.edu-item h3{ font-size:19px; font-weight:500; }
.edu-item p{ margin:6px 0 0; color:var(--brown); font-size:14.5px; }

/* ---------- process strip ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:28px;
}
.process-item{
  padding-top:22px;
  border-top:1px solid rgba(38,41,36,0.18);
}
.process-item .num{ font-family:var(--mono); font-size:12px; color:var(--acorn-dark); }
.process-item h3{ font-size:16px; font-weight:500; margin-top:10px; }
.process-item p{ font-size:13.5px; color:var(--brown); margin-top:8px; }

@media (max-width: 900px){
  .process{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 620px){
  .process{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 420px){
  .process{ grid-template-columns:1fr; }
}

/* ---------- reasons to hire an architect ---------- */
.reasons{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:34px 48px;
}
.reasons li{ padding-left:22px; position:relative; }
.reasons li::before{
  content:'';
  position:absolute; left:0; top:7px;
  width:9px; height:9px;
  background:var(--acorn-dark);
}
.reasons h3{ font-size:16.5px; font-weight:500; }
.reasons p{ font-size:14.5px; color:var(--brown); margin-top:8px; text-align:justify; hyphens:none; }

@media (max-width:700px){
  .reasons{ grid-template-columns:1fr; }
}

/* ---------- portfolio tabs & grid ---------- */
.port-tabs{
  display:flex; gap:8px;
  margin-bottom:40px;
  border-bottom:1px solid rgba(38,41,36,0.18);
}
.port-tabs a{
  font-family:var(--mono);
  font-size:13.5px;
  padding:12px 4px;
  margin-right:28px;
  color:var(--brown);
  border-bottom:2px solid transparent;
}
.port-tabs a.active{ color:var(--ink); border-color:var(--acorn-dark); }

.port-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
@media (max-width: 900px){ .port-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 600px){ .port-grid{ grid-template-columns:1fr; } }

.port-card{
  position:relative;
  border:1px solid rgba(38,41,36,0.18);
  background:var(--ceramic);
}
.port-card .thumb{
  aspect-ratio:1/1;
  overflow:hidden;
  position:relative;
}
.port-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.port-card .thumb.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(97,109,99,0.09) 0 1px, transparent 1px 14px);
  border-bottom:1px dashed rgba(38,41,36,0.3);
}
.port-card .thumb.placeholder span{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--brown);
  background:var(--ceramic);
  padding:6px 12px;
  border:1px dashed rgba(38,41,36,0.35);
}
.port-card .meta{ padding:16px 18px 20px; }
.port-card .meta .cat{ font-family:var(--mono); font-size:11.5px; color:var(--acorn-dark); }
.port-card .meta h3{ font-size:16.5px; font-weight:500; margin-top:6px; }

/* ---------- clickable project cards ---------- */
a.port-card-link{ display:block; color:inherit; }
.port-card{ transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
a.port-card-link:hover .port-card{
  border-color:var(--acorn-dark);
  box-shadow:0 10px 24px rgba(38,41,36,0.1);
  transform:translateY(-2px);
}

/* ---------- individual project page ---------- */
.project-cover{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  cursor:zoom-in;
  transition:opacity 0.2s ease;
}
.project-cover:hover{ opacity:0.9; }
.project-cover.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(97,109,99,0.09) 0 1px, transparent 1px 14px);
  border:1px dashed rgba(38,41,36,0.3);
  cursor:default;
}
.project-cover.placeholder:hover{ opacity:1; }
.project-cover.placeholder span{
  font-family:var(--mono);
  font-size:13px;
  color:var(--brown);
  background:var(--ceramic);
  padding:6px 14px;
  border:1px dashed rgba(38,41,36,0.35);
}

/* ---------- lightbox (view image large and whole) ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(20,21,18,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:100%;
  max-height:90vh;
  width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute;
  top:22px; right:26px;
  width:42px; height:42px;
  border:1px solid rgba(249,245,242,0.4);
  background:transparent;
  color:var(--ceramic);
  font-family:var(--sans);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-close:hover{ background:rgba(249,245,242,0.12); }
@media (max-width:600px){
  .lightbox-close{ top:12px; right:12px; width:38px; height:38px; }
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:24px;
}
.gallery-slot{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, rgba(97,109,99,0.09) 0 1px, transparent 1px 14px);
  border:1px dashed rgba(38,41,36,0.3);
}
.gallery-slot span{
  font-family:var(--mono);
  font-size:12px;
  color:var(--brown);
  background:var(--ceramic);
  padding:5px 10px;
  border:1px dashed rgba(38,41,36,0.35);
}
.gallery-figure{ margin:0; }
.gallery-figure img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
  transition:opacity 0.2s ease;
}
.gallery-figure img:hover{ opacity:0.88; }
.gallery-figure figcaption{
  font-family:var(--mono);
  font-size:12px;
  color:var(--brown);
  margin-top:8px;
}
@media (max-width:700px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:460px){ .gallery-grid{ grid-template-columns:1fr; } }

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px;
  color:var(--brown);
}
.back-link:hover{ color:var(--ink); }

/* ---------- contact ---------- */
.contact-hero{
  text-align:left;
}
.contact-hero h1{
  font-size:clamp(34px, 5vw, 54px);
  color:var(--ceramic);
  margin:18px 0 20px;
}
.contact-hero p{ max-width:50ch; color:rgba(249,245,242,0.85); font-size:17px; }

.contact-grid{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid rgba(249,245,242,0.25);
}
.contact-item{
  padding:26px 0 0;
  border-top:1px solid rgba(249,245,242,0.25);
}
.contact-item .k{ font-family:var(--mono); font-size:12.5px; color:var(--sage); }
.contact-item .v{ font-size:18px; margin-top:10px; font-family:var(--serif); }
.contact-item a.v:hover{ color:var(--acorn); }

@media (max-width: 780px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- footer ---------- */
footer.site-footer{
  background:var(--ink);
  color:rgba(249,245,242,0.7);
  padding:44px 0 30px;
  font-size:13.5px;
}
footer.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px;
}
footer.site-footer .footer-brand{ display:flex; flex-direction:column; gap:6px; }
footer.site-footer .footer-brand strong{ color:rgba(249,245,242,0.92); font-weight:500; font-family:var(--serif); font-size:15px; }
footer.site-footer a:hover{ color:var(--ceramic); }

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed;
  bottom:22px; right:22px;
  z-index:60;
  display:flex; align-items:center; gap:10px;
  background:var(--acorn-dark);
  color:var(--ceramic);
  padding:13px 18px;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(38,41,36,0.25);
  font-size:14px;
  font-weight:500;
  transition:transform 0.2s ease, background 0.2s ease;
}
.wa-float:hover{ background:#a97a5c; transform:translateY(-2px); }
.wa-float svg{ width:18px; height:18px; }

@media (max-width:600px){
  .wa-float span{ display:none; }
  .wa-float{ padding:14px; }
}

/* ---------- generic responsive ---------- */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-ring{ display:none; }
  .about-grid{ grid-template-columns:1fr; }
}

/* one deliberate entrance for the hero, nothing else */
.hero-copy, .hero-figure{
  animation:rise 0.7s ease both;
}
.hero-figure{ animation-delay:0.12s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- scroll reveal (movement as the page is scrolled) ---------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.process-item:nth-child(1){ transition-delay:0s; }
.process-item:nth-child(2){ transition-delay:.07s; }
.process-item:nth-child(3){ transition-delay:.14s; }
.process-item:nth-child(4){ transition-delay:.21s; }
.process-item:nth-child(5){ transition-delay:.28s; }
.reasons li:nth-child(1){ transition-delay:0s; }
.reasons li:nth-child(2){ transition-delay:.07s; }
.reasons li:nth-child(3){ transition-delay:.14s; }
.reasons li:nth-child(4){ transition-delay:.21s; }
.port-grid .port-card-link:nth-child(1){ transition-delay:0s; }
.port-grid .port-card-link:nth-child(2){ transition-delay:.08s; }
.port-grid .port-card-link:nth-child(3){ transition-delay:.16s; }
.contact-grid .contact-item:nth-child(1){ transition-delay:0s; }
.contact-grid .contact-item:nth-child(2){ transition-delay:.08s; }
.contact-grid .contact-item:nth-child(3){ transition-delay:.16s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- copy-to-clipboard email ---------- */
.copy-email{ cursor:pointer; position:relative; }
.copy-email.copied{ color:var(--acorn-dark); }
section.dark .copy-email.copied{ color:var(--acorn); }

/* ---------- home illustrations (original line-art, no stock imagery) ---------- */
.office-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.office-illustration{
  border:1px solid rgba(38,41,36,0.15);
  background:var(--ceramic);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:26px;
}
.office-illustration svg{ width:100%; height:100%; }
@media (max-width:900px){
  .office-grid{ grid-template-columns:1fr; }
  .office-illustration{ max-width:320px; margin:0 auto; }
}

.why-grid{
  display:grid;
  grid-template-columns:1.4fr 0.6fr;
  gap:40px;
  align-items:start;
  margin-bottom:36px;
}
.why-illustration{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.why-illustration svg{ width:100%; height:100%; max-width:200px; }
@media (max-width:700px){
  .why-grid{ grid-template-columns:1fr; }
  .why-illustration{ max-width:150px; margin:0 auto; }
}

.process-item .icon{
  width:34px; height:34px;
  margin-bottom:14px;
  color:var(--moss-dark);
}
.process-item .icon svg{ width:100%; height:100%; }