/* ============================================================
   KARBA Factory — page-specific styles (About, Contact)
   Extracted from the approved about.html / contact.html mockups.
   ============================================================ */

/* ---- header variant: transparent but over a LIGHT background (About split).
   Keep the logo light (it sits on the dark image half); darken nav/lang/burger. ---- */
header.on-light:not(.scrolled) nav.main a{color:var(--ink-70)}
header.on-light:not(.scrolled) nav.main a:hover,
header.on-light:not(.scrolled) nav.main a.current{color:var(--ink)}
header.on-light:not(.scrolled) .lang button{color:var(--ink-50)}
header.on-light:not(.scrolled) .lang button.on{color:var(--ink)}
header.on-light:not(.scrolled) .lang span{color:var(--line)}
header.on-light:not(.scrolled) .burger span{background:var(--ink)}

/* ---- ABOUT: full-bleed split — image left (full height), text right ---- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.split .media{position:relative;overflow:hidden;background:var(--forest)}
.split .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .content{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,7rem);padding-top:calc(var(--hd) + 1.5rem)}
.split .content .eyebrow{color:var(--bronze)}
.split .content h1{font-weight:300;font-size:clamp(2.4rem,4vw,3.7rem);letter-spacing:-.025em;line-height:1.02;margin:.7rem 0 1.6rem}
.split .content p{color:var(--ink-70);margin-bottom:1.1rem;max-width:46ch}
.split .content .link-cut{margin-top:.9rem}
/* ---- BRAND CHARACTER — "the mix, as a composition" (replaces image strip) ---- */
/* light section on the body cream; bronze->olive->forest ramp reads on cream and
   keeps the three parts within the brand palette (one identity, three proportions) */
.about-arch{--seg-1:var(--bronze);--seg-2:var(--olive);--seg-3:var(--forest);background:var(--cream-2);color:var(--ink);border-top:1px solid var(--line-soft)}
.about-arch .wrap{padding-block:clamp(3.2rem,7vw,6rem)}
.aa-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.about-arch .eyebrow{display:block;color:var(--bronze);margin-bottom:1.3rem}
.aa-statement{font-weight:300;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.28;letter-spacing:-.015em;color:var(--ink);max-width:20ch}

/* the fabricated bar: proportions like a material spec */
.comp-bar{display:flex;gap:5px;height:12px;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.comp-seg{display:block;height:100%;min-width:3px}
.comp-seg.c1{background:var(--seg-1)}
.comp-seg.c2{background:var(--seg-2)}
.comp-seg.c3{background:var(--seg-3)}

.comp-legend{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem)}
.comp-item{position:relative;padding-top:1.05rem;border-top:1px solid var(--line)}
/* colored tick ties each item back to its bar segment */
.comp-item::before{content:"";position:absolute;top:-1px;left:0;width:2.4rem;height:2px}
.comp-item.c1::before{background:var(--seg-1)}
.comp-item.c2::before{background:var(--seg-2)}
.comp-item.c3::before{background:var(--seg-3)}
.comp-item .pct{font-weight:300;font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.comp-item .pct i{font-style:normal;font-size:.4em;color:var(--ink-50);margin-left:.12em;vertical-align:.35em}
.comp-item .nm{display:block;font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin:.7rem 0 .55rem}
.comp-item .ds{display:block;font-size:.92rem;line-height:1.5;color:var(--ink-70);max-width:24ch}

@media(max-width:820px){
  .split{grid-template-columns:1fr;min-height:0}
  .split .media{height:56vh}
  .split .content{padding:clamp(2.5rem,8vw,3.5rem)}
  .aa-grid{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,2.6rem);align-items:start}
  .aa-statement{max-width:34ch}
}
@media(max-width:520px){
  .comp-legend{grid-template-columns:1fr;gap:0}
  .comp-item{padding:1rem 0}
  .comp-item + .comp-item{border-top:1px solid var(--line)}
}

/* ---- CONTACT ---- */
.ct-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:start}
.ct-form h2{font-weight:300;font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.02em;margin-bottom:.4rem}
.ct-form .sub{color:var(--ink-70);margin-bottom:1.6rem;max-width:42ch}
.ct-form .btn{width:100%;justify-content:center;margin-top:.4rem}
.assure{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);text-align:center;margin-top:.9rem}
.ct-info .blk{margin-bottom:1.9rem}
.ct-info h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-bottom:.8rem}
.ct-info a,.ct-info p{display:block;margin-bottom:.4rem}
.ct-info .big a,.ct-info .big{font-size:1.08rem}
.ct-info a:hover{color:var(--bronze)}
.hours .r{display:flex;justify-content:space-between;max-width:280px;font-size:.95rem;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.hours .r span:last-child{color:var(--ink-70)}
.msgr-note{font-size:.9rem;color:var(--ink-70);margin-bottom:.9rem;max-width:38ch}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:.5rem .8rem;transition:.25s}
.socials a:hover{border-color:var(--ink);color:var(--ink)}
.map-wrap{padding-bottom:var(--sec-y)}
.map{position:relative;aspect-ratio:21/8}
.map .go{position:absolute;right:1rem;bottom:1rem;z-index:3}
@media(max-width:820px){.ct-grid{grid-template-columns:1fr}.map{aspect-ratio:4/3}}
/* tighten the contact banner: no big empty gap above the heading */
.page-hero.contact-hero{min-height:auto;padding-top:calc(var(--hd) + clamp(2rem,4vw,3.2rem));padding-bottom:clamp(2rem,4vw,3.2rem)}
/* project detail hero — center the crumb + title block vertically (symmetric
   padding clears the fixed transparent header so the block reads as centered) */
