/* ===== Esketchers Hero — Radial Dial (Blue Fill) | reusable component =====
   Brand colors are driven by CSS custom properties set inline per instance:
   --esk-bg, --esk-text, --esk-accent, --esk-fill
   Defaults below match the original design. */

@font-face{
  font-family:'niveaugroteskregular';
  src:url('fonts/NiveauGroteskRegular.woff2') format('woff2'),
      url('fonts/NiveauGroteskRegular.woff') format('woff'),
      url('fonts/NiveauGroteskRegular.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}

.esk-hero{
  --esk-bg:#f4f7fc;
  --esk-text:#022450;
  --esk-accent:#e0664c;
  --esk-fill:#022450;
  box-sizing:border-box;
  position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;
  font-family:'niveaugroteskregular',Manrope,sans-serif;
  background:var(--esk-bg);color:var(--esk-text);
}
.esk-hero *{box-sizing:border-box;}

/* ---- cursor glow ---- */
.esk-hero__glow{
  position:absolute;top:0;left:0;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle, rgba(46,111,219,.22), rgba(46,111,219,.06) 45%, transparent 66%);
  pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease;filter:blur(34px);will-change:transform;
}
/* ---- parallax shapes ---- */
.esk-hero__parallax{position:absolute;inset:0;z-index:0;pointer-events:none;transition:transform .3s ease-out;will-change:transform;}
.esk-hero__parallax .shape{position:absolute;animation-name:eskFloatBg;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}

/* ---- ambient background ---- */
.esk-hero__grid{
  position:absolute;inset:-60px;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 38%, rgba(2,36,80,.05), transparent 72%);
  animation:eskGrid 11s linear infinite;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 42%, #000 36%, transparent 86%);
          mask-image:radial-gradient(120% 100% at 50% 42%, #000 36%, transparent 86%);
}
.esk-hero__blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;}
.esk-hero__blob--top{top:-20%;left:50%;transform:translateX(-50%);width:62vw;height:62vw;background:radial-gradient(circle, rgba(2,36,80,.08), transparent 64%);filter:blur(70px);animation:eskDrift 18s ease-in-out infinite;}
.esk-hero__blob--left{bottom:-26%;left:6%;width:36vw;height:36vw;background:radial-gradient(circle, rgba(224,102,76,.16), transparent 66%);filter:blur(62px);animation:eskDrift 22s ease-in-out infinite reverse;}
.esk-hero__blob--right{bottom:-22%;right:6%;width:34vw;height:34vw;background:radial-gradient(circle, rgba(2,36,80,.08), transparent 66%);filter:blur(62px);animation:eskDrift 20s ease-in-out infinite;}
.esk-hero__lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5;}
.esk-line--1{animation:eskDash 26s linear infinite;}
.esk-line--2{animation:eskDashRev 30s linear infinite;}
.esk-hero__wave{position:absolute;left:0;bottom:-6px;width:200%;z-index:0;pointer-events:none;}
.esk-hero__wave--1{height:34%;animation:eskWave 24s linear infinite;}
.esk-hero__wave--2{height:30%;animation:eskWave2 32s linear infinite;}
.esk-rise{position:absolute;bottom:10vh;border-radius:50%;z-index:1;}
.esk-rise--1{left:22%;width:4px;height:4px;background:var(--esk-accent);animation:eskRise 11s linear infinite;}
.esk-rise--2{left:50%;width:5px;height:5px;background:rgba(2,36,80,.5);animation:eskRise 13s linear infinite 1.8s;}

