/* Service pages (window, wall, vehicle, channel letters) in EN / PT / ES + estimate calculator.
   Builds on css/site.css (same tokens, buttons, header, footer). */

.langs{margin-left:auto;display:flex;align-items:center;gap:4px;font-weight:700}
.langs a{color:#D9D9DC;text-decoration:none;padding:4px 6px}
.langs a:hover{color:var(--yellow)}
.langs a[aria-current="true"]{color:var(--yellow)}
.langs span{color:#5a5a5f}

.crumbs{background:var(--paper);font-size:14px}
.crumbs ol{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;gap:6px;color:var(--ink-2)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#9a9aa0}
.crumbs a{text-decoration:none;color:var(--ink)}
.crumbs a:hover{color:var(--gold-ink)}

.sp-hero{position:relative;color:var(--white);background:var(--black);overflow:hidden}
.sp-hero picture,.sp-hero img.bg{position:absolute;inset:0;width:100%;height:100%}
.sp-hero img.bg{object-fit:cover;opacity:.55}
.sp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.7) 45%,rgba(10,10,11,.15) 100%)}
.sp-hero .wrap{position:relative;z-index:1;padding-block:110px 100px}
.sp-hero h1{font-size:clamp(46px,6.4vw,96px);max-width:12ch}
.sp-hero .lede{margin-top:22px;max-width:40em;font-size:20px;color:#E8E8EA}
.sp-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.sp-intro .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.sp-intro h2,.sp-h2{font-size:clamp(38px,4.4vw,64px);margin-bottom:24px;max-width:16ch}
.sp-intro p+p{margin-top:16px}
.sp-intro p{font-size:18px;color:var(--ink-2);max-width:40em}
.sp-intro figure{margin:0}
.sp-intro figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sp-lead{font-size:19px;color:var(--ink-2);max-width:44em;margin:-8px 0 40px}

.sp-ben{background:var(--paper)}
.ben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line)}
.ben div{background:var(--white);padding:32px 28px}
.ben h3{font-size:28px;margin-bottom:12px}
.ben h3::before{content:"";display:block;width:36px;height:6px;background:var(--yellow);margin-bottom:18px}
.ben p{color:var(--ink-2)}

.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.opts div{border:2px solid var(--black);padding:28px}
.opts h3{font-size:30px;margin-bottom:12px}
.opts p{color:var(--ink-2)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:s}
.steps li{counter-increment:s;border-top:6px solid var(--black);padding-top:18px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:900 54px/1 var(--head);color:var(--yellow);-webkit-text-stroke:1.5px var(--black);margin-bottom:12px}
.steps h3{font-size:24px;margin-bottom:8px}
.steps p{color:var(--ink-2);font-size:16px}