.page-hero.project-hero{justify-content:center;padding-top:calc(var(--hd) + clamp(2rem,4vw,3.4rem))}
/* the default scrim is lightest at its middle (text used to sit at the bottom);
   with the block now centered, darken the middle so the title stays legible */
.page-hero.project-hero .scrim{background:linear-gradient(180deg,rgba(2,3,2,.66),rgba(2,3,2,.6) 50%,rgba(2,3,2,.72))}
/* soft shadow keeps the title legible even over bright spots in the photo,
   so the overlay itself can stay light and image-forward */
.page-hero.project-hero .crumb,.page-hero.project-hero h1,.page-hero.project-hero .lead{text-shadow:0 1px 24px rgba(2,3,2,.45)}

/* ---- SERVICES catalogue (archive) — image-forward gallery ---- */
.cat-head{padding-top:calc(var(--hd) + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(1.5rem,3vw,2.5rem);text-align:center}
.cat-head h1{font-weight:300;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.025em;line-height:1}
.cat-head .lead{max-width:44ch;margin:1.1rem auto 0;color:var(--ink-70);font-size:1.05rem}
.filter{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem 1.5rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.chip{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .1rem;border:none;border-bottom:1.5px solid transparent;background:transparent;color:var(--ink-50);cursor:pointer;transition:color .3s,border-color .3s}
.chip:hover{color:var(--ink)}
.chip.on{color:var(--ink);border-bottom-color:var(--bronze)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3.5vw,3.2rem) clamp(1.4rem,2.5vw,2rem);padding-bottom:var(--sec-y)}
.cat-grid .card{display:flex;flex-direction:column;gap:.7rem}
.cat-grid .card .ph{aspect-ratio:3/4;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cat-grid .card:hover .ph{transform:scale(1.015)}
.cat-grid .card .cattag{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-50)}
.cat-grid .card h3{font-size:1.1rem;font-weight:400;letter-spacing:-.01em}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.cat-grid{grid-template-columns:1fr}}

/* ---- SERVICE single (detail) ---- */
.svc-single{padding-top:calc(var(--hd) + clamp(2rem,4vw,3.2rem))}
.svc-single .crumb{color:var(--ink-50);margin-bottom:1.6rem}
.svc-single .crumb a:hover{color:var(--ink)}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.svc-media{aspect-ratio:4/5}
.svc-body .eyebrow{color:var(--bronze)}
.svc-body h1{font-weight:300;font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.025em;line-height:1.02;margin:.6rem 0 1.4rem}
.svc-copy{color:var(--ink-70);margin-bottom:1.3rem}
.svc-copy p{margin-bottom:1rem}
.svc-body .mat{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-bottom:1.6rem}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}.svc-media{aspect-ratio:16/10}}

/* ---- brand logo lockup (karba full lockup; recolours by header state) ---- */
.logo-full{height:56px;width:auto;display:block;fill:var(--ink)}
header .logo-full{fill:var(--cream);transition:fill .45s ease}
header.scrolled .logo-full,header.solid .logo-full{fill:var(--ink)}
.foot-brand .logo-full{height:74px;fill:var(--cream);margin-bottom:1.1rem}
@media(max-width:640px){.logo-full{height:46px}.foot-brand .logo-full{height:60px}}

/* ---- Request-a-quote box (Fluent Forms, styled to match the mockup) ---- */
.rfq-box{background:var(--cream-2);border:1px solid var(--line);padding:clamp(1.3rem,2.5vw,1.8rem);margin-top:1.8rem}
.rfq-box h3{font-weight:500;font-size:1.15rem;margin-bottom:.3rem}
.rfq-box .sub{font-size:.9rem;color:var(--ink-70);margin-bottom:1.2rem}
/* Fluent Forms element overrides (scoped to the quote box) */
.rfq-box .fluentform .ff-el-group{margin-bottom:.85rem}
.rfq-box .fluentform .ff-el-input--label label,
.rfq-box .fluentform label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:.35rem;padding:0}
.rfq-box .fluentform .ff-el-input--label label .ff-el-is-required{color:var(--bronze)}
.rfq-box .fluentform input.ff-el-form-control,
.rfq-box .fluentform select.ff-el-form-control,
.rfq-box .fluentform textarea.ff-el-form-control{width:100%;background:var(--cream);border:1px solid var(--line);padding:.8rem .9rem;font:inherit;font-size:.95rem;color:var(--ink);border-radius:0;box-shadow:none;height:auto}
.rfq-box .fluentform input.ff-el-form-control:focus,
.rfq-box .fluentform select.ff-el-form-control:focus,
.rfq-box .fluentform textarea.ff-el-form-control:focus{outline:2px solid var(--bronze);outline-offset:1px;border-color:transparent}
.rfq-box .fluentform textarea.ff-el-form-control{resize:vertical}
.rfq-box .fluentform .ff-el-group.ff_submit_btn_wrapper,
.rfq-box .fluentform .ff-t-container{margin-top:.4rem}
.rfq-box .fluentform .ff-btn-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1.5rem;border:1.5px solid var(--ink);background:var(--ink);color:var(--cream);cursor:pointer;border-radius:0;
  transition:background .35s ease,border-color .35s ease}
.rfq-box .fluentform .ff-btn-submit:hover{background:var(--bronze);border-color:var(--bronze)}
.rfq-box .fluentform .ff-message-success{background:var(--cream);border:1px solid var(--line);padding:1rem;color:var(--ink);font-size:.95rem}
.rfq-box .fluentform .error,.rfq-box .fluentform .text-danger{color:var(--bronze);font-size:.8rem}