@font-face{font-family:Play;font-weight:400;font-display:swap;src:url(/fonts/play-400-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Play;font-weight:400;font-display:swap;src:url(/fonts/play-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Play;font-weight:700;font-display:swap;src:url(/fonts/play-700-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Play;font-weight:700;font-display:swap;src:url(/fonts/play-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --white:#fff;
  --ink:#1e1e20;
  --band:#1e1e20;
  --bg:#3d3d3d;
  --card:#676767;
  --card-text:#e6e6e6;
  --accent:#baf6f9;
  --accent-2:#64e1e3;
  --orange:#f39c0b;
  --teal:#269c86;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:Play,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{margin:0;font-weight:700}
.wrap{width:min(966px,100% - 32px);margin-inline:auto}

/* ---------- Hero ---------- */
.hero{background:var(--white)}
.hero__inner{position:relative;min-height:424px}
.brand{position:absolute;z-index:3;top:8px;left:0;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand img{width:100px;height:100px;border-radius:50%}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__text strong{font-family:var(--display);font-size:28px;letter-spacing:.01em}
.brand__text span{font-size:22px;letter-spacing:.02em}

.cta{position:absolute;z-index:3;top:0;right:0;display:flex;flex-direction:column;align-items:center;
  padding:12px 16px 14px;min-width:203px;background:var(--orange);color:var(--white);
  border-radius:0 0 4px 4px;text-decoration:none;font-size:20px;line-height:1.3;font-weight:300}
.cta__title{font-family:var(--display);font-weight:700;font-size:26px}
.cta__phone{font-family:var(--display);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta:hover .cta__phone,.cta:focus-visible .cta__phone{text-decoration-thickness:2px}

.hero__photo{position:absolute;top:86px;right:-14px;bottom:0;width:600px;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

.hero__claim{position:absolute;z-index:2;top:193px;left:0;padding:14px 16px 12px;
  background:rgba(190,190,190,.72);color:var(--white)}
.hero__claim h1{font-size:44px;line-height:1.1;letter-spacing:-.005em}
.hero__claim p{margin:4px 0 0;font-size:33px;font-weight:300;line-height:1.15}

.band{height:25px;background:var(--band)}

/* ---------- Content ---------- */
.content{padding:20px 0 48px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 21px;
  grid-template-areas:"pro services" "cyber services";padding-inline:14px}
.card{background:var(--card);color:var(--card-text);display:flex;flex-direction:column}
.card h2{font-family:var(--display);color:var(--accent);font-size:28px;line-height:1.2}
.card__body{padding:8px 15px 14px}
.card__img{width:100%;aspect-ratio:465/230;object-fit:cover;margin-top:auto}

.card--pro{grid-area:pro;flex-direction:row;min-height:268px}
.card__side{width:140px;flex:0 0 140px;height:225px;object-fit:cover;object-position:42% center}
.card--pro p{margin:12px 0 0;font-size:17px;line-height:1.6}
.card--pro p+p{margin-top:0}

.card--services{grid-area:services}
.card--services .card__body{padding:12px 15px 30px}
.services{margin:24px 0 0;padding-left:44px;font-size:25px;line-height:1.25}
.services li::marker{font-size:.7em}

.card--cyber{grid-area:cyber}
.card--cyber .card__body{padding:8px 10px 6px 12px}
.card--cyber .lead{margin:6px 0 0;font-size:19px;line-height:1.25}

/* ---------- Footer ---------- */
.footer{background:var(--teal);color:var(--white);padding:22px 0 0}
.footer__grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:24px;padding-inline:24px}
.footer h2{font-family:var(--display);color:var(--accent);font-size:21px;margin-bottom:10px}
.footer p{margin:0;font-size:15.5px;line-height:1.7}
.footer a{text-underline-offset:2px}
.map{display:block;width:100%;height:150px;border:0;border-radius:3px;margin-bottom:6px;background:#1f7f6d}
.footer .footer__copy{margin:28px auto 0;padding:14px 24px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;opacity:.8}

a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero__inner{min-height:0;display:flex;flex-direction:column}
  .brand,.cta,.hero__photo,.hero__claim{position:static}
  .brand{padding:12px 0}
  .cta{order:4;margin:0 -16px;border-radius:0;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 .4em;font-size:18px}
  .cta__title{width:100%;text-align:center;font-size:22px}
  .hero__photo{width:auto;margin:0 -16px;aspect-ratio:16/9}
  .hero__claim{order:3;margin:0 -16px;background:#8c8c8c;padding:14px 16px}
  .hero__claim h1{font-size:clamp(26px,6vw,40px)}
  .hero__claim p{font-size:clamp(19px,4.4vw,30px)}
  .grid{grid-template-columns:1fr;grid-template-areas:"pro" "services" "cyber";padding-inline:0}
  .services{font-size:21px;padding-left:28px}
  .footer__grid{grid-template-columns:1fr;padding-inline:0}
  .footer__copy{padding-inline:0}
}
@media (max-width:480px){
  .brand img{width:72px;height:72px}
  .brand__text strong{font-size:22px}
  .brand__text span{font-size:17px}
  .card--pro{flex-direction:column}
  .card__side{width:100%;flex:none;height:auto;aspect-ratio:16/9;object-position:center 30%}
}