/* ProMaster Group of Companies · group site
 * Concept (from research: Concrete's audience gate, Intrum's split paths): the home page is a gate with one panel per company.
 * Photography: Unsplash (free licence), placeholder imagery for design review.
 * Links to the two company sites are relative so they work from this folder; replace with the final domains when they exist. */
:root{
  --paper:oklch(96.2% .012 85);--surface:oklch(98.6% .006 85);--paper-2:oklch(92.6% .016 85);
  --rule:oklch(85% .018 85);--rule-2:oklch(68% .022 80);
  --muted:oklch(46% .025 75);--neutral:oklch(36% .03 255);--ink:oklch(23% .05 255);
  --night:oklch(15% .02 265);--on-night:oklch(96% .008 240);
  --brass:oklch(76% .17 50);--solid:oklch(23% .05 255);--on-solid:oklch(96% .008 240);--deep:oklch(23% .05 255);--bar-light:oklch(98% .006 85 / .92);--teal:oklch(50% .10 205);--teal-l:oklch(72% .09 200);
  --font-display:"Newsreader","Tiempos Headline",ui-serif,Georgia,serif;--font-body:"Geist","Inter",ui-sans-serif,system-ui,sans-serif;--font-label:"Geist Mono",ui-monospace,monospace;
  --text-xs:.8125rem;--text-sm:.9375rem;--text-base:1.0625rem;--text-lg:1.25rem;--text-xl:1.625rem;--text-2xl:2.25rem;
  --text-hero:clamp(2.75rem,5.4vw,6.5rem);--text-display:clamp(2.25rem,4.2vw + 1rem,4.75rem);
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:112px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-fast:160ms;--dur-base:320ms;--dur-slow:1200ms;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--neutral);font:400 var(--text-base)/1.65 var(--font-body)}
a{color:inherit;text-decoration:none}p{margin:0}img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-display);font-weight:300;letter-spacing:-.03em;line-height:1;margin:0;color:var(--ink);overflow-wrap:anywhere;min-width:0;text-wrap:balance}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:max(var(--space-lg),4vw)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.lab{font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-block;white-space:nowrap;font:600 var(--text-sm)/1 var(--font-body);padding:var(--space-md) var(--space-lg);border-radius:999px;border:0;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}

/* intro */
.loader{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-content:center;justify-items:center;gap:var(--space-lg);animation:out .8s 1.4s var(--ease-out) forwards}
.loader b{font:400 var(--text-2xl)/1 var(--font-display);color:var(--ink);letter-spacing:-.03em}
.loader i{display:block;width:220px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.loader i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--brass),var(--teal));transform:scaleX(0);transform-origin:left;animation:ldr 1.2s var(--ease-in-out) forwards}
@keyframes ldr{to{transform:scaleX(1)}}@keyframes out{to{opacity:0;visibility:hidden}}

/* top bar */
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;justify-content:center;padding:var(--space-lg) var(--space-md);pointer-events:none}
.bar a{pointer-events:auto;font:400 var(--text-xl)/1 var(--font-display);color:var(--on-night);letter-spacing:-.02em;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-radius:999px;background:oklch(15% .02 265 / .45);backdrop-filter:blur(12px);border:1px solid oklch(100% 0 0 / .2)}
.bar svg{width:24px;height:24px}
.bar a{transition:background-color var(--dur-base),color var(--dur-base),border-color var(--dur-base)}

