/* Layout: isometric-illustration hero, then light cards on a cool grey ground;
   navy footer. Single light theme. */
:root{
  --navy:#14213f;
  --accent:#2f7fd6;
  --accent-ink:#1f5fae;
  --shine:#5eead4;
  --ground:#eef2f8;
  --surface:#ffffff;
  --ink:#14213f;
  --ink-soft:#3d4a63;
  --line:#dbe3ef;
  --field:#c4d0e2;
  --danger:#b42318;

  --font-display:"Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter:clamp(16px, 4vw, 24px);
  --header-h:66px;
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img, svg{max-width:100%; display:block;}
h1,h2,h3{margin:0; text-wrap:balance;}
p{margin:0;}
a{color:var(--accent-ink);}
a:hover{color:var(--ink);}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px;}
[hidden]{display:none !important;}
.wrap{width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; font-size:0.95rem; line-height:1.2;
  padding:12px 20px; border-radius:10px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-lg{font-size:1rem; padding:16px 26px; border-radius:12px;}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-ink); color:#fff;}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:#22345e; color:#fff;}
.btn-light{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn-light:hover{border-color:var(--ink-soft); color:var(--ink);}
.btn[disabled]{opacity:0.7; cursor:default;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex; align-items:center; gap:20px; min-height:var(--header-h); padding-block:10px;}
.brand{display:flex; flex:none;}
.brand img{height:36px; width:auto;}
.site-nav{display:flex; gap:4px; margin-left:auto;}
.site-nav a{
  text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:0.95rem;
  padding:10px 14px; border-radius:8px;
}
.site-nav a:hover{color:var(--ink); background:var(--ground);}
@media (max-width:760px){
  .site-nav{display:none;}
  .header-row{justify-content:space-between;}
}

/* ---------- hero ---------- */
.hero-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:32px;
  padding-block:clamp(40px, 6vw, 64px) clamp(48px, 6vw, 80px);
}
.hero-copy{flex:1 1 440px; min-width:0; display:flex; flex-direction:column; gap:22px;}
.hero-art{flex:1 1 480px; min-width:0;}
.hero-art svg{width:100%; height:auto;}
.eyebrow{font-weight:700; font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-ink);}
.hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem, 5.4vw, 4.3rem); line-height:1.04; letter-spacing:-0.03em;
}
.lede{font-size:1.18rem; line-height:1.65; color:var(--ink-soft); max-width:48ch;}
.actions{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- industries ---------- */
.industries ul{
  list-style:none; margin:0; padding:24px;
  background:var(--surface); border-radius:20px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px;
  text-align:center; font-weight:700;
}
.industries li{padding:14px; border-radius:12px; background:var(--ground);}
.industries li.more{background:transparent; border:1.5px dashed #9fb1cc; color:var(--ink-soft);}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px, 9vw, 104px); display:flex; flex-direction:column; gap:20px;}
.section h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.06; letter-spacing:-0.025em; max-width:20ch;
}
.section-lede{font-size:1.1rem; color:var(--ink-soft); max-width:58ch;}

/* ---------- services ---------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:20px;
}
.card{
  background:var(--surface); border-radius:20px; padding:28px;
  display:flex; flex-direction:column; gap:12px;
}
.card-art{width:120px; height:80px;}
.card h3{font-family:var(--font-display); font-size:1.35rem;}
.card p{color:var(--ink-soft);}
.freq{
  margin-top:auto; padding-top:12px; border-top:1px solid var(--line);
  font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-ink);
}
.card-dark{background:var(--navy); color:#fff;}
.card-dark p{color:#c8d3e8;}
.card-link{margin-top:auto; color:var(--shine); font-weight:700; text-decoration:none;}
.card-link:hover{color:#fff; text-decoration:underline; text-underline-offset:3px;}

/* ---------- process ---------- */
.process{background:var(--surface);}
.steps{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px;
}
.steps li{padding:28px; border-radius:20px; background:var(--ground); display:flex; flex-direction:column; gap:10px;}
.step-num{font-family:var(--font-display); font-weight:800; color:var(--accent-ink);}
.steps h3{font-size:1.3rem;}
.steps p{color:var(--ink-soft);}

/* ---------- contact ---------- */
.contact{flex-direction:row; flex-wrap:wrap; align-items:center; gap:48px;}
.contact-copy{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:16px;}
.email-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.email-link{font-weight:700; font-size:1.25rem; overflow-wrap:anywhere;}
.copy-btn{
  font:inherit; font-size:0.85rem; font-weight:700; cursor:pointer; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}
.copy-btn:hover{border-color:var(--ink-soft);}
.contact-form{
  flex:1 1 420px; min-width:0; background:var(--surface); border-radius:24px; padding:30px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 30px 60px -40px rgba(20,33,63,0.4);
}
.field-row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field label{font-weight:700; font-size:0.88rem;}
.field label .opt{font-weight:400; color:var(--ink-soft);}
.field input, .field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  padding:14px; border:1px solid var(--field); border-radius:10px; background:#fff; resize:vertical;
}
.field input:focus, .field textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(47,127,214,0.18);}
.captcha{min-height:78px;}
@media (max-width:400px){ .captcha{transform:scale(0.86); transform-origin:0 0; min-height:68px;} }
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.form-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
#cf-status{font-size:0.9rem; font-weight:600; color:var(--accent-ink); flex:1 1 220px; min-width:0;}
#cf-status.is-error{color:var(--danger);}
@media (max-width:480px){
  .field-row{grid-template-columns:minmax(0,1fr);}
  .form-foot .btn{width:100%;}
}

/* ---------- footer ---------- */
.site-footer{background:var(--navy); color:#c8d3e8;}
.footer-row{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; padding-block:28px; font-size:0.9rem;}
.site-footer a{color:#fff; font-weight:700; text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}