/* =========================================================
   P. Pereira Construction
   Layout recreated from the "Renovate" template
   Palette taken from the logo: #719BAA and #022B41
   ========================================================= */

:root{
  /* brand */
  --accent:      #719baa;   /* logo blue, decorative: rules, icons, borders */
  --accent-dark: #3f7d94;   /* darker variant, readable as text on white */
  --accent-soft: #e6eef2;   /* very light tint of the logo blue */
  --navy:        #022b41;   /* logo navy, solid blocks and headings */
  --navy-light:  #0d4460;   /* hover state on navy */

  /* neutrals */
  --ink:         #2b2b2b;
  --ink-soft:    #6b6b6b;
  --heading:     var(--navy);
  --gray-bg:     #f4f4f4;
  --line:        #e4e4e4;
  --container:   1170px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:92px; }

body{
  margin:0;
  font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--heading);
  margin:0;
  font-weight:600;
  letter-spacing:.5px;
}

a{ color:inherit; text-decoration:none; transition:color .25s; }
/* height:auto e obrigatorio agora que todo <img> declara width/height:
   sem ele o atributo height vira altura fixa e a imagem achata quando
   max-width reduz a largura. Regras mais especificas seguem valendo. */
img{ max-width:100%; height:auto; display:block; }
p{ margin:0 0 16px; }
ul{ list-style:none; margin:0; padding:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 15px;
}
.center{ text-align:center; }

/* line icons ------------------------------------------------ */
.ico{
  width:18px; height:18px;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}

/* buttons --------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:"Poppins",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:15px 32px;
  border-radius:40px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .3s;
  white-space:nowrap;
}
.btn-solid{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.btn-solid:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.65);
}
.btn-ghost:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-sm{ padding:12px 26px; font-size:10px; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  background:var(--gray-bg);
  border-bottom:1px solid var(--line);
  font-size:12px;
  position:relative;
  z-index:60;
}
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  min-height:44px;
}
.topbar-info{ display:flex; align-items:stretch; }
.topbar-info li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 20px;
  border-left:1px solid var(--line);
  color:#8a8a8a;
}
.topbar-info li:first-child{ border-left:1px solid var(--line); }
.topbar-info li:last-child{ border-right:1px solid var(--line); }
.topbar-info .ico{ width:14px; height:14px; color:#9d9d9d; }
.topbar-info a:hover{ color:var(--accent-dark); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  position:sticky; top:0; z-index:50;
  transition:box-shadow .3s;
}
.header.is-stuck{ box-shadow:0 2px 14px rgba(2,43,65,.10); }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text strong{
  font-family:"Poppins",sans-serif;
  font-size:23px; font-weight:700;
  letter-spacing:.5px;
  color:var(--navy);
}
.brand-text em{
  font-family:"Poppins",sans-serif;
  font-style:normal;
  font-size:10.5px; font-weight:500;
  letter-spacing:4.1px;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:4px;
}

.nav ul{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-family:"Poppins",sans-serif;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#4a4a4a;
  padding:6px 0;
  display:block;
}
.nav a:hover,.nav a.active{ color:var(--accent-dark); }

.nav-toggle{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--navy); display:block; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:590px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 38%;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(2,43,65,.22);
}
.hero .container{ position:relative; z-index:2; }
.hero-box{
  background:rgba(2,43,65,.88);
  color:#e9e9e9;
  max-width:460px;
  padding:38px 40px 42px;
}
.hero-box h1{
  color:#fff;
  font-size:34px;
  line-height:1.28;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding-bottom:22px;
  margin-bottom:22px;
  border-bottom:2px solid var(--accent);
}
.hero-box p{ font-size:15px; line-height:1.75; color:#d7dfe4; margin-bottom:28px; }

/* =========================================================
   PAGE BANNER (inner pages)
   ========================================================= */