/* gate */
.gate{display:flex;min-height:max(620px,100svh);isolation:isolate}
.panel{position:relative;flex:1 1 0;display:flex;align-items:flex-end;overflow:hidden;color:var(--on-night);transition:flex-grow .9s var(--ease-out);min-width:0}
.panel:hover,.panel:focus-within{flex-grow:1.35}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);animation:zoom 16s var(--ease-out) .2s both}
@keyframes zoom{from{transform:scale(1.16)}to{transform:scale(1.02)}}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,oklch(10% .02 265 / .92),oklch(10% .02 265 / .35) 60%,oklch(10% .02 265 / .5))}
.panel+.panel{border-left:1px solid oklch(100% 0 0 / .35)}
.gin{padding:var(--space-2xl) clamp(var(--space-lg),4vw,var(--space-2xl)) var(--space-2xl);display:grid;gap:var(--space-lg);justify-items:start;max-width:640px}
.panel .lab{color:var(--on-night);opacity:.85;display:flex;align-items:center;gap:var(--space-sm)}
.panel .lab::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dot)}
.panel h2{font-size:var(--text-hero);color:var(--on-night)}
.panel p{max-width:36ch;font-size:var(--text-lg);line-height:1.5;opacity:.92}
.go{display:inline-flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:999px;background:var(--on-night);color:var(--deep);font:600 var(--text-sm)/1 var(--font-body);transition:gap var(--dur-base) var(--ease-out),background-color var(--dur-fast)}
.go svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out)}
.panel:hover .go svg,.go:focus-visible svg{transform:translateX(4px)}
.go:hover{background:var(--dot)}
.rise{animation:rise var(--dur-slow) var(--ease-out) both;animation-delay:calc(var(--n,0)*130ms + 1.5s)}
@keyframes rise{from{opacity:.001;transform:translateY(20px)}}
@media(max-width:860px){.gate{flex-direction:column;min-height:0}.panel{min-height:78svh}.panel:hover{flex-grow:1}.panel+.panel{border-left:0;border-top:1px solid oklch(100% 0 0 / .35)}.gin{padding-top:120px}}

/* statement */
@media(max-width:760px){.proof{grid-template-columns:minmax(0,1fr)}.proof div,.proof div+div{padding:var(--space-lg) 0;border-left:0}.proof div+div{border-top:1px solid var(--rule)}}

/* two companies (detail) */
@media(max-width:860px){.duo-g{grid-template-columns:minmax(0,1fr)}}

