@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root { --blue:#1f73d5; --black:#050505; --white:#f7f7f7; --max:1160px; --condensed:'Barlow Condensed',Arial,sans-serif; --body:'Barlow',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#0c0d0e; background:#fff; font:16px/1.5 var(--body); }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 64px),var(--max)); margin:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-100%; left:1rem; z-index:20; padding:.6rem 1rem; color:#fff; background:var(--blue); }
.skip-link:focus { top:1rem; }

.site-header { position:absolute; z-index:3; left:0; top:0; width:100%; height:88px; padding:0 max(32px,calc((100vw - var(--max))/2)); display:flex; align-items:center; justify-content:space-between; color:#fff; }
.brand { font:600 28px/.8 var(--condensed); letter-spacing:.1em; }
.brand strong { color:var(--blue); font-weight:600; }
.brand small { display:block; margin-top:8px; font:600 12px/1 var(--body); letter-spacing:.04em; }
.site-header nav { display:flex; gap:35px; align-items:center; text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:.04em; }
.site-header nav a { padding:8px 0; border-bottom:2px solid transparent; }
.site-header nav a:hover, .site-header nav a:focus, .site-header nav .active { color:var(--blue); border-bottom-color:var(--blue); }
.menu-toggle { display:none; }

.hero { position:relative; min-height:670px; height:62vw; max-height:770px; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.15) 72%,rgba(0,0,0,.1) 100%); }
.hero-content { position:relative; padding-top:70px; }
.hero h1 { max-width:720px; margin:0; text-transform:uppercase; font:600 clamp(2.5rem,3.8vw,4.5rem)/.92 var(--condensed); letter-spacing:.035em; }
.blue-rule, .section-title span { display:block; width:40px; height:2px; margin:23px 0 17px; background:var(--blue); }
.hero p { max-width:405px; margin:0; font-size:17px; line-height:1.55; }
.hero-actions { display:flex; gap:20px; margin-top:27px; }
.button { display:inline-block; padding:11px 23px; border:1px solid var(--blue); text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:.03em; transition:background .18s,color .18s; }
.button.filled { color:#fff; background:var(--blue); }
.button.outline { color:var(--blue); }
.hero .button.outline { color:#fff; }
.button:hover, .button:focus { color:#fff; background:var(--blue); }

.services { padding:43px 0 35px; background:var(--white); }
.service-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.service-grid article { position:relative; padding:0 28px; text-align:center; border-right:1px solid #d6dae0; }
.service-grid article:first-child { padding-left:0; }
.service-grid article:last-child { padding-right:0; border-right:0; }
.service-grid svg, .skills svg { width:53px; height:53px; margin:0 auto 18px; fill:none; stroke:var(--blue); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.service-grid h2, .skills h2 { margin:0 0 10px; text-transform:uppercase; font-size:15px; line-height:1.05; }
.service-grid p { max-width:180px; margin:auto; font-size:13px; line-height:1.55; }

.experience { padding:43px 0 36px; color:#fff; background:linear-gradient(120deg,#131719,#0a0c0d); }
.section-title h2 { margin:0; text-transform:uppercase; font:600 28px/.95 var(--condensed); letter-spacing:.04em; }
.section-title span { margin:10px 0 0; }
.role-table { margin-top:8px; border-top:1px solid rgba(31,115,213,.76); }
.role-row { display:grid; grid-template-columns:45px 1fr 1.15fr 2.2fr; gap:14px; align-items:center; min-height:67px; border-bottom:1px solid rgba(190,208,230,.45); font-size:15px; line-height:1.25; }
.role-row strong { font-weight:500; }
.role-head { min-height:30px; color:var(--blue); text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.row-icon { width:28px; height:28px; position:relative; display:block; border:1px solid rgba(255,255,255,.8); }
.row-icon.play { border-radius:50%; }
.row-icon.play:after { content:''; position:absolute; left:10px; top:7px; border-left:8px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.row-icon.display:after { content:''; position:absolute; left:7px; right:7px; bottom:-5px; height:3px; border-top:1px solid #fff; }
.row-icon.camera { border-radius:2px; }
.row-icon.camera:after { content:''; position:absolute; right:-8px; top:6px; width:7px; height:13px; border:1px solid #fff; }
.row-icon.headset { border:0; border-top:2px solid #fff; border-radius:50%; }
.row-icon.headset:before, .row-icon.headset:after { content:''; position:absolute; top:10px; width:5px; height:10px; border:1px solid #fff; }
.row-icon.headset:before { left:1px; }.row-icon.headset:after { right:1px; }
.row-icon.direction { border:0; }.row-icon.direction:before, .row-icon.direction:after { content:''; position:absolute; left:0; right:0; height:1px; background:#fff; }
.row-icon.direction:before { top:9px; }.row-icon.direction:after { bottom:9px; }

.skills { padding:28px 0 31px; background:#fff; }
.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.skill-grid article { position:relative; min-height:216px; padding:0 50px; border-right:1px solid #d6dae0; }
.skill-grid article:first-child { padding-left:0; }.skill-grid article:last-child { padding-right:0; border-right:0; }
.skills h2 { font-size:16px; }.skills ul { margin:0; padding:0; list-style:none; font-size:14px; line-height:1.68; }
.skills li:before { content:'•'; margin-right:11px; color:var(--blue); }
.skills svg { position:absolute; right:22px; bottom:0; width:58px; height:58px; margin:0; }
.skill-grid article:first-child svg { right:47px; }.skill-grid article:last-child svg { right:0; }

.about-contact { display:grid; grid-template-columns:minmax(250px,calc((100vw - var(--max))/2 + 275px)) 1fr; min-height:255px; color:#fff; background:linear-gradient(120deg,#151a1c,#090b0c); }
.about-image { position:relative; overflow:hidden; }.about-image img { width:100%; height:100%; object-fit:cover; object-position:66% center; filter:saturate(.75); }
.about-image:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(0,0,0,.4)); }
.about-image span { position:absolute; z-index:1; left:16px; bottom:13px; font-size:9px; color:#ddd; }
.about-wrap { display:grid; grid-template-columns:1.06fr .94fr; gap:58px; padding-top:36px; padding-bottom:28px; }
.about-copy p { max-width:450px; margin:21px 0 0; font-size:13px; line-height:1.65; }.about-copy .button { margin-top:20px; }
.connect { border-left:1px solid rgba(255,255,255,.2); padding-left:40px; }.connect a, .connect p { display:block; margin:16px 0 0; font-size:14px; }.connect b { display:inline-block; width:27px; color:#ddd; font-size:18px; font-weight:400; vertical-align:middle; }
footer { padding:10px 0; color:#ddd; background:#030303; text-align:center; font-size:10px; }footer i { display:inline-block; width:1px; height:11px; margin:0 10px; vertical-align:-2px; background:#888; }

@media (max-width:780px) {
  .container { width:min(calc(100% - 40px),var(--max)); }.site-header { height:75px; padding:0 20px; }.brand { font-size:24px; }.brand small { font-size:9px; margin-top:6px; }
  .site-header nav { display:none; position:absolute; top:75px; left:0; width:100%; padding:18px 20px; background:#060606; flex-direction:column; align-items:flex-start; gap:14px; }.site-header nav.is-open { display:flex; }
  .menu-toggle { display:grid; gap:5px; padding:7px 0; width:28px; border:0; background:none; }.menu-toggle i { height:2px; background:#fff; width:26px; }
  .hero { height:760px; min-height:0; }.hero-image { object-position:66% center; }.hero-shade { background:linear-gradient(90deg,rgba(0,0,0,.97),rgba(0,0,0,.65) 90%); }.hero-content { padding-top:48px; }.hero h1 { max-width:350px; font-size:3.2rem; }.hero p { max-width:295px; font-size:16px; }.hero-actions { gap:10px; flex-wrap:wrap; }.button { padding:11px 16px; }
  .services { padding:24px 0; }.service-grid { grid-template-columns:1fr; }.service-grid article { padding:25px 0; border:0; border-bottom:1px solid #d6dae0; }.service-grid article:last-child { border-bottom:0; }.service-grid p { max-width:280px; }
  .role-table { margin-top:17px; }.role-row { grid-template-columns:34px 1fr; gap:10px; padding:15px 0; align-items:start; }.role-row strong { font-size:17px; }.role-row span { grid-column:2; font-size:14px; }.role-head { display:none; }.row-icon { margin-top:1px; }
  .skills { padding:34px 0; }.skill-grid { grid-template-columns:1fr; }.skill-grid article,.skill-grid article:first-child,.skill-grid article:last-child { min-height:0; padding:0 0 30px; margin:0 0 28px; border:0; border-bottom:1px solid #d6dae0; }.skill-grid article:last-child { margin:0; border:0; }.skill-grid article svg,.skill-grid article:first-child svg,.skill-grid article:last-child svg { right:0; bottom:25px; width:50px; height:50px; }
  .about-contact { display:block; }.about-image { height:230px; }.about-wrap { grid-template-columns:1fr; gap:45px; padding:35px 20px; }.connect { border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:28px 0 0; }footer { font-size:9px; }
}