/* ---- layout ---- */
.esk-hero__row{
  position:absolute;top:0;bottom:0;left:0;right:0;z-index:20;
  max-width:var(--esk-maxw,1280px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(28px,4vw,64px);padding:clamp(72px,10vh,104px) 0 clamp(40px,6vh,68px);
}
.esk-hero__left{flex:1;max-width:min(66%,860px);display:flex;flex-direction:column;align-items:flex-start;text-align:left;}

.esk-eyebrow{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:clamp(11px,1.05vw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--esk-accent);margin-bottom:clamp(14px,2vh,22px);}
.esk-eyebrow__tick{width:26px;height:1px;background:var(--esk-accent);display:inline-block;}

.esk-hero__h1{margin:0;font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;letter-spacing:normal;line-height:.96;font-size:clamp(40px,min(8.4vh,6vw),68px);color:var(--esk-text);}
.esk-line-static{display:block;}
.esk-roller{display:block;height:1em;overflow:hidden;}
.esk-roller__track{display:flex;flex-direction:column;animation:eskRoll 11s cubic-bezier(.7,0,.24,1) infinite;}
.esk-roller__word{height:1em;line-height:1em;background:linear-gradient(100deg,var(--esk-accent),#ff9f86,var(--esk-accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:eskSheen 5s linear infinite;}
.esk-grad-text{font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;letter-spacing:normal;background:linear-gradient(100deg,#020f28,#b5402a,#020f28);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gradSheen 6s linear infinite;}

.esk-hero__underline{height:3px;width:clamp(160px,18vw,260px);background:linear-gradient(90deg,var(--esk-accent),transparent);transform-origin:left;animation:eskSheen 5s linear infinite;margin-top:clamp(14px,2vh,24px);}
.esk-hero__lead{margin:clamp(14px,2vh,24px) 0 0;font-size:clamp(15px,1.5vw,19px);line-height:1.55;color:rgba(2,36,80,.64);max-width:480px;}

.esk-hero__cta{display:flex;align-items:center;gap:13px;margin-top:clamp(16px,2.4vh,28px);flex-wrap:wrap;}
.esk-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:clamp(15px,1.5vw,17.5px);border-radius:10px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.esk-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;flex:none;transition:transform .25s ease;}
.esk-btn__icon svg{width:100%;height:100%;}
.esk-btn:hover .esk-btn__icon{transform:translateX(5px);}
.esk-btn--primary{font-weight:600;color:#fff;background:var(--esk-accent);padding:16px 30px;box-shadow:0 16px 42px -12px rgba(224,102,76,.85);}
.esk-btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 54px -12px rgba(224,102,76,1);}
.esk-btn--ghost{font-weight:500;color:var(--esk-text);padding:16px 24px;border:1px solid rgba(224,102,76,.4);background:rgba(224,102,76,.06);}
.esk-btn--ghost:hover{background:rgba(224,102,76,.14);}

.esk-trust{display:flex;align-items:center;gap:clamp(10px,1.3vw,15px);margin-top:clamp(16px,2.4vh,26px);white-space:nowrap;}
.esk-trust__label{font-family:'JetBrains Mono',monospace;font-size:clamp(10px,1vw,11.5px);letter-spacing:.14em;text-transform:uppercase;color:rgba(2,36,80,.5);}
.esk-trust__badge{display:inline-flex;align-items:center;gap:7px;font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;font-size:clamp(13px,1.3vw,15px);color:var(--esk-text);}
.esk-trust__dot{width:8px;height:8px;border-radius:50%;}
.esk-trust__logo{display:inline-flex;align-items:center;}
.esk-trust__logo svg{width:1.2em;height:1.2em;display:block;}
.esk-trust__logo img{height:26px;width:auto;display:block;object-fit:contain;}
.esk-trust__note{font-size:clamp(12px,1.2vw,13.5px);color:rgba(2,36,80,.55);}

/* ---- right column / dial ---- */
.esk-hero__right{flex:none;width:min(32%,440px);align-self:center;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3.6vh,40px);padding-inline:clamp(10px,1.2vw,24px);}
.esk-dial{position:relative;width:min(350px,100%);max-width:100%;aspect-ratio:1;}
.esk-dial__aura{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle, rgba(46,111,219,.20), transparent 62%);filter:blur(20px);z-index:0;animation:eskWheelPulse 3.4s ease-in-out infinite;}
.esk-dial__base{position:absolute;inset:0;border-radius:50%;background:rgba(2,36,80,.05);}
.esk-dial__ring{position:absolute;inset:-3.5%;border-radius:50%;border:1.5px dashed rgba(2,36,80,.38);z-index:0;animation:eskSpin 60s linear infinite;}
.esk-dial__orbit{position:absolute;inset:-3.5%;z-index:0;animation:eskSpin 12s linear infinite;}
.esk-dial__orbit-dot{position:absolute;top:-5px;left:50%;width:11px;height:11px;border-radius:50%;background:var(--esk-text);transform:translateX(-50%);box-shadow:0 0 13px rgba(2,36,80,.9);}
/* decorative ring anchored to the dial's top-right — stays put at any screen size */
.esk-dial__halo{position:absolute;top:-20%;left:74%;width:56%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(2,36,80,.16);z-index:0;pointer-events:none;transition:transform .3s ease-out;animation:eskWheelPulse 3.4s ease-in-out infinite;}

.esk-quad-fill{position:absolute;inset:0;border-radius:50%;z-index:1;opacity:0;filter:drop-shadow(0 0 22px rgba(2,36,80,.45));transition:opacity .55s ease;}
.esk-quad-fill[data-fill="0"]{background:conic-gradient(from 270deg,var(--esk-fill) 0deg 90deg, transparent 90deg);}
.esk-quad-fill[data-fill="1"]{background:conic-gradient(from 0deg,var(--esk-fill) 0deg 90deg, transparent 90deg);}
.esk-quad-fill[data-fill="2"]{background:conic-gradient(from 90deg,var(--esk-fill) 0deg 90deg, transparent 90deg);}
.esk-quad-fill[data-fill="3"]{background:conic-gradient(from 180deg,var(--esk-fill) 0deg 90deg, transparent 90deg);}
.esk-quad-fill.is-active{opacity:1;}

.esk-dial__cross{position:absolute;background:#eef3fb;z-index:2;}
.esk-dial__cross--v{top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);}
.esk-dial__cross--h{left:0;right:0;top:50%;height:3px;transform:translateY(-50%);}

.esk-quad-hit{position:absolute;width:50%;height:50%;z-index:5;cursor:pointer;transition:background .3s ease;}
.esk-quad-hit:hover{background:rgba(2,36,80,.03);}

.esk-quad-icon{position:absolute;transform:translate(-50%,-50%);z-index:4;width:clamp(24px,2.5vw,32px);height:clamp(24px,2.5vw,32px);color:rgba(2,36,80,.42);pointer-events:none;transition:color .4s ease;}
.esk-quad-icon.is-active{color:#fff;}
.esk-quad-icon__inner{display:inline-flex;width:100%;height:100%;animation:eskIcon 4s ease-in-out infinite;}
.esk-quad-icon svg{width:100%;height:100%;}

.esk-dial__core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26%;height:26%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;z-index:6;overflow:hidden;box-shadow:0 0 0 8px var(--esk-bg), 0 18px 44px -16px rgba(2,36,80,.5), inset 0 0 0 1px rgba(255,255,255,.14);}
.esk-dial__core img,.esk-dial__core svg{width:60%;height:auto;position:relative;z-index:2;}

.esk-dial__flag{position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap;z-index:5;}
.esk-dial__flag.side-right{left:100%;margin-left:6px;flex-direction:row;}
/* NB: keep side-left ly values (admin "Label vertical position") at 38%+ —
   anything higher lands level with the nowrap display headline, which
   paints over the flag text at every width */
.esk-dial__flag.side-left{right:100%;margin-right:6px;flex-direction:row-reverse;}
/* "Top (above dial)": label sits in the clear band above the dial (under
   the nav), over the top-left quadrant — out of the headline's reach, so
   any ly value is ignored */
.esk-dial__flag.side-top{top:auto !important;bottom:calc(100% + 14px);left:4%;right:auto;flex-direction:row-reverse;}
.esk-dial__flag.side-top .esk-dial__flag-lead{flex-direction:column;align-items:center;gap:6px;align-self:flex-end;margin-bottom:-4px;}
.esk-dial__flag.side-top .esk-dial__flag-line{width:1.5px;height:20px;}
.esk-dial__flag.side-top .esk-dial__flag-text{align-items:flex-start;text-align:left;}
.esk-dial__flag-lead{display:flex;align-items:center;gap:8px;}
.esk-dial__flag-dot{width:8px;height:8px;border-radius:50%;background:var(--esk-accent);flex:none;}
.esk-dial__flag-line{width:30px;height:1.5px;background:rgba(2,36,80,.4);flex:none;}
.esk-dial__flag-text{display:flex;flex-direction:column;}
.esk-dial__flag.side-left .esk-dial__flag-text{align-items:flex-end;text-align:right;}
.esk-dial__flag.side-right .esk-dial__flag-text{align-items:flex-start;text-align:left;}
.esk-dial__flag-name{font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;font-size:clamp(12px,1.3vw,15px);letter-spacing:.03em;color:var(--esk-text);text-transform:uppercase;}
.esk-dial__flag-val{font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;font-size:clamp(15px,1.7vw,21px);color:var(--esk-accent);margin-top:1px;}

.esk-dial__desc{font-size:clamp(12px,1.2vw,14.5px);color:rgba(2,36,80,.6);text-align:center;max-width:340px;line-height:1.45;}
.esk-dial__mobile-metric{display:none;font-family:'niveaugroteskregular','Space Grotesk',sans-serif;font-weight:700;font-size:clamp(18px,5vw,24px);text-align:center;margin-top:2px;}
.esk-dial__mobile-metric span{color:var(--esk-accent);}

/* ===== animations ===== */
@keyframes eskRoll{0%,15%{transform:translateY(0);}20%,40%{transform:translateY(-25%);}45%,65%{transform:translateY(-50%);}70%,90%{transform:translateY(-75%);}95%,100%{transform:translateY(0);}}
@keyframes eskSheen{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes gradSheen{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes eskGrid{0%{transform:translate(0,0);}100%{transform:translate(60px,60px);}}
@keyframes eskWave{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes eskWave2{0%{transform:translateX(-50%);}100%{transform:translateX(0);}}
@keyframes eskIcon{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-3px) rotate(10deg);}}
@keyframes eskWheelPulse{0%,100%{opacity:.9;}50%{opacity:1;}}
@keyframes eskDrift{0%{transform:translate(0,0) scale(1);}33%{transform:translate(3vw,-2.5vw) scale(1.12);}66%{transform:translate(-2.5vw,2vw) scale(.92);}100%{transform:translate(0,0) scale(1);}}
@keyframes eskDash{to{stroke-dashoffset:-1000;}}
@keyframes eskDashRev{to{stroke-dashoffset:1000;}}
@keyframes eskSpin{to{transform:rotate(360deg);}}
@keyframes eskRise{0%{transform:translateY(0);opacity:0;}14%{opacity:.8;}86%{opacity:.8;}100%{transform:translateY(-40vh);opacity:0;}}
@keyframes eskFloatBg{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-26px) translateX(10px);}}


.esk-trust__img[alt="Upwork"] {
    height: 34px !important;
}

.esk-trust__img[alt="Clutch"] {
    height: 17px !important;
}

/* ===== responsive ===== */
@media (max-width:820px){
  .esk-hero{height:auto;min-height:100vh;overflow:visible;}
  .esk-hero__row{position:relative;inset:auto;flex-direction:column;height:auto;align-items:flex-start;gap:30px;padding:104px 22px 60px;}
  .esk-hero__left{max-width:100%;width:100%;}
  .esk-hero__right{width:100%;align-self:stretch;padding-right:0;align-items:center;margin-bottom:100px !important;}
  .esk-hero__h1{font-size:clamp(32px,10vw,54px);}
  .esk-dial{width:min(74vw,300px);}
  .esk-dial__flag{display:none;}
  .esk-dial__mobile-metric{display:block;}
  .esk-trust{flex-wrap:wrap;white-space:normal;}
}

/* ---- mid-range: 821–1149px — two columns kept, but the hanging flag can
   never fit between the dial and the hero's overflow clip at these widths,
   so reuse the mobile metric fallback instead of clipping the text. */
@media (min-width:821px) and (max-width:1149px){
  .esk-dial__flag{display:none;}
  .esk-dial__mobile-metric{display:block;}
}

/* ---- mini-laptop / small desktop: 1150–1549px — the row has no side
   padding and maxes at 1280px, so the side-right flag (which hangs outside
   the dial via left:100%) gets clipped by the hero's overflow:hidden.
   Rebalance: narrower left column, wider right column, smaller dial nudged
   left, shorter flag lead + fixed flag fonts → flag fits inside the clip. */
@media (min-width:1150px) and (max-width:1549px){
  /* left stays 0 so the headline aligns with the header logo (1280px
     container, no padding); right padding only = clip room for the flag */
  .esk-hero__row{padding-inline:0 clamp(28px,3.2vw,44px);}
  .esk-hero__left{max-width:56%;}
  .esk-hero__right{width:min(42%,520px);}
  .esk-dial{width:min(290px,calc(100% - 48px));margin-right:clamp(36px,3.6vw,56px);}
  .esk-dial__flag{white-space:normal;}
  .esk-dial__flag.side-right{margin-left:4px;}
  .esk-dial__flag.side-left{margin-right:4px;}
  .esk-dial__flag-line{width:12px;}
  .esk-dial__flag-name{font-size:12.5px;max-width:12ch;}
  .esk-dial__flag-val{font-size:17px;}
}

/* Trust row breathes on smaller screens — the 10–13px clamp gap reads
   cluttered around the Upwork/Clutch logos at these widths. */
@media (min-width:821px) and (max-width:1549px){
  .esk-trust{gap:20px;}
  .esk-trust__note{margin-left:4px;}
}

/* Below 1306px the 1280px container touches the viewport edge — give the
   hero the same 13px gutter every other section has (they're 1280px
   content-box + 13px padding, so they merge with the logo line at ≥1306px).
   Must come after the width breakpoints above so this padding-left wins. */
@media (min-width:821px) and (max-width:1305px){
  /* 13px at ≤1280, tapering to 0 by 1306 as the centered row gains its own
     margin — keeps the hero's left edge exactly on the sections' gutter line */
  .esk-hero__row{padding-left:clamp(0px, calc(653px - 50vw), 13px);}
}

@media (prefers-reduced-motion: reduce){
  .esk-hero *{animation:none !important;}
}

/* ============================================================
   C4 heading (page heading system):
   - first static line ("#1 AI-FIRST") = display hero, navy
   - highlighted line = shared support spec — smaller navy caps, own line,
     gradient/animation stripped
   ============================================================ */
/* Full display token — identical size to every other section hero.
   "#1 AI-FIRST" at the token's 160px ceiling is ~880px wide; the 66%/860px
   column plus the row gap always covers it, so one line is guaranteed
   (nowrap lets it run a few px into the gap at the very largest sizes). */
.esk-hero__h1 > .esk-line-static:first-child {
  display: block;
  font-size: var(--esk-display, clamp(72px, 10vw, 160px));
  line-height: var(--esk-display-lh, 0.88);
  letter-spacing: var(--esk-display-ls, normal);
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--esk-text, #022450);
}
.esk-hero__h1 .esk-grad-text {
  /* width cap breaks the line after "AND" — "ENGINEERING PARTNER" wraps
     together (ch scales with the font, so the break point holds) */
  max-width: 28ch;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--esk-text, #022450);
  animation: none;
  display: block;
  margin-top: 0.35em;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0.04em;
  word-spacing: 0.15em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  /* full-width column on mobile — the 6.8vw desktop cap would be tiny here */
  .esk-hero__h1 > .esk-line-static:first-child { font-size: var(--esk-display, clamp(36px, 10.4vw, 54px)); }
  .esk-hero__h1 .esk-grad-text { font-size: 18px; }
}

/* ============================================================
   Full-bleed breakout (same pattern as the other admin sections): the hero
   spans the viewport regardless of theme container/row/column padding —
   fixes the mobile side-gutters visible on staging.
   ============================================================ */
.esk-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.vc_column_container > .vc_column-inner:has(.esk-hero) { padding-left: 0; padding-right: 0; }
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .vc_row:has(.esk-hero) { padding-left: 0 !important; padding-right: 0 !important; }
  #content .wpb_text_column:has(.esk-hero) { margin-bottom: 0 !important; }
}

/* Mobile spacing rebalance: tighter top (fixed header is ~64px on phones),
   breathing room under the dial metric so nothing sits on the fold edge. */
@media (max-width: 767px) {
  .esk-hero__row { padding: 46px 22px 84px; gap: 22px; }
  .esk-hero__right { gap: 18px; }
  .esk-dial { width: min(62vw, 250px); }
}


/* Support-line shimmer — same sweep as Why Choose (.eskw__t2): base-colour
   text, orange band drifts through every 9s. Reduced motion: static base. */
.esk-hero__h1 .esk-grad-text {
  background-image: linear-gradient(100deg, #022450 0%, #022450 42%, #e36745 50%, #022450 58%, #022450 100%) !important;
  background-size: 300% auto !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: eskheroGrad 6s ease-in-out infinite !important;
}
@keyframes eskheroGrad { 0% { background-position: 0% 50%; } 75%, 100% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .esk-hero__h1 .esk-grad-text { animation: none !important; }
}