/* leadership */
.ppl{background:var(--paper-2);border-block:1px solid var(--rule);padding-block:var(--space-3xl)}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:end;margin-bottom:var(--space-2xl)}
.sh h2{font-size:var(--text-display);max-width:12ch}
.sh p{font-size:var(--text-lg);line-height:1.55;max-width:42ch}
@media(max-width:800px){.sh{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
@media(max-width:760px){.pc{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:var(--space-xl);display:flex;gap:var(--space-lg);align-items:flex-start}
.av{flex:none;width:84px;height:84px;border-radius:50%;background:var(--solid);color:var(--on-solid);display:grid;place-items:center;font:400 var(--text-xl)/1 var(--font-display)}
.card h3{font-size:var(--text-2xl);margin-block:var(--space-xs) var(--space-md)}
@media(max-width:480px){.card{flex-direction:column}}

/* contact */
.contact{background:var(--night);color:var(--on-night);padding-block:var(--space-3xl)}
.contact h2{color:var(--on-night);font-size:var(--text-display);max-width:11ch;margin-bottom:var(--space-lg)}
.contact .lede{max-width:40ch;margin-bottom:var(--space-xl);font-size:var(--text-lg);line-height:1.55;opacity:.85}
.cg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl);align-items:start}
@media(max-width:860px){.cg{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}}
.cinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
.ci{background:oklch(100% 0 0 / .07);border:1px solid oklch(100% 0 0 / .14);border-radius:12px;padding:var(--space-lg);min-width:0}
.ci.wide{grid-column:1/-1}
.ci b{display:block;font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--space-xs)}
.ci span{display:block;overflow-wrap:anywhere}
@media(max-width:520px){.cinfo{grid-template-columns:minmax(0,1fr)}}
form{display:grid;gap:var(--space-lg);background:var(--surface);color:var(--neutral);border-radius:12px;padding:var(--space-xl)}
label{display:grid;gap:var(--space-sm)}
input,textarea{font:400 var(--text-base)/1.4 var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:8px;padding:var(--space-md);width:100%}
input:hover,textarea:hover{border-color:var(--ink)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
textarea{min-height:120px;resize:vertical}
form .btn{justify-self:start;background:var(--solid);color:var(--on-solid)}form .btn:hover{background:var(--teal)}
.ok{font-size:var(--text-sm);color:var(--teal);font-weight:500}
footer{background:var(--night);color:oklch(80% .02 245);border-top:1px solid oklch(100% 0 0 / .12);padding-block:var(--space-lg);font-size:var(--text-sm)}
footer .wrap{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
footer a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-base)}footer a:hover{background-size:100% 1px}
.note{position:fixed;right:var(--space-md);bottom:var(--space-md);z-index:40;max-width:calc(100vw - 32px);background:oklch(15% .02 265 / .9);backdrop-filter:blur(10px);color:var(--on-night);font:500 var(--text-xs)/1.4 var(--font-label);padding:var(--space-sm) var(--space-md);border-radius:999px;border:1px solid oklch(100% 0 0 / .2)}
.reveal{opacity:.001;transform:translateY(28px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.loader{display:none}.panel img{transform:none}}

/* ---- refined lower sections ---- */
.about{padding-block:var(--space-3xl) var(--space-2xl)}
.ab-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-2xl);align-items:start}
.ab-h h2{font-size:var(--text-display);margin-top:var(--space-md);max-width:11ch}
.ab-t .lead{font:300 clamp(1.5rem,1.6vw + 1rem,2.1rem)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--space-lg)}
.ab-t p{margin-bottom:var(--space-md);max-width:60ch}
@media(max-width:900px){.ab-g{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}}
.glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--space-3xl) 0 0;border-top:1px solid var(--ink)}
.glance div{padding:var(--space-lg) var(--space-lg) 0 0;min-width:0}
.glance div+div{padding-left:var(--space-lg);border-left:1px solid var(--rule)}
.glance dt{font:300 var(--text-display)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.glance dd{margin:var(--space-sm) 0 0;font-size:var(--text-sm);color:var(--muted);max-width:24ch}
@media(max-width:860px){.glance{grid-template-columns:repeat(2,minmax(0,1fr))}.glance div:nth-child(3){padding-left:0;border-left:0}.glance div:nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--space-lg)}}
.cos{padding-block:var(--space-2xl) var(--space-3xl)}
.sh{display:block;margin-bottom:var(--space-2xl)}
.sh h2{font-size:var(--text-display);margin-top:var(--space-md);max-width:14ch}
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-bottom:var(--space-md)}
.prof.rev .pf{order:2}
.pf{margin:0;min-height:420px;position:relative;background:var(--paper-2)}
.pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.prof:hover .pf img{transform:scale(1.04)}
.pf{overflow:hidden}
.pt{padding:var(--space-2xl);display:grid;gap:var(--space-md);align-content:center;justify-items:start}
.pt .lab{display:flex;align-items:center;gap:var(--space-sm)}.pt .lab i{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.pt h3{font-size:var(--text-display)}
.pt p{max-width:44ch}
ul.two{list-style:none;margin:var(--space-sm) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-xl);width:100%;border-top:1px solid var(--rule)}
ul.two li{padding-block:var(--space-sm);border-bottom:1px solid var(--rule);color:var(--ink);font-size:var(--text-sm)}
.pt .btn{background:var(--solid);color:var(--on-solid)}.pt .btn:hover{background:var(--dot)}
@media(max-width:900px){.prof{grid-template-columns:minmax(0,1fr)}.prof.rev .pf{order:0}.pf{min-height:280px}.pt{padding:var(--space-xl)}ul.two{grid-template-columns:minmax(0,1fr)}}
.cred{background:var(--paper-2);border-block:1px solid var(--rule);padding-block:var(--space-3xl)}
.cg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
@media(max-width:860px){.cg3{grid-template-columns:minmax(0,1fr)}}
.cr{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:var(--space-xl);display:grid;gap:var(--space-md);align-content:start}
.cr b{font:400 var(--text-2xl)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.cr p{font-size:var(--text-sm)}
.cr .lab{margin-top:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--rule)}
.ppl{background:var(--paper);border:0;padding-block:var(--space-3xl)}
.card h3{font-weight:400}
select{font:400 var(--text-base)/1.4 var(--font-body);color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);border-radius:8px;padding:var(--space-md);width:100%}
select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
footer{padding-block:var(--space-2xl) var(--space-lg)}
footer .fg{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid oklch(100% 0 0 / .14)}
footer .fb b{display:block;font:400 var(--text-xl)/1 var(--font-display);letter-spacing:-.02em;color:var(--on-night);margin-bottom:var(--space-md)}
footer h4,footer h2{margin:0 0 var(--space-md);font:500 var(--text-xs)/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}
footer .fl{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;padding-top:var(--space-lg)}
@media(max-width:760px){footer .fg{grid-template-columns:minmax(0,1fr)}}

