/* France Soft — Swiss override of pro.css. System fonts only. */
:root{--ink:#111111;--acc:#CC2200;--s:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif}
html,body{margin:0;padding:0;background:#FFFFFF;color:var(--ink);text-align:left;
font:17px/1.65 var(--s)}
*,*::before,*::after{box-sizing:border-box}
/* Spesifisitas id-level dipakai sengaja: pro.css memusatkan teks lewat selektor
   yang lebih spesifik dari kelas biasa, dan markup-nya tidak boleh diubah.
   font-variant dinolkan agar small-caps tidak lolos di mana pun. */
body *:not(#z){text-align:left;border-radius:0;font-variant:normal}
ul.pro-nav,section.hero,section.pro-section,footer{width:100%;background:#FFFFFF;
  padding-inline:max(20px,calc((100% - 1180px)/2))}
ul.pro-nav{display:flex;flex-wrap:wrap;gap:0 32px;list-style:none;padding:22px 40px 14px;
border:0;border-bottom:6px solid var(--ink)}
ul.pro-nav>li{margin:0}
ul.pro-nav>li>a{display:inline-block;padding:4px 0;border-bottom:3px solid transparent;
font:700 13px/1.3 var(--s);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
text-decoration:none}
ul.pro-nav>li>a:hover,ul.pro-nav>li>a:focus{color:var(--acc);border-bottom-color:var(--acc)}
section.hero{padding:88px 40px 80px;border:0;border-bottom:1px solid #E4E4E4;
background-image:repeating-linear-gradient(to right,#E4E4E4 0 1px,transparent 1px 8.3333%)}
section.hero>div.eyebrow{margin:0 0 26px;background:none;font-family:var(--s);font-variant:normal;font-size:12px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
section.hero>div.eyebrow::before{content:"";display:inline-block;width:48px;height:6px;
margin-right:12px;background:var(--acc)}
section.hero>h1{margin:0 0 30px;max-width:16ch;font-family:var(--s);font-weight:800;
font-size:clamp(2.75rem,7.5vw,5.25rem);line-height:.94;letter-spacing:-.035em;color:var(--ink)}
section.hero>p.lead{margin:0 0 40px;max-width:62ch;font:1.125rem/1.65 var(--s);color:#333333}
a.button{display:inline-block;padding:20px 40px;border:0;background:var(--acc);color:#FFFFFF;
font:700 14px/1 var(--s);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
section.hero a.button:hover{background:var(--ink)}
div.pro-contact a.button:hover{background:#FFFFFF;color:var(--ink)}
section.pro-section{padding:76px 40px}
section.pro-section>h2,div.pro-contact>h2{margin:0 0 36px;padding:16px 0 0;
border-top:4px solid var(--acc);font:800 1.5rem/1.15 var(--s);letter-spacing:-.02em;
text-transform:uppercase;color:var(--ink)}
section.pro-section>div.pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
margin:0;padding:0;background:var(--ink);border:1px solid var(--ink);counter-reset:cell}
div.pro-grid>div.pro-card{margin:0;padding:32px 28px 40px;background:#FFFFFF;border:0;
box-shadow:none}
div.pro-card::before{all:revert;counter-increment:cell;display:block;margin:0 0 20px;
content:counter(cell,decimal-leading-zero);font:700 12px/1 var(--s);letter-spacing:.12em;
color:var(--acc)}
div.pro-card>h3{margin:0 0 12px;font:700 1.0625rem/1.3 var(--s);letter-spacing:-.01em;color:var(--ink)}
div.pro-card>p{margin:0;max-width:38ch;font:1rem/1.65 var(--s);color:#333333}
section.pro-section>div.pro-contact{margin:64px 0 0;padding:56px 40px;border:0;
background:var(--ink);color:#FFFFFF}
div.pro-contact>h2{margin-bottom:20px;color:#FFFFFF}
div.pro-contact>p{margin:0 0 24px;max-width:60ch;font:1.0625rem/1.7 var(--s);color:#F2F2F2}
footer{padding:36px 40px;border-top:1px solid #E4E4E4}
footer>p{margin:0;max-width:70ch;font:1rem/1.6 var(--s);letter-spacing:.02em;color:#5A5A5A}
@media (max-width:900px){section.pro-section>div.pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
html,body{font-size:16px}
ul.pro-nav{gap:0 18px;padding:16px 20px 10px;border-bottom-width:4px}
section.hero{padding:44px 20px 52px;background-image:none}
section.hero>h1{max-width:none;font-size:2.25rem}
section.pro-section{padding:44px 20px}
section.pro-section>div.pro-grid{grid-template-columns:1fr}
div.pro-grid>div.pro-card{padding:24px 20px 28px}
section.hero>p.lead,div.pro-card>p{max-width:none}
section.pro-section>div.pro-contact{margin-top:40px;padding:32px 20px}
a.button{padding:18px 26px}
footer{padding:28px 20px}}
div.pro-card>p,div.pro-contact>p,section.hero>p.lead{overflow-wrap:anywhere}
/* Kontras: judul #111111 di #FFFFFF = 18,9:1; isi #333333 di #FFFFFF = 12,6:1;
   teks panel gelap #F2F2F2 di #111111 = 16,9:1; sekunder #5A5A5A di #FFFFFF = 6,9:1 */