:root { --ink:#202124; --muted:#6d6f73; --line:#dedbd8; --paper:#f5f3f1; --white:#fff; --orange:#f36b21; --orange-dark:#d64e0d; --graphite:#292a2d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { position:fixed; z-index:50; inset:0 0 auto; height:84px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(24px,5vw,80px); background:rgba(245,243,241,.93); border-bottom:1px solid rgba(32,33,36,.12); backdrop-filter:blur(16px); }
.brand { justify-self:start; display:inline-flex; }
.brand img { width:188px; height:auto; display:block; }
nav { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:700; }
nav a { position:relative; padding:30px 0; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:23px; height:2px; background:var(--orange); transition:right .2s ease; }
nav a:hover::after, nav a:focus-visible::after { right:0; }
.header-contact { justify-self:end; border:1px solid var(--ink); padding:11px 20px; font-size:14px; font-weight:700; transition:.2s ease; }
.header-contact:hover { color:white; background:var(--ink); }

.hero { min-height:100svh; position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); align-items:center; gap:8vw; padding:140px clamp(24px,8vw,128px) 90px; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(32,33,36,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(32,33,36,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to right,black,transparent 74%); pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:800px; }
.eyebrow { margin:0 0 22px; color:var(--orange-dark); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; max-width:830px; font-size:clamp(52px,6.8vw,104px); line-height:.94; letter-spacing:-.055em; font-weight:700; }
.hero-lead { max-width:680px; margin:34px 0 0; color:#56585c; font-size:clamp(18px,1.5vw,23px); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 25px; font-size:14px; font-weight:800; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--orange); color:white; }
.button-primary:hover { background:var(--orange-dark); }
.button-secondary { border:1px solid #a7a5a2; background:rgba(255,255,255,.45); }
.hero-visual { position:relative; height:min(590px,60vw); min-height:430px; }
.orb { position:absolute; border-radius:50%; }
.orb-one { width:min(38vw,540px); aspect-ratio:1; top:3%; right:-12%; background:var(--orange); }
.orb-two { width:min(25vw,340px); aspect-ratio:1; left:2%; bottom:5%; border:1px solid #aaa5a1; }
.hero-panel { position:absolute; z-index:2; left:15%; top:22%; width:min(340px,70%); padding:36px; color:white; background:rgba(41,42,45,.96); box-shadow:0 30px 80px rgba(32,33,36,.28); }
.hero-panel p { display:inline; margin-left:8px; color:#bfc0c2; font-size:13px; }
.hero-panel strong { display:block; margin-top:48px; font-size:clamp(27px,3vw,42px); line-height:1.08; letter-spacing:-.04em; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#75c86a; }
.signal { display:flex; align-items:end; gap:8px; height:46px; margin-top:38px; }
.signal i { display:block; flex:1; background:var(--orange); }
.signal i:nth-child(1) { height:30%; } .signal i:nth-child(2) { height:58%; } .signal i:nth-child(3) { height:76%; } .signal i:nth-child(4) { height:100%; }
.scroll-cue { position:absolute; z-index:2; left:clamp(24px,8vw,128px); bottom:25px; display:flex; align-items:center; gap:15px; color:var(--muted); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.scroll-cue i { width:44px; height:1px; background:var(--orange); }

.section { padding:120px clamp(24px,8vw,128px); }
.section-services { background:var(--white); }
.section-heading { display:grid; grid-template-columns:1fr 1.4fr; column-gap:8vw; align-items:end; margin-bottom:54px; }
.section-heading .eyebrow { grid-column:1/-1; }
h2 { margin:0; font-size:clamp(42px,5vw,72px); line-height:1; letter-spacing:-.045em; }
.section-heading>p:last-child { margin:0; max-width:520px; color:var(--muted); font-size:18px; line-height:1.65; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:480px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s ease,transform .25s ease; }
.service-card:hover { position:relative; z-index:2; background:#faf8f6; transform:translateY(-5px); }
.service-number { color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.14em; }
.service-card h3 { margin:82px 0 22px; font-size:28px; letter-spacing:-.025em; }
.service-card>p { color:var(--muted); line-height:1.7; }
.service-card ul { list-style:none; padding:0; margin:36px 0 0; }
.service-card li { padding:12px 0; border-top:1px solid var(--line); font-size:14px; font-weight:700; }
.service-card li::before { content:"→"; color:var(--orange); margin-right:10px; }
.mobile-menu { display:none; position:relative; }
.mobile-menu summary { cursor:pointer; font-size:14px; font-weight:800; list-style:none; }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu>div { position:absolute; right:0; top:36px; min-width:190px; padding:12px; background:white; border:1px solid var(--line); box-shadow:0 18px 45px rgba(32,33,36,.16); }
.mobile-menu a { display:block; padding:12px; font-weight:700; }

.section-protime { display:grid; grid-template-columns:1fr 1fr; gap:9vw; color:white; background:var(--graphite); }
.protime-intro>p:not(.eyebrow) { max-width:630px; margin:30px 0; color:#c5c5c6; font-size:18px; line-height:1.7; }
.button-light { color:var(--ink); background:white; }
.protime-features { display:grid; grid-template-columns:1fr 1fr; align-self:center; }
.protime-features article { min-height:245px; padding:30px; border:1px solid #47484b; margin:-1px 0 0 -1px; }
.protime-features span { color:var(--orange); font-size:11px; font-weight:800; }
.protime-features h3 { margin:52px 0 12px; font-size:23px; }
.protime-features p { margin:0; color:#aaa; line-height:1.55; }

.section-workshops { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; min-height:680px; overflow:hidden; background:var(--orange); }
.workshop-index { color:rgba(255,255,255,.17); font-size:clamp(300px,38vw,580px); font-weight:800; line-height:.8; letter-spacing:-.12em; transform:translateX(-10%); }
.workshop-copy { position:relative; z-index:2; max-width:700px; color:#211f1e; }
.workshop-copy .eyebrow { color:#712400; }
.workshop-copy>p:not(.eyebrow) { margin:30px 0; font-size:20px; line-height:1.7; }
.text-link { display:inline-flex; gap:24px; align-items:center; padding:12px 0; border-bottom:2px solid var(--ink); font-weight:800; }

.section-company { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; background:white; }
.company-stat { align-self:start; padding-top:12px; }
.company-stat strong { display:block; font-size:clamp(84px,12vw,180px); line-height:.8; letter-spacing:-.08em; }
.company-stat span { display:block; margin-top:28px; color:var(--orange-dark); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.company-copy>p:not(.eyebrow,.director) { max-width:700px; margin:30px 0; color:var(--muted); font-size:19px; line-height:1.75; }
.company-values { display:flex; flex-wrap:wrap; gap:10px; margin:34px 0; }
.company-values span { padding:10px 15px; border:1px solid var(--line); font-size:13px; font-weight:800; }
.director { display:flex; flex-direction:column; gap:7px; margin-top:58px; font-size:18px; font-weight:800; }
.director small { color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

.section-contact { color:white; background:var(--graphite); }
.contact-grid { display:grid; grid-template-columns:1.4fr .6fr; gap:8vw; align-items:end; }
.contact-mail { display:inline-flex; gap:22px; align-items:center; margin-top:48px; color:var(--orange); font-size:clamp(23px,3vw,42px); font-weight:700; border-bottom:1px solid #5b5c5f; padding-bottom:12px; }
.contact-grid address { display:flex; flex-direction:column; gap:15px; padding:36px 0 10px; color:#c9c9ca; font-style:normal; line-height:1.55; }
.contact-grid address strong { color:white; }
.contact-grid address a:hover { color:var(--orange); }

footer { padding:64px clamp(24px,8vw,128px) 26px; background:#ddd9d6; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:30px; padding-bottom:48px; border-bottom:1px solid #bdb9b6; }
.footer-brand img { width:190px; }
.footer-top p { color:var(--muted); font-size:13px; }
.legal-grid { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #bdb9b6; }
.legal-grid details { padding:25px 0; }
.legal-grid details+details { padding-left:30px; border-left:1px solid #bdb9b6; }
.legal-grid summary { cursor:pointer; font-size:15px; font-weight:800; }
.legal-grid details>div { max-width:640px; padding-top:20px; color:#55575b; font-size:13px; line-height:1.65; }
.legal-grid details a { text-decoration:underline; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:25px; color:#696a6d; font-size:12px; }

@media (max-width:920px) {
  .site-header { grid-template-columns:1fr auto; }
  nav { display:none; }
  .mobile-menu { display:block; justify-self:end; margin-right:18px; }
  .header-contact { display:none; }
  .hero { grid-template-columns:1fr; padding-top:145px; }
  .hero-visual { height:400px; min-height:0; }
  .orb-one { width:380px; right:-80px; }
  .orb-two { width:250px; }
  .section-heading { grid-template-columns:1fr; gap:22px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:0; }
  .service-card h3 { margin-top:42px; }
  .section-protime, .section-company, .contact-grid { grid-template-columns:1fr; }
  .section-workshops { grid-template-columns:.55fr 1.45fr; }
  .protime-features { margin-top:30px; }
}
@media (max-width:560px) {
  .site-header { height:72px; padding-inline:18px; }
  .brand img { width:138px; }
  .header-contact { padding:9px 13px; }
  .hero { padding:115px 20px 65px; gap:48px; }
  h1 { font-size:clamp(45px,15vw,66px); }
  .hero-visual { height:310px; }
  .hero-panel { left:4%; top:12%; padding:27px; }
  .hero-panel strong { margin-top:34px; }
  .orb-one { width:300px; }
  .scroll-cue { display:none; }
  .section { padding:84px 20px; }
  .service-card { padding:28px; }
  .section-protime, .section-company, .section-workshops { display:block; }
  .protime-features { grid-template-columns:1fr; }
  .protime-features article { min-height:0; }
  .protime-features h3 { margin-top:30px; }
  .workshop-index { position:absolute; inset:90px auto auto -50px; }
  .workshop-copy { position:relative; }
  .footer-top, .footer-bottom { align-items:flex-start; flex-direction:column; }
  .legal-grid { grid-template-columns:1fr; }
  .legal-grid details+details { padding-left:0; border-left:0; border-top:1px solid #bdb9b6; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