/* ---- group layer: navigation, gate headline, facts strip ---- */
.bar nav{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:oklch(15% .02 265 / .45);backdrop-filter:blur(14px);border:1px solid oklch(100% 0 0 / .2);color:var(--on-night);transition:background-color var(--dur-base),color var(--dur-base),border-color var(--dur-base)}
.bar a{all:unset;cursor:pointer}
.bar .bl{white-space:nowrap;display:flex;align-items:center;gap:10px;font:400 var(--text-lg)/1 var(--font-display);letter-spacing:-.02em;padding:8px 14px}
.bar .bl svg{width:22px;height:22px}
.bar ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;font:500 var(--text-sm)/1 var(--font-body)}
.bar ul a{display:block;padding:10px 13px;border-radius:999px;opacity:.88;transition:background-color var(--dur-fast),opacity var(--dur-fast)}
.bar ul a:hover{opacity:1;background:oklch(100% 0 0 / .12)}
.bar .bc{white-space:nowrap;font:600 var(--text-sm)/1 var(--font-body);padding:11px 16px;border-radius:999px;background:var(--on-night);color:var(--deep);transition:background-color var(--dur-fast)}
.bar .bc:hover{background:var(--brass)}
.bar.light nav{background:var(--bar-light);color:var(--ink);border-color:var(--rule)}
.bar.light ul a:hover{background:var(--paper-2)}
.bar.light .bc{background:var(--solid);color:var(--on-solid)}
@media(max-width:1000px){.bar ul{display:none}}
.gate{position:relative}
.g-head{position:absolute;z-index:3;left:0;right:0;top:0;padding:clamp(96px,12svh,132px) var(--space-lg) 0;text-align:center;pointer-events:none;color:var(--on-night)}
.g-head::before{content:"";position:absolute;inset:0 0 -60px;z-index:-1;background:linear-gradient(oklch(10% .02 265 / .7),transparent)}
.g-head .lab{color:var(--on-night);opacity:.8}
.g-head h1{font-size:clamp(2.1rem,min(3.8vw,6.4svh),4rem);color:var(--on-night);max-width:20ch;margin:var(--space-md) auto 0;line-height:1.02}
.g-head h1 em{font-style:italic;color:oklch(86% .1 70)}
.gin{padding-bottom:calc(var(--space-xl) + 92px);gap:14px}
.panel h2{font-size:clamp(2.4rem,min(4vw,7svh),4.5rem)}
.panel p{font-size:var(--text-base)}
.gk{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:8px}
.gk li{display:flex;align-items:center;gap:10px;font:500 var(--text-sm)/1.3 var(--font-body)}
.gk .ic{width:28px;height:28px;padding:6px;border-radius:50%;background:oklch(100% 0 0 / .14);color:var(--dot);flex:none}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-strip{position:absolute;z-index:3;left:0;right:0;bottom:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:oklch(12% .02 265 / .55);backdrop-filter:blur(14px);border-top:1px solid oklch(100% 0 0 / .18);color:var(--on-night)}
.g-strip div{padding:18px clamp(16px,2.6vw,36px);display:flex;align-items:baseline;gap:14px;min-width:0}
.g-strip div+div{border-left:1px solid oklch(100% 0 0 / .14)}
.g-strip dt{font:400 clamp(1.6rem,2.2vw,2.2rem)/1 var(--font-display);letter-spacing:-.03em;flex:none}
.g-strip dd{margin:0;font-size:var(--text-xs);line-height:1.35;opacity:.8}
@media(max-height:820px) and (min-width:861px){.g-head h1{font-size:clamp(2rem,3.4vw,3.4rem)}}
@media(max-width:860px){.g-head{position:relative;background:var(--night);padding:110px var(--space-lg) 48px}.g-head::before{display:none}.gate{flex-direction:column}.gin{padding-bottom:var(--space-2xl)}.g-strip{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--night)}.g-strip div:nth-child(3){border-left:0}.g-strip div:nth-child(n+3){border-top:1px solid oklch(100% 0 0 / .14)}.g-strip div{flex-direction:column;gap:6px}}

