@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --bg: #070a08;
  --soft: #0c100d;
  --panel: #101612;
  --panel-hover: #141d17;
  --text: #f4f7f3;
  --muted: #9ba49d;
  --green: #159535;
  --green-bright: #22bd49;
  --line: rgba(255, 255, 255, 0.12);
  --line-green: rgba(34, 189, 73, 0.36);
  --page: min(1400px, calc(100% - 96px));
  --font: "Manrope", "Avenir Next", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--text);
  background: radial-gradient(circle at 10% 35%, rgba(21,149,53,.07), transparent 23%), var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
svg { display: block; width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 11px 15px; background: var(--green); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: var(--page);
  min-height: 122px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto auto auto;
  align-items: center;
  gap: 34px;
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%);
}
.brand { width: max-content; display: inline-flex; }
.brand-copy { display: grid; line-height: 1.04; text-transform: uppercase; }
.brand-copy strong, .brand-copy b { font-size: 18px; font-weight: 800; letter-spacing: .035em; }
.brand-copy b { color: var(--green-bright); }
.brand-copy small { margin-top: 15px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.desktop-nav { display: flex; gap: 34px; }
.desktop-nav a, .header-contact { color: rgba(255,255,255,.78); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .18s ease; }
.header-contact { color: #fff; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .header-contact:hover, .header-contact:focus-visible { color: var(--green-bright); }
.menu-button { width: 52px; height: 52px; display: grid; place-content: center; gap: 5px; background: rgba(9,12,10,.88); border: 1px solid var(--line); border-radius: 50%; transition: .18s ease; }
.menu-button span { width: 19px; height: 1px; background: #fff; transition: transform .18s ease,opacity .18s ease; }
.menu-button:hover, .menu-button:focus-visible { background: var(--green); border-color: var(--green); }
.site-menu { position: relative; }
.site-menu summary { list-style: none; cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu[open] .menu-button { background: var(--green); border-color: var(--green); }
.site-menu[open] .menu-button span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-menu[open] .menu-button span:nth-child(2) { opacity: 0; }
.site-menu[open] .menu-button span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-menu-panel { position: absolute; top: calc(100% + 14px); right: 0; width: min(460px,calc(100vw - 28px)); max-height: calc(100vh - 105px); padding: 25px; overflow-y: auto; background: radial-gradient(circle at 100% 0,rgba(34,189,73,.18),transparent 34%),rgba(8,13,9,.98); border: 1px solid rgba(34,189,73,.38); border-radius: 17px; box-shadow: 0 30px 90px rgba(0,0,0,.46); backdrop-filter: blur(18px); transform-origin: top right; animation: site-menu-in .18s both ease-out; }
.site-menu-heading { display: grid; gap: 6px; }
.site-menu-heading span, .site-menu-shortcuts > span { color: var(--green-bright); font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.site-menu-heading strong { font-size: 24px; line-height: 1.1; }
.site-menu-links { margin-top: 22px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.site-menu-links a { min-height: 70px; padding: 14px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; transition: .18s ease; }
.site-menu-links a:hover, .site-menu-links a:focus-visible, .site-menu-shortcuts a:hover, .site-menu-shortcuts a:focus-visible { background: rgba(34,189,73,.11); border-color: rgba(34,189,73,.42); }
.site-menu-links span { color: var(--green-bright); font-size: 8px; font-weight: 800; }
.site-menu-links strong { font-size: 11px; line-height: 1.35; }
.site-menu-shortcuts { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.site-menu-shortcuts > div { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.site-menu-shortcuts a { padding: 11px 12px; display: flex; justify-content: space-between; gap: 10px; color: #c1c9c3; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; font-size: 9px; font-weight: 700; line-height: 1.35; transition: .18s ease; }
.site-menu-shortcuts b, .site-menu-contact b { color: var(--green-bright); }
.site-menu-contact { margin-top: 10px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,rgba(34,189,73,.2),rgba(21,149,53,.08)); border: 1px solid rgba(34,189,73,.34); border-radius: 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.hero { position: relative; min-height: min(880px, 100svh); overflow: hidden; background: #080b09; }
.hero-copy { position: relative; z-index: 3; width: var(--page); min-height: min(880px, 100svh); margin: 0 auto; padding: clamp(175px, 19vh, 220px) 0 48px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { margin: 0 0 26px; display: flex; align-items: center; gap: 10px; color: var(--green-bright); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 9px; height: 9px; background: var(--green-bright); border-radius: 50%; box-shadow: 0 0 18px rgba(34,189,73,.5); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h1 { max-width: 950px; margin-bottom: 0; font-size: clamp(48px, 4.9vw, 76px); font-weight: 800; line-height: 1.02; }
.hero-lead { max-width: 720px; margin: 28px 0 0; color: rgba(255,255,255,.78); font-size: clamp(15px, 1.35vw, 19px); font-weight: 500; line-height: 1.58; }
.hero-actions { margin-top: 34px; display: flex; align-items: stretch; gap: 14px; }
.button { min-height: 56px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 14px; font-size: 13px; font-weight: 800; transition: .18s ease; }
.button-primary { min-width: 220px; background: linear-gradient(135deg, var(--green-bright), var(--green)); box-shadow: 0 14px 44px rgba(13,111,40,.28); }
.button-primary:hover, .button-primary:focus-visible { background: linear-gradient(135deg,#29d653,#169b38); transform: translateY(-2px); }
.platform-button { min-width: 265px; padding: 8px 18px; justify-content: flex-start; gap: 13px; background: rgba(16,22,18,.78); border-color: rgba(34,189,73,.66); backdrop-filter: blur(12px); }
.platform-button:hover, .platform-button:focus-visible { background: rgba(21,149,53,.2); border-color: var(--green-bright); }
.platform-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--green-bright); background: rgba(34,189,73,.12); border: 1px solid rgba(34,189,73,.32); border-radius: 9px; }
.platform-button > span:last-child { display: grid; gap: 2px; text-align: left; }
.platform-button strong { font-size: 12px; }
.platform-button small { color: var(--muted); font-size: 9px; font-weight: 500; }
.hero-proof { width: min(1100px,100%); margin-top: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(12px); }
.hero-proof div { min-height: 78px; padding: 15px 17px; display: grid; align-content: center; gap: 5px; background: rgba(8,12,9,.76); }
.hero-proof strong { color: #fff; font-size: 15px; font-weight: 800; }
.hero-proof span { color: rgba(255,255,255,.58); font-size: 8px; font-weight: 700; line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; }

.hero-visual { position: absolute; z-index: 0; inset: 0; margin: 0; overflow: hidden; }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.hero-visual::before { background: linear-gradient(90deg,rgba(5,7,6,.98) 0%,rgba(5,7,6,.9) 31%,rgba(5,7,6,.48) 56%,rgba(5,7,6,.2) 76%,rgba(5,7,6,.5) 100%), linear-gradient(0deg,rgba(5,7,6,.88),transparent 42%); }
.hero-visual::after { background: radial-gradient(circle at 72% 44%,rgba(21,149,53,.11),transparent 28%), linear-gradient(180deg,transparent 72%,#070a08); }
.hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 45%; filter: brightness(.62) saturate(.55) contrast(1.08); transform: scaleX(-1) scale(1.025); animation: hero-image 1.1s both cubic-bezier(.2,.75,.25,1); }
.hero-visual figcaption { position: absolute; z-index: 2; right: max(48px,calc((100% - 1400px)/2)); bottom: 40px; padding: 12px 15px; display: grid; gap: 2px; background: rgba(7,10,8,.72); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(12px); }
.hero-visual figcaption span { font-size: 11px; font-weight: 700; }
.hero-visual figcaption strong { color: var(--green-bright); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.quick-routes { padding: clamp(80px,8vw,120px) max(48px,calc((100% - 1400px)/2)); background: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#070a08; background-size: 48px 48px; }
.section-intro { margin-bottom: 44px; display: grid; grid-template-columns: 1fr minmax(310px,500px); align-items: end; gap: 70px; }
.section-intro .eyebrow { grid-column: 1/-1; margin-bottom: -38px; }
h2 { margin-bottom: 0; font-size: clamp(42px,4.8vw,70px); font-weight: 800; line-height: 1.02; }
.section-intro > p:last-child { margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.route-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.route-card { position: relative; min-height: 190px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow: hidden; background: radial-gradient(circle at 95% 110%,rgba(34,189,73,.18),transparent 42%),rgba(16,22,18,.88); border: 1px solid rgba(255,255,255,.1); border-radius: 15px; transition: .22s ease; }
.route-card::before { content: ""; position: absolute; top: 0; right: 0; width: 96px; height: 96px; background: linear-gradient(135deg,transparent 49%,rgba(34,189,73,.08) 50%); }
.route-card:hover, .route-card:focus-visible { background: radial-gradient(circle at 95% 110%,rgba(34,189,73,.28),transparent 46%),var(--panel-hover); border-color: var(--line-green); transform: translateY(-4px); }
.route-number { padding: 5px 8px; color: var(--green-bright); background: rgba(34,189,73,.1); border: 1px solid rgba(34,189,73,.2); border-radius: 7px; font-size: 9px; font-weight: 800; }
.route-card strong { position: relative; z-index: 1; max-width: 330px; font-size: clamp(18px,1.7vw,25px); font-weight: 700; line-height: 1.17; }
.route-arrow { position: absolute; right: 20px; bottom: 18px; color: var(--green-bright); font-size: 18px; transition: transform .18s ease; }
.route-card:hover .route-arrow, .route-card:focus-visible .route-arrow { transform: translate(3px,-3px); }
.business-route-grid .route-card { min-height: 230px; }
.route-copy { position: relative; z-index: 1; padding-right: 28px; display: grid; gap: 10px; }
.route-copy strong { max-width: 340px; }
.route-copy small { max-width: 330px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.5; }
.business-extras-panel { margin-top: 18px; padding: clamp(26px,3vw,38px); background: radial-gradient(circle at 95% 0,rgba(34,189,73,.26),transparent 34%),linear-gradient(120deg,#102b18,#0a130d 62%); border: 1px solid rgba(34,189,73,.52); border-radius: 18px; box-shadow: 0 22px 70px rgba(0,0,0,.18); }
.business-extras-heading { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(310px,1fr); align-items: end; gap: 14px 60px; }
.business-extras-heading > span { grid-column: 1/-1; color: var(--green-bright); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.business-extras-heading h3 { margin: 0; font-size: clamp(26px,2.6vw,38px); line-height: 1.08; }
.business-extras-heading p { margin: 0; color: #9fac9f; font-size: 12px; line-height: 1.65; }
.business-extras { margin-top: 26px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.business-extra-link { position: relative; min-height: 170px; padding: 24px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 20px; overflow: hidden; background: rgba(5,9,6,.58); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; transition: .2s ease; }
.business-extra-link::after { content: ""; position: absolute; right: -40px; bottom: -55px; width: 145px; height: 145px; background: radial-gradient(circle,rgba(34,189,73,.18),transparent 68%); pointer-events: none; }
.business-extra-link:hover, .business-extra-link:focus-visible { background: rgba(11,24,14,.88); border-color: rgba(34,189,73,.58); transform: translateY(-3px); }
.business-extra-index { width: 44px; height: 44px; display: grid; place-items: center; color: #061008; background: var(--green-bright); border-radius: 11px; font-size: 10px; font-weight: 800; }
.business-extra-copy { min-width: 0; display: grid; gap: 11px; }
.business-extra-copy small { color: #87a28c; font-size: 8px; font-weight: 800; letter-spacing: .07em; line-height: 1.45; text-transform: uppercase; }
.business-extra-copy strong { max-width: 420px; color: #fff; font-size: clamp(18px,1.75vw,25px); line-height: 1.17; }
.business-extra-action { position: relative; z-index: 1; align-self: end; display: flex; align-items: center; gap: 10px; color: #dfffe6; font-size: 8px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; }
.business-extra-action b { color: var(--green-bright); font-size: 17px; font-weight: 500; }
.citizen-services { position: relative; overflow: hidden; overflow: clip; }
.citizen-services::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(520px,100%); height: 520px; background: radial-gradient(circle,rgba(34,189,73,.07),transparent 68%); pointer-events: none; }
.citizen-intro { margin-bottom: 44px; }
.citizen-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 16px; }
.citizen-service-card { min-height: 215px; padding: 28px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: start; gap: 24px; background: var(--soft); transition: background .18s ease; }
.citizen-service-card:hover, .citizen-service-card:focus-visible { background: radial-gradient(circle at 100% 100%,rgba(34,189,73,.13),transparent 44%),var(--panel); }
.citizen-index { width: 35px; height: 35px; display: grid; place-items: center; color: var(--green-bright); background: rgba(34,189,73,.1); border: 1px solid rgba(34,189,73,.25); border-radius: 9px; font-size: 9px; font-weight: 800; }
.citizen-copy { display: grid; gap: 17px; }
.citizen-copy strong { max-width: 510px; color: #fff; font-size: clamp(22px,2.2vw,32px); line-height: 1.14; }
.citizen-copy small { max-width: 540px; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.65; }
.citizen-arrow { color: var(--green-bright); font-size: 18px; transition: transform .18s ease; }
.citizen-service-card:hover .citizen-arrow, .citizen-service-card:focus-visible .citizen-arrow { transform: translate(3px,-3px); }

.practice { width: var(--page); margin: 0 auto; padding: clamp(90px,9vw,140px) 0; }
.practice-heading { margin-bottom: 54px; display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 60px; }
.practice-heading .eyebrow { margin-bottom: 8px; }
.practice { width: var(--page); margin: 0 auto; padding: clamp(90px,9vw,140px) 0; }

.about { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(430px,1.05fr) minmax(430px,.95fr); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.about-photo { position: relative; min-height: 760px; margin: 0; overflow: hidden; }
.about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(6,9,7,.8),transparent 50%); }
.about-photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(.67) saturate(.58) contrast(1.08); }
.about-photo figcaption { position: absolute; z-index: 1; right: 25px; bottom: 22px; left: 25px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.about-copy { padding: clamp(65px,6vw,105px); }
.about-copy h2 { font-size: clamp(38px,3.6vw,58px); }
.about-lead { margin: 27px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.trust-list { margin: 48px 0 0; border-top: 1px solid var(--line); }
.trust-list > div { padding: 20px 0; display: grid; grid-template-columns: 42px 1fr; gap: 15px; border-bottom: 1px solid var(--line); }
.trust-list dt { color: var(--green-bright); font-size: 9px; font-weight: 800; }
.trust-list dd { margin: 0; display: grid; gap: 5px; }
.trust-list dd strong { font-size: 15px; }
.trust-list dd span { color: var(--muted); font-size: 11px; line-height: 1.55; }

.media-cases { width: var(--page); margin: clamp(72px,7vw,105px) auto 0; }
.media-cases-heading { margin-bottom: 25px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); align-items: end; gap: 40px; }
.media-cases-heading h2 { font-size: clamp(34px,3.4vw,48px); }
.media-cases-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.media-case-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.media-case-link { position: relative; min-height: 150px; padding: 23px 70px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; background: radial-gradient(circle at 100% 100%,rgba(34,189,73,.1),transparent 40%),var(--soft); border: 1px solid var(--line); border-radius: 14px; transition: background .2s ease,border-color .2s ease,transform .2s ease; }
.media-case-link:hover, .media-case-link:focus-visible { background: radial-gradient(circle at 100% 100%,rgba(34,189,73,.16),transparent 44%),#101612; border-color: rgba(34,189,73,.48); transform: translateY(-2px); }
.media-case-source { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.media-case-source time { color: #718078; font-weight: 700; }
.media-case-title { max-width: 480px; margin-top: 14px; font-size: clamp(17px,1.45vw,21px); line-height: 1.25; }
.media-case-outcome { margin-top: auto; padding-top: 16px; color: var(--green-bright); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.media-case-arrow { position: absolute; top: 50%; right: 24px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--green-bright); background: rgba(34,189,73,.1); border: 1px solid rgba(34,189,73,.27); border-radius: 9px; font-size: 14px; transform: translateY(-50%); }
.client-logos { width: var(--page); margin: clamp(68px,6.5vw,96px) auto 0; }
.client-logos-heading { margin-bottom: 23px; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); align-items: end; gap: 40px; }
.client-logos-heading h2 { font-size: clamp(32px,3.1vw,44px); }
.client-logos-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.client-logo-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden; background: #edf0ec; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; }
.client-logo-item { min-width: 0; min-height: 112px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(6,9,7,.12); }
.client-logo-item:last-child { border-right: 0; }
.client-logo-item img { display: block; max-width: 145px; max-height: 50px; object-fit: contain; }
.client-logo-item .client-logo-petrol { max-height: 54px; }
.client-logo-item .client-logo-dala { max-width: 74px; max-height: 54px; }
.client-logo-item .client-logo-liqui { max-width: 92px; max-height: 56px; }
.client-logo-item .client-logo-shashlikoff { max-width: 148px; }
.client-logo-item .client-logo-altra { max-width: 112px; }
.client-logo-item .client-logo-kriz { max-width: 112px; max-height: 58px; }
.client-logo-caption { max-width: 180px; margin-top: 8px; color: #59625c; font-size: 8px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.process { width: var(--page); margin: 0 auto; padding: clamp(100px,10vw,155px) 0; }
.process-topline { display: grid; grid-template-columns: 1fr minmax(300px,430px); align-items: end; gap: 80px; }
.process-topline > p { margin-bottom: 5px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.process-steps { margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; overflow: visible; background: transparent; border: 0; list-style: none; }
.process-steps li { min-height: 148px; padding: 25px 27px; display: grid; grid-template-columns: 46px minmax(0,1fr); grid-template-rows: auto auto; align-content: center; column-gap: 23px; row-gap: 9px; background: radial-gradient(circle at 100% 100%,rgba(34,189,73,.09),transparent 42%),var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.process-steps li > span { width: 44px; height: 44px; grid-row: 1/3; display: grid; place-items: center; align-self: center; color: var(--green-bright); background: rgba(34,189,73,.1); border: 1px solid rgba(34,189,73,.28); border-radius: 11px; font-size: 9px; font-weight: 800; }
.process-steps strong { margin: 0; align-self: end; font-size: 18px; line-height: 1.25; }
.process-steps p { margin: 0; align-self: start; color: var(--muted); font-size: 11px; line-height: 1.55; }
.review-strip { margin-top: 16px; padding: 30px 34px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 42px; background: radial-gradient(circle at 88% 50%,rgba(34,189,73,.2),transparent 32%),var(--panel); border: 1px solid var(--line-green); border-radius: 15px; }
.rating { display: flex; align-items: baseline; gap: 11px; }
.rating strong { color: var(--green-bright); font-size: 48px; font-weight: 800; line-height: 1; }
.rating span { max-width: 68px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.review-strip p { margin-bottom: 0; color: #c2c9c3; font-size: 14px; line-height: 1.6; }
.review-strip > a { padding: 13px 16px; display: flex; gap: 16px; background: rgba(34,189,73,.1); border: 1px solid rgba(34,189,73,.27); border-radius: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; }

.contact { padding: clamp(90px,9vw,140px) max(48px,calc((100% - 1400px)/2)); display: grid; grid-template-columns: minmax(0,1.25fr) minmax(350px,.75fr); gap: clamp(80px,10vw,160px); background: radial-gradient(circle at 12% 30%,rgba(34,189,73,.28),transparent 24%),linear-gradient(135deg,#0e361b,#08120c 62%); border-top: 1px solid rgba(34,189,73,.3); }
.contact h2 { max-width: 850px; font-size: clamp(52px,5.8vw,86px); }
.contact-main > p:not(.eyebrow) { max-width: 610px; margin: 27px 0 0; color: #aab8ad; font-size: 15px; line-height: 1.7; }
.contact-actions { margin-top: 37px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.button-light { background: var(--green); }
.button-light:hover, .button-light:focus-visible { background: var(--green-bright); transform: translateY(-2px); }
.contact-phone { padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px; font-weight: 700; }
.contact-details { align-self: end; border-top: 1px solid rgba(255,255,255,.16); }
.contact-details > div { padding: 21px 0; display: grid; grid-template-columns: 100px 1fr; gap: 22px; border-bottom: 1px solid rgba(255,255,255,.16); }
.contact-details span { color: #7d8e81; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-details strong, .contact-details a { font-size: 14px; font-weight: 600; line-height: 1.5; }
.office-map { grid-column: 1 / -1; margin-top: clamp(10px,2vw,30px); }
.office-map-heading { margin-bottom: 22px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.office-map-heading .eyebrow { margin-bottom: 13px; }
.office-map-heading h3 { margin: 0; font-size: clamp(28px,3vw,42px); line-height: 1.05; letter-spacing: -.035em; }
.office-map-heading > div > p:last-child { margin: 10px 0 0; color: #aab8ad; font-size: 14px; }
.map-route-link { flex: 0 0 auto; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: color .2s ease,border-color .2s ease; }
.map-route-link:hover, .map-route-link:focus-visible { color: var(--green-bright); border-color: var(--green-bright); }
.map-route-link span { margin-left: 8px; color: var(--green-bright); }
.office-location-grid { height: clamp(330px,34vw,470px); display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: 12px; }
.office-entrance-photo { position: relative; min-width: 0; height: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; background: #111813; }
.office-entrance-photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(5,8,6,.85)); pointer-events: none; }
.office-entrance-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.office-entrance-photo figcaption { position: absolute; z-index: 1; right: 18px; bottom: 17px; left: 18px; color: rgba(255,255,255,.88); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.office-map-frame { height: clamp(330px,34vw,470px); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; background: #111813; }
.office-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

footer { width: var(--page); margin: 0 auto; padding: 30px 0 38px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 35px; color: #707a72; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.footer-brand { color: #fff; font-size: 15px; font-weight: 800; }
footer a:last-child { color: var(--green-bright); }

@keyframes hero-image { from { opacity: 0; transform: scaleX(-1) scale(1.09); } to { opacity: 1; transform: scaleX(-1) scale(1.025); } }
@keyframes site-menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

@media (max-width: 1120px) {
  :root { --page: min(100% - 48px,980px); }
  .site-header { grid-template-columns: 1fr auto auto; }
  .desktop-nav { display: none; }
  .hero, .hero-copy { min-height: 790px; }
  .hero-copy { padding-top: 175px; }
  .hero-visual figcaption { right: 24px; }
  .route-grid, .process-steps { grid-template-columns: repeat(2,1fr); }
  .about { grid-template-columns: 1fr; }
  .about-photo { min-height: min(700px,70vw); }
  .client-logos-heading { grid-template-columns: 1fr; gap: 14px; }
  .client-logo-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .client-logo-item:nth-child(3) { border-right: 0; }
  .client-logo-item:nth-child(-n+3) { border-bottom: 1px solid rgba(6,9,7,.12); }
  .media-cases-heading { grid-template-columns: 1fr; gap: 14px; }
  .review-strip { grid-template-columns: 160px 1fr; }
  .review-strip > a { grid-column: 2; width: max-content; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --page: calc(100% - 28px); }
  .site-header { min-height: 90px; grid-template-columns: 1fr auto; gap: 15px; }
  .brand-copy strong, .brand-copy b { font-size: 15px; }
  .brand-copy small { margin-top: 9px; font-size: 8px; }
  .header-contact { display: none; }
  .menu-button { width: 46px; height: 46px; }
  .site-menu-panel { top: calc(100% + 10px); max-height: calc(100vh - 85px); padding: 20px; }
  .site-menu-links, .site-menu-shortcuts > div { grid-template-columns: 1fr; }
  .site-menu-links a { min-height: 58px; }
  .hero, .hero-copy { min-height: 760px; }
  .hero-copy { padding-top: 142px; }
  .eyebrow { margin-bottom: 19px; font-size: 8px; }
  h1 { font-size: clamp(38px,10.5vw,52px); line-height: 1.04; }
  .hero-lead { max-width: 94%; margin-top: 22px; font-size: 14px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .button, .platform-button { width: 100%; min-width: 0; }
  .hero-proof { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-proof div { min-height: 72px; padding: 12px; }
  .hero-proof strong { font-size: 13px; }
  .hero-proof span { font-size: 7px; }
  .hero-visual img { object-position: 42% center; }
  .hero-visual figcaption { display: none; }
  .quick-routes { padding: 72px 14px; }
  .section-intro { margin-bottom: 35px; grid-template-columns: 1fr; gap: 18px; }
  .section-intro .eyebrow { grid-column: auto; margin-bottom: 0; }
  h2 { font-size: clamp(38px,11vw,52px); }
  .route-grid, .process-steps { grid-template-columns: 1fr; }
  .business-extras-panel { padding: 25px 18px; }
  .business-extras, .citizen-grid { grid-template-columns: 1fr; }
  .business-extras-heading { grid-template-columns: 1fr; gap: 12px; }
  .business-extras-heading > span { grid-column: auto; }
  .business-extra-link { min-height: 0; padding: 21px 18px; grid-template-columns: 42px minmax(0,1fr); gap: 16px; }
  .business-extra-index { width: 40px; height: 40px; }
  .business-extra-action { grid-column: 2; align-self: start; }
  .route-card { min-height: 160px; }
  .business-route-grid .route-card { min-height: 195px; }
  .citizen-service-card { min-height: 0; padding: 22px 18px; grid-template-columns: 35px minmax(0,1fr) auto; gap: 14px; }
  .citizen-copy { gap: 12px; }
  .citizen-copy strong { font-size: 21px; }
  .practice { padding: 78px 0; }
  .about { width: 100%; border-right: 0; border-left: 0; border-radius: 0; }
  .about-photo { min-height: 520px; }
  .about-copy { padding: 70px 20px; }
  .about-copy h2 { font-size: 38px; }
  .client-logos { margin-top: 62px; }
  .client-logo-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .client-logo-item { min-height: 104px; padding: 16px 10px; }
  .client-logo-item:nth-child(3) { border-right: 1px solid rgba(6,9,7,.12); }
  .client-logo-item:nth-child(2n) { border-right: 0; }
  .client-logo-item:nth-child(-n+4) { border-bottom: 1px solid rgba(6,9,7,.12); }
  .media-cases { margin-top: 68px; }
  .media-case-list { grid-template-columns: 1fr; }
  .media-case-link { min-height: 142px; padding: 21px 62px 20px 20px; }
  .media-case-arrow { right: 18px; }
  .process { padding: 82px 0; }
  .process-topline { grid-template-columns: 1fr; gap: 22px; }
  .process-steps { margin-top: 38px; }
  .process-steps li { min-height: 0; padding: 21px 18px; grid-template-columns: 42px minmax(0,1fr); column-gap: 16px; }
  .process-steps li > span { width: 40px; height: 40px; }
  .review-strip { padding: 25px 20px; grid-template-columns: 1fr; gap: 20px; }
  .review-strip > a { grid-column: auto; }
  .contact { padding: 78px 20px; gap: 70px; }
  .contact h2 { font-size: 47px; }
  .contact-actions { align-items: flex-start; flex-direction: column; }
  .contact-details > div { grid-template-columns: 86px 1fr; }
  .office-map { margin-top: 0; }
  .office-map-heading { margin-bottom: 18px; align-items: flex-start; flex-direction: column; gap: 20px; }
  .office-location-grid { height: auto; grid-template-columns: 1fr; gap: 12px; }
  .office-entrance-photo { height: 260px; }
  .office-map-frame { height: 330px; }
  footer { padding: 28px 0; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
}