/* C Isometric (services-drawings.html): each service as the real thing in the hero's city, in true isometric, lit from
   the top left. Markup (and the projection): source-images/svc_drawings/iso.py; stories: svd-iso.js */

.svb[data-draw="iso"] .svb-art { overflow: hidden; }
.svb[data-draw="iso"] .svb-tile--ai .svb-art { padding-bottom: var(--pad); }

/* ---------- the light: tops lightest, left faces mid, right faces darkest ---------- */
.iso-box { --t: #fff; --l: #E6ECF2; --r: #CDD7E2; --face: var(--l); }
.iso-box polygon { stroke: rgba(5, 27, 46, .06); stroke-width: .6; stroke-linejoin: round; }
.iso-box .f-t { fill: var(--t); }
.iso-box .f-l { fill: var(--l); }
.iso-box .f-r { fill: var(--r); }
.iso-box .f-ao { fill: url(#iso-ao); stroke: none; }
.iso-box .s-l { stop-color: var(--l); }
.iso-box .s-r { stop-color: var(--r); }
.iso-box .f-face { fill: var(--face); }
.iso-box .f-side--on { fill: var(--l); }
/* light along the edges that face it */
.f-edge { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.f-rim { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: .7; }
.iso-sh { fill: rgba(5, 27, 46, .12); }
.iso-sh--contact { fill: rgba(5, 27, 46, .2); }

/* the materials */
.iso--you { --t: #FF8640; --l: #E85600; --r: #B84300; }
.iso-box.iso--you polygon { stroke: rgba(122, 40, 0, .2); }
.iso--you .f-edge { stroke: rgba(255, 214, 170, .9); }
.iso--ink { --t: #10304C; --l: #0A2438; --r: #03111D; }
.iso--ink .f-edge { stroke: rgba(170, 200, 230, .3); }
.iso-dev { --t: #1A3D5E; --l: #0E2C47; --r: #061A2C; --face: #0B2034; }
.iso-dev .f-rim { stroke: rgba(170, 200, 230, .28); }
.iso-alu { --t: #F6F8FA; --l: #DDE4EB; --r: #C3CDD8; }
.iso-lid, .iso-mon { --l: #D6DEE6; --r: #BAC5D0; --face: #10263B; }
.iso-lid .f-rim, .iso-mon .f-rim { stroke: rgba(170, 200, 230, .3); }
.iso-pl { --t: #fff; --l: #EDF1F5; --r: #D4DDE6; }
.iso-blk { --t: #fff; --l: #E2E8EE; --r: #C8D2DC; }
.iso-key { --t: #fff; --l: #E3E9EF; --r: #C9D3DD; }
.iso-mb { --t: #FCFDFE; --l: #E4EAF0; --r: #CAD4DE; }
.iso-tint { --t: #DCE5EE; --l: #C3CFDB; --r: #A9B8C7; }
.iso-scr { fill: url(#iso-screen); }

/* windows: unlit by day; at night some lit warm, some cool; yours all lit */
.w-off { fill: rgba(5, 27, 46, .07); }
.w-you { fill: #FFD3AE; }
.w-warm { fill: rgba(255, 170, 110, .88); }
.w-cool { fill: rgba(205, 225, 245, .55); }

/* ---------- on navy (AI) ---------- */
.svb-tile--dark .iso-box polygon { stroke: rgba(170, 200, 230, .08); }
.svb-tile--dark .f-edge { stroke: rgba(170, 200, 230, .26); }
.svb-tile--dark .iso-sh { fill: rgba(0, 6, 14, .45); }
.svb-tile--dark .iso-sh--contact { fill: rgba(0, 6, 14, .6); }
.svb-tile--dark .iso-dev { --l: #1C4468; --r: #0D2840; --face: #0E263D; }
.svb-tile--dark .iso-dev .f-rim { stroke: rgba(190, 215, 240, .4); }

/* ---------- tags ---------- */
.iso-tag rect { fill: var(--d-card); stroke: var(--d-card-line); }
.iso-tag text { fill: var(--d-strong); font-size: 11.5px; font-weight: 600; }
.iso-tag .g-fill { fill: var(--d-strong); }
.iso-tag .g-line { fill: none; stroke: var(--d-strong); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.iso-tag--you rect { stroke: var(--signal); }
.iso-tag--you text { fill: var(--ai-you-t, var(--signal-text)); }
.iso-tag--cap rect { fill: rgba(255, 255, 255, .85); }
.iso-tag--cap text { fill: var(--d-mute); font-weight: 500; }

/* ---------- AI: an AI app (light) on a desktop or phones ---------- */
.iso-beam { fill: none; stroke: rgba(195, 208, 221, .3); stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; }
.iso-eng { opacity: 0; transition: opacity 300ms var(--ease-out); }
.iso--ai[data-e="0"] .iso-eng[data-e="0"], .iso--ai[data-e="1"] .iso-eng[data-e="1"],
.iso--ai[data-e="2"] .iso-eng[data-e="2"], .iso--ai[data-e="3"] .iso-eng[data-e="3"] { opacity: 1; }
.iso-ch__badge, .iso-ch__av { fill: #051B2E; }
.svb-svg use.iso-ch__star { stroke: #fff; stroke-width: 1.8; --ac: #FFB16B; }
.iso-ch__eng { fill: #051B2E; font-size: 14px; font-weight: 600; }
.iso-ch__rule { fill: none; stroke: #E2E8EE; }
.iso-ch__qb { fill: #EAEFF4; }
.iso-ch__qt { fill: #051B2E; font-size: 12.5px; font-weight: 500; }
.iso-ch__say { fill: #051B2E; font-size: 13px; font-weight: 500; }
.iso-ch__card--you { fill: #FFF6F0; stroke: rgba(232, 86, 0, .55); stroke-width: 1.2; }
.iso-ch__logo { fill: var(--signal); }
.iso-ch__send { fill: #051B2E; }
.iso-ch__name { fill: #051B2E; font-size: 16px; font-weight: 700; }
.iso-ch__sub { fill: #5A6E82; font-size: 11px; font-weight: 500; }
.iso-ch__rec rect { fill: var(--signal); }
.iso-ch__rec text { fill: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; }
.iso-ch__lbl { fill: #5A6E82; font-size: 10.5px; font-weight: 600; }
.iso-lchip rect { fill: #F2F5F8; stroke: #DAE2EA; }
.iso-lchip text { fill: #33485C; font-size: 10px; font-weight: 600; }
.iso-lchip .g-fill { fill: #33485C; }
.iso-lchip .g-line { fill: none; stroke: #33485C; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.iso-ch__row { fill: #F5F7FA; stroke: #E6EBF0; stroke-width: .7; }
.iso-ch__sq { fill: #DCE3EA; }
.iso-ch__bar { fill: #D3DCE5; }
.iso-ch__bar--l { fill: #E3E9EF; }
.iso-ch__in { fill: #fff; stroke: #D3DCE5; stroke-width: .9; }
.iso-ch__ph { fill: #8496A8; font-size: 10.5px; font-weight: 500; }
.iso-ch__up { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.iso-ch__why { fill: #33485C; font-size: 10.5px; font-weight: 500; }
.iso-ch__rail { fill: #F3F6F9; }
.iso-ch__ri { fill: none; stroke: #8496A8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.iso-ch__me { fill: #DCE3EA; }
.iso-ch__share rect { fill: #fff; stroke: #DAE2EA; }
.iso-ch__share text { fill: #33485C; font-size: 10px; font-weight: 600; }
/* on a phone */
.iso-ph__eng { fill: #051B2E; font-size: 9.6px; font-weight: 700; letter-spacing: -.005em; }
.iso-ph__q { fill: #051B2E; font-size: 7.6px; font-weight: 500; }
.iso-ph__name { fill: #051B2E; font-size: 11px; font-weight: 700; }
.iso-ph__rec { fill: var(--signal-text); font-size: 7.6px; font-weight: 700; letter-spacing: .01em; }
/* 2: the question, over the phones */
.iso-q2 > rect:first-child { fill: var(--d-card); }
.iso-q2 text { fill: #fff; font-size: 15px; font-weight: 500; }
/* 3: before and after, the sources between */
.iso-then__before { opacity: .6; }
.iso-then__h { fill: var(--d-strong); font-size: 14.5px; font-weight: 600; }
.iso-tag--off text { fill: var(--d-mute); font-weight: 500; }
.iso-chip rect { fill: rgba(195, 208, 221, .05); stroke: rgba(195, 208, 221, .2); }
.iso-chip text { fill: var(--on-ink-2, #A9B8C7); font-size: 12px; font-weight: 600; }
.iso-chip .g-fill { fill: var(--on-ink-2, #A9B8C7); }
.iso-chip .g-line { fill: none; stroke: var(--on-ink-2, #A9B8C7); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- SEO: the map pack on a phone, organic results on a laptop ---------- */
.iso-sbar { fill: var(--d-tint); stroke: var(--d-card-line); stroke-width: .6; }
.svb-svg use.iso-ic { stroke: var(--d-mute); stroke-width: 2.4; }
.iso-q { fill: var(--d-strong); font-weight: 500; }
.iso-ph-q { fill: var(--d-soft); }
/* the phone's search, lifted out of its bar so it reads level */
.iso-qpill rect { fill: var(--d-card); stroke: var(--d-card-line); }
.iso-qpill text { fill: var(--d-strong); font-size: 11.5px; font-weight: 500; }
.svb-svg use.iso-qpill__ic { stroke: var(--d-strong); stroke-width: 2; }
.iso-qline { fill: none; stroke: var(--d-grey); stroke-width: 1.2; stroke-dasharray: 2 3; stroke-linecap: round; }
.iso-qdot { fill: var(--d-grey); }
.iso-q--l { font-size: 7px; }
.iso-q--a { font-size: 6px; }
.iso-map { fill: #E7EDF3; }
.iso-map__st { fill: none; stroke: #fff; stroke-width: 4; }
.iso-park { fill: var(--d-park); }
.iso-area { fill: rgba(232, 86, 0, .07); stroke: rgba(232, 86, 0, .45); stroke-width: .8; stroke-dasharray: 2 2.5; }
.iso-row--you { fill: rgba(232, 86, 0, .08); stroke: rgba(232, 86, 0, .45); stroke-width: .7; }
.iso-name { fill: var(--d-strong); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.iso-name--sm { font-size: 14px; }
.iso-name--s { font-size: 8.2px; letter-spacing: 0; }
.iso-star { fill: var(--signal); }
.iso-star--off { fill: var(--d-strong-soft); }
.iso-ring { fill: none; stroke: var(--signal); stroke-width: 1.6; opacity: 0; }
.iso-drop { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 2 3; stroke-linecap: round; }
.iso-pin__head { fill: var(--signal); }
.iso-chrome { fill: #EDF1F5; }
.iso-dot { fill: #C9D3DD; }
.iso-org__hi { fill: rgba(232, 86, 0, .07); stroke: rgba(232, 86, 0, .42); stroke-width: .6; }
.iso-url { fill: var(--d-mute); font-size: 5.6px; font-weight: 500; }
.iso-hl { fill: var(--d-link); font-size: 9px; font-weight: 600; letter-spacing: -.01em; }
.iso-res { fill: var(--d-soft); }
.iso-res--d { fill: #D3DCE5; }
.iso-res--l { fill: #EEF2F6; }
.iso-kb { fill: #E3E9EF; }
.iso-kb__row { fill: none; stroke: #EDF1F5; stroke-width: 6; stroke-dasharray: 7.2 1.6; }
.iso-pad { fill: #E9EEF3; stroke: #D3DBE4; stroke-width: .6; }

/* ---------- BI: calls by source, a block a call ---------- */
.iso-card { fill: var(--d-card); stroke: var(--d-card-line); }
.iso-gridline { fill: none; stroke: rgba(5, 27, 46, .07); stroke-dasharray: 3 4; }
.iso-x { fill: var(--d-mute); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; }
.iso-x--you { fill: var(--d-strong); }
.iso-trail { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .8; }
.iso-call__dot { fill: var(--signal); }
.iso-call__ring { fill: none; stroke: var(--signal); stroke-width: 2; opacity: 0; }
.svb-svg use.iso-call__ic { stroke: #fff; stroke-width: 1.8; }

/* ---------- Advertising: the phone and the keys ---------- */
.iso-notch { fill: #0B2034; }
.iso-slot { fill: rgba(232, 86, 0, .05); stroke: rgba(232, 86, 0, .45); stroke-width: .7; stroke-dasharray: 3 3; }
.iso-adcard { fill: #fff; stroke: var(--d-card-line); stroke-width: .7; }
.iso-adtag__t { fill: var(--d-strong); font-size: 5px; font-weight: 700; letter-spacing: .03em; }
.iso-ad__name { fill: var(--d-strong); font-size: 6.8px; font-weight: 600; }
.iso-ad__head { fill: var(--d-link); font-size: 6.9px; font-weight: 600; letter-spacing: -.01em; }
.iso-ad__sub { fill: var(--d-mute); font-size: 5.4px; font-weight: 500; }
.iso-cta { fill: var(--signal); }
.iso-cta__t { fill: #fff; font-size: 5.2px; font-weight: 700; }
.k-line { fill: none; stroke: var(--d-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-fill { fill: var(--d-strong); }
.iso-keylink { fill: none; stroke: var(--d-grey); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .7; }

/* ---------- Web: your site, the WordPress build, the WP Engine hosting ---------- */
.iso-pg__nav { fill: var(--d-soft); }
.iso-pg__hb { fill: var(--d-strong); }
.iso-pg__cta { fill: var(--signal); }
.iso-pg__card { fill: var(--d-tint); stroke: var(--d-card-line); stroke-width: .6; }
.iso-pg__ic { fill: rgba(232, 86, 0, .16); }
/* 2: the layers */
.iso-host { --t: #12324F; --l: #0A2438; --r: #03111D; }
.iso-host .f-rim { stroke: rgba(170, 200, 230, .25); }
.iso-blade { fill: rgba(195, 208, 221, .07); stroke: rgba(195, 208, 221, .14); stroke-width: .7; }
.iso-led { fill: rgba(195, 208, 221, .28); }
.iso-led--on { fill: #fff; }
.iso-vent { fill: none; stroke: rgba(195, 208, 221, .2); stroke-width: 1; }
.iso-wpl { --t: #F3F6F9; --l: #DCE3EA; --r: #C3CEDA; }
.iso-wblk { --t: #E5EBF1; --l: #D3DCE5; --r: #BAC7D4; }
.iso-wire { fill: none; stroke: var(--d-grey); stroke-width: .9; stroke-dasharray: 3 2.4; }
.iso-lyg path { fill: none; stroke: var(--d-grey); stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .8; }
.iso-lystem { fill: none; stroke: var(--d-grey); stroke-width: 1; }
.iso-lydot { fill: var(--d-grey); }
.iso-lyt--2 .iso-lystem { stroke: var(--signal); }
.iso-lyt--2 .iso-lydot { fill: var(--signal); }

/* ---------- the stories ---------- */
.iso-run { fill: none; stroke: var(--signal); stroke-width: 6; stroke-linecap: round; stroke-dasharray: .05 3; stroke-dashoffset: .12; opacity: 0; }
.is-run .iso-run { animation: iso-run 700ms var(--ease-in-out) var(--d, 0ms) both; }
.iso-ring, .iso-call__ring, .iso-pin, .iso-org__hi, .iso-callbtn, .iso-new, .iso-ly-cta { transform-box: fill-box; transform-origin: center; }
/* AI: the question comes in; the sources it reads light in turn; the answer is typed and your firm lands in it,
   recommended (1). The question is typed and runs to each AI, each answering with you (2). Each source is read and runs to
   the answer, and you land in it (3) */
.iso-ch__q, .iso-ch__you, .iso-ch__rec, .iso-ph__you { transform-box: fill-box; transform-origin: center; }
.iso-ch__type { transform-box: fill-box; transform-origin: 0 50%; }
.is-run .iso-run--q { animation-duration: 450ms; }
.is-run .iso-ch__q { animation: iso-in 450ms var(--ease-out) backwards; }
.iso--chat.is-run .iso-ch__type { animation: iso-type 650ms steps(43, end) 1150ms backwards; }
.is-run .iso-ch__you { animation: iso-land 550ms var(--ease-out) 1750ms backwards; }
.is-run .iso-ch__rec { animation: iso-pop 400ms var(--ease-out) 2100ms backwards; }
.is-run .iso-lchip rect { animation: iso-lchip 900ms var(--ease-out) var(--t); }
.iso--every.is-run .iso-ch__type { animation: iso-type 600ms steps(33, end) backwards; }
.is-run .iso-ph__you { animation: iso-land 500ms var(--ease-out) var(--t) backwards; }
.is-run .iso-chip rect { animation: iso-chip 900ms var(--ease-out) var(--t); }
.is-run .iso-chip text { animation: iso-chip-t 900ms var(--ease-out) var(--t); }
/* SEO: your pin dips to your roof and rings; then you, first in the organic results */
.is-ping .iso-pin { animation: iso-dip 1100ms; }
.is-ping .iso-ring { animation: iso-ring 900ms var(--ease-out) 380ms; }
.is-ping .iso-org__hi { animation: iso-hi 700ms var(--ease-out) 1000ms; }
/* BI: the call rings, then flies onto Maps (svd-iso.js) */
.is-run .iso-call__ring { animation: iso-ring 800ms var(--ease-out); }
/* Advertising: the search is typed, your ad lands in the first slot (svd-iso.js), its call button rings */
.iso-type { transform-box: fill-box; transform-origin: 0 50%; }
.is-typing .iso-type { animation: iso-type 650ms steps(19, end) backwards; }
.is-typing .iso-run { animation: iso-run 600ms var(--ease-in-out) 700ms both; }
.is-typing .iso-callbtn { animation: iso-hi 600ms var(--ease-out) 1850ms; }
/* Web: the layers come together (svd-iso.js); your site's button lights */
.is-run .iso-ly-cta { animation: iso-hi 600ms var(--ease-out) 1000ms; }

@keyframes iso-run { 0% { stroke-dashoffset: .12; opacity: 1; } 100% { stroke-dashoffset: -1.08; opacity: 1; } }
@keyframes iso-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes iso-dip {
  0% { transform: none; animation-timing-function: cubic-bezier(.55, 0, .75, .3); }
  35% { transform: translateY(14px); animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  100% { transform: none; }
}
@keyframes iso-ring { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
@keyframes iso-hi { 35% { transform: scale(1.05); } }
@keyframes iso-type { from { transform: scaleX(0); } }
@keyframes iso-chip { 12%, 60% { fill: rgba(232, 86, 0, .16); stroke: rgba(232, 86, 0, .8); } }
@keyframes iso-chip-t { 12%, 60% { fill: #fff; } }
@keyframes iso-lchip { 12%, 60% { fill: #FFF1E7; stroke: rgba(232, 86, 0, .7); } }
@keyframes iso-land { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes iso-in { from { opacity: 0; transform: translateY(6px); } }

/* the review page's extra copies (another concept for one tile): only that tile */
.svb[data-only] .section-head, .svb[data-only] .svb-tile:not(.is-only) { display: none; }

/* phones: the wide scenes lose their empty margins, so the screens read larger */
@media (max-width: 640px) {
  .svb[data-draw="iso"] .iso--seo { width: 114%; margin-left: -7%; }
}

@media (prefers-reduced-motion: reduce) {
  .is-run .iso-run, .is-ping .iso-pin, .is-ping .iso-ring, .is-ping .iso-org__hi, .is-run .iso-call__ring,
  .is-typing .iso-type, .is-typing .iso-callbtn, .is-typing .iso-run,
  .is-run :is(.iso-ch__q, .iso-ch__type, .iso-ch__you, .iso-ch__rec, .iso-lchip rect, .iso-ph__you, .iso-chip rect, .iso-chip text, .iso-ly-cta) { animation: none; }
}