.note{transition:opacity .4s,transform .4s}.note.away{opacity:0;transform:translateY(10px);pointer-events:none}
/* ---- what we do ---- */
.sh2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:end;margin-bottom:var(--space-2xl)}
.sh2 h2{font-size:var(--text-display);margin-top:var(--space-md);max-width:15ch}
.sh2 p{font-size:var(--text-lg);line-height:1.55;max-width:42ch}
@media(max-width:860px){.sh2{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}}
.what{padding-block:var(--space-3xl);background:var(--paper-2);border-block:1px solid var(--rule)}
.w3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}
.wc{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.wc:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px oklch(23% .05 255 / .45)}
.wi{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--solid);color:var(--on-solid);flex:none}
.wi .ic{width:24px;height:24px}
.wc .lab{display:flex;align-items:center;gap:8px}.wc .lab i{width:9px;height:9px;border-radius:50%;background:var(--dot)}
.wc h3{font-size:var(--text-2xl);font-weight:400}
.wc>p{font-size:var(--text-sm)}
.wc ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);flex:1}
.wc li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:var(--text-sm);color:var(--ink)}
.wc>a{display:inline-flex;align-items:center;gap:10px;font:600 var(--text-sm)/1 var(--font-body);color:var(--ink);padding-top:var(--space-sm)}
.wc>a svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}.wc>a:hover svg{transform:translateX(4px)}
@media(max-width:900px){.w3{grid-template-columns:minmax(0,1fr)}}

/* ---- which company do you need ---- */
.tg{padding-block:var(--space-3xl)}
.tg-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-lg);align-items:stretch}
.tg-o{display:grid;gap:10px;align-content:start}
.wo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:var(--space-md);padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--rule);transition:border-color var(--dur-base),background-color var(--dur-base),box-shadow var(--dur-base)}
.wo .wi{width:44px;height:44px;border-radius:12px;background:var(--paper-2);color:var(--ink);transition:background-color var(--dur-base),color var(--dur-base)}
.wo b{display:block;font:400 var(--text-lg)/1.25 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.wo small{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:3px}
.wo:hover{border-color:var(--rule-2)}
.wo.on{border-color:var(--ink);box-shadow:0 20px 40px -30px oklch(23% .05 255 / .5)}
.wo.on .wi{background:var(--solid);color:var(--on-solid)}
.wo:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.tg-r{background:var(--night);color:var(--on-night);border-radius:18px;padding:clamp(24px,3vw,40px);display:grid;gap:var(--space-xl);align-content:space-between}
.flow{display:grid;grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto;align-items:center;gap:12px}
.fn{display:grid;justify-items:center;gap:8px;text-align:center;opacity:.32;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.fn span{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:oklch(100% 0 0 / .08);border:1px solid oklch(100% 0 0 / .16);transition:background-color .6s,border-color .6s,color .6s}
.fn span .ic{width:26px;height:26px}
.fn b{font:400 var(--text-lg)/1 var(--font-display)}
.fn small{font:500 var(--text-xs)/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.fn.on{opacity:1;transform:translateY(-2px)}
.fn.on span{background:var(--on-night);color:var(--night);border-color:transparent;box-shadow:0 0 0 6px oklch(100% 0 0 / .08)}
.flow>i{height:2px;border-radius:2px;background:oklch(100% 0 0 / .14);position:relative;overflow:hidden;margin-bottom:46px}
.flow>i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal-l),var(--brass));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.flow>i.on::after{transform:none}
.wps{display:grid}
.wp{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--ease-out),visibility 0s .35s;display:grid;gap:var(--space-md);justify-items:start;align-content:start}
.wp.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.wp h3{font-size:var(--text-2xl);color:var(--on-night)}
.wp p{max-width:56ch;opacity:.85}
.wp .btn{background:var(--on-night);color:var(--deep)}.wp .btn:hover{background:var(--brass)}
@media(max-width:900px){.tg-g{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.fn span{width:52px;height:52px}.fn b{font-size:var(--text-base)}.flow{gap:6px}}

/* ---- values ---- */
.vals{padding-block:var(--space-2xl) var(--space-3xl)}
.v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-lg);border-top:1px solid var(--ink)}
.v3 div{padding:var(--space-lg) var(--space-lg) 0 0}
.v3 div+div{padding-left:var(--space-lg);border-left:1px solid var(--rule)}
.v3 b{display:block;font:300 clamp(2.2rem,3.6vw,3.6rem)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);margin-bottom:var(--space-md)}
.v3 p{max-width:32ch;font-size:var(--text-sm)}
@media(max-width:800px){.v3{grid-template-columns:minmax(0,1fr)}.v3 div,.v3 div+div{padding:var(--space-lg) 0;border-left:0}.v3 div+div{border-top:1px solid var(--rule)}}