.page-banner{
  position:relative;
  padding:80px 0 84px;
  overflow:hidden;
}
.page-banner-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.page-banner-bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(2,43,65,.82);
}
.page-banner .container{ position:relative; z-index:2; text-align:center; }
.page-banner h1{
  color:#fff;
  font-size:37px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  position:relative;
  padding-bottom:20px;
  margin-bottom:20px;
}
.page-banner h1::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:56px; height:2px;
  background:var(--accent);
}
.breadcrumb{
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px;
  font-family:"Poppins",sans-serif;
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.breadcrumb a:hover{ color:#fff; }
.breadcrumb li + li::before{
  content:"/";
  margin-right:10px;
  color:rgba(255,255,255,.35);
}
.breadcrumb [aria-current]{ color:var(--accent); }

/* =========================================================
   QUOTE STRIP
   ========================================================= */
.strip{ background:#fff; border-bottom:1px solid #efefef; }
.strip-inner{
  display:flex; align-items:center; gap:26px;
  padding:30px 15px;
}
.strip-icon{
  width:62px; height:62px; flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.strip-icon .ico{ width:26px; height:26px; }
.strip-text{ flex:1; }
.strip-text h3{
  font-size:21px; text-transform:uppercase; letter-spacing:.8px;
  margin-bottom:4px;
}
.strip-text p{ margin:0; font-size:14.5px; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:78px 0; }
.section-gray{ background:var(--gray-bg); }
.section-white{ background:#fff; }
.pb0{ padding-bottom:0; }

.sec-title{
  text-align:center;
  font-size:33px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:18px;
  position:relative;
  padding-bottom:20px;
}
.sec-title::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:56px; height:2px;
  background:var(--accent);
}
.title-rule{ display:block; }
.sec-lead{
  max-width:660px;
  margin:0 auto 46px;
  text-align:center;
  font-size:15px;
}
.sec-lead a{ color:var(--accent-dark); font-weight:700; }

/* services cards -------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#fff;
  box-shadow:0 1px 0 #ececec;
}
.card{ background:#fff; overflow:hidden; }
.card-img{ overflow:hidden; aspect-ratio:3/2; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.card:hover .card-img img{ transform:scale(1.07); }
.card-body{ padding:30px 30px 34px; text-align:center; }
.card-body h3{
  font-size:18px; text-transform:uppercase; letter-spacing:.9px;
  margin-bottom:14px;
}
.rule{
  display:block;
  width:40px; height:2px;
  background:var(--accent);
  margin:0 auto 16px;
}
.card-body p{ margin:0; font-size:14.5px; }
.cards + .center{ margin-top:44px; }

/* projects grid --------------------------------------------- */
.grid-projects{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:8px;
}
.project{
  position:relative;
  display:block;
  height:370px;
  overflow:hidden;
}
.project img{ width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.project:hover img{ transform:scale(1.06); }
/* O rotulo fica SEMPRE visivel: antes dependia de :hover, e em telefone nao
   existe hover, entao a faixa era quatro imagens sem legenda nenhuma. */
.project-overlay{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(2,43,65,.94) 0%, rgba(2,43,65,.75) 55%, rgba(2,43,65,0) 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  gap:14px;
  padding:60px 16px 22px;
  transition:background .35s;
}
.project:hover .project-overlay{
  background:linear-gradient(to top, rgba(2,43,65,.96) 0%, rgba(2,43,65,.88) 60%, rgba(2,43,65,.55) 100%);
}
.project-name{
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  text-align:center;
}
.project-overlay .btn{ opacity:0; transition:opacity .3s; }
.project:hover .project-overlay .btn{ opacity:1; }
@media (hover:none){ .project-overlay .btn{ display:none; } }

.explore{ background:var(--gray-bg); }
.explore-inner{
  display:flex; align-items:center; justify-content:center;
  gap:34px;
  padding:34px 15px;
}
.explore-inner h3{
  font-size:24px; text-transform:uppercase; letter-spacing:1px;
}

/* about ------------------------------------------------------ */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
/* Retangulo, nao circulo: recorte redondo numa foto de obra corta justamente
   o que a foto tem de informacao e parece acidental. */
.about-photo{
  width:100%;
  overflow:hidden;
  border:10px solid #fff;
  box-shadow:0 18px 44px rgba(2,43,65,.16);
}
.about-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

.feature{ display:flex; gap:26px; margin-bottom:34px; }
.feature:last-child{ margin-bottom:0; }
.feature-ico{
  width:64px; height:64px; flex:none;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.feature-ico .ico{ width:26px; height:26px; }
.feature-body h4{
  font-size:16px; text-transform:uppercase; letter-spacing:.9px;
  margin-bottom:10px;
}
.feature-body p{ margin:0; font-size:14.5px; }

/* offer tabs ------------------------------------------------- */
.tabs{
  display:flex; justify-content:center; gap:22px;
  margin-bottom:52px;
}
.tab{
  position:relative;
  width:132px; height:100px;
  background:#fff;
  border:1px solid var(--line);
  cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  font-family:"Lato",sans-serif;
  font-size:13.5px;
  color:#7d7d7d;
  transition:all .3s;
}
.tab .ico{ width:30px; height:30px; color:var(--accent); }
.tab:hover{ border-color:var(--accent); }
.tab.is-active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.tab.is-active .ico{ color:#fff; }
.tab.is-active::after{
  content:"";
  position:absolute; left:50%; bottom:-9px;
  transform:translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid var(--navy);
}
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fade .4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.service-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px 26px;
  max-width:900px;
  margin:0 auto;
}
.service-list li{
  position:relative;
  padding:11px 14px 11px 36px;
  background:#fff;
  border:1px solid var(--line);
  font-size:14px;
  color:#5f5f5f;
}
/* anchored to the first line, not vertically centred, so the tick stays put
   when an item wraps onto two lines */
.service-list li::before{
  content:"";
  position:absolute; left:14px; top:18px;
  width:9px; height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* why choose ------------------------------------------------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  text-align:center;
}
.why-item{ display:flex; flex-direction:column; align-items:center; }
.why-circle{
  width:102px; height:102px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.why-circle .ico{ width:42px; height:42px; }
.why-stem{
  display:block;
  width:1px; height:22px;
  background:var(--line);
  margin:0 auto;
  position:relative;
}
.why-stem::after{
  content:"";
  position:absolute; left:50%; bottom:-4px;
  transform:translateX(-50%);
  width:7px; height:7px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
}
.why-item h4{
  margin-top:22px; margin-bottom:14px;
  font-size:16px; text-transform:uppercase; letter-spacing:.9px;
}
.why-item p{ font-size:14.5px; max-width:300px; margin:0 auto; }

/* services page: grid of trades ---------------------------------- */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.service-item{
  background:#fff;
  border:1px solid var(--line);
  padding:34px 28px 30px;
  text-align:center;
  transition:border-color .3s, box-shadow .3s, transform .3s;
}
.service-item:hover{
  border-color:var(--accent);
  box-shadow:0 14px 34px rgba(2,43,65,.10);
  transform:translateY(-3px);
}
.service-ico{
  width:66px; height:66px;
  margin:0 auto 20px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  transition:background .3s, color .3s;
}
.service-item:hover .service-ico{ background:var(--navy); color:#fff; }
.service-ico .ico{ width:30px; height:30px; }
.service-item h3{
  font-size:16px; text-transform:uppercase; letter-spacing:.9px;
  margin-bottom:14px;
}
.service-item p{ margin:0; font-size:14.5px; }

/* contact page ----------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:56px;
  align-items:start;
}
.contact-methods li{
  display:flex;
  gap:20px;
  padding-bottom:26px;
  margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.contact-methods li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.contact-method-ico{
  width:54px; height:54px; flex:none;
  border-radius:50%;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.contact-method-ico .ico{ width:24px; height:24px; }
.contact-methods h3{
  font-size:13px; text-transform:uppercase; letter-spacing:1.4px;
  color:#8a8a8a;
  margin-bottom:6px;
}
.contact-strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:19px; font-weight:600; letter-spacing:.4px;
  color:var(--navy);
  margin-bottom:8px;
}
a.contact-strong:hover{ color:var(--accent-dark); }
.contact-methods p{ margin:0; font-size:14px; }


.contact-form-wrap{
  background:var(--gray-bg);
  border:1px solid var(--line);
  padding:34px 34px 30px;
}
.contact-form-title{
  font-size:17px; text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:24px;
}
.contact-form-wrap .estimate-form{ max-width:none; margin:0; gap:18px 20px; }
.contact-form-wrap .field input,
.contact-form-wrap .field select,
.contact-form-wrap .field textarea{ background:#fff; }
.contact-form-wrap .field-actions{ align-items:flex-start; }
.contact-form-wrap .field-actions .btn{ min-width:230px; }

.credentials-2{ grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; }

/* estimate page: form + aside ------------------------------------- */
.estimate-layout{
  display:grid;
  grid-template-columns:1.75fr 1fr;
  gap:44px;
  align-items:start;
}
.estimate-layout .estimate-form{ max-width:none; margin:0; }
.estimate-layout .field-actions{ align-items:flex-start; }
.estimate-layout .field-actions .btn{ min-width:250px; }

.req{
  font-size:9.5px;
  letter-spacing:1px;
  color:var(--accent-dark);
  margin-left:6px;
}
.form-hint{
  font-size:13.5px;
  color:#8a8a8a;
  margin:0 0 18px;
}
.form-privacy{
  font-size:12.5px;
  color:#9a9a9a;
  margin:14px 0 0;
}

.estimate-aside{ display:flex; flex-direction:column; gap:22px; }
.aside-card{
  border:1px solid var(--line);
  background:#fff;
  padding:26px 26px 24px;
}
.aside-card h3{
  font-size:14px; text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:14px;
}
.aside-card p{ font-size:14px; margin:0 0 14px; }
.aside-card p:last-child{ margin-bottom:0; }
.aside-card .offer-check{ padding:0; }
.aside-card .offer-col-link{ margin:0; display:inline-block; }

.aside-card-navy{
  background:var(--navy);
  border-color:var(--navy);
  color:rgba(255,255,255,.75);
}
.aside-label{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.aside-phone{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:25px; font-weight:600; letter-spacing:.6px;
  color:#fff;
  margin-bottom:14px;
}
.aside-phone:hover{ color:var(--accent); }
.aside-card-navy p{ color:rgba(255,255,255,.7); }

.aside-regs{ margin:0 0 18px; }
.aside-regs li{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px;
  padding:9px 0;
  border-top:1px solid var(--line);
  font-size:13.5px;
}
.aside-regs span{ color:#9a9a9a; }
.aside-regs strong{
  font-family:"Poppins",sans-serif;
  font-size:14px; letter-spacing:.6px;
  color:var(--navy);
}

/* why us page: six reasons + comparison --------------------------- */
.why-grid-6{
  grid-template-columns:repeat(3,1fr);
  gap:56px 40px;
}
.why-item p a{
  color:var(--accent-dark);
  font-weight:700;
  white-space:nowrap;
}
.why-item p a:hover{ color:var(--navy); }

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:960px;
  margin:0 auto;
  border:1px solid var(--line);
  background:#fff;
}
.compare-head{
  padding:18px 26px;
  font-family:"Poppins",sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase;
}
.compare-head-them{ background:#eceff1; color:#8a8a8a; }
.compare-head-us{ background:var(--navy); color:#fff; }

.compare-row{
  display:contents;
}
.compare-row > div{
  padding:18px 26px 18px 50px;
  position:relative;
  font-size:14.5px;
  border-top:1px solid var(--line);
}
/* the cross */
.compare-them{ color:#9a9a9a; }
.compare-them::before,
.compare-them::after{
  content:"";
  position:absolute; left:24px; top:26px;
  width:12px; height:2px;
  background:#c9c9c9;
}
.compare-them::before{ transform:rotate(45deg); }
.compare-them::after{ transform:rotate(-45deg); }
/* the tick */
.compare-us{ color:var(--ink); background:#fbfcfd; }
.compare-us::before{
  content:"";
  position:absolute; left:24px; top:24px;
  width:11px; height:6px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* offer page: three panels ----------------------------------------
   Same three ideas the home page shows as tabs, laid out side by side so the
   whole offer is readable at once instead of two thirds of it being hidden. */
.offer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  align-items:start;
}
.offer-col{
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
}
.offer-col-head{
  background:var(--navy);
  color:#fff;
  padding:26px 28px;
  display:flex;
  align-items:center;
  gap:14px;
}
.offer-col-head .ico{ width:28px; height:28px; color:var(--accent); }
.offer-col-head h3{
  color:#fff;
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.offer-col-lead{
  margin:0;
  padding:24px 28px 20px;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.offer-check{
  padding:22px 28px 8px;
  flex:1;
}
.offer-check li{
  position:relative;
  padding:0 0 12px 26px;
  font-size:14.5px;
  color:#5f5f5f;
}
.offer-check li::before{
  content:"";
  position:absolute; left:2px; top:8px;
  width:9px; height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.offer-col-link{
  margin:0 28px 26px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:"Poppins",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--accent-dark);
}
.offer-col-link:hover{ color:var(--navy); }
.offer-col-link::after{ content:" →"; }

/* offer page: faq -------------------------------------------------- */

.faq{
  max-width:840px;
  margin:0 auto;
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:20px 46px 20px 0;
  font-family:"Poppins",sans-serif;
  font-size:15px; font-weight:500; letter-spacing:.3px;
  color:var(--navy);
  transition:color .25s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--accent-dark); }
/* the plus turns into a minus when the item is open */
.faq-item summary::after,
.faq-item summary::before{
  content:"";
  position:absolute; right:8px; top:50%;
  width:13px; height:2px;
  background:var(--accent);
  transition:transform .25s;
}
.faq-item summary::before{ transform:translateY(-50%) rotate(90deg); }
.faq-item summary::after{ transform:translateY(-50%); }
.faq-item[open] summary::before{ transform:translateY(-50%) rotate(0deg); }
.faq-body{ padding:0 46px 22px 0; }
.faq-body p{ margin:0; font-size:14.5px; }

/* about page: who we are ----------------------------------------- */
.about-split{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:center;
}
.about-split-media img{
  width:100%;
  height:auto;
  border:10px solid #fff;
  box-shadow:0 18px 44px rgba(2,43,65,.16);
}
.about-split-text h2{
  font-size:31px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:18px;
}
.rule.left{ margin:0 0 24px; }
.about-split-text p{ font-size:15px; }

.about-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:34px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.about-facts strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:19px; font-weight:600; letter-spacing:.4px;
  color:var(--navy);
  margin-bottom:6px;
}
.about-facts span{ display:block; font-size:13.5px; line-height:1.5; }

/* projects page: filters ----------------------------------------- */
.filters{
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:10px;
  margin-bottom:42px;
}
.filter{
  font-family:"Poppins",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  padding:12px 24px;
  border:1px solid var(--line);
  background:#fff;
  color:#7d7d7d;
  border-radius:40px;
  cursor:pointer;
  transition:all .25s;
}
.filter:hover{ border-color:var(--accent); color:var(--navy); }
.filter.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* projects page: gallery ------------------------------------------
   Plain grid with uniform tiles. An earlier version used column-count for a
   masonry look, but Safari gives multi column containers a phantom height and
   left a few hundred pixels of dead space before the next section. */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.work-link{
  position:relative;
  display:block;
  overflow:hidden;
  cursor:zoom-in;
  aspect-ratio:4/3;
  background:var(--gray-bg);
}
.work-link img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s;
}
.work-link:hover img{ transform:scale(1.05); }
.work-overlay{
  position:absolute; inset:0;
  background:rgba(2,43,65,.68);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  padding:20px;
  text-align:center;
  opacity:0;
  transition:opacity .35s;
}
.work-link:hover .work-overlay,
.work-link:focus-visible .work-overlay{ opacity:1; }
.work-cat{
  font-family:"Poppins",sans-serif;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent);
}
.work-title{
  font-family:"Poppins",sans-serif;
  font-size:17px; font-weight:600; letter-spacing:.6px;
  color:#fff;
}
.work-zoom{
  width:42px; height:42px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.work-zoom .ico{ width:20px; height:20px; }
.work-empty{ text-align:center; font-size:15px; margin:0; }

/* projects page: video gallery ------------------------------------
   Site footage shot on a phone, so most of it is portrait and one clip is
   landscape. Frames are a fixed 3/4 to keep the grid even, and the video is
   contained rather than cropped so nothing gets cut off either end of a clip.
   preload is none: the poster frame is all that loads until someone presses
   play, which keeps a page of nine clips off the visitor's data plan. */
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.video-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
}
.video-frame{
  position:relative;
  aspect-ratio:3/4;
  background:var(--navy);
}
/* Absolutely positioned, so the clip's own dimensions cannot feed back into
   the height of the frame. Left in normal flow, a percentage height against an
   aspect-ratio box is circular and the browser falls back to the intrinsic
   size of the video, which gives every card a different height. */
.video-frame video{
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:contain;
}
.video-meta{ padding:20px 22px 24px; }
.video-cat{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:8px;
}
.video-meta h3{
  font-family:"Poppins",sans-serif;
  font-size:16.5px; font-weight:600; letter-spacing:.4px;
  color:var(--heading);
  margin:0 0 8px;
}
.video-meta p{ font-size:14.5px; line-height:1.6; margin:0; }

/* projects page: lightbox ----------------------------------------- */
.lightbox{
  position:fixed; inset:0;
  z-index:200;
  background:rgba(2,43,65,.95);
  display:flex; align-items:center; justify-content:center;
  padding:70px 80px;
}
.lightbox[hidden]{ display:none; }
.lightbox-figure{
  margin:0;
  max-width:100%; max-height:100%;
  display:flex; flex-direction:column;
  align-items:center; gap:18px;
}
.lightbox-figure img{
  max-width:100%;
  max-height:72vh;
  width:auto; height:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.lightbox-figure figcaption{ text-align:center; max-width:640px; }
.lightbox-figure strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:16px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:#fff;
  margin-bottom:8px;
}
.lightbox-figure span{ display:block; font-size:14.5px; color:rgba(255,255,255,.72); }
.lightbox-figure em{
  display:block;
  margin-top:12px;
  font-style:normal;
  font-family:"Poppins",sans-serif;
  font-size:11px; letter-spacing:2px;
  color:var(--accent);
}
.lightbox-btn{
  position:absolute;
  width:50px; height:50px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all .25s;
}
.lightbox-btn:hover{ background:#fff; border-color:#fff; color:var(--navy); }
.lightbox-btn .ico{ width:22px; height:22px; }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
body.lightbox-open{ overflow:hidden; }

/* projects page: what is included --------------------------------- */
.included{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 34px;
  max-width:1000px;
  margin:0 auto;
}
.included li{ display:flex; gap:16px; align-items:flex-start; }
.included .ico{ width:28px; height:28px; color:var(--accent); margin-top:2px; }
.included strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.5px;
  color:var(--navy);
  margin-bottom:6px;
}
.included div{ font-size:14px; line-height:1.6; }

/* services page: how a job runs ---------------------------------- */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  list-style:none;
  margin:0; padding:0;
}
.process-step{
  position:relative;
  padding:34px 24px 28px;
  background:var(--gray-bg);
  border-top:2px solid var(--accent);
}
.process-num{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:34px; font-weight:700;
  line-height:1;
  color:var(--accent);
  opacity:.45;
  margin-bottom:14px;
}
.process-step h3{
  font-size:15px; text-transform:uppercase; letter-spacing:.9px;
  margin-bottom:12px;
}
.process-step p{ margin:0; font-size:14px; }

/* call to action band --------------------------------------------
   Kept light on purpose: the navy contact strip sits directly below it on
   every page, and two navy bands in a row read as one big block. */
.cta-band{ background:var(--accent-soft); }
.cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:36px;
  padding:44px 15px;
}
.cta-band h2{
  font-size:26px; text-transform:uppercase; letter-spacing:1px;
  margin-bottom:8px;
}
.cta-band p{ margin:0; font-size:15px; }
.cta-actions{ display:flex; align-items:center; gap:26px; flex:none; }
.btn-light{ background:var(--navy); color:#fff; border-color:var(--navy); }
.btn-light:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.cta-phone{
  display:flex; align-items:center; gap:10px;
  font-family:"Poppins",sans-serif;
  font-size:19px; font-weight:600; letter-spacing:.6px;
  color:var(--navy);
  white-space:nowrap;
}
.cta-phone:hover{ color:var(--accent-dark); }
.cta-phone .ico{ width:20px; height:20px; }

/* credentials --------------------------------------------------- */
.verified{
  --verified-blue:#0f9bf0;   /* the blue from the badge artwork */
  width:.86em; height:.86em;
  vertical-align:-.06em;
  margin-left:.32em;
  flex:none;
}
.verified-seal{ fill:var(--verified-blue); }
.verified-check{
  fill:none;
  stroke:#fff;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.credentials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.credential{
  background:#fff;
  border:1px solid var(--line);
  padding:36px 30px 30px;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.credential-badge{
  width:74px; height:74px;
  margin:0 auto 20px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.credential-badge .ico{ width:34px; height:34px; }
.credential h3{
  font-size:17px; text-transform:uppercase; letter-spacing:1px;
  margin-bottom:14px;
}
.credential p{ font-size:14px; margin:0; }
.credential-id{
  margin-top:auto !important;
  padding-top:20px;
}
.credential-id span{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:10px; letter-spacing:1.8px; text-transform:uppercase;
  color:#9a9a9a;
  margin-bottom:4px;
}
.credential-id strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:17px; font-weight:600; letter-spacing:.8px;
  color:var(--navy);
}

/* =========================================================
   TESTIMONIALS: fixed background (parallax) + white card
   ========================================================= */
.testimonials{
  position:relative;
  padding:86px 0 96px;
  overflow:hidden;
}
.testimonials-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;   /* parallax: background stays put while the page scrolls */
}
.testimonials-bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(2,43,65,.34);  /* navy scrim so the white card reads against the photo */
}
/* iOS/Android ignore or mis-render fixed attachment: fall back to a normal cover */
@media (hover:none),(max-width:767px){
  .testimonials-bg{ background-attachment:scroll; }
}

.testimonials-inner{ position:relative; z-index:2; text-align:center; }

.quote-card{
  position:relative;
  max-width:860px;
  margin:0 auto;
  background:#fff;
  padding:38px 60px 46px;
  box-shadow:0 22px 60px rgba(2,43,65,.28);
}

.quote-ico{
  width:64px; height:64px;
  margin:0 auto;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  position:relative;
  margin-top:-70px;          /* sits on the top edge of the card */
  box-shadow:0 6px 18px rgba(2,43,65,.18);
}
.quote-ico .ico{ width:28px; height:28px; }
.why-stem.dark{ margin-bottom:30px; }

.slides{ position:relative; min-height:200px; }
.slide{ margin:0; display:none; }
.slide.is-active{ display:block; animation:fade .5s ease; }
.slide p{
  font-size:20px;
  line-height:1.75;
  color:#3a3a3a;
  font-weight:300;
  margin-bottom:22px;
}
.slide .rule{ margin-bottom:22px; }
.slide cite{ font-style:normal; display:block; }
.slide cite strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--navy);
}
.slide cite span{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-dark); margin-top:6px;
}

.slider-arrow{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.18);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all .3s;
  z-index:3;
}
.slider-arrow:hover{ background:#fff; border-color:#fff; color:var(--navy); }
.slider-arrow.prev{ left:15px; }
.slider-arrow.next{ right:15px; }
.slider-arrow .ico{ width:20px; height:20px; }

/* we work with: infinite marquee ------------------------------- */
.partners{ margin-top:8px; }

.marquee{
  --marquee-duration:100s;   /* one full lap: lower = faster */
  display:flex;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;        /* we own horizontal drags, the page keeps vertical */
  -webkit-user-select:none;
          user-select:none;
  /* soften both ends so cards enter and leave instead of being chopped */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.marquee.is-dragging{ cursor:grabbing; }

.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee var(--marquee-duration) linear infinite;
}
.marquee-group{ display:flex; flex:none; }

/* with js on, the loop is driven from main.js so it can be dragged and paused
   without losing its position. the css animation above is the no-js fallback. */
.marquee.is-interactive .marquee-track{ animation:none; }

/* the track holds two identical groups, so half of it is exactly one loop */
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
}

.partner{
  width:212px;
  flex:none;
  margin-right:22px;
  border:1px solid var(--line);
  min-height:118px;
  padding:18px 12px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  text-align:center;
  font-size:11.5px;
  letter-spacing:.4px;
  color:#8d8d8d;
  transition:border-color .3s, color .3s;
}
.partner .ico{ width:30px; height:30px; color:#c3c3c3; transition:color .3s; }
.partner:hover{ border-color:var(--accent); color:#5f5f5f; }
.partner:hover .ico{ color:var(--accent); }

/* estimate: service area ---------------------------------------- */
.estimate-area{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:840px;
  margin:0 auto 42px;
  padding-bottom:38px;
  border-bottom:1px solid #e2e2e2;
}
.estimate-area li{ display:flex; align-items:flex-start; gap:14px; }
.estimate-area .ico{ width:26px; height:26px; color:var(--accent); margin-top:2px; }
.estimate-area strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--navy);
  margin-bottom:4px;
}
.estimate-area span{ display:block; font-size:14px; line-height:1.55; }

/* estimate form ----------------------------------------------- */
.estimate-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 24px;
  max-width:840px;
  margin:0 auto;
}
.field{ display:flex; flex-direction:column; }
.field-full{ grid-column:1 / -1; }
.field.center{ align-items:center; }
.field.center .btn{ min-width:230px; }
.field label{
  font-family:"Poppins",sans-serif;
  font-size:11px; font-weight:500;
  letter-spacing:1.4px; text-transform:uppercase;
  color:#7c7c7c;
  margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  padding:13px 15px;
  font-family:"Lato",sans-serif;
  font-size:15px;
  line-height:1.4;
  color:var(--ink);
  outline:none;
  transition:border-color .25s;
  border-radius:0;
}
.field input,.field select{ height:48px; }
/* the native select renders taller and carries its own arrow: strip it back
   so it matches the text inputs exactly, then draw our own chevron */
.field select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:42px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:14px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); }
.field textarea{ resize:vertical; }
.form-note{
  margin:16px 0 0;
  font-size:14px;
  min-height:22px;
}
.form-note.ok{ color:#3f8f4f; }
.form-note.err{ color:#c0492f; }

/* contact strip ------------------------------------------------ */
.contact-strip{ background:var(--navy); color:#fff; }
.contact-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:34px 15px;
}
.contact-item{ display:flex; align-items:center; gap:22px; }
.contact-ico{
  width:68px; height:68px; flex:none;
  border:2px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.contact-ico .ico{ width:30px; height:30px; }
.contact-item span{
  display:block;
  font-family:"Lato",sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.75);
}
.contact-item strong{
  display:block;
  font-family:"Lato",sans-serif;
  font-size:15px; font-weight:700;
  line-height:1.5;
}
.contact-item a:hover{ text-decoration:underline; }

/* footer -------------------------------------------------------- */
.footer{ background:var(--gray-bg); padding-top:56px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1.1fr;
  gap:40px;
  padding-bottom:50px;
}
.fcol h5{
  font-size:15px;
  font-weight:600;
  letter-spacing:.4px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid #dedede;
  position:relative;
}
.fcol h5::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:40px; height:2px;
  background:var(--accent);
}
.fcol p{ font-size:14px; }
.footer-logo{ height:44px; width:auto; margin-bottom:18px; }

.fsocial{ display:flex; gap:8px; margin-top:20px; }
.fsocial a{
  width:34px; height:34px;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s;
}
.fsocial a:hover{ background:var(--accent); }
.fsocial .ico{ width:16px; height:16px; }

.fcheck li{
  position:relative;
  padding-left:24px;
  font-size:14px;
  margin-bottom:9px;
}
.fcheck li::before{
  content:"";
  position:absolute; left:2px; top:9px;
  width:9px; height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags a{
  border:1px solid #dcdcdc;
  background:#fafafa;
  padding:6px 12px;
  font-family:"Poppins",sans-serif;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#8a8a8a;
  transition:all .25s;
}
.tags a:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

.fposts li{ display:flex; gap:14px; margin-bottom:20px; }
.fposts img{ width:70px; height:56px; object-fit:cover; flex:none; }
.fposts a{
  display:block;
  font-size:14px;
  color:#5c5c5c;
  line-height:1.45;
}
.fposts a:hover{ color:var(--accent-dark); }
.fposts span{ display:block; font-size:12.5px; color:#a0a0a0; margin-top:5px; }

.copyright{
  background:#fff;
  border-top:1px solid #ececec;
  text-align:center;
  padding:22px 0;
  font-size:13.5px;
  color:#8d8d8d;
}
.copyright strong{ color:var(--navy); font-weight:700; }
/* MA and RI both require the registration number to appear in advertising */
.copyright-regs{
  display:block;
  margin-top:6px;
  font-size:12.5px;
  color:#a2a2a2;
}

/* credito da agencia: discreto, abaixo dos registros. Nao pode competir
   com o numero de licenca, que esta no rodape por exigencia legal. */
.copyright-by{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#b0b0b0;
  letter-spacing:.2px;
}
.copyright-by a{
  color:#8d8d8d;
  border-bottom:1px solid #dcdcdc;
  transition:color .2s, border-color .2s;
}
.copyright-by a:hover{ color:var(--navy); border-bottom-color:var(--navy); }

/* back to top ---------------------------------------------------- */
.to-top{
  position:fixed; right:26px; bottom:26px;
  width:46px; height:46px;
  border:0;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:all .3s;
  z-index:70;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--navy); }
.to-top .ico{ width:22px; height:22px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .nav ul{ gap:18px; }
  .nav a{ font-size:11.5px; }
  .service-list{ grid-template-columns:repeat(3,1fr); }
  .quote-card{ max-width:none; margin:0 70px; }
}

@media (max-width:991px){
  .topbar-info li:nth-child(3){ display:none; }
  .grid-projects{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .why-grid{ grid-template-columns:1fr; gap:52px; }
  .contact-inner{ grid-template-columns:1fr; gap:24px; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .service-list{ grid-template-columns:repeat(2,1fr); }
  .credentials{ grid-template-columns:1fr; }
  .about-split{ grid-template-columns:1fr; gap:40px; }
  .offer-cols{ grid-template-columns:1fr; }
  .why-grid-6{ grid-template-columns:repeat(2,1fr); gap:48px 32px; }
  .estimate-layout{ grid-template-columns:1fr; gap:38px; }
  .contact-grid{ grid-template-columns:1fr; gap:44px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .cta-inner{ flex-direction:column; text-align:center; gap:24px; }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .included{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:767px){
  .topbar-info li:nth-child(2){ display:none; }
  .topbar-info li{ padding:0 12px; }

  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:#fff;
    border-top:1px solid #f0f0f0;
    box-shadow:0 12px 20px rgba(2,43,65,.10);
    display:none;
  }
  /* O menu e absoluto dentro de um header sticky: sem limite de altura ele
     passa do rodape da tela e o fim fica inalcancavel, porque a pagina rola
     por tras e o menu acompanha o header. Com Services aberto sao 23 linhas.
     Entao o proprio menu rola, limitado a altura da janela. */
  .nav.is-open{
    display:block;
    max-height:calc(100vh - 118px);
    max-height:calc(100dvh - 118px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* os botoes flutuantes cobrem os itens do menu aberto */
  body.nav-open .fab,
  body.nav-open .to-top{ display:none; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav li{ border-bottom:1px solid #f2f2f2; }
  .nav a{ padding:14px 20px; }
  .header-inner{ position:relative; min-height:76px; }
  .brand img{ height:38px; }
  .brand-text strong{ font-size:19px; }
  .brand-text em{ font-size:9px; letter-spacing:3.2px; }

  /* Stacked, not overlaid. At 390px the navy box is full width and 88% opaque,
     so laying it over the photo left a strip of treeline and a strip of gravel
     and hid the foundation, which is the whole subject. Photo gets its own band
     above the box instead. At this width background-size:cover scales the
     1600x1000 hero to about 400x250, so nearly the entire frame is visible. */
  .hero{ min-height:0; display:block; }
  .hero-bg{ position:relative; inset:auto; height:250px; background-position:center center; }
  .hero-bg::after{ background:rgba(2,43,65,.10); }
  .hero .container{ padding-left:0; padding-right:0; }
  .hero-box{ max-width:none; padding:30px 26px 34px; }
  .hero-box h1{ font-size:26px; }

  .strip-inner{ flex-direction:column; text-align:center; gap:18px; }
  .section{ padding:56px 0; }
  .sec-title{ font-size:26px; }
  .explore-inner{ flex-direction:column; gap:20px; text-align:center; }
  .explore-inner h3{ font-size:20px; }
  .tabs{ gap:12px; }
  .tab{ width:108px; height:92px; font-size:12px; }
  .service-list{ grid-template-columns:1fr; }
  .partner{ width:172px; margin-right:16px; min-height:106px; }
  .marquee{ --marquee-duration:72s; }
  .estimate-area{ grid-template-columns:1fr; gap:18px; }
  .estimate-form{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .grid-projects{ grid-template-columns:1fr; }
  .project{ height:280px; }

  .page-banner{ padding:52px 0 56px; }
  .page-banner h1{ font-size:26px; }
  .service-grid{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .cta-actions{ flex-direction:column; gap:18px; }
  .work-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  .included{ grid-template-columns:1fr; }
  .why-grid-6{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; }
  .compare-head-them{ order:1 }
  .about-facts{ grid-template-columns:1fr; gap:16px; }
  .credentials-2{ grid-template-columns:1fr; }
  .contact-form-wrap{ padding:26px 20px 24px; }
  .about-split-text h2{ font-size:24px; }
  .filter{ padding:10px 16px; font-size:10px; letter-spacing:1px; }
  .lightbox{ padding:70px 16px; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-figure img{ max-height:60vh; }

  .testimonials{ padding:70px 0 76px; }
  .quote-card{ margin:0; padding:30px 24px 34px; }
  .slide p{ font-size:17px; }
  .slider-arrow{ display:none; }
}

/* =========================================================
   PRINT / PDF
   Wide page so the desktop layout is kept instead of falling
   back to the mobile breakpoints on an A4 sheet.
   ========================================================= */
@media print{
  @page{ size:1200px 1700px; margin:0; }

  *{
    -webkit-print-color-adjust:exact !important;
            print-color-adjust:exact !important;
  }
  body{ background:#fff; }

  .topbar,.header{ position:static !important; box-shadow:none !important; }
  .to-top,.nav-toggle,.slider-arrow{ display:none !important; }

  /* fixed backgrounds print blank, and the marquee is mid-animation */
  .testimonials-bg{ background-attachment:scroll !important; }
  .marquee{ -webkit-mask-image:none !important; mask-image:none !important; }
  .marquee-track{ transform:none !important; animation:none !important; }

  .card,.partner,.why-item,.feature,.project,
  .quote-card,.contact-item,.fcol{
    break-inside:avoid; page-break-inside:avoid;
  }
}


/* =========================================================
   SERVICES DROPDOWN
   O submenu abre no hover no desktop e vira acordeao no mobile.
   .nav ul e flex, entao .submenu precisa voltar para block.
   ========================================================= */
.nav .has-sub{ position:relative; }
.nav .has-sub > a{ display:inline-flex; align-items:center; gap:7px; }
.nav .caret{
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s;
}
.nav .sub-toggle{ display:none; }

.nav .submenu{
  display:block;
  position:absolute; top:100%; left:-20px;
  margin-top:12px;
  min-width:250px;
  background:#fff;
  border-top:2px solid var(--accent);
  box-shadow:0 16px 34px rgba(2,43,65,.16);
  padding:8px 0;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:60;
}
/* ponte invisivel: deixa o mouse atravessar o vao ate o submenu */
.nav .submenu::before{
  content:""; position:absolute;
  left:0; right:0; top:-14px; height:14px;
}
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav .has-sub:hover > a .caret{ transform:rotate(225deg) translateY(-2px); }

.nav .submenu li{ display:block; }
.nav .submenu a{
  padding:10px 22px;
  font-size:11.5px;
  letter-spacing:.4px;
  text-transform:none;
  white-space:nowrap;
  color:#5a5a5a;
  transition:background .2s, color .2s, padding .2s;
}
.nav .submenu a:hover,
.nav .submenu a.is-current{
  background:#f4f8f9;
  color:var(--accent-dark);
  padding-left:27px;
}

/* =========================================================
   SERVICE DETAIL PAGE
   Reaproveita .estimate-layout (conteudo + aside) do formulario.
   ========================================================= */
.sec-title-left{ text-align:left; }
.sec-title-left::after{ left:0; transform:none; }
.svc-body-ico{ margin:0 0 22px; }   /* .service-ico e centralizado; aqui alinha a esquerda */
.svc-lead{
  font-family:"Poppins",sans-serif;
  font-size:16.5px; font-weight:500; line-height:1.6;
  color:var(--navy);
  margin:0 0 20px;
}
.svc-body p{ margin:0 0 18px; }
.svc-sub{
  font-size:14px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--navy);
  margin:36px 0 4px;
}
.svc-inc{ padding:16px 0 26px; }

.svc-nav li{ border-bottom:1px solid var(--line); }
.svc-nav li:last-child{ border-bottom:0; }
.svc-nav a{
  display:block; padding:11px 0;
  font-size:14px; color:#5f5f5f;
  transition:color .2s, padding .2s;
}
.svc-nav a:hover{ color:var(--accent-dark); padding-left:6px; }
.svc-nav a.is-current{ color:var(--navy); font-weight:700; }

.service-item h3 a{ color:inherit; }
.service-item h3 a:hover{ color:var(--accent-dark); }
.svc-more{
  display:inline-block; margin-top:14px;
  font-family:"Poppins",sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.svc-more:hover{ color:var(--navy); }

@media (max-width:767px){
  /* o caret do link e so indicador visual no desktop; no mobile quem abre e o botao */
  .nav .has-sub > a > .caret{ display:none; }
  .nav .has-sub > a{ display:block; }
  .nav .sub-toggle{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:0; right:0;
    width:52px; height:47px;
    background:none; border:0; padding:0; cursor:pointer;
  }
  .nav .sub-toggle .caret{
    display:block;
    width:8px; height:8px;
    border-right:2px solid #8a8a8a;
    border-bottom:2px solid #8a8a8a;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s;
  }
  .nav .has-sub.is-open .sub-toggle .caret{ transform:rotate(225deg) translate(-2px,-2px); }

  .nav .submenu{
    position:static; margin-top:0; min-width:0;
    opacity:1; visibility:visible; transform:none;
    display:none;
    background:#f7fafb;
    border-top:0; box-shadow:none; padding:0;
  }
  .nav .submenu::before{ display:none; }
  .nav .has-sub.is-open .submenu{ display:block; }
  .nav .submenu li{ border-top:1px solid #eaf0f2; border-bottom:0; }
  .nav .submenu a{ padding:12px 20px 12px 36px; font-size:12.5px; }
}

/* cards clicaveis: a imagem virou <a>, entao precisa de box proprio para o
   aspect-ratio 3/2 do .card-img continuar valendo */
.card-img a{ display:block; width:100%; height:100%; }
.card-body h3 a{ color:inherit; }
.card-body h3 a:hover{ color:var(--accent-dark); }
.card-body .svc-more{ margin-top:4px; }

/* descricoes tem alturas diferentes; sem isso o "Read more" fica desalinhado
   entre os cards da mesma linha */
.cards .card{ display:flex; flex-direction:column; }
.cards .card-body{ display:flex; flex-direction:column; flex:1; }
.cards .card-body .svc-more{ margin-top:auto; padding-top:14px; }
.service-grid .service-item{ display:flex; flex-direction:column; }
.service-grid .service-item .svc-more{ margin-top:auto; padding-top:16px; }

/* =========================================================
   CONTATO FLUTUANTE
   Os tres canais ficam sempre visiveis, sem clique para abrir.
   No desktop com etiqueta; no mobile so o icone, para nao cobrir a tela.
   O item de WhatsApp e removido pelo main.js se nao houver numero.
   ========================================================= */
.fab{
  position:fixed; right:26px; bottom:26px;
  z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
.fab-item{ display:flex; align-items:center; gap:10px; }
.fab-item[hidden]{ display:none; }
.fab-label{
  background:#fff; color:var(--navy);
  font-family:"Poppins",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.5px;
  padding:8px 15px; border-radius:30px;
  box-shadow:0 4px 14px rgba(2,43,65,.16);
  white-space:nowrap;
  transition:transform .2s;
}
.fab-item:hover .fab-label{ transform:translateX(-3px); }
.fab-ico{
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 6px 18px rgba(2,43,65,.24);
  transition:transform .2s;
}
.fab-item:hover .fab-ico{ transform:scale(1.08); }
.fab-ico svg{ width:24px; height:24px; }
/* sms: so e confiavel em celular. No desktop o Windows precisa do Phone Link e
   o macOS do encaminhamento de SMS do iMessage; sem isso o clique nao faz nada.
   Entao o item aparece apenas em aparelho sem mouse. WhatsApp (wa.me abre o
   WhatsApp Web) e Call (o numero esta escrito na etiqueta) servem em qualquer tela. */
.fab-sms{ display:none; }
@media (hover:none) and (pointer:coarse){
  .fab-sms{ display:flex; }
}

.fab-wa .fab-ico{ background:#25d366; box-shadow:0 6px 18px rgba(37,211,102,.42); }
.fab-wa .fab-ico svg{ fill:currentColor; }
.fab-sms .fab-ico{ background:var(--accent-dark); }
.fab-call .fab-ico{ background:var(--navy); }
.fab-sms .fab-ico svg,.fab-call .fab-ico svg{
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* o bloco ocupa o canto, entao o "voltar ao topo" sobe para o lado esquerdo */
.to-top{ right:auto; left:26px; bottom:26px; }

@media (max-width:767px){
  .fab{ right:16px; bottom:16px; gap:10px; }
  .fab-label{ display:none; }          /* so icone, a tela e estreita */
  .fab-ico{ width:46px; height:46px; }
  .fab-ico svg{ width:22px; height:22px; }
  .to-top{ left:16px; bottom:16px; }
}
@media print{ .fab{ display:none !important; } }


/* foto no topo do card de servico; o icone vira um selo sobre a borda da foto */
.service-item-photo{ padding-top:0; overflow:hidden; }
.service-thumb{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  margin:0 -28px 0;
  background:var(--gray-bg);
}
.service-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s;
}
.service-item-photo:hover .service-thumb img{ transform:scale(1.06); }
.service-item-photo .service-ico{
  position:relative;
  margin-top:-33px;
  background:#fff;
  border-color:#fff;
  box-shadow:0 4px 14px rgba(2,43,65,.14);
}
.service-item-photo:hover .service-ico{ background:var(--navy); border-color:var(--navy); }


/* duas fotos no corpo da pagina de servico, entre o texto e a checklist */
.svc-shots{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px;
  margin:30px 0 6px;
}
.svc-shots figure{ margin:0; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; }
.svc-shots img{
  width:100%; display:block;
  aspect-ratio:3/2; object-fit:cover;
  transition:transform .5s;
}
.svc-shots figure:hover img{ transform:scale(1.04); }
@media (max-width:560px){ .svc-shots{ grid-template-columns:1fr; } }

/* 3 across, for the services that have a real photo set behind them */
.svc-shots-3{ grid-template-columns:repeat(3,1fr); gap:12px; }
.svc-shots-3 img{ aspect-ratio:1/1; }
/* one photo per page sometimes has to be read across, not cropped square */
.svc-shots-3 figure.wide{ grid-column:1 / -1; }
.svc-shots-3 figure.wide img{ aspect-ratio:11/5; }
.svc-shots figcaption{
  font:400 12.5px/1.4 'Lato',sans-serif; color:var(--muted,#6b7a82);
  padding:7px 9px 8px; background:#fff;
  flex:1 0 auto;
}
.svc-shots-note{
  font:400 13.5px/1.6 'Lato',sans-serif; color:var(--muted,#6b7a82);
  margin:10px 0 0;
}
@media (max-width:767px){ .svc-shots-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-shots-3{ grid-template-columns:repeat(2,1fr); gap:8px; } }


/* ---------- before and after ---------- */
.ba-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin:34px 0 30px;
}
.ba{ margin:0; position:relative; background:#fff; border:1px solid var(--line,#e3e7ea); }
.ba img{ width:100%; display:block; aspect-ratio:3/4; object-fit:cover; }
.ba-tag{
  position:absolute; top:0; left:0; z-index:2;
  font:600 12px/1 'Poppins',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(2,43,65,.92); padding:10px 15px;
}
.ba-tag-after{ background:var(--accent-dark,#3f7d94); }
.ba figcaption{
  font:400 13.5px/1.55 'Lato',sans-serif; color:var(--muted,#6b7a82);
  padding:12px 15px 14px;
}
@media (max-width:640px){ .ba-grid{ grid-template-columns:1fr; gap:16px; } }

/* =========================================================
   2026-08 CONTENT BLOCKS
   Hero claim, build journey, ICF / Nudura, ADU model,
   Shaker collection, commercial capability.
   ========================================================= */

/* hero claim ------------------------------------------------ */
.hero-box{ max-width:520px; }
.hero-claim{
  font-family:"Poppins",sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  color:#fff;
  margin:0 0 20px;
  padding-left:16px;
  border-left:3px solid var(--accent);
}

/* =========================================================
   WHAT WE BUILD  (about)
   ========================================================= */
.build-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;
}
.build-list li{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:30px 26px 28px;
  transition:box-shadow .3s, transform .3s;
}
.build-list li:hover{
  box-shadow:0 16px 34px rgba(2,43,65,.12);
  transform:translateY(-4px);
}
.build-ico{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--navy);
}
.build-ico .ico{ width:22px; height:22px; }
.build-list h3{
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:10px;
}
.build-list h3 a{ color:var(--heading); }
.build-list h3 a:hover{ color:var(--accent-dark); }
.build-list p{ margin:0; font-size:14px; }

/* flipped about split -------------------------------------- */
.about-split-flip .about-split-media{ order:2; }
.about-split-flip .about-split-text{ order:1; }

/* =========================================================
   PULL QUOTE  (about)
   ========================================================= */
.pullquote{
  background:var(--navy);
  padding:64px 0 60px;
  text-align:center;
}
.pullquote blockquote{ margin:0; }
.pullquote blockquote p{
  font-family:"Poppins",sans-serif;
  font-size:27px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.6px;
  color:#fff;
  margin:0 0 20px;
}
.pullquote cite{
  display:inline-block;
  font-style:normal;
  font-family:"Poppins",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--accent);
  padding-top:18px;
  border-top:2px solid rgba(113,155,170,.5);
}
.pullquote-sub{
  margin:26px 0 0;
  font-size:15px;
  letter-spacing:.4px;
  color:#a8bcc6;
}

/* =========================================================
   ICF BUILD SEQUENCE
   ========================================================= */
.icf-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin:0 0 34px;
}
.icf-steps figure{
  position:relative;
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  height:100%;
}
.icf-steps img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}
.icf-step-num{
  position:absolute;
  top:0; left:0;
  padding:7px 14px;
  background:var(--navy);
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
}
.icf-steps figcaption{
  padding:20px 22px 22px;
  font-size:14px;
  line-height:1.7;
}
.icf-steps figcaption strong{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--heading);
  margin-bottom:8px;
}

/* =========================================================
   NUDURA TECHNOLOGY CARDS
   ========================================================= */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}
.tech-card{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  padding:30px 32px 28px;
}
.tech-tag{
  display:inline-block;
  font-family:"Poppins",sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--accent-dark);
  margin-bottom:12px;
}
.tech-tag sup{ letter-spacing:0; }
.tech-card h3{
  font-size:18px;
  letter-spacing:.5px;
  margin-bottom:14px;
}
.tech-card p{ margin:0; font-size:14.5px; }
.tech-note{
  margin:32px 0 0;
  font-size:13px;
  color:var(--ink-soft);
  font-style:italic;
}

/* =========================================================
   NUDURA PRODUCT SERIES
   ========================================================= */
.series-list{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.series-item{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:34px;
  align-items:start;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.series-mark{
  display:flex; align-items:center; justify-content:center;
  height:56px;
  background:var(--navy);
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
}
.series-item h3{
  font-size:19px;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.series-item p{ margin:0; font-size:14.5px; }

/* =========================================================
   ADU BENEFITS
   ========================================================= */
.adu-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}
.adu-benefits li{
  background:#fff;
  border:1px solid var(--line);
  padding:32px 26px 28px;
  text-align:center;
}
.adu-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px;
  margin-bottom:20px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
}
.adu-ico .ico{ width:26px; height:26px; }
.adu-benefits h3{
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.9px;
  margin-bottom:12px;
}
.adu-benefits p{ margin:0; font-size:14px; }
.adu-motto{
  margin:44px 0 0;
  text-align:center;
  font-family:"Poppins",sans-serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--navy);
}

/* =========================================================
   ADU MODEL AND FLOOR PLAN
   ========================================================= */
.plan-layout{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:56px;
  align-items:start;
}
.plan-figure{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  padding:26px 26px 20px;
}
.plan-svg{ width:100%; height:auto; display:block; }
.plan-figure figcaption{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  font-style:italic;
  text-align:center;
}

/* floor plan drawing ---------------------------------------- */
.plan-wall-out{ fill:none; stroke:var(--navy); stroke-width:5; }
.plan-wall-in line{ stroke:var(--navy); stroke-width:2; }
.plan-room rect{ fill:var(--accent-soft); }
.plan-room-soft rect{ fill:#f4f7f9; }
.plan-dim line{ stroke:var(--accent-dark); stroke-width:1; }
.plan-dim text{
  font-family:"Poppins",sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.4px;
  fill:var(--accent-dark);
}
.plan-glass line{ stroke:var(--accent); stroke-width:5; }
.plan-glass text{
  font-family:"Poppins",sans-serif;
  font-size:7px;
  font-weight:600;
  letter-spacing:.8px;
  fill:var(--accent-dark);
}
.plan-label text{
  font-family:"Poppins",sans-serif;
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.7px;
  fill:var(--navy);
  text-anchor:middle;
}
.plan-sub text{
  font-family:"Lato",sans-serif;
  font-size:7px;
  letter-spacing:.3px;
  fill:#5c7480;
  text-anchor:middle;
}

/* spec column ----------------------------------------------- */
.plan-headline{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:34px;
}
.plan-headline span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:20px 8px 16px;
  background:#fff;
  font-family:"Poppins",sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
}
.plan-headline strong{
  font-size:24px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--navy);
}
.plan-table{ margin:0 0 26px; }
.plan-table div{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.plan-table dt{
  font-family:"Poppins",sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--heading);
}
.plan-table dd{ margin:0; font-size:14.5px; }
.plan-note{
  font-size:13.5px;
  font-style:italic;
  padding:18px 20px;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
}

/* =========================================================
   SHAKER COLLECTION
   ========================================================= */
.shaker-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:22px;
  margin-bottom:44px;
}
.shaker-grid li{ text-align:center; }
.shaker-door{
  display:block;
  aspect-ratio:3/4;
  background:var(--door);
  border:1px solid var(--edge);
  box-shadow:0 10px 26px rgba(2,43,65,.14);
  padding:11%;
  margin-bottom:18px;
}
.shaker-panel{
  display:block;
  width:100%; height:100%;
  background:var(--door);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.20), inset 0 -1px 2px rgba(255,255,255,.35);
  border:1px solid var(--edge);
}
.shaker-door-oak{
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.05) 0 1px, rgba(0,0,0,0) 1px 6px),
    var(--door);
}
.shaker-grid h3{
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}
.shaker-grid p{ margin:0; font-size:13px; line-height:1.65; }

.shaker-specs{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:52px;
}
.shaker-specs li{
  background:#fff;
  padding:20px 16px;
  text-align:center;
  font-family:"Poppins",sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--navy);
}

.shaker-video{
  display:grid;
  grid-template-columns:minmax(0,0.6fr) minmax(0,1.4fr);
  gap:46px;
  align-items:center;
}
.shaker-video-text h3{
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:16px;
}
.shaker-video-text .rule.left{ margin:0 0 20px; }

/* =========================================================
   COMMERCIAL CAPABILITY
   ========================================================= */
.capability-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;
}
.capability{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  padding:34px 26px 28px;
}
.capability-num{
  position:absolute;
  top:-1px; left:-1px;
  padding:6px 13px;
  background:var(--accent);
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
}
.capability h3{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.9px;
  margin:14px 0 12px;
}
.capability p{ margin:0; font-size:14px; }

/* =========================================================
   RESPONSIVE  (new blocks)
   ========================================================= */
@media (max-width:991px){
  .journey{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .build-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tech-grid{ grid-template-columns:1fr; }
  .adu-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .capability-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-layout{ grid-template-columns:1fr; gap:40px; }
  .shaker-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .shaker-specs{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .shaker-video{ grid-template-columns:1fr; gap:30px; }
  .shaker-video .video-frame{ width:min(340px,100%); margin:0 auto; }
  .pullquote blockquote p{ font-size:22px; }
  .about-split-flip .about-split-media,
  .about-split-flip .about-split-text{ order:0; }
}

@media (max-width:767px){
  .hero-box{ max-width:none; }
  .journey{ grid-template-columns:1fr; }
  .build-list{ grid-template-columns:1fr; }
  .icf-steps{ grid-template-columns:1fr; }
  .series-item{ grid-template-columns:1fr; gap:16px; }
  .series-mark{ width:110px; }
  .adu-benefits{ grid-template-columns:1fr; }
  .capability-grid{ grid-template-columns:1fr; }
  .shaker-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shaker-specs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-headline{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-table div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .plan-figure{ padding:16px 14px 12px; }
  .pullquote{ padding:48px 0 44px; }
  .pullquote blockquote p{ font-size:19px; }
}

/* Banner sem fotografia: usado nas paginas de servico para as quais nao temos
   ainda uma foto propria (roofing, siding). O overlay do banner ja e navy a 82%,
   entao um fundo navy solido e visualmente identico e nao mente sobre a obra. */
.page-banner-bg-plain{ background:var(--navy); }
.page-banner-bg-plain::after{ background:rgba(2,43,65,.35); }

/* Mobiliario fixo no diagrama da planta: bancada, geladeira, ilha. */
.plan-fit rect{ fill:#fff; stroke:var(--navy); stroke-width:1.2; }
.plan-glass-door line{ stroke:var(--accent-dark); }
.plan-sub text.tiny{ font-size:5.2px; letter-spacing:0; }

/* =========================================================
   CONCEPT  (renders do modelo de ADU)
   Render nao e foto de obra. O aviso vem ANTES das imagens e cada
   uma carrega a etiqueta, para ninguem confundir com trabalho entregue.
   ========================================================= */
.concept{ margin-bottom:52px; }
.concept-flag{
  padding:16px 20px;
  margin:0 0 22px;
  background:var(--accent-soft);
  border-left:4px solid var(--accent-dark);
  font-size:14px;
  line-height:1.7;
}
.concept-flag strong{ color:var(--navy); }
.concept-hero{ position:relative; margin:0 0 18px; overflow:hidden; background:var(--navy); }
.concept-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.concept-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.concept-row figure{ position:relative; margin:0; overflow:hidden; background:var(--navy); }
.concept-row img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.concept figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px 16px 14px;
  font-size:13px;
  line-height:1.55;
  color:#e7eef2;
  background:linear-gradient(to top, rgba(2,43,65,.94) 0%, rgba(2,43,65,.82) 50%, rgba(2,43,65,0) 100%);
}
.concept-chip{
  display:block;
  width:fit-content;
  margin-bottom:7px;
  padding:4px 10px;
  background:#fff;
  color:var(--navy);
  font-family:"Poppins",sans-serif;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
@media (max-width:767px){
  .concept-row{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .concept figcaption{ padding:34px 13px 12px; font-size:12.5px; }
}

/* =========================================================
   ASSEMBLY  (corte tecnico + legenda numerada)
   Recheia paginas de servico sem depender de fotografia: o desenho
   e nosso, e a legenda e texto de verdade, nao pixel.
   ========================================================= */
.assembly{ margin:0 0 34px; }
.asm-figure{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  padding:18px 18px 12px;
}
.asm-svg{ width:100%; height:auto; display:block; }
.asm-figure figcaption{
  margin-top:12px; padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px; font-style:italic; text-align:center;
}

/* camadas do corte */
/* cobre polygon (corte do telhado) e rect (corte da parede) */
.asm-hatch polygon,
.asm-hatch rect{ fill:#eef2f4; stroke:var(--navy); stroke-width:1.5; }
.asm-deck   { fill:#d8c6a8; stroke:var(--navy); stroke-width:1.5; }
.asm-shield { fill:#2b2b2b; stroke:var(--navy); stroke-width:1; }
.asm-under  { fill:var(--accent); stroke:var(--navy); stroke-width:1; }
.asm-shingle{ fill:var(--navy);   stroke:var(--navy); stroke-width:1.5; }
.asm-metal  { fill:#9aa7ad; stroke:var(--navy); stroke-width:1.2; }
.asm-vent   { fill:var(--accent-dark); stroke:var(--navy); stroke-width:1.2; }
.asm-wood   { fill:#d8c6a8; stroke:var(--navy); stroke-width:1.2; }
.asm-soffit { fill:#fff; stroke:var(--navy); stroke-width:1.2; }
.asm-baffle { fill:none; stroke:var(--accent-dark); stroke-width:2.4; stroke-dasharray:6 4; }
.asm-air    { fill:none; stroke:var(--accent-dark); stroke-width:2; stroke-linecap:round; }
.asm-lead path{ fill:none; stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3; }
.asm-num circle{ fill:var(--navy); }
.asm-num text{
  fill:#fff; text-anchor:middle;
  font-family:"Poppins",sans-serif; font-size:13px; font-weight:600;
}

/* legenda numerada: duas colunas sob o desenho.
   list-style:none porque a numeracao visivel vem dos <span>, senao o <ol>
   desenha um segundo numero ao lado. */
.asm-key{
  list-style:none;
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 34px;
}
.asm-key li{
  position:relative;
  padding:0 0 16px 46px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
  font-size:14px; line-height:1.7;
}
.asm-key li:last-child{ border-bottom:0; margin-bottom:0; }
.asm-key span{
  position:absolute; left:0; top:1px;
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff;
  font-family:"Poppins",sans-serif; font-size:13px; font-weight:600;
}
.asm-key strong{
  display:block;
  font-family:"Poppins",sans-serif; font-size:13.5px; font-weight:600;
  letter-spacing:.6px; text-transform:uppercase;
  color:var(--heading); margin-bottom:5px;
}

/* =========================================================
   STEPS  (como o servico corre, passo a passo)
   ========================================================= */
/* list-style:none: a numeracao vem do counter no ::before, senao o <ol>
   desenha um segundo numero ao lado. */
.steps{ list-style:none; counter-reset:step; margin:0 0 30px; }
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 14px 44px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:14.5px; line-height:1.75;
}
.steps li:last-child{ border-bottom:0; margin-bottom:0; }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:2px;
  font-family:"Poppins",sans-serif; font-size:13px; font-weight:600;
  letter-spacing:1px; color:var(--accent-dark);
}
.steps strong{ color:var(--heading); }

@media (max-width:767px){
  .asm-key{ grid-template-columns:minmax(0,1fr); }
}

.asm-tape     { fill:var(--accent); stroke:var(--navy); stroke-width:1; }
.asm-glass    { fill:#eaf1f4; stroke:var(--navy); stroke-width:1.5; }
.asm-roofline { fill:none; stroke:var(--navy); stroke-width:2.5; }
.asm-water    { fill:none; stroke:var(--accent-dark); stroke-width:2; stroke-linecap:round; }

.asm-zone text{
  fill:var(--ink-soft); text-anchor:middle;
  font-family:"Poppins",sans-serif; font-size:12px;
  font-weight:600; letter-spacing:1.6px;
}
.asm-zone path{ stroke:var(--line); stroke-width:1.5; fill:none; }

/* sequencia de flashing (windows and doors) */
.fl-wall  { fill:#f4f6f7; stroke:var(--line); stroke-width:1.5; }
.fl-open  { fill:#fff;    stroke:var(--navy); stroke-width:1.5; }
.fl-unit  { fill:#eaf1f4; stroke:var(--navy); stroke-width:1.5; }
.fl-flange{ fill:#9aa7ad; stroke:var(--navy); stroke-width:1; }
.fl-tape  { fill:var(--accent-dark); stroke:var(--navy); stroke-width:1; }
.fl-tape2 { fill:var(--accent);      stroke:var(--navy); stroke-width:1; }
.fl-dam   { fill:none; stroke:var(--navy); stroke-width:2.5; }
.fl-shim  { fill:none; stroke:var(--navy); stroke-width:2.5; stroke-linecap:round; }
.fl-wrap  { fill:none; stroke:var(--navy); stroke-width:2.5; stroke-dasharray:7 4; }
.fl-water { fill:none; stroke:var(--accent-dark); stroke-width:2; stroke-linecap:round; }
.fl-cap{
  fill:var(--ink-soft); text-anchor:middle;
  font-family:"Poppins",sans-serif; font-size:11px;
  font-weight:600; letter-spacing:1px;
}

/* grade de renders da pagina de ADU */
.concept-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:34px;
}
/* Nas miniaturas a legenda vai ABAIXO da imagem: sobreposta, o gradiente
   comia metade de um quadro deste tamanho. */
.concept-grid figure{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.concept-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.concept-grid figcaption{
  padding:12px 13px 14px;
  font-size:12.5px; line-height:1.5;
  color:var(--ink-soft);
}
.concept-grid .concept-chip{
  background:var(--navy); color:#fff;
  margin-bottom:7px;
}
@media (max-width:991px){ .concept-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px){ .concept-grid{ grid-template-columns:minmax(0,1fr); } }

/* render de cor na Shaker Collection */
.shaker-render{
  position:relative;
  margin:0 0 44px;
  overflow:hidden;
  background:var(--navy);
}
.shaker-render img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.shaker-render figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px 24px 20px;
  max-width:620px;
  font-size:13.5px; line-height:1.65; color:#e7eef2;
  background:linear-gradient(to top, rgba(2,43,65,.95) 0%, rgba(2,43,65,.82) 55%, rgba(2,43,65,0) 100%);
}
@media (max-width:767px){
  .shaker-render figcaption{ padding:44px 15px 15px; font-size:12.5px; }
}

/* =========================================================
   MODEL HOME  (casa modelo, a partir da prancha do cliente)
   ========================================================= */
.mh-phases{ position:relative; margin:0 0 26px; overflow:hidden; background:var(--navy); }
.mh-phases img{ width:100%; display:block; }
.mh-phase-labels{
  position:absolute; top:0; left:0; right:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  pointer-events:none;
}
.mh-phase-labels li{
  display:flex; align-items:center; gap:8px;
  justify-content:center;
  padding:10px 8px;
  background:rgba(2,43,65,.86);
  color:#fff;
  font-family:"Poppins",sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.22);
}
.mh-phase-labels li:last-child{ border-right:0; }
.mh-phase-labels span{ color:var(--accent); }
.mh-phases figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 20px 16px;
  font-size:13px; color:#e7eef2;
  background:linear-gradient(to top, rgba(2,43,65,.94) 0%, rgba(2,43,65,0) 100%);
}

/* numeros do modelo */
.mh-stats{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-bottom:38px;
}
.mh-stats span{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:20px 8px 16px; background:#fff;
  font-family:"Poppins",sans-serif; font-size:10px; font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft);
  text-align:center;
}
.mh-stats strong{ font-size:22px; font-weight:600; letter-spacing:.4px; color:var(--navy); }

/* tres colunas: jornada, planta, ambientes */
/* duas colunas desde que a de 'The journey' saiu: ela repetia a secao
   JOURNEY da mesma pagina, so que com render no lugar da foto real. */
.mh-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:34px; align-items:start; margin-bottom:44px;
}
.mh-h{
  font-size:14px; text-transform:uppercase; letter-spacing:1.4px;
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:2px solid var(--accent);
}
.mh-h-center{ text-align:center; border-bottom:0; margin-top:8px; }
.mh-sub{ text-align:center; font-size:14px; max-width:660px; margin:0 auto 26px; }

.mh-journey{ list-style:none; }
.mh-journey li{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px;
  align-items:start; padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.mh-journey li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.mh-journey img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.mh-journey strong{
  display:block; font-family:"Poppins",sans-serif; font-size:12.5px;
  font-weight:600; letter-spacing:.7px; text-transform:uppercase;
  color:var(--heading); margin-bottom:4px;
}
.mh-journey div{ font-size:13px; line-height:1.6; }

.mh-plan{ margin:0; background:#fff; border:1px solid var(--line); padding:16px; }
.mh-plan img{ width:100%; display:block; }
.mh-plan figcaption{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.6; font-style:italic;
}

.mh-rooms{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mh-rooms figure{ margin:0; background:#fff; border:1px solid var(--line); }
.mh-rooms img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.mh-rooms figcaption{ padding:8px 10px 10px; font-size:12px; }

/* prancha tecnica */
.mh-plans{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;
  margin-bottom:34px;
}
.mh-plans figure{ margin:0; background:#fff; border:1px solid var(--line); }
.mh-plans img{ width:100%; aspect-ratio:3/2; object-fit:contain; display:block; background:#fff; }
.mh-plans figcaption{
  padding:8px 8px 10px; text-align:center;
  font-family:"Poppins",sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.9px; text-transform:uppercase; color:var(--heading);
  border-top:1px solid var(--line);
}

.mh-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
  padding:24px 30px; background:var(--navy); color:#cfdbe2;
}
.mh-cta p{ margin:0; font-size:15px; }
.mh-cta strong{ color:#fff; }

@media (max-width:991px){
  .mh-grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .mh-plans{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mh-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mh-phase-labels li{ font-size:9.5px; letter-spacing:1px; padding:8px 4px; }
}
@media (max-width:575px){
  .mh-plans{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-journey li{ grid-template-columns:74px minmax(0,1fr); }
  .mh-phase-labels li span{ display:none; }
}

/* No telefone a faixa de tres fases vira 110px de altura e nao se le nada.
   Vira rolagem lateral com largura minima, as etiquetas sobrepostas saem e
   os nomes das fases passam a ser texto embaixo. */
@media (max-width:767px){
  .mh-phases{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mh-phases img{ min-width:720px; }
  .mh-phase-labels{ display:none; }
  .mh-phases figcaption{
    position:static; padding:14px 16px; background:var(--navy);
    font-size:12.5px;
  }
  .mh-phases figcaption .concept-chip{ margin-bottom:8px; }
  .mh-scroll-hint{ display:block; }
}
.mh-scroll-hint{
  display:none;
  margin:-18px 0 26px;
  font-size:12px; font-style:italic; color:var(--ink-soft);
  text-align:center;
}

/* =========================================================
   ADU na home
   ========================================================= */
.adu-home{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:34px; align-items:start; margin-bottom:22px;
}
.adu-home-hero{ position:relative; margin:0; overflow:hidden; background:var(--navy); }
.adu-home-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.adu-home-hero figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:52px 20px 18px; font-size:13.5px; color:#e7eef2;
  background:linear-gradient(to top, rgba(2,43,65,.95) 0%, rgba(2,43,65,0) 100%);
}
.adu-home-points{ margin-bottom:26px; }
.adu-home-points li{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px;
  align-items:start; padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.adu-home-points li:last-child{ border-bottom:0; }
.adu-home-ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--accent-soft); color:var(--navy);
}
.adu-home-ico .ico{ width:20px; height:20px; }
.adu-home-points strong{
  display:block; font-family:"Poppins",sans-serif; font-size:13.5px;
  font-weight:600; letter-spacing:.5px; color:var(--heading); margin-bottom:5px;
}
.adu-home-points div{ font-size:14px; line-height:1.7; }

.adu-home-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.adu-home-row figure{
  margin:0; background:#fff; border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.adu-home-row img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.adu-home-row figcaption{ padding:12px 13px 14px; font-size:12.5px; color:var(--ink-soft); }
.adu-home-row .concept-chip{ background:var(--navy); color:#fff; margin-bottom:7px; }

@media (max-width:991px){
  .adu-home{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .adu-home-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575px){
  .adu-home-row{ grid-template-columns:minmax(0,1fr); }
}