.sp-work{background:var(--black);color:var(--white)}
.sp-work .sp-h2{color:var(--white)}
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf button{position:relative;display:block;padding:0;border:0;background:#222;cursor:zoom-in;aspect-ratio:1;overflow:hidden}
.pf img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pf button:hover img{transform:scale(1.05)}
.pf span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:var(--white);font-weight:600;font-size:15px;text-align:left}
.pf-note{margin-top:18px;color:#A4A4AA;font-size:14px}

.faq{max-width:920px}
.faq details{border-bottom:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font:800 24px/1.15 var(--head);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font:800 34px/1 var(--head);color:var(--gold-ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:60em}

.sp-area{background:var(--paper)}
.sp-area .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.sp-area p{font-size:18px;color:var(--ink-2)}
.sp-more{display:grid;gap:10px}
.sp-more a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;background:var(--white);text-decoration:none;font:800 24px/1 var(--head);text-transform:uppercase;transition:background .2s}
.sp-more a:hover{background:var(--yellow)}
.sp-more svg{width:20px;height:20px;flex:none}

/* ---------- estimate calculator ---------- */
.calc{background:var(--black);color:var(--white)}
.calc .sp-h2{color:var(--white)}
.calc .sp-lead{color:#C9C9CD}
.cbox2{background:var(--white);color:var(--ink);padding:36px;display:grid;gap:28px}
.cbox2 h3{font-size:28px}
.cbox2 .hint{font-size:15px;color:var(--ink-2);margin-top:6px}
.rows{display:grid;gap:12px}
.mrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 112px 80px minmax(0,1.8fr) 96px 44px;gap:10px;align-items:end;padding:14px;background:var(--paper)}
.mrow label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:var(--ink-2)}
.mrow input,.mrow select,.cbox2 .f input,.cbox2 .f select,.cbox2 .f textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--line);border-radius:0;background:var(--white);font:500 16px var(--body);color:var(--ink)}
.mrow input:focus,.mrow select:focus{outline:none;border-color:var(--black)}
.mrow .sq{font:800 22px/48px var(--head);text-align:right;white-space:nowrap}
.mrow .sq small{font:600 13px var(--body);color:var(--ink-2)}
.mrow .rm{width:44px;height:48px;border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.mrow .rm:hover{color:#B3261E}
.mrow .rm svg{width:18px;height:18px}
.mrow.bad{box-shadow:inset 4px 0 0 #B3261E}
.calc-total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border:2px solid var(--black)}
.calc-total b{font:900 34px/1 var(--head)}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.cgrid .full{grid-column:1/-1}
.cbox2 .f label{font-weight:700;font-size:15px}
.cbox2 .f textarea{min-height:96px}
.chk{display:flex;gap:12px;align-items:flex-start;font-weight:600;cursor:pointer}
.chk input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--black)}
.drop{position:relative;border:2px dashed #b9b7b2;padding:20px;text-align:center;background:var(--paper);cursor:pointer}
.drop.over{border-color:var(--black);background:#fff8e6}
.cbox2 .drop input{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none}
.flist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;text-align:left}
.flist li{display:flex;justify-content:space-between;gap:10px;background:var(--white);padding:8px 12px;font-size:15px}
.flist button{border:0;background:none;color:#B3261E;font-weight:700;cursor:pointer}
.req-note{font-size:14px;color:var(--ink-2)}
.c-err{background:#FDECEA;color:#8C1D18;padding:14px 16px;font-weight:600}
.c-res{border:3px solid var(--yellow);padding:28px;background:#FFFBF1}
.c-res h3{font-size:34px}
.c-res table{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
.c-res td{padding:8px 0;border-bottom:1px solid var(--line)}
.c-res td:last-child{text-align:right;font-weight:700}
.c-res .sub{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 0 4px}
.c-res .sub b{font:900 clamp(44px,5vw,64px)/1 var(--head)}
.c-res .disc{font-size:15px;color:var(--ink-2);margin-top:10px}
.c-res .next{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}

/* quote form on vehicle and channel pages */
.sp-quote form{background:var(--paper)}

@media (max-width:1100px){
  .sp-intro .wrap,.sp-area .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .sp-intro figure img{aspect-ratio:16/10}
  .ben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .mrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 80px;}
  .mrow .c-label{grid-column:1/-1}
  .mrow .c-mat{grid-column:1/3}
  .mrow .c-sq{grid-column:3/4}
}
@media (max-width:680px){
  .langs{gap:0;font-size:13px}
  .langs a{padding:4px}
  .sp-hero .wrap{padding-block:64px 72px}
  .sp-hero h1{font-size:46px}
  .sp-hero .lede{font-size:17px}
  .sp-hero .ctas .btn{flex:1 1 100%}
  .ben{grid-template-columns:minmax(0,1fr)}
  .ben div{padding:24px 20px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .pf{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .pf span{display:none}
  .faq summary{font-size:20px}
  .cbox2{padding:18px;gap:22px}
  .mrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px}
  .mrow .c-label,.mrow .c-mat{grid-column:1/-1}
  .mrow .c-sq{grid-column:1/2}
  .mrow .rm{justify-self:end}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .sp-more a{font-size:20px;padding:16px}
}
.cbox2 form{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;background:none;padding:0}
.cbox2 form h3{grid-column:auto}

/* PT / ES home pages */
.hcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hcard{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--black);color:var(--white);text-decoration:none}
.hcard img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform .5s var(--ease),opacity .3s}
.hcard:hover img{transform:scale(1.05);opacity:.6}
.hcard span{position:absolute;left:0;right:0;bottom:0;padding:22px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:grid;gap:4px}
.hcard b{font:800 28px/1 var(--head);text-transform:uppercase}
.hcard small{font-size:14px;color:var(--yellow);font-weight:700}
.hothers{margin-top:36px;padding:28px;background:var(--paper)}
.hothers h3{font-size:26px;margin-bottom:14px}
.hothers ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.hothers li{padding-left:18px;position:relative}
.hothers li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;background:var(--yellow)}
.ben.ben4{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){ .hcards{grid-template-columns:repeat(2,minmax(0,1fr))} .ben.ben4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .hcards{gap:6px} .hcard b{font-size:20px} .hcard small{display:none} .hothers ul{grid-template-columns:minmax(0,1fr)} .ben.ben4,.steps.steps3{grid-template-columns:minmax(0,1fr)} }