/* ---- the ProMaster mark: refined original, in the site's navy and brass ---- */
.pm-i{flex:none;width:auto;overflow:visible}
.pm-t{display:grid;gap:5px;line-height:1}
.pm-t b{font:800 15px/1 "Manrope",var(--font-body);letter-spacing:.16em}
.pm-t small{font:700 8.5px/1 "Manrope",var(--font-body);letter-spacing:.24em;text-transform:uppercase;opacity:.75;white-space:nowrap}
.bar .bl{gap:10px;padding:6px 14px 6px 10px}
.bar .bl .pm-i{height:34px;width:37px}
.pm-l{display:flex;align-items:center;gap:16px;color:var(--ink)}
.pm-l .pm-i{height:64px;width:70px}.pm-l .pm-t b{font-size:26px}.pm-l .pm-t small{font-size:11px}
.pm-f{display:inline-flex;align-items:center;gap:12px;color:var(--on-night);margin-bottom:var(--space-md)}
.pm-f .pm-i{height:44px;width:48px}.pm-f .pm-t b{font-size:18px}.pm-f .pm-t small{font-size:9.5px}
footer .fb .pm-f b{display:block;margin:0;color:inherit;font:800 18px/1 "Manrope",var(--font-body);letter-spacing:.16em}
@media(max-width:520px){.bar .pm-t small{display:none}}

/* ---- the gate network: one web of connections running across both companies, following the pointer ---- */
.gnet{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){.gnet{display:none}}
/* real details */
.pt .lgl{font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:.06em;color:var(--muted);margin-top:calc(var(--space-sm) * -1)}
.grp4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-lg)}
.grp4>.lab{grid-column:1/-1}
.grp4>div{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:var(--space-lg) var(--space-xl);display:grid;gap:var(--space-xs)}
.grp4 b{font:400 var(--text-xl)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.grp4 p{font-size:var(--text-sm)}
.grp4 small{font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:.04em;color:var(--muted);margin-top:var(--space-xs)}
@media(max-width:800px){.grp4{grid-template-columns:minmax(0,1fr)}}
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}

