:root{color-scheme:dark;--bg:#111111;--panel:#191919;--paper:#f4f2ec;--muted:#aaa9a4;--line:#33332f;--accent:#d8e9bc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img{max-width:100%;display:block}.shell{width:min(1280px,calc(100% - 100px));margin:auto}.skip{position:absolute;top:-100px;background:var(--paper);color:#111;padding:16px;z-index:10}.skip:focus{top:10px}.nav{height:108px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:29px;font-weight:600;letter-spacing:-1.2px}.brand img{width:49px;height:49px;object-fit:contain;border-radius:4px}.navlinks{display:flex;gap:30px;align-items:center;font-size:14px}.navlinks a:hover{color:var(--accent)}.nav-contact{border:1px solid #65655e;border-radius:30px;padding:12px 20px}.hero{padding:78px 0 66px;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-size:clamp(45px,5.9vw,83px);font-weight:400;line-height:1.045;letter-spacing:-4px;margin:29px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}.intro{max-width:510px;color:var(--muted);font-size:17px;line-height:1.75}.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;gap:28px;background:var(--paper);color:#171717;padding:17px 23px;border-radius:32px;font-size:14px;font-weight:600;transition:background .2s}.btn:hover{background:var(--accent)}.textlink{font-size:14px;border-bottom:1px solid #63635c;padding-bottom:5px}.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;background:#171616;border:1px solid #33312f;border-radius:200px 200px 8px 8px}.hero-art img{width:100%;height:100%;object-fit:cover}.art-caption{position:absolute;bottom:22px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:2px;color:#c8c6c0}.principles{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px;letter-spacing:.5px}.principles span:before{content:'+';color:var(--accent);margin-right:12px}.section{padding:88px 0}.section-head{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;margin-bottom:42px}.kicker{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}.section h2{font-size:clamp(30px,3.5vw,48px);font-weight:400;line-height:1.12;letter-spacing:-1.7px;margin:13px 0}.section-head p{color:var(--muted);line-height:1.75;max-width:490px;margin:22px 0 0}.service{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}.service-visual{padding:43px;min-height:360px;position:relative;display:flex;flex-direction:column;justify-content:center;background:#151514;overflow:hidden;border-right:1px solid var(--line)}.service-brand{font-size:62px;gap:17px;letter-spacing:-2.5px;position:relative;z-index:1}.service-brand img{width:90px;height:90px}.family{font-size:11px;letter-spacing:1.4px;color:var(--muted);margin:16px 0 0 109px}.service-watermark{position:absolute;font-family:Georgia,serif;font-style:italic;font-size:220px;line-height:1;bottom:-22px;left:33px;color:#22231f;letter-spacing:-15px;pointer-events:none}.service-copy{padding:48px}.tag{font-size:10px;letter-spacing:1.5px;color:var(--accent);text-transform:uppercase}.service h3{font-weight:400;font-size:35px;line-height:1.15;letter-spacing:-1px;margin:19px 0}.service p{color:var(--muted);font-size:15px;line-height:1.75;max-width:410px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.chips span{border:1px solid #41413b;padding:8px 10px;border-radius:4px;font-size:11px;color:#d4d3cd}.service-link{display:inline-flex;gap:28px;align-items:center;color:var(--accent);font-size:14px;border-bottom:1px solid #626954;padding-bottom:10px;margin-top:11px}.below-service{margin:17px 0 0;font-size:12px;color:var(--muted)}.about{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.1fr;gap:80px}.about-text{font-size:23px;line-height:1.6;letter-spacing:-.4px;margin:12px 0 34px}.steps{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:45px 1fr;gap:15px;padding:22px 0;border-bottom:1px solid var(--line)}.step small{color:var(--accent);font-size:11px;padding-top:4px}.step h3{font-size:17px;margin:0 0 7px;font-weight:500}.step p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}.contact{padding:60px;border:1px solid #41443b;background:#1c2119;border-radius:8px;margin-bottom:80px;display:flex;align-items:center;justify-content:space-between;gap:35px}.contact h2{font-size:43px;letter-spacing:-1.7px;font-weight:400;margin:14px 0}.contact p{color:#b4bbae;font-size:15px;line-height:1.7;max-width:510px}.footer{padding:25px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px;color:var(--muted)}.footer-links{display:flex;gap:25px}.privacy{max-width:730px;padding:65px 0 90px}.privacy h1{font-size:52px;letter-spacing:-2px}.privacy h2{font-size:22px;font-weight:500;margin-top:35px}.privacy p,.privacy li{color:var(--muted);line-height:1.8;font-size:15px}.privacy a{text-decoration:underline}.mobile-break{display:none}@media(min-width:1500px){.hero{padding:95px 0 80px}}@media(max-width:850px){.shell{width:calc(100% - 48px)}.nav{height:87px}.navlinks{gap:19px}.hero{gap:25px;padding:55px 0}.hero h1{letter-spacing:-2.5px}.section-head,.about{gap:35px}.service-copy{padding:30px}.service-visual{padding:25px}.service-brand{font-size:45px}.service-brand img{width:68px;height:68px}.family{margin-left:85px;font-size:9px}.contact{padding:35px}.contact h2{font-size:34px}}@media(max-width:620px){.shell{width:calc(100% - 36px)}.brand{font-size:25px}.brand img{width:42px;height:42px}.navlinks a:not(.nav-contact){display:none}.nav-contact{padding:10px 14px;font-size:12px}.hero{grid-template-columns:1fr;padding:45px 0 34px;gap:34px}h1{font-size:52px;letter-spacing:-2.6px;margin:22px 0}.intro{font-size:16px}.hero-art{width:85%;max-width:350px;margin:0 auto;aspect-ratio:1.15}.principles{gap:12px;flex-wrap:wrap;padding:18px 0;font-size:10px}.section{padding:55px 0}.section-head,.about{grid-template-columns:1fr;gap:9px}.section-head{margin-bottom:28px}.section h2{font-size:35px}.section-head p{margin-top:5px;font-size:15px}.service{grid-template-columns:1fr}.service-visual{border-right:0;border-bottom:1px solid var(--line);min-height:220px;padding:30px}.service-brand{font-size:54px}.service-brand img{width:77px;height:77px}.family{margin-left:94px}.service h3{font-size:31px}.service-copy{padding:30px}.about-text{font-size:21px;margin:12px 0 25px}.contact{margin-bottom:45px;padding:29px;display:block}.contact h2{font-size:33px}.contact .btn{margin-top:15px}.footer{flex-wrap:wrap;line-height:1.7}.footer-links{gap:20px}.privacy h1{font-size:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Procivio: open, calm parent brand. ProSpot retains its dark creative identity. */
:root{color-scheme:light;--bg:#f7f6f2;--panel:#ffffff;--paper:#172a3a;--muted:#64717b;--line:#d8ddd9;--accent:#315c7a}
.brand img{border-radius:5px}.nav-contact{border-color:#aab4b9}.navlinks a:hover{color:#315c7a}h1 em{color:#315c7a}.btn{background:#172e43;color:#fff}.btn:hover{background:#294c67}.textlink{border-color:#a1afb6}.hero-art{background:#171616;border-color:#2c2b28}.art-caption{color:#ddd9d1}.principles{color:#5f6d76}.service{background:#151b25;color:#f4f2ec;border-color:#263346}.service-visual{background:#14171d;border-color:#303a46}.service-copy p,.service .family{color:#b2bbc5}.service .tag,.service .service-link{color:#d4e4f0}.service .chips span{color:#d4dde7;border-color:#414d5c}.service-link{border-color:#738696}.service-watermark{color:#202733}.contact{background:#172e43;color:#f4f2ec;border-color:#172e43}.contact .kicker,.contact p{color:#c2cdd6}.contact .btn{background:#f2f4ef;color:#172e43}.contact .btn:hover{background:#dce8ed}.skip{background:#172e43;color:white}

/* Readability for the light Procivio concept. */
:root { --bg: #f3f1eb; --muted: #4d5d68; }
.intro, .section-head p, .step p { line-height: 1.8; }
.art-caption {
  flex-direction: column;
  gap: 4px;
  width: fit-content;
  padding: 10px 13px;
  background: #171616;
  color: #ebe6de;
  font-size: 13px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: .15px;
}
.art-caption strong { font-size: 15px; }
.btn { background: #294861; color: #f8f6f1; }
.btn:hover { background: #355a74; }
.contact .btn { background: #dce5ea; color: #172e43; }
.contact .btn:hover { background: #cbdbe5; }

/* Clear hierarchy for the light concept. */
:root {
  --bg: #fff;
  --paper: #101d35;
  --muted: #34445d;
  --line: #cbd5e4;
  --accent: #1644b8;
}
.nav { border-bottom: 2px solid #cbd5e4; }
.navlinks { font-weight: 600; }
.btn, .navlinks .nav-contact, .service .service-link, .contact .btn {
  background: #1644b8;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 12px 18px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
}
.btn:hover, .navlinks .nav-contact:hover, .service .service-link:hover, .contact .btn:hover {
  background: #10348d;
  color: #fff;
}
a:focus-visible {
  outline: 3px solid #1644b8;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px #fff;
}
.hero h1 { font-weight: 700; }
.hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); }
.textlink { color: #1644b8; border-color: currentColor; font-weight: 700; }
.principles { color: #243857; background: #edf3ff; padding-inline: 16px; font-size: 13px; }
.service { background: #fff; color: var(--paper); border-color: var(--line); }
.service-copy p { color: var(--muted); }
.service .tag { color: var(--accent); }
.service .chips span { color: #213d70; background: #edf3ff; border-color: #b9c9e6; }
.contact { background: #edf3ff; color: var(--paper); border-color: #b9c9e6; }
.contact .kicker, .contact p { color: var(--muted); }

/* Consistent typography and a distinct ProSpot feature. */
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero h1 { letter-spacing: -.055em; }
.section h2, .contact h2 { font-weight: 650; letter-spacing: -.045em; }
.section .kicker, .contact .kicker { font-weight: 650; }
.service { background: #191a1d; color: #f8f7f4; border-color: #36373b; }
.service-visual { background: #111214; border-color: #36373b; }
.service-brand { font-weight: 750; }
.service .family, .service-copy p { color: #d0d0d3; }
.service-watermark { color: #242528; }
.service .tag { color: #d8d6d0; }
.service h3 { font-weight: 650; }
.service .chips span { color: #eceae6; background: #26272a; border-color: #58595e; }
.service .service-link { background: #f2f0eb; color: #191a1d; }
.service .service-link:hover { background: #dcd9d2; color: #191a1d; }
.service a:focus-visible { outline-color: #f2f0eb; box-shadow: none; }