/* ===== multi-page additions ===== */
.bar ul a.act{opacity:1;background:oklch(100% 0 0 / .14)}
.bar.light ul a.act{background:var(--paper-2)}
.bm{all:unset;cursor:pointer;display:none;flex:none;width:40px;height:40px;border-radius:50%;place-items:center;color:currentColor;box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .3)}
.bar.light .bm{box-shadow:inset 0 0 0 1px var(--rule)}
.bm:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.bm i,.bm i::before,.bm i::after{display:block;width:17px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease-out),background-color .2s}
.bm i{position:relative}.bm i::before,.bm i::after{content:"";position:absolute;left:0}.bm i::before{top:-6px}.bm i::after{top:6px}
.bar.open .bm i{background:transparent}.bar.open .bm i::before{transform:translateY(6px) rotate(45deg)}.bar.open .bm i::after{transform:translateY(-6px) rotate(-45deg)}
.bmenu{position:fixed;left:12px;right:12px;top:84px;z-index:19;display:none;gap:2px;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:16px;padding:10px;box-shadow:0 30px 60px -30px oklch(15% .02 265 / .55)}
.bar.open+.bmenu{display:grid}
.bmenu a{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:10px;font:500 var(--text-base)/1.2 var(--font-body)}
.bmenu a:hover,.bmenu a.act{background:var(--paper-2)}
.bmenu a.act::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass)}
@media(max-width:1000px){.bm{display:grid}}
@media(max-width:420px){.bar .bc{display:none}}

/* page header for the inner pages */
.phg{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:var(--on-night);min-height:min(80svh,740px);display:flex;align-items:flex-end}
.phg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:zoom 16s var(--ease-out) both}
.phg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,oklch(10% .02 265 / .94),oklch(10% .02 265 / .45) 65%,oklch(10% .02 265 / .62))}
.phg-c{width:100%;padding-block:150px var(--space-2xl);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:end}
.phg h1{font-size:var(--text-hero);color:var(--on-night);margin:var(--space-md) 0 var(--space-lg)}
.phg h1 em{font-style:italic;color:oklch(86% .1 70)}
.phg p{font-size:var(--text-lg);line-height:1.5;max-width:44ch;opacity:.9}
.phg .lab{color:oklch(86% .1 70)}
.crumb{display:flex;align-items:center;gap:10px;font:500 var(--text-xs)/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:oklch(100% 0 0 / .7);margin-bottom:var(--space-lg)}
.crumb a{color:var(--on-night);border-bottom:1px solid var(--brass);padding-bottom:2px}
.phg-f{margin:0;background:oklch(100% 0 0 / .07);backdrop-filter:blur(12px);border:1px solid oklch(100% 0 0 / .16);border-radius:14px;padding:4px var(--space-lg)}
.phg-f div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid oklch(100% 0 0 / .12);font-size:var(--text-sm)}
.phg-f div:last-child{border-bottom:0}
.phg-f dt{font:500 var(--text-xs)/1.5 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:oklch(100% 0 0 / .6)}
.phg-f dd{margin:0;color:var(--on-night);overflow-wrap:anywhere}
.up{animation:upin 1s var(--ease-out) both;animation-delay:calc(var(--n,0) * 110ms + 150ms)}
@keyframes upin{from{opacity:.001;transform:translateY(18px)}}
@media(max-width:900px){.phg-c{grid-template-columns:minmax(0,1fr);padding-top:120px;gap:var(--space-xl)}}
@media(max-width:520px){.phg-f div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* links from the home page to the full pages */
.more2{display:inline-flex;align-items:center;gap:10px;font:600 var(--text-sm)/1 var(--font-body);color:var(--ink);border-bottom:1.5px solid var(--brass);padding-bottom:5px;margin-top:var(--space-md);transition:gap var(--dur-base) var(--ease-out)}
.more2 svg{width:14px;height:14px}.more2:hover{gap:14px}

/* closing band on the inner pages */
.ctag{background:var(--night);color:var(--on-night);padding-block:var(--space-3xl)}
.ctag-i{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-2xl);align-items:end}
.ctag h2{color:var(--on-night);font-size:var(--text-display);margin-top:var(--space-md)}
.ctag h2 em{font-style:italic;color:oklch(86% .1 70)}
.ctag .lab{color:oklch(86% .1 70)}
.ctag p{font-size:var(--text-lg);line-height:1.5;opacity:.88;margin-bottom:var(--space-lg)}
.ctag-b{display:flex;flex-wrap:wrap;gap:10px}
.btn.lt{background:var(--on-night);color:var(--deep)}.btn.lt:hover{background:var(--brass)}
.btn.gh{background:transparent;color:var(--on-night);box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .35)}.btn.gh:hover{background:oklch(100% 0 0 / .1)}
@media(max-width:900px){.ctag-i{grid-template-columns:minmax(0,1fr)}}

/* contact page: the form is the page header */
.contact.ctop{padding-top:150px}
.contact h1{color:var(--on-night);font-size:var(--text-hero);max-width:11ch;margin-bottom:var(--space-lg)}
.cred .cr a{color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--brass)}

/* dark mode: follows the device, the switch in the bar overrides */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:oklch(16.5% .02 265);--surface:oklch(21% .022 265);--paper-2:oklch(19.5% .02 265);--rule:oklch(31% .022 265);--rule-2:oklch(44% .024 265);--muted:oklch(70% .02 245);--neutral:oklch(82% .012 245);--ink:oklch(95.5% .008 240);--night:oklch(11.5% .018 265);--teal:oklch(70% .1 205);--solid:oklch(94% .008 240);--on-solid:oklch(20% .04 255);--bar-light:oklch(18% .02 265 / .9);color-scheme:dark}
  :root:not([data-theme="light"]) .thm .sun{display:block} :root:not([data-theme="light"]) .thm .moon{display:none}}
:root[data-theme="dark"]{--paper:oklch(16.5% .02 265);--surface:oklch(21% .022 265);--paper-2:oklch(19.5% .02 265);--rule:oklch(31% .022 265);--rule-2:oklch(44% .024 265);--muted:oklch(70% .02 245);--neutral:oklch(82% .012 245);--ink:oklch(95.5% .008 240);--night:oklch(11.5% .018 265);--teal:oklch(70% .1 205);--solid:oklch(94% .008 240);--on-solid:oklch(20% .04 255);--bar-light:oklch(18% .02 265 / .9);color-scheme:dark}
:root[data-theme="dark"] .thm .sun{display:block} :root[data-theme="dark"] .thm .moon{display:none}
.thm{all:unset;cursor:pointer;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:currentColor;box-shadow:inset 0 0 0 1px oklch(100% 0 0 / .3);transition:background-color .2s}
.bar.light .thm{box-shadow:inset 0 0 0 1px var(--rule)}
.thm:hover{background:oklch(100% 0 0 / .1)}.thm:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.thm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thm .sun{display:none}

/* WhatsApp: choose PRM or JSPM */
.note{right:auto;left:var(--space-md)}
.wa-w{position:fixed;right:16px;bottom:16px;z-index:45;display:grid;justify-items:end;gap:10px;transition:opacity .45s ease,transform .45s var(--ease-out)}
body:not(.past) .wa-w{opacity:0;transform:translateY(16px);pointer-events:none}
.wapp{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);box-shadow:0 18px 40px -18px oklch(15% .02 265 / .5);color:var(--ink)}
.wapp:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wapp-i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:oklch(72% .17 150)}
.wapp-i svg{width:24px;height:24px;fill:#fff}
.wapp-t{display:grid;line-height:1.2;font-family:var(--font-body)}.wapp-t b{font-size:14.5px;font-weight:600}.wapp-t small{font-size:12px;color:var(--muted)}
.wpop{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:8px;box-shadow:0 30px 60px -30px oklch(15% .02 265 / .55);display:grid;gap:4px;min-width:280px}
.wpop[hidden]{display:none}
.wpop>span{font:500 var(--text-xs)/1.4 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 4px}
.wpop a{display:grid;gap:2px;padding:12px;border-radius:10px;color:var(--ink);font:600 var(--text-sm)/1.3 var(--font-body)}
.wpop a small{font-weight:400;color:var(--muted);font-size:13px}
.wpop a:hover{background:var(--paper-2)}
.wpop a i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--dot)}
@media(max-width:600px){.wapp{padding:6px}.wapp-t{display:none}.wapp-i{width:48px;height:48px}}
footer h2{text-wrap:wrap;font-variation-settings:normal}
/* 30 Oct: a form that failed to send */
.ok.bad{color:oklch(58% .16 35)}