/* Elite Equine Group :: home template
   Realizes the "Elite Equine Group" Novamira design. Tokens below are the
   single source of truth; nothing in this file introduces an off-palette value. */

@font-face{font-family:"Lato";src:url("fonts/lato-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("fonts/lato-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --ee-bg:#FFFFFF;
  --ee-surface:#FFFFFF;
  --ee-ink:#04243E;
  --ee-accent:#06383E;
  --ee-accent-fg:#FFFFFF;
  --ee-navy:#04243E;
  /* #06383E carries 12.6:1 on white but collapses to 1.2:1 on the navy
     grounds, so anything sitting on navy uses the pale tier of the same
     hue (8.5:1) instead. One accent, two grounds. */
  --ee-accent-dark:#FFFFFF;
  --ee-muted:#55606B;
  --ee-rule:#E2DDD3;
  --ee-rule-dark:rgba(255,255,255,.22);

  --ee-sm:8px;  --ee-md:16px; --ee-lg:32px; --ee-xl:64px; --ee-section:120px;
  --ee-r-sm:8px; --ee-r-md:16px; --ee-r-lg:28px; --ee-r-pill:999px;

  --ee-font:"Lato",-apple-system,"Segoe UI",sans-serif;
  --ee-max:1400px;
  --ee-gutter:24px;
  --ee-shadow:0 24px 60px -24px rgba(4,36,62,.28);
  --ee-ease:cubic-bezier(.16,1,.3,1);
}

/* Neutralize UA defaults at zero specificity so component rules always win. */
:where(.ee h1,.ee h2,.ee h3,.ee h4,.ee p,.ee ul,.ee ol,.ee li,.ee figure,.ee blockquote){margin:0;padding:0;list-style:none}
.ee *,.ee *::before,.ee *::after{box-sizing:border-box}

.ee{
  background:var(--ee-bg);
  color:var(--ee-muted);
  font-family:var(--ee-font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* NOT overflow-x:hidden. On <body> that forces overflow-y to compute
     to auto, which makes body a scroll container; the page then scrolls
     on documentElement while ScrollTrigger's listener sits on a body
     that never moves, and every scrubbed animation goes inert. `clip`
     clips exactly the same way without creating a scroll container. */
  overflow-x:hidden;
}
@supports (overflow-x:clip){
  .ee{overflow-x:clip;overflow-y:visible}
}
.ee img{max-width:100%;display:block}
.ee a{color:inherit;text-decoration:none}

.ee-wrap{max-width:var(--ee-max);margin-inline:auto;padding-inline:var(--ee-gutter)}
.ee-section{padding-block:var(--ee-section)}

/* ---------- type ---------- */
.ee-display{
  font-family:var(--ee-font);font-weight:900;color:var(--ee-ink);
  font-size:clamp(38px,5.6vw,72px);line-height:1.05;letter-spacing:-1.4px;
  text-wrap:balance;
}
.ee-h2{
  font-family:var(--ee-font);font-weight:900;color:var(--ee-ink);
  font-size:clamp(30px,3.9vw,52px);line-height:1.08;letter-spacing:-1px;
  text-wrap:balance;
}
/* Emphasis inside a headline: same face and size, carried by weight and
   colour. A second family here would read as a mistake, not an accent. */
.ee-accent{
  font-weight:900;color:var(--ee-accent);
  letter-spacing:inherit;line-height:inherit;display:inline;
}
.ee-lede{max-width:62ch;font-size:18px;color:var(--ee-muted)}
.ee-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ee-accent);display:block;margin-bottom:var(--ee-md);
}
.ee-on-dark{color:#fff}
.ee-on-dark .ee-display,.ee-on-dark .ee-h2{color:#fff}
.ee-on-dark .ee-lede{color:rgba(255,255,255,.76)}

/* ---------- buttons ---------- */
.ee-btn{
  display:inline-flex;align-items:center;gap:var(--ee-md);
  background:var(--ee-accent);color:var(--ee-ink);
  font-weight:700;font-size:15px;
  padding:10px 10px 10px 28px;border-radius:var(--ee-r-pill);border:0;cursor:pointer;
  transition:transform .35s var(--ee-ease),background .35s var(--ee-ease);
}
.ee-btn__badge{
  width:38px;height:38px;border-radius:50%;background:var(--ee-ink);color:var(--ee-accent-dark);
  display:grid;place-items:center;transition:transform .45s var(--ee-ease);
}
.ee-btn:hover{transform:translateY(-2px)}
.ee-btn:hover .ee-btn__badge{transform:rotate(45deg)}
.ee-btn:active{transform:scale(.98)}
.ee-btn--ghost{
  background:transparent;color:#fff;padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;
}
.ee-btn--ghost:hover{border-bottom-color:var(--ee-accent);color:var(--ee-accent)}
.ee-btn--dark{background:var(--ee-ink);color:var(--ee-accent)}
.ee-btn--dark .ee-btn__badge{background:var(--ee-accent);color:var(--ee-ink)}

/* ---------- nav ---------- */
.ee-nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  transition:background .4s var(--ee-ease),backdrop-filter .4s var(--ee-ease),box-shadow .4s var(--ee-ease);
}
.ee-nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--ee-lg);padding-block:20px}
.ee-nav__brand{font-weight:900;font-size:19px;letter-spacing:-.4px;color:#fff;line-height:1.1}
.ee-nav__brand span{color:var(--ee-accent)}
.ee-nav__links{display:flex;gap:28px;align-items:center;white-space:nowrap}
.ee-nav__links a{font-size:15px;color:rgba(255,255,255,.86);transition:color .3s var(--ee-ease)}
.ee-nav__links a:hover{color:var(--ee-accent)}
.ee-nav.is-stuck{background:rgba(4,36,62,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ee-rule-dark)}
.ee-nav__toggle{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}

/* ---------- hero ---------- */
.ee-hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding-block:150px var(--ee-xl);isolation:isolate}
.ee-hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.ee-hero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
/* Directional navy scrim: heaviest at the lower left where the copy sits. */
.ee-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(4,36,62,.92) 0%,rgba(4,36,62,.55) 38%,rgba(4,36,62,.12) 68%),
    linear-gradient(to right,rgba(4,36,62,.7) 0%,rgba(4,36,62,.1) 60%);
}
.ee-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ee-xl);align-items:end;width:100%}
/* Absolute measure: this wrapper sits at body font-size, so a ch value here
   would resolve against 17px rather than the 72px display it contains. */
.ee-hero__copy{max-width:min(900px,100%)}
.ee-hero .ee-lede{max-width:52ch;margin-block:var(--ee-lg)}
.ee-hero__cta{display:flex;flex-wrap:wrap;gap:var(--ee-lg);align-items:center}
.ee-hero__eyebrow{display:none}

/* floating proof card */
.ee-proof{
  background:rgba(4,36,62,.55);backdrop-filter:blur(16px);
  border:1px solid var(--ee-rule-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:var(--ee-r-lg);padding:26px 28px;min-width:250px;
}
.ee-proof__num{font-size:46px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1.6px;font-variant-numeric:tabular-nums}
.ee-proof__label{font-size:14px;color:rgba(255,255,255,.72);margin-top:6px}
.ee-proof__row{display:flex;align-items:center;margin-top:20px}
.ee-proof__row img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.85);margin-left:-14px;
  transition:transform .4s var(--ee-ease);
}
.ee-proof__row img:first-child{margin-left:0}
.ee-proof__row:hover img{transform:translateY(-4px)}
.ee-proof__more{
  width:46px;height:46px;border-radius:50%;margin-left:-14px;
  background:var(--ee-accent);color:var(--ee-ink);display:grid;place-items:center;
  font-weight:900;font-size:13px;border:2px solid rgba(255,255,255,.85);
}

/* ---------- logo wall ---------- */
.ee-logos{padding-block:var(--ee-xl);background:var(--ee-bg);border-bottom:1px solid var(--ee-rule)}
.ee-logos__label{text-align:center;font-size:15px;color:var(--ee-muted);margin-bottom:var(--ee-lg)}
.ee-logos__label b{color:var(--ee-ink);font-weight:900}
.ee-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,var(--ee-ink) 9%,var(--ee-ink) 91%,transparent);
          mask-image:linear-gradient(to right,transparent,var(--ee-ink) 9%,var(--ee-ink) 91%,transparent)}
.ee-marquee__track{display:flex;width:max-content;gap:72px;align-items:center;animation:ee-scroll 46s linear infinite}
.ee-marquee:hover .ee-marquee__track{animation-play-state:paused}
.ee-marquee__track img{height:42px;width:auto;object-fit:contain;opacity:.62;filter:grayscale(1);transition:opacity .35s var(--ee-ease),filter .35s var(--ee-ease)}
.ee-marquee__track img:hover{opacity:1;filter:grayscale(0)}
@keyframes ee-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- about + stats ---------- */
.ee-about__copy{font-size:clamp(21px,2.3vw,30px);line-height:1.45;max-width:30ch;font-weight:700;color:var(--ee-ink);letter-spacing:-.4px}
.ee-about__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--ee-xl);align-items:start}
.ee-about__trail{font-size:17px;color:var(--ee-muted);max-width:60ch}
.ee-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ee-lg);margin-top:var(--ee-section);border-top:1px solid var(--ee-rule);padding-top:var(--ee-xl)}
.ee-stat__num{font-size:clamp(44px,5vw,68px);font-weight:900;color:var(--ee-ink);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.ee-stat__num i{font-style:normal;color:var(--ee-accent)}
.ee-stat__title{font-weight:700;color:var(--ee-ink);margin-top:var(--ee-md);font-size:16px}
.ee-stat__sub{font-size:14px;margin-top:4px}

/* ---------- difference ---------- */
.ee-diff{display:grid;grid-template-columns:.85fr 1fr;gap:var(--ee-xl);align-items:center}
.ee-diff__media{position:relative;border-radius:var(--ee-r-lg);overflow:hidden;aspect-ratio:3/4}
.ee-diff__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ee-ease)}
.ee-diff__media:hover img{transform:scale(1.05)}
.ee-diff__float{
  position:absolute;left:var(--ee-lg);bottom:var(--ee-lg);
  background:var(--ee-surface);border-radius:var(--ee-r-md);padding:18px 22px;
  box-shadow:var(--ee-shadow);display:flex;align-items:center;gap:14px;
}
.ee-diff__float b{display:block;font-size:24px;font-weight:900;color:var(--ee-ink);line-height:1;letter-spacing:-.8px}
.ee-diff__float span{font-size:13px}
.ee-diff__badge{width:40px;height:40px;border-radius:var(--ee-r-sm);background:var(--ee-accent);color:var(--ee-accent-fg);display:grid;place-items:center;flex:none}
.ee-diff__list{margin-top:var(--ee-lg)}
.ee-diff__list li{display:grid;grid-template-columns:24px 1fr;gap:var(--ee-md);padding-block:22px;border-bottom:1px solid var(--ee-rule);color:var(--ee-ink);font-weight:700;font-size:17px}
.ee-diff__list li:first-child{border-top:1px solid var(--ee-rule)}
.ee-diff__list svg{color:var(--ee-accent);margin-top:3px}

/* ---------- services (asymmetric bento, not three equal cards) ---------- */
.ee-serv{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:var(--ee-lg);margin-top:var(--ee-xl)}
.ee-serv__card{position:relative;border-radius:var(--ee-r-lg);overflow:hidden;background:var(--ee-navy);min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--ee-lg);isolation:isolate}
.ee-serv__card:first-child{grid-row:span 2;min-height:560px}
.ee-serv__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,36,62,.94),rgba(4,36,62,.3) 65%)}
.ee-serv__ph{position:absolute;inset:0;z-index:-2;background:linear-gradient(145deg,var(--ee-ink),var(--ee-navy) 70%)}
.ee-serv__card h3{color:#fff;font-size:24px;font-weight:900;letter-spacing:-.6px;line-height:1.2;max-width:18ch}
.ee-serv__card p{color:rgba(255,255,255,.72);font-size:15px;margin-top:var(--ee-sm);max-width:40ch}
.ee-serv__link{display:inline-flex;align-items:center;gap:8px;color:var(--ee-accent);font-weight:700;font-size:14px;margin-top:var(--ee-md)}
.ee-serv__card:hover .ee-serv__link svg{transform:translateX(5px)}
.ee-serv__link svg{transition:transform .4s var(--ee-ease)}

/* ---------- horizontal scroll track ---------- */
.ee-track{position:relative;background:var(--ee-navy)}
.ee-track__pin{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:var(--ee-xl)}
.ee-track__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--ee-lg);margin-bottom:var(--ee-lg)}
.ee-track__rail{display:flex;gap:var(--ee-lg);padding-inline:var(--ee-gutter);will-change:transform}
.ee-card{
  flex:0 0 clamp(260px,26vw,360px);background:rgba(255,255,255,.04);
  border:1px solid var(--ee-rule-dark);border-radius:var(--ee-r-lg);
  padding:var(--ee-lg);min-height:380px;display:flex;flex-direction:column;justify-content:space-between;
  transition:background .4s var(--ee-ease),transform .4s var(--ee-ease);
}
.ee-card:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.ee-card__n{font-size:13px;font-weight:700;color:var(--ee-accent);font-variant-numeric:tabular-nums}
.ee-card h3{color:#fff;font-size:26px;font-weight:900;letter-spacing:-.7px;line-height:1.12;margin-top:var(--ee-md)}
.ee-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--ee-md)}
.ee-pill{border:1px solid var(--ee-rule-dark);color:var(--ee-accent);border-radius:var(--ee-r-md);padding:4px 12px;font-size:12.5px}
.ee-progress{height:2px;background:var(--ee-rule-dark);margin-top:var(--ee-xl);margin-inline:var(--ee-gutter);position:relative}
.ee-progress__bar{position:absolute;inset:0 auto 0 0;width:0;background:var(--ee-accent);transform-origin:left}

/* ---------- projects ---------- */
.ee-proj{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--ee-lg);margin-top:var(--ee-xl)}
.ee-proj__col{display:grid;gap:var(--ee-lg)}
.ee-proj__item{position:relative;border-radius:var(--ee-r-lg);overflow:hidden;background:linear-gradient(145deg,var(--ee-ink),var(--ee-navy));min-height:300px;display:flex;align-items:flex-end;padding:var(--ee-lg)}
.ee-proj__item--tall{min-height:520px}
.ee-proj__item h3{color:#fff;font-size:22px;font-weight:900;letter-spacing:-.5px;position:relative;z-index:1}
.ee-proj__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,36,62,.85),transparent 60%)}

/* ---------- process sticky stack ---------- */
.ee-proc{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--ee-xl);align-items:start}
.ee-proc__head{position:sticky;top:140px}
.ee-proc__steps{display:grid;gap:var(--ee-lg)}
.ee-proc__step{
  background:var(--ee-surface);border:1px solid var(--ee-rule);border-radius:var(--ee-r-lg);
  padding:var(--ee-xl) var(--ee-lg);position:sticky;top:160px;box-shadow:var(--ee-shadow);
}
.ee-proc__step b{font-size:13px;font-weight:700;color:var(--ee-accent);font-variant-numeric:tabular-nums}
.ee-proc__step h3{font-size:26px;font-weight:900;color:var(--ee-ink);letter-spacing:-.7px;margin-block:var(--ee-sm);line-height:1.15}
.ee-proc__step p{max-width:50ch}

/* ---------- testimonials ---------- */
.ee-quote{flex:0 0 clamp(280px,32vw,460px);background:rgba(255,255,255,.04);border:1px solid var(--ee-rule-dark);border-radius:var(--ee-r-lg);padding:var(--ee-lg);display:flex;flex-direction:column;justify-content:space-between;min-height:340px}
.ee-quote p{color:#fff;font-size:19px;line-height:1.5;font-weight:700;letter-spacing:-.3px}
.ee-quote__who{display:flex;align-items:center;gap:14px;margin-top:var(--ee-lg)}
.ee-quote__who img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.ee-quote__who b{display:block;color:#fff;font-size:15px}
.ee-quote__who span{font-size:13.5px;color:rgba(255,255,255,.62)}

/* ---------- finance band ---------- */
.ee-band{background:var(--ee-accent);border-radius:var(--ee-r-lg);padding:var(--ee-xl) var(--ee-lg);display:flex;flex-wrap:wrap;gap:var(--ee-lg);align-items:center;justify-content:space-between}
.ee-band h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;color:var(--ee-ink);letter-spacing:-1px;line-height:1.1;max-width:20ch}
.ee-band p{color:var(--ee-ink);opacity:.78;max-width:46ch;margin-top:var(--ee-sm)}

/* ---------- video ---------- */
.ee-video{position:relative;border-radius:var(--ee-r-lg);overflow:hidden;min-height:60vh;display:grid;place-items:center;background:linear-gradient(145deg,var(--ee-ink),var(--ee-navy))}
.ee-video__play{width:96px;height:96px;border-radius:50%;background:var(--ee-accent);color:var(--ee-accent-fg);display:grid;place-items:center;border:0;cursor:pointer;transition:transform .4s var(--ee-ease)}
.ee-video__play:hover{transform:scale(1.08)}
.ee-video__cap{position:absolute;left:var(--ee-lg);bottom:var(--ee-lg);color:#fff;font-weight:900;font-size:22px;letter-spacing:-.5px}

/* ---------- closing + footer ---------- */
.ee-cta{background:var(--ee-navy);border-radius:var(--ee-r-lg);padding:var(--ee-section) var(--ee-lg);text-align:center}
.ee-cta h2{max-width:20ch;margin-inline:auto}
.ee-foot{background:var(--ee-navy);color:rgba(255,255,255,.7);padding-top:var(--ee-section);overflow:hidden}
.ee-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--ee-xl);padding-bottom:var(--ee-xl)}
.ee-foot h4{color:#fff;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--ee-md)}
.ee-foot li{margin-bottom:10px;font-size:15px}
.ee-foot a:hover{color:var(--ee-accent)}
.ee-foot__legal{border-top:1px solid var(--ee-rule-dark);padding-block:var(--ee-lg);font-size:13.5px;display:flex;flex-wrap:wrap;gap:var(--ee-md);justify-content:space-between}
.ee-wordmark{
  font-weight:900;letter-spacing:-.04em;line-height:.8;
  /* 10.1vw is the measured size at which the 18 glyphs fill the viewport
     minus both gutters, so the wordmark never overflows at any width. */
  font-size:10.1vw;white-space:nowrap;padding-inline:var(--ee-gutter);
  background:linear-gradient(to bottom,var(--ee-accent),rgba(4,36,62,.15));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em;
}

/* ---------- reveal ---------- */
.js .ee-reveal{opacity:0;transform:translateY(26px)}
.js .ee-reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ee-ease),transform .8s var(--ee-ease)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* Stack the hero before the proof card starts squeezing the headline. */
  .ee-hero__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-hero__copy{max-width:none}
  .ee-proof{align-self:start}
}
@media (max-width:1024px){
  .ee-about__grid,.ee-diff,.ee-proc,.ee-serv,.ee-proj{grid-template-columns:1fr}
  .ee-serv__card:first-child{grid-row:auto;min-height:320px}
  .ee-stats{grid-template-columns:repeat(2,1fr)}
  .ee-proc__head{position:static}
  .ee-proc__step{position:static}
  .ee-foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  :root{--ee-section:72px;--ee-xl:40px}
  .ee{font-size:16px}
  .ee-nav__links{display:none}
  .ee-nav__toggle{display:block}
  .ee-hero{min-height:auto;padding-block:120px var(--ee-xl)}
  .ee-hero__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-hero__copy{max-width:none}
  .ee-display{font-size:36px;letter-spacing:-.8px}
  .ee-stats{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-foot__grid{grid-template-columns:1fr}
  /* Horizontal tracks unpin and become swipe carousels. */
  .ee-track__pin{min-height:auto;display:block}
  .ee-track__rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transform:none !important;padding-bottom:var(--ee-md)}
  .ee-card,.ee-quote{scroll-snap-align:start;flex-basis:78vw}
  .ee-progress{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ee *,.ee *::before,.ee *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ee-marquee__track{animation:none}
  .js .ee-reveal{opacity:1;transform:none}
  .ee-track__rail{transform:none !important}
  .ee-track__pin{min-height:auto}
  .ee-track__rail{overflow-x:auto}
}
.ee :focus-visible{outline:2px solid var(--ee-accent);outline-offset:3px}

/* ============================================================
   Who we are :: horse passing behind the video player
   Composition is derived from the reference: the horse is 1.49x the
   player's width and sits so the player covers its barrel, leaving the
   head and forelegs to the left and the tail beyond the right edge.
   Every number below is a variable so the framing stays tunable.
   ============================================================ */
.ee-who{
  --player-w:80%;      /* player width within the right column        */
  --horse-scale:1.49;  /* horse width as a multiple of player width   */
  --horse-x:-38.1%;    /* horse left, as % of player width            */
  --horse-y:-12.2%;    /* horse top, as % of player height            */
  --horse-travel:118%; /* start offset, as % of the horse's own width */
  overflow-x:clip;
}
.ee-who__grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:var(--ee-xl);
  align-items:center;
}
.ee-who__copy{max-width:46ch}
.ee-who__copy h2{margin-bottom:var(--ee-lg)}
/* Justified to match the reference. Hyphenation is what keeps justified
   text from opening rivers at this measure. */
.ee-who__body{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-size:17.5px;
}
.ee-who__quote{
  font-size:18px;
  line-height:1.5;
  color:var(--ee-ink);
  margin-top:var(--ee-lg);
  max-width:44ch;
}

/* ---- stage ---- */
.ee-who__stage{position:relative;width:var(--player-w);margin-left:auto;margin-right:auto}
.ee img.ee-who__horse{
  position:absolute;
  z-index:1;
  /* The global `.ee img{max-width:100%}` would otherwise cap the horse at the
     stage width, which is exactly the size it must exceed. */
  max-width:none;
  width:calc(var(--horse-scale) * 100%);
  height:auto;
  left:var(--horse-x);
  top:var(--horse-y);
  pointer-events:none;
  user-select:none;
}
/* The offset is gated behind .js so the composition renders finished for
   no-JS, for crawlers, and for prefers-reduced-motion (which never sets .js). */
.js .ee-who__horse{
  transform:translate3d(var(--horse-travel),0,0);
  transition:transform 1500ms var(--ee-ease);
  will-change:transform;
}
.js .ee-who.is-in .ee-who__horse{transform:translate3d(0,0,0)}

/* ---- player ---- */
.ee-who__player{
  position:relative;
  z-index:2;
  background:var(--ee-navy);
  border-radius:22px;
  padding:14px;
  box-shadow:0 30px 70px -30px rgba(4,36,62,.45);
}
.ee-who__screen{
  position:relative;
  aspect-ratio:16/9;
  border-radius:11px;
  overflow:hidden;
  background:var(--ee-ink);
}
.ee-who__screen video,.ee-who__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.ee-who__poster{transition:opacity 260ms var(--ee-ease)}
.ee-who__player[data-started="1"] .ee-who__poster{opacity:0;pointer-events:none}

.ee-who__big{
  position:absolute;left:50%;top:50%;
  width:84px;height:84px;margin:-42px 0 0 -42px;
  border-radius:50%;
  background:var(--ee-accent);
  color:var(--ee-ink);
  border:0;cursor:pointer;
  display:grid;place-items:center;
  transition:transform 180ms var(--ee-ease),opacity 220ms var(--ee-ease);
}
.ee-who__big:active{transform:scale(.97)}
.ee-who__player[data-started="1"] .ee-who__big{opacity:0;pointer-events:none;transform:scale(.9)}

/* ---- controls ---- */
.ee-who__bar{display:flex;align-items:center;gap:14px;padding:14px 6px 4px}
.ee-who__btn{
  background:transparent;border:1.5px solid var(--ee-accent);color:var(--ee-accent);
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  cursor:pointer;flex:none;
  transition:transform 160ms var(--ee-ease),background 200ms var(--ee-ease);
}
.ee-who__btn:active{transform:scale(.97)}
.ee-who__btn--plain{border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .ee-who__btn:hover{background:rgba(255,255,255,.14)}
}
.ee-who__seek{
  -webkit-appearance:none;appearance:none;
  flex:1;height:22px;background:transparent;cursor:pointer;margin:0;
}
.ee-who__seek::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;
  background:linear-gradient(to right,var(--ee-accent) var(--seek,0%),rgba(255,255,255,.26) var(--seek,0%));
}
.ee-who__seek::-moz-range-track{height:5px;border-radius:999px;background:rgba(255,255,255,.26)}
.ee-who__seek::-moz-range-progress{height:5px;border-radius:999px;background:var(--ee-accent)}
.ee-who__seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--ee-accent);
  margin-top:-4.5px;border:0;
  transition:transform 160ms var(--ee-ease);
}
.ee-who__seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ee-accent);border:0}
.ee-who__seek:active::-webkit-slider-thumb{transform:scale(1.18)}
.ee-who__seek:focus-visible{outline:2px solid var(--ee-accent);outline-offset:4px;border-radius:999px}

/* ---- responsive ---- */
@media (max-width:1024px){
  .ee-who__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-who__copy{max-width:none}
  /* Keep the idea (horse passing behind the player) but pull the overhang in
     so nothing crowds the copy or the controls on a narrow column. */
  .ee-who{--player-w:86%;--horse-scale:1.34;--horse-x:-24%;--horse-y:-10%;--horse-travel:96%}
  .ee-who__stage{margin-top:var(--ee-lg)}
}
@media (max-width:767px){
  /* Narrow the player so the horse has room to read either side of it.
     A little crop at the section edges is deliberate: it keeps the sense of
     the horse passing through the frame rather than posing inside it. */
  .ee-who{--player-w:82%;--horse-scale:1.52;--horse-x:-26%;--horse-y:-9%;--horse-travel:88%}
  .ee-who__stage{margin-left:auto;margin-right:0}
  .ee-who__body{text-align:left}
  .ee-who__player{border-radius:16px;padding:10px}
  .ee-who__big{width:62px;height:62px;margin:-31px 0 0 -31px}
  .ee-who__bar{gap:10px;padding:10px 2px 2px}
}
@media (prefers-reduced-motion:reduce){
  .js .ee-who__horse{transform:none;transition:none}
}

/* ============================================================
   v3 refinements: Helvetica display, accent identity, cinematic hero
   ============================================================ */

@font-face{
  font-family:"EE Helvetica";
  src:url("fonts/helvetica-700.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --ee-font-display:"EE Helvetica",Helvetica,"Helvetica Neue",Arial,sans-serif;
  --ee-track:-0.07em; /* the brief's -70 */
}

/* ---- headlines ---- */
.ee-display,.ee-h2,.ee-about__copy,.ee-band h2,.ee-stat__num,
.ee-card h3,.ee-serv__card h3,.ee-proj__item h3,.ee-proc__step h3,
.ee-quote p,.ee-wordmark,.ee-nav__brand{
  font-family:var(--ee-font-display);
  font-weight:700;
  letter-spacing:var(--ee-track);
}
.ee-display,.ee-h2{color:var(--ee-ink)}
/* The accent is now the same face as the headline, so it inherits the
   headline tracking rather than carrying its own. */
.ee-accent{letter-spacing:inherit}

/* The accent is a mark, not a body-text colour, on light grounds. */
.ee-eyebrow{color:var(--ee-ink)}
.ee-on-dark .ee-eyebrow{color:var(--ee-accent)}
.ee-hero__eyebrow{display:none}
.ee-stat__num i{color:var(--ee-accent)}
.ee-diff__list svg{color:var(--ee-accent)}
.ee-proc__step b{color:var(--ee-accent)}

/* ---- hero: continuous cinematic drift ----
   Minimum scale stays above 1 so the frame never exposes an edge, and the
   whole cycle is 34s so it reads as depth rather than as an animation. */
@keyframes ee-drift{
  0%{transform:scale(1.06)}
  50%{transform:scale(1.14)}
  100%{transform:scale(1.06)}
}
.ee-hero__media img{
  animation:ee-drift 34s ease-in-out infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .ee-hero__media img{animation:none;transform:scale(1.06)}
}

/* ---- brand logo ---- */
.ee img.ee-nav__logo{width:auto;height:38px;max-width:none;display:block}
@media (max-width:767px){ .ee img.ee-nav__logo{height:30px} }

/* ---- navigation with dropdowns ---- */
.ee-nav__links{gap:26px}
.ee-menu{position:relative}
.ee-menu__top{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;color:rgba(255,255,255,.86);background:none;border:0;
  cursor:pointer;padding:6px 0;font-family:inherit;
  transition:color .3s var(--ee-ease);
}
.ee-menu__top svg{transition:transform .3s var(--ee-ease)}
.ee-menu:hover .ee-menu__top,.ee-menu:focus-within .ee-menu__top{color:var(--ee-accent)}
.ee-menu:hover .ee-menu__top svg,.ee-menu:focus-within .ee-menu__top svg{transform:rotate(180deg)}
.ee-menu__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:260px;padding:10px;border-radius:var(--ee-r-md);
  background:rgba(4,36,62,.92);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 30px 60px -24px rgba(4,36,62,.6);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ee-ease),transform .22s var(--ee-ease),visibility .22s;
}
.ee-menu:hover .ee-menu__panel,.ee-menu:focus-within .ee-menu__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.ee-menu__panel a{
  display:block;padding:9px 14px;border-radius:var(--ee-r-sm);
  font-size:14.5px;color:rgba(255,255,255,.8);white-space:nowrap;
  transition:background .2s var(--ee-ease),color .2s var(--ee-ease);
}
.ee-menu__panel a:hover{background:rgba(255,255,255,.14);color:var(--ee-accent)}

/* ---- CTA: accent ring, no fill ----
   A padding-box fill would sit opaque over the hero photograph, so the ring is
   a masked pseudo-element and the interior stays genuinely transparent. */
.ee-btn{
  background:transparent;
  color:var(--ee-ink);
  position:relative;
  padding:9px 9px 9px 26px;
  isolation:isolate;
}
.ee-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--ee-accent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.ee-on-dark .ee-btn,.ee-nav .ee-btn,.ee-cta .ee-btn{color:#fff}
.ee-btn__badge{background:var(--ee-accent);color:var(--ee-accent-fg)}
.ee-btn:hover{background:transparent;transform:translateY(-2px)}
.ee-btn--dark{background:transparent;color:var(--ee-ink)}
.ee-btn--dark .ee-btn__badge{background:var(--ee-accent);color:var(--ee-accent-fg)}
.ee-btn--ghost::before{display:none}

/* ---- social proof: 5/5 Google reviews ---- */
.ee-proof{border-color:var(--ee-accent)}
.ee-proof__num{font-family:var(--ee-font-display);letter-spacing:var(--ee-track);font-size:42px}
.ee-proof__more{
  background:var(--ee-accent);color:var(--ee-navy);
  font-size:20px;line-height:1;font-weight:700;
}

/* ---- trusted by: label beside the marks ---- */
.ee-logos__row{
  display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr);
  gap:var(--ee-lg);align-items:center;
}
.ee-logos__label{
  text-align:left;margin:0;font-size:19px;line-height:1.3;
  font-family:var(--ee-font-display);font-weight:700;
  letter-spacing:var(--ee-track);color:var(--ee-ink);
}
/* Vertical roll. The list repeats its first item last so the loop closes
   without a visible jump back to the top. */
.ee-rot{display:block;height:1.3em;overflow:hidden}
.ee-rot ul{margin:0;padding:0;list-style:none;animation:ee-roll 17s cubic-bezier(.76,0,.24,1) infinite}
.ee-rot li{height:1.3em;line-height:1.3em;color:var(--ee-accent);white-space:nowrap}
@keyframes ee-roll{
  0%,13%{transform:translateY(0)}
  16.6%,30%{transform:translateY(-1.3em)}
  33.3%,46.6%{transform:translateY(-2.6em)}
  50%,63.3%{transform:translateY(-3.9em)}
  66.6%,80%{transform:translateY(-5.2em)}
  83.3%,100%{transform:translateY(-6.5em)}
}
@media (prefers-reduced-motion:reduce){ .ee-rot ul{animation:none} }
@media (max-width:767px){
  .ee-logos__row{grid-template-columns:1fr;gap:var(--ee-md)}
  .ee-logos__label{font-size:17px}
}

/* ---- finance band: accent ring instead of a flat accent ground ---- */
.ee-band{
  background:var(--ee-surface);position:relative;
  border-radius:var(--ee-r-lg);
}
.ee-band::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--ee-accent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.ee-band h2{color:var(--ee-ink)}
.ee-band p{color:var(--ee-muted);opacity:1}

/* ---- video: minimal player ---- */
.ee-who__player{
  background:transparent;padding:0;border-radius:18px;
  box-shadow:0 34px 70px -30px rgba(4,36,62,.45);
}
.ee-who__screen{border-radius:18px}
.ee-who__bar{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  background:rgba(4,36,62,.68);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:8px 12px;gap:12px;
}
.ee-who__btn{width:30px;height:30px;border-radius:8px;border-color:rgba(255,255,255,.34);color:#fff}
.ee-who__btn--plain{border-color:transparent}
.ee-who__seek::-webkit-slider-runnable-track{
  background:linear-gradient(to right,var(--ee-accent) var(--seek,0%),rgba(255,255,255,.28) var(--seek,0%));
}
.ee-who__seek::-webkit-slider-thumb{background:var(--ee-accent)}
.ee-who__seek::-moz-range-thumb{background:var(--ee-accent)}
.ee-who__seek::-moz-range-progress{background:var(--ee-accent)}
.ee-who__big{
  background:var(--ee-accent);color:var(--ee-navy);
  box-shadow:0 14px 34px -10px rgba(4,36,62,.5);
}

/* years badge, overlapping the player's lower left like the reference */
.ee-who__years{
  position:absolute;z-index:4;left:-46px;bottom:-34px;
  width:150px;height:150px;border-radius:50%;
  background:var(--ee-surface);
  box-shadow:0 22px 50px -18px rgba(4,36,62,.34);
  /* Flex, not grid: two auto rows stretch to fill the circle and push the
     label down against the ring. Flex centres the pair as one block. */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1px solid var(--ee-rule);
}
.ee-who__years::before{
  content:"";position:absolute;inset:7px;border-radius:50%;
  padding:2px;background:var(--ee-accent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.ee-who__years b{
  display:block;font-family:var(--ee-font-display);font-weight:700;
  font-size:40px;line-height:1;letter-spacing:var(--ee-track);
  background:var(--ee-accent);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ee-who__years span{
  display:block;margin-top:4px;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ee-ink);
}
@media (max-width:1024px){
  .ee-who__years{width:118px;height:118px;left:-18px;bottom:-24px}
  .ee-who__years b{font-size:31px}
  .ee-who__years span{font-size:8px}
}
@media (max-width:767px){
  .ee-who__years{width:96px;height:96px;left:-10px;bottom:-18px}
  .ee-who__years b{font-size:25px}
  .ee-who__years span{font-size:7px;letter-spacing:.12em}
}

/* ---- mobile nav sheet ---- */
@media (max-width:767px){
  .ee-nav__links[data-open]{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    position:absolute;left:var(--ee-gutter);right:var(--ee-gutter);top:calc(100% + 8px);
    background:rgba(4,36,62,.96);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.3);border-radius:var(--ee-r-md);
    padding:16px;max-height:72vh;overflow-y:auto;
  }
  .ee-menu,.ee-menu__panel{position:static;min-width:0}
  .ee-menu__panel{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    /* Clearing the background is not enough: the blur still paints a visible
       panel behind the nested items. */
    background:transparent;backdrop-filter:none;border:0;box-shadow:none;padding:0 0 0 12px;
    display:none;
  }
  .ee-menu__panel[data-open]{display:block}
  .ee-nav__links .ee-btn{margin-top:10px}
}

/* The minimal player is shorter than the framed one it replaced, so the horse
   is recentred on it instead of hanging most of its legs below the frame. */
.ee-who{--horse-y:-32%}
@media (max-width:1024px){ .ee-who{--horse-y:-27%} }
@media (max-width:767px){ .ee-who{--horse-y:-23%} }

/* The base reset `.ee a{color:inherit}` is (0,1,1) and outranks a single
   component class, so these colours never landed: the finance button fell back
   to muted grey, and every 'See details' link sat on navy at about 2.2:1.
   Qualifying the selector with the element restores the component colour. */
.ee a.ee-btn{color:var(--ee-ink)}
.ee a.ee-serv__link{color:var(--ee-accent)}
.ee-on-dark a.ee-btn,.ee-nav a.ee-btn,.ee-cta a.ee-btn{color:#fff}

/* ============================================================
   v4: feedback round 2
   ============================================================ */

/* ---- hero: lighter scrim so the photograph reads ---- */
.ee-hero::after{
  background:
    linear-gradient(to top,rgba(4,36,62,.74) 0%,rgba(4,36,62,.34) 40%,rgba(4,36,62,.04) 70%),
    linear-gradient(to right,rgba(4,36,62,.42) 0%,rgba(4,36,62,.04) 60%);
}
.ee-scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

/* ---- proof card: white border, star row ---- */
.ee-proof{border-color:rgba(255,255,255,.85)}
.ee-proof__stars{display:flex;gap:3px;color:var(--ee-accent);margin-top:6px}
.ee-proof__label{margin-top:8px}

/* ---- rotating word matches the label ---- */
.ee-rot li{color:var(--ee-ink)}

/* ---- explore link: Ralph Lauren underline ----
   The rule is a pseudo-element so the gap itself can animate; a text
   underline cannot. At rest it sits 6px under the text and rises to 2px. */
.ee a.ee-explore{
  position:relative;display:inline-block;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:700;
  padding-bottom:8px;line-height:1.2;
}
.ee-explore::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transition:transform .3s ease;
}
.ee-explore:hover::after,.ee-explore:focus-visible::after{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){ .ee-explore::after{transition:none} }

/* ---- who: subtle play, smaller flat badge, mobile still ---- */
.ee-who__big{
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);color:#fff;
  border:1px solid rgba(255,255,255,.34);box-shadow:none;
}
.ee-who__years{width:132px;height:132px;left:-40px;bottom:-30px}
.ee-who__years b{font-size:36px;background:none;-webkit-text-fill-color:initial;color:var(--ee-accent)}
.ee-who__mobile{display:none}
@media (max-width:767px){
  .ee-who__stage{display:none}
  .ee-who__mobile{display:block;position:relative;margin-top:var(--ee-lg);border-radius:var(--ee-r-lg);overflow:visible}
  .ee-who__mobile img{width:100%;height:auto;border-radius:var(--ee-r-lg);display:block}
  .ee-who__years--static{position:absolute;left:-6px;bottom:-16px;width:96px;height:96px}
  .ee-who__years--static b{font-size:25px}
  .ee-who__years--static span{font-size:7px;letter-spacing:.12em}
}

/* ---- section label: no capsule, just the tracked word ---- */
.ee-pilltag{
  display:inline-block;padding:0;border-radius:0;background:none;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ee-accent);margin-bottom:var(--ee-md);
}
.ee-pilltag::before{content:none}
/* Absolute measure: the wrapper sits at body size, so ch would resolve
   against 17px and fold the two-line heading into six. */
.ee-range__head{max-width:780px;margin-bottom:var(--ee-xl)}

/* ---- elite difference: floating image ---- */
.ee-diffx__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--ee-xl);align-items:center}
.ee-diffx__copy{order:2}
.ee-diffx__media{order:1;position:relative;padding-bottom:16%}
.ee-diffx__large,.ee-diffx__small{margin:0;border-radius:var(--ee-r-lg);overflow:hidden}
.ee-diffx__large img,.ee-diffx__small img{width:100%;height:100%;object-fit:cover;display:block}
.ee-diffx__large{aspect-ratio:3/2}
.ee-diffx__small{
  position:absolute;right:-6%;bottom:0;width:46%;aspect-ratio:3/2;
  box-shadow:0 30px 60px -22px rgba(4,36,62,.45);border:4px solid var(--ee-surface);
  will-change:transform;
}
@media (max-width:1024px){
  .ee-diffx__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-diffx__copy{order:1}
  .ee-diffx__media{order:2;padding-bottom:22%}
}
@media (max-width:767px){
  .ee-diffx__media{padding-bottom:26%;margin-bottom:var(--ee-md)}
  /* 56% of the padded column lands at about 45% of the screen. */
  .ee-diffx__small{width:56%;right:0;bottom:0;border-width:3px}
}

/* ---- our range: accordion + sticky image ---- */
.ee-range__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ee-xl);align-items:start}
.ee-range__list{border-top:1px solid var(--ee-rule)}
.ee-range__item{border-bottom:1px solid var(--ee-rule)}
.ee-range__top{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--ee-md);
  background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;color:var(--ee-ink);font-family:inherit;
  min-height:48px;
}
.ee-range__top h3{
  font-family:var(--ee-font-display);font-weight:700;letter-spacing:var(--ee-track);
  font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:var(--ee-muted);
  transition:color .3s var(--ee-ease);
}
.ee-range__item.is-open .ee-range__top h3,.ee-range__top:hover h3{color:var(--ee-ink)}
.ee-range__chev{color:var(--ee-accent);flex:none;transition:transform .4s var(--ee-ease)}
.ee-range__item.is-open .ee-range__chev{transform:rotate(180deg)}
/* 0fr to 1fr keeps the open and close on the compositor with no height maths. */
.ee-range__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ee-ease)}
.ee-range__item.is-open .ee-range__body{grid-template-rows:1fr}
.ee-range__inner{overflow:hidden;min-height:0}
.ee-range__inner p{max-width:46ch;color:var(--ee-muted);padding-bottom:6px}
.ee-range__more{display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:14px;color:var(--ee-ink);padding-bottom:24px}
.ee a.ee-range__more{color:var(--ee-ink)}
.ee-range__more:hover{color:var(--ee-accent)}
.ee-range__mimg{display:none;margin:0 0 var(--ee-md)}
.ee-range__media{position:sticky;top:120px;aspect-ratio:4/5;border-radius:var(--ee-r-lg);overflow:hidden;background:var(--ee-navy)}
.ee-range__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ee-ease)}
.ee-range__media img.is-active{opacity:1}
@media (max-width:767px){
  .ee-range__grid{grid-template-columns:1fr}
  .ee-range__media{display:none}
  .ee-range__top h3{font-size:22px}
  .ee-range__mimg{display:block;border-radius:var(--ee-r-md);overflow:hidden;aspect-ratio:3/2}
  .ee-range__mimg img{width:100%;height:100%;object-fit:cover;display:block}
}
@media (prefers-reduced-motion:reduce){
  .ee-range__body,.ee-range__media img,.ee-range__chev{transition:none}
}

/* ---- projects: bento ---- */
.ee-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:320px;gap:var(--ee-lg)}
.ee-bento__item{position:relative;border-radius:var(--ee-r-lg);overflow:hidden;background:var(--ee-navy);isolation:isolate}
.ee-bento__item--wide{grid-column:span 2}
.ee-bento__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ee-ease)}
.ee-bento__item:hover img{transform:scale(1.05)}
.ee-bento__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,36,62,.9) 0%,rgba(4,36,62,.35) 45%,transparent 70%)}
.ee-bento__copy{position:absolute;left:0;right:0;bottom:0;padding:var(--ee-lg);z-index:1;color:#fff}
.ee-bento__name{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ee-accent);margin-bottom:8px}
.ee-bento__name i{font-style:normal;color:rgba(255,255,255,.6);letter-spacing:.06em;text-transform:none;margin-left:8px}
.ee-bento__copy h3{font-family:var(--ee-font-display);font-weight:700;letter-spacing:var(--ee-track);font-size:26px;line-height:1.1;color:#fff}
.ee-bento__copy p{color:rgba(255,255,255,.76);font-size:15px;max-width:48ch;margin-top:8px}
.ee a.ee-bento__more{
  display:inline-flex;align-items:center;gap:14px;margin-top:var(--ee-lg);
  font-weight:700;color:var(--ee-ink);font-size:16px;
}
.ee-bento__more .ee-btn__badge{transition:transform .45s var(--ee-ease)}
.ee-bento__more:hover .ee-btn__badge{transform:rotate(45deg)}
@media (max-width:1024px){ .ee-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:280px} .ee-bento__item--wide{grid-column:span 2} }
@media (max-width:767px){ .ee-bento{grid-template-columns:1fr;grid-auto-rows:260px} .ee-bento__item--wide{grid-column:auto} .ee-bento__copy{padding:var(--ee-md)} .ee-bento__copy h3{font-size:22px} }

/* ---- closing CTA: scroll-expanding video ----
   The section is taller than the viewport so there is scroll to scrub through;
   the card sticks and grows from a 90% inset rounded panel to full bleed. */
.ee-ctax{position:relative;height:190vh;background:var(--ee-bg)}
.ee-ctax__pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.ee-ctax__card{
  position:relative;width:90vw;height:84vh;border-radius:24px;overflow:hidden;
  background:var(--ee-navy);isolation:isolate;will-change:width,height,border-radius;
}
.ee-ctax__video,.ee-ctax__scrim{position:absolute;inset:0;width:100%;height:100%}
.ee-ctax__video{object-fit:cover;z-index:0}
.ee-ctax__scrim{z-index:1;background:linear-gradient(to top,rgba(4,36,62,.72),rgba(4,36,62,.42))}
.ee-ctax__content{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--ee-xl) var(--ee-gutter);gap:var(--ee-md);
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ee-ease),transform .6s var(--ee-ease);
}
.ee-ctax.is-full .ee-ctax__content{opacity:1;transform:none}
.ee-ctax__content .ee-h2{color:#fff;max-width:22ch}
.ee-ctax__content .ee-lede{max-width:46ch;color:rgba(255,255,255,.82)}
.ee-ctax__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85);
}
.ee-ctax__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ee-accent);display:inline-block}
.ee-ctax__toggle{
  position:absolute;right:24px;bottom:24px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(4,36,62,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .16s var(--ee-ease);
}
.ee-ctax__toggle:active{transform:scale(.96)}
.ee-ctax__toggle .ee-ctax__ico-play{display:none}
.ee-ctax__toggle[data-paused="1"] .ee-ctax__ico-play{display:block}
.ee-ctax__toggle[data-paused="1"] .ee-ctax__ico-pause{display:none}
/* Phones and reduced motion: no scrub, just a full-width section. */
@media (max-width:767px), (prefers-reduced-motion:reduce){
  .ee-ctax{height:auto}
  .ee-ctax__pin{position:static;height:auto;display:block}
  .ee-ctax__card{width:100%;height:auto;min-height:88vh;border-radius:0}
  .ee-ctax__content{opacity:1;transform:none;min-height:88vh}
}
@media (max-width:767px){ .ee-ctax__content .ee-h2{font-size:32px} }

/* ---- gallery marquee above the footer ---- */
.ee-gallery{overflow:hidden;padding-block:var(--ee-lg) 0;background:var(--ee-bg)}
.ee-gallery__track{display:flex;gap:16px;width:max-content;animation:ee-gallery 70s linear infinite}
.ee-gallery:hover .ee-gallery__track{animation-play-state:paused}
.ee-gallery__track img{height:280px;width:auto;border-radius:var(--ee-r-md);object-fit:cover;flex:none}
@keyframes ee-gallery{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:767px){ .ee-gallery__track img{height:180px} }
@media (prefers-reduced-motion:reduce){
  .ee-gallery{overflow-x:auto}
  .ee-gallery__track{animation:none}
}

/* ============================================================
   v5: feedback round 3
   ============================================================ */



.ee-who__quote--plain{font-family:var(--ee-font);font-style:normal;font-weight:700;font-size:17px;color:var(--ee-ink)}

/* ---- nav: transparent at top, hides on scroll down, frosts on scroll up ---- */
.ee-nav{
  background:transparent;box-shadow:none;backdrop-filter:none;
  transition:transform .38s var(--ee-ease),background .38s var(--ee-ease),backdrop-filter .38s var(--ee-ease);
}
.ee-nav.is-stuck{background:transparent;backdrop-filter:none;box-shadow:none}
.ee-nav.is-frost{background:rgba(4,36,62,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ee-nav.is-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){ .ee-nav{transition:none} }
.ee-nav .ee-explore{font-size:13px}

/* ---- hero: overscan so the parallax never exposes an edge ---- */
.ee-hero__media{inset:-14% 0}

/* ---- underline link variants ---- */
.ee a.ee-explore--ink{color:var(--ee-ink)}

/* ---- proof card: hairline, frosted, no hover ---- */
.ee-proof{
  background:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.55);box-shadow:none;
}
.ee-proof__row:hover img{transform:none}
.ee-proof__row img{transition:none}

/* ---- who: years bubble centred on the player's left edge ---- */
.ee-who__years{left:0;bottom:auto;top:50%;transform:translate(-50%,-50%);width:132px;height:132px}
.ee-who__years::before{inset:9px}
.ee-who__years b{font-size:30px}
.ee-who__years span{font-size:8px;letter-spacing:.14em;margin-top:5px}
@media (max-width:1024px){ .ee-who__years{width:112px;height:112px} .ee-who__years b{font-size:25px} .ee-who__years span{font-size:7px} }

/* ---- difference: thinner frame ---- */
.ee-diffx__small{border-width:2px}
@media (max-width:767px){ .ee-diffx__small{border-width:2px} }

/* ---- range: learn more link spacing ---- */
.ee-range__more{margin-bottom:24px;padding-bottom:8px}

/* ---- projects ---- */
.ee-projects{padding-top:40px}
.ee-bento{gap:12px}
.ee-bento__item::after,.ee-bento__copy{opacity:0;transition:opacity .4s var(--ee-ease)}
.ee-bento__item:hover::after,.ee-bento__item:hover .ee-bento__copy,
.ee-bento__item:focus-within::after,.ee-bento__item:focus-within .ee-bento__copy{opacity:1}
@media (hover:none){ .ee-bento__item::after,.ee-bento__copy{opacity:1} }
.ee-bento__foot{text-align:center;margin-top:var(--ee-xl)}

/* ---- services ---- */
.ee-range__head--center{max-width:none;text-align:center}
.ee-range__head--center .ee-h2{max-width:22ch;margin-inline:auto}
.ee-services__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ee-rule)}
.ee-services__item{padding:var(--ee-xl) var(--ee-lg) var(--ee-xl) 0;border-right:1px solid var(--ee-rule)}
.ee-services__item+.ee-services__item{padding-left:var(--ee-lg)}
.ee-services__item:last-child{border-right:0;padding-right:0}
.ee-services__icon{display:block;width:48px;height:48px;color:var(--ee-accent);margin-bottom:var(--ee-lg)}
.ee-services__icon svg{width:100%;height:100%}
.ee-services__item h3{font-family:var(--ee-font-display);font-weight:700;letter-spacing:var(--ee-track);font-size:26px;line-height:1.12;color:var(--ee-ink);margin-bottom:12px;max-width:16ch}
.ee-services__item p{max-width:34ch}
@media (max-width:767px){
  .ee-services__grid{grid-template-columns:1fr}
  .ee-services__item{border-right:0;border-bottom:1px solid var(--ee-rule);padding:var(--ee-lg) 0}
  .ee-services__item+.ee-services__item{padding-left:0}
  .ee-services__item:last-child{border-bottom:0}
}

/* ---- testimonials carousel ---- */
.ee-testi{overflow:hidden;padding-bottom:var(--ee-section)}
.ee-testi__head{text-align:center;max-width:20ch;margin:0 auto var(--ee-xl)}
.ee-testi__viewport{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.ee-testi__viewport.is-dragging{cursor:grabbing}
.ee-testi__track{display:flex;gap:16px;width:max-content;will-change:transform}
.ee-tcard{
  position:relative;flex:none;height:560px;border-radius:24px;overflow:hidden;
  width:var(--tw,390px);background:var(--ee-navy);isolation:isolate;
}
.ee-tcard--quote{width:calc(var(--tw,390px) * 1.4);padding:36px;display:flex;flex-direction:column;justify-content:space-between}
.ee-tcard--video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ee-tcard--video::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,36,62,.82) 0%,rgba(4,36,62,.2) 40%,transparent 65%)}
.ee-tcard--video{cursor:pointer}
.ee-tcard__who{position:relative;z-index:1;color:#fff}
.ee-tcard__who b{display:block;font-size:17px;font-weight:700}
.ee-tcard__who span{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-top:3px}
.ee-tcard--video .ee-tcard__who{position:absolute;left:28px;bottom:28px;right:96px}
.ee-tcard__play{
  position:absolute;right:24px;bottom:24px;z-index:2;width:56px;height:56px;border-radius:50%;
  background:rgba(4,36,62,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .16s var(--ee-ease);
}
.ee-tcard__play:active{transform:scale(.96)}
.ee-tcard__quote{
  font-family:var(--ee-font);font-weight:700;color:#fff;
  font-size:clamp(17px,1.5vw,25px);line-height:1.4;letter-spacing:-.2px;
}
.ee-tcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.ee-tcard__foot .ee-tcard__who span{color:rgba(255,255,255,.55)}
.ee-tcard__head{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
@media (max-width:1024px){ .ee-tcard{--tw:340px;height:500px} }
@media (max-width:767px){
  .ee-tcard,.ee-tcard--quote{width:85vw;height:460px}
  .ee-tcard--quote{padding:26px}
  .ee-tcard__quote{font-size:18px}
  .ee-testi__track{gap:12px}
}
.ee-modal{
  border:0;padding:0;background:transparent;max-width:min(960px,92vw);width:92vw;
  border-radius:18px;overflow:visible;
}
.ee-modal::backdrop{background:rgba(4,36,62,.86);backdrop-filter:blur(6px)}
.ee-modal__video{display:block;width:100%;aspect-ratio:16/9;background:var(--ee-navy);border-radius:18px}
.ee-modal__close{
  position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  display:grid;place-items:center;cursor:pointer;
}

/* ---- closing CTA: headline only, no scrim ---- */
.ee-ctax__content .ee-h2{text-shadow:0 2px 24px rgba(4,36,62,.55)}
.ee-ctax__content{gap:0}

/* ---- gallery: tighter, always moving, breathing room above footer ---- */
.ee-gallery{padding-block:var(--ee-lg) var(--ee-xl)}
.ee-gallery__track{gap:6px}
.ee-gallery:hover .ee-gallery__track{animation-play-state:running}

/* ============================================================
   v6: feedback round 4
   ============================================================ */
/* One accent rule, last in the cascade, so every emphasised phrase on the
   page shares the same weight, tracking and colour. */
.ee .ee-accent{
  font-weight:900;color:var(--ee-accent);
  letter-spacing:inherit;line-height:inherit;display:inline;
}

/* Hero: clip the overscanned media. The section is a positioned stacking
   context, so without this its image painted over the next section's ground. */
.ee-hero{overflow:hidden}

/* Logo wall as its own band */
.ee-logos{background:var(--ee-surface);padding-block:48px;border-top:1px solid var(--ee-rule);border-bottom:1px solid var(--ee-rule)}

/* Hero CTA pair: same underline treatment, Contact Us in the accent */
.ee a.ee-explore--accent{color:var(--ee-accent)}

/* Services stack: icon sits where the step number used to */
.ee-proc__icon{display:block;width:44px;height:44px;color:var(--ee-accent);margin-bottom:var(--ee-md)}
.ee-proc__icon svg{width:100%;height:100%}

/* Footer wordmark removed */
.ee-wordmark{display:none}

/* ============================================================
   v7: feedback round 5 (mobile pass, testimonials, footer)
   ============================================================ */
/* White ground everywhere; the cream read as grey between sections. */
:root{--ee-bg:#FFFFFF}
.ee{background:#fff}
.ee-logos{background:#fff}

/* ---- proof card: compact on phones ---- */
@media (max-width:767px){
  .ee-proof{
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"num row" "stars row" "label row";
    column-gap:16px;align-items:center;padding:14px 16px;min-width:0;width:100%;border-radius:16px;
  }
  .ee-proof__num{grid-area:num;font-size:26px}
  .ee-proof__stars{grid-area:stars;margin-top:2px}
  .ee-proof__stars svg{width:10px;height:10px}
  .ee-proof__label{grid-area:label;margin-top:2px;font-size:12px}
  .ee-proof__row{grid-area:row;margin-top:0;justify-self:end}
  .ee-proof__row img,.ee-proof__more{width:34px;height:34px;margin-left:-10px;font-size:15px}
}

/* ---- who on phones: player only, bubble kept inside the frame ---- */
@media (max-width:767px){
  .ee-who__mobile{display:none}
  .ee-who__stage{display:block;width:100%;margin-top:var(--ee-lg)}
  .ee img.ee-who__horse{display:none}
  .ee-who__player{margin-bottom:34px}
  .ee-who__years{left:12px;top:auto;bottom:-26px;transform:none;width:92px;height:92px}
  .ee-who__years b{font-size:22px}
  .ee-who__years span{font-size:6.5px;letter-spacing:.1em}
}

/* ---- bento: location above the name ---- */
.ee-bento__loc{display:block;font-size:12px;color:rgba(255,255,255,.66);margin-bottom:4px}

/* ---- services stack copy ---- */
.ee-proc__step p{max-width:52ch}

/* ---- testimonials: photo cards ---- */
.ee-tx__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--ee-xl);align-items:end;margin-bottom:var(--ee-xl)}
.ee-tx__lede{max-width:44ch;color:var(--ee-muted);justify-self:end}
.ee-tx__scroller{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px) / 3);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;padding-bottom:4px;
}
.ee-tx__scroller::-webkit-scrollbar{display:none}
.ee-tx__scroller.is-dragging{cursor:grabbing;scroll-snap-type:none}
.ee-txcard{scroll-snap-align:start;outline:none}
.ee-txcard__photo{position:relative;margin:0;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--ee-navy);isolation:isolate}
.ee-txcard__photo img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;user-select:none;-webkit-user-drag:none}
.ee-txcard__photo::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,36,62,.78),rgba(4,36,62,.1) 45%,transparent 65%)}
.ee-txcard__veil{position:absolute;inset:0;background:rgba(4,36,62,.86);opacity:0;transition:opacity .4s var(--ee-ease)}
.ee-txcard__quote{
  position:absolute;left:26px;right:26px;top:26px;margin:0;color:#fff;
  font-size:clamp(14px,1.05vw,16px);line-height:1.5;font-weight:700;letter-spacing:-.1px;
  opacity:0;transform:translateY(14px);transition:opacity .4s var(--ee-ease),transform .4s var(--ee-ease);
}
.ee-txcard__who{position:absolute;left:26px;right:26px;bottom:24px;color:#fff;z-index:1}
.ee-txcard__who b{display:block;font-size:17px}
.ee-txcard__who span{display:block;font-size:13.5px;color:rgba(255,255,255,.7);margin-top:2px}
.ee-txcard:hover .ee-txcard__veil,.ee-txcard:focus-visible .ee-txcard__veil,.ee-txcard:focus-within .ee-txcard__veil{opacity:1}
.ee-txcard:hover .ee-txcard__quote,.ee-txcard:focus-visible .ee-txcard__quote,.ee-txcard:focus-within .ee-txcard__quote{opacity:1;transform:none}
.ee-txcard__below{display:none}
.ee-tx__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--ee-lg)}
.ee-tx__btn{
  width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--ee-rule);
  color:var(--ee-ink);display:grid;place-items:center;cursor:pointer;
  transition:transform .16s var(--ee-ease),border-color .2s var(--ee-ease);
}
.ee-tx__btn:hover{border-color:var(--ee-accent)}
.ee-tx__btn:active{transform:scale(.96)}
@media (max-width:1024px){ .ee-tx__scroller{grid-auto-columns:calc((100% - 16px) / 2)} }
@media (max-width:767px){
  .ee-tx__head{grid-template-columns:1fr;gap:var(--ee-md);align-items:start}
  .ee-tx__lede{justify-self:start}
  /* Bleed the scroller to the screen edges so a card is 85% of the viewport,
     with the first card still starting on the page gutter. */
  .ee-tx__scroller{grid-auto-columns:85vw;gap:12px;margin-inline:calc(-1 * var(--ee-gutter));padding-inline:var(--ee-gutter);scroll-padding-inline:var(--ee-gutter)}
  /* No hover on phones: the quote reads below the photo in page ink. */
  .ee-txcard__photo::before,.ee-txcard__veil,.ee-txcard__quote,.ee-txcard__who{display:none}
  .ee-txcard__below{display:block;padding:16px 4px 0}
  .ee-txcard__below p{font-size:16px;line-height:1.55;color:var(--ee-ink);font-weight:700}
  .ee-txcard__below b{display:block;margin-top:12px;color:var(--ee-ink)}
  .ee-txcard__below span{display:block;font-size:14px;color:var(--ee-muted)}
  .ee-tx__nav{justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .ee-txcard__veil,.ee-txcard__quote{transition:none} }

/* ---- gallery: native scroll on phones instead of a transformed track ---- */
@media (max-width:767px){
  .ee-gallery{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ee-gallery::-webkit-scrollbar{display:none}
  .ee-gallery__track{animation:none;width:max-content;gap:6px;padding-inline:var(--ee-gutter)}
  .ee-gallery__track img{scroll-snap-align:start}
}

/* ---- footer ---- */
.ee-foot{padding-top:var(--ee-xl)}
.ee-foot__grid{grid-template-columns:1.3fr 1fr .8fr;gap:var(--ee-xl);padding-block:var(--ee-lg) var(--ee-xl)}
.ee img.ee-foot__brand img,.ee-foot__brand img{width:auto;height:44px;max-width:none;margin-bottom:var(--ee-lg)}
.ee-foot__contact li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.ee-foot__contact svg{flex:none;margin-top:5px;color:rgba(255,255,255,.7)}
.ee-foot__legal{align-items:center}
.ee-foot__legal a{color:#fff}
.ee-foot__social{display:flex;gap:18px;align-items:center}
.ee-foot__social a{color:rgba(255,255,255,.6);display:grid;place-items:center;transition:color .2s var(--ee-ease)}
.ee-foot__social a:hover{color:var(--ee-accent)}
.ee-foot__top{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff !important;margin-left:8px}
@media (max-width:1024px){ .ee-foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:767px){ .ee-foot__grid{grid-template-columns:1fr} .ee-foot__legal{flex-direction:column;align-items:flex-start;gap:14px} }

/* ============================================================
   v8: scroll reveal choreography
   One curve, three moves: words rise out of a mask, blocks fade up,
   images wipe open. Everything is transform, opacity or clip-path, driven
   by CSS transitions so it stays interruptible and off the main thread.
   ============================================================ */

/* Blocks: a shorter rise than before, on the strong ease-out. */
.js .ee-reveal{opacity:0;transform:translateY(18px)}
.js .ee-reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ee-ease),transform .7s var(--ee-ease)}

/* Words: each word sits in an overflow mask and rises 112% of its own height.
   The mask carries a descender reserve so g, y and p never clip. */
.ee-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.ee-w__i{display:inline-block;will-change:transform}
.js .ee-split{opacity:1;transform:none}
.js .ee-split .ee-w__i{transform:translateY(112%)}
.js .ee-split.is-in .ee-w__i{
  transform:none;
  transition:transform .9s var(--ee-ease);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 45ms);
}

/* Images: wipe open from the top edge. */
.js .ee-clip{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.js .ee-clip.is-in{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ee-ease)}
.js .ee-clip.is-in.ee-diffx__small{transition:clip-path .9s var(--ee-ease) .25s}

/* Reduced motion: no movement, a short fade only. */
@media (prefers-reduced-motion:reduce){
  .js .ee-reveal,.js .ee-split .ee-w__i,.js .ee-clip{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ============================================================
   v9: badge corner, image overlap, mobile testimonial cards
   ============================================================ */

/* ---- FIX 1: years badge tucked into the bottom-left corner ----
   Roughly a third of the disc overlaps the player. The control bar starts
   to the right of it so the play toggle is never covered. */
.ee-who__years{
  width:136px;height:136px;left:0;top:auto;bottom:0;transform:translate(-42%,42%);
  padding:16px;box-sizing:border-box;
}
.ee-who__years::before{inset:8px}
.ee-who__years b{font-size:26px;line-height:1}
.ee-who__years span{font-size:7px;letter-spacing:.12em;line-height:1.35;max-width:76px;white-space:normal;margin-top:5px}
.ee-who__bar{left:96px}
.ee-who__player{margin-bottom:0}
@media (max-width:1024px){ .ee-who__years{width:120px;height:120px} .ee-who__years b{font-size:23px} }
@media (max-width:767px){
  .ee-who__years{width:100px;height:100px;left:0;bottom:0;transform:translate(-30%,55%);padding:12px}
  .ee-who__years b{font-size:20px}
  .ee-who__years span{font-size:6px;max-width:60px}
  .ee-who__player{margin-bottom:56px}
  .ee-who__bar{left:76px}
}

/* ---- FIX 2: layered images ----
   A third of the small image sits over the large one, the rest hangs off the
   bottom edge, and it stays flush with the right margin rather than past it. */
.ee-diffx__media{padding-bottom:21%}
.ee-diffx__small{right:0;bottom:0;box-shadow:0 28px 56px -20px rgba(4,36,62,.5)}
@media (max-width:1024px){ .ee-diffx__media{padding-bottom:21%} }
@media (max-width:767px){ .ee-diffx__media{padding-bottom:25%;margin-bottom:var(--ee-lg)} .ee-diffx__small{right:0;bottom:0} }

/* ---- FIX 3: mobile testimonials, quote inside the card ---- */
.ee-txcard__mark{display:none}
.ee-tx__dots{display:none}
@media (max-width:767px){
  .ee-tx__scroller{
    grid-auto-columns:88vw;gap:12px;
    margin-inline:calc(-1 * var(--ee-gutter));
    padding-inline:calc((100vw - 88vw) / 2);
    scroll-padding-inline:calc((100vw - 88vw) / 2);
  }
  .ee-txcard{scroll-snap-align:center}
  .ee-txcard__below{display:none}
  /* The card grows with its quote: the photo becomes a cover behind flowing
     content, so the longest quote pushes the card taller rather than clipping. */
  .ee-txcard__photo{
    display:flex;flex-direction:column;justify-content:flex-end;
    aspect-ratio:auto;min-height:118vw;padding:22px 20px 22px;
  }
  .ee-txcard__photo img{position:absolute;inset:0;width:100%;height:100%}
  .ee-txcard__photo::before{display:block;background:linear-gradient(to top,rgba(4,36,62,.94) 0%,rgba(4,36,62,.7) 38%,rgba(4,36,62,.15) 60%,transparent 72%)}
  .ee-txcard__veil{display:none}
  .ee-txcard__mark{
    display:block;position:relative;z-index:1;color:#fff;
    font-family:var(--ee-font-display);font-size:44px;line-height:.6;margin-bottom:10px;padding-top:52%;
  }
  .ee-txcard__quote{
    display:block;position:static;opacity:1;transform:none;margin:0;
    font-size:16px;line-height:1.45;font-weight:700;color:#fff;z-index:1;
  }
  .ee-txcard__who{display:block;position:static;margin-top:14px;font-size:14px;color:#fff}
  .ee-txcard__who b{display:inline;font-size:14px}
  .ee-txcard__who span{display:inline;color:rgba(255,255,255,.85);margin:0}
  .ee-txcard__who span::before{content:", "}
  .ee-tx__nav{display:none}
  .ee-tx__dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .ee-tx__dot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--ee-ink);opacity:.25;cursor:pointer;transition:opacity .2s var(--ee-ease),transform .2s var(--ee-ease)}
  .ee-tx__dot.is-active{opacity:1;transform:scale(1.15)}
}

/* The template no longer loads the theme's reset, so the browser's default
   8px body margin was insetting the entire page on every side. */
body.ee{margin:0}

/* ============================================================
   v10: fail-safe reveal
   The hidden state now lives on .ee-armed, which JS adds ONLY to elements
   that start below the fold. Nothing is hidden by default, so a throttled
   observer, a full-page screenshot or no JS at all can never leave real
   content invisible. clip-path is gone: on the sticky product panel it was
   the riskiest move of the set, and a soft rise reads the same.
   ============================================================ */

/* Neutralise every earlier hidden-by-default rule. */
.js .ee-reveal{opacity:1;transform:none}
.js .ee-clip{clip-path:none}
.js .ee-split .ee-w__i{transform:none}

/* Armed blocks */
.js .ee-armed{opacity:0;transform:translateY(18px)}
.js .ee-armed.is-in{opacity:1;transform:none;transition:opacity .7s var(--ee-ease),transform .7s var(--ee-ease)}

/* Armed headlines: words rise out of their mask */
.js .ee-armed.ee-split{opacity:1;transform:none}
.js .ee-armed.ee-split .ee-w__i{transform:translateY(112%)}
.js .ee-armed.ee-split.is-in .ee-w__i{
  transform:none;
  transition:transform .9s var(--ee-ease);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 45ms);
}

/* Armed imagery: soft rise, never clipped */
.js .ee-armed.ee-clip{opacity:0;transform:translateY(22px);clip-path:none}
.js .ee-armed.ee-clip.is-in{opacity:1;transform:none;transition:opacity .8s var(--ee-ease),transform .8s var(--ee-ease)}

@media (prefers-reduced-motion:reduce){
  .js .ee-armed,.js .ee-armed.ee-clip{opacity:1;transform:none;transition:none}
  .js .ee-armed.ee-split .ee-w__i{transform:none;transition:none}
}

/* ============================================================
   v13: accent baseline + mobile years badge
   ============================================================ */

/* A masked word is an inline-block with overflow hidden, so its baseline is
   its bottom margin edge, not its text baseline. Words inside .ee-accent were
   inheriting that span's taller line-height, making their masks taller and
   dropping them below the rest of the headline. One geometry for every word. */
.ee-split .ee-accent{display:inline;line-height:inherit;padding-bottom:0}
.ee-split .ee-accent .ee-w{padding-bottom:.24em;margin-bottom:-.24em}

/* Phones: the badge was translated off the left edge and clipped. Sit it on
   the player's lower-left corner, fully on screen, with the control bar
   starting clear of it. */
@media (max-width:767px){
  .ee-who__years{width:86px;height:86px;left:10px;bottom:-54px;top:auto;transform:none;padding:10px}
  .ee-who__years::before{inset:6px}
  .ee-who__years b{font-size:19px}
  .ee-who__years span{font-size:6.5px;letter-spacing:.1em;max-width:58px;margin-top:3px}
  .ee-who__bar{left:104px}
  .ee-who__player{margin-bottom:62px}
}

/* ============================================================
   v14: testimonial card polish
   ============================================================ */

/* The name prefix was authored as a CSS escape and the backslash survived the
   write, printing a literal 2014 on the page. It would also have put an em
   dash into a brand that does not use them, so it is removed, not repaired. */
.ee-txcard__who b::before{content:none}

/* Quote marks live in CSS so the phone card can rely on its own large mark
   instead of showing two sets. */
.ee-txcard__quote::before{content:"\201C"}
.ee-txcard__quote::after{content:"\201D"}

@media (max-width:767px){
  .ee-txcard__quote::before,.ee-txcard__quote::after{content:none}
  /* Heavier navy base so white copy holds over a bright, high-key photo. */
  .ee-txcard__photo::before{
    background:linear-gradient(to top,
      rgba(4,36,62,.97) 0%,
      rgba(4,36,62,.93) 28%,
      rgba(4,36,62,.74) 50%,
      rgba(4,36,62,.30) 70%,
      rgba(4,36,62,0) 86%);
  }
}

/* ============================================================
   v15: Elementor compatibility
   _css_classes is applied to the .elementor-element wrapper, not to the
   heading or paragraph inside it. So our component classes style the wrapper
   while Elementor styles the real text node. Make the inner node inherit and
   the existing design system keeps working unchanged on both surfaces.
   ============================================================ */
.ee .elementor-widget-heading .elementor-heading-title,
.ee .elementor-widget-text-editor > .elementor-widget-container,
.ee .elementor-widget-text-editor p{
  font-family:inherit;font-size:inherit;font-weight:inherit;
  line-height:inherit;letter-spacing:inherit;color:inherit;
}
.ee .elementor-widget-text-editor p{margin:0 0 1em}
.ee .elementor-widget-text-editor p:last-child{margin-bottom:0}
/* Elementor gives every widget a bottom margin from its global settings. */
.ee .elementor-widget:not(:last-child){margin-bottom:0}
/* Widgets are block-level and would stretch our inline underline links. */
.ee .elementor-widget-html{width:100%}

/* ============================================================
   v16: pill + inline widgets inside Elementor containers
   An Elementor widget wrapper is a flex item, so it stretches to the full
   container width. Anything that is meant to hug its text (a pill, an inline
   link) has to opt out of that stretch, or an inline-block pill renders as a
   full-width bar.
   ============================================================ */
.ee .elementor-element.ee-pilltag,
.ee .elementor-element.ee-eyebrow,
.ee .elementor-element.ee-explore{
  align-self:flex-start;
  width:auto;
  max-width:max-content;
}

/* ============================================================
   v7: gold retired, one accent on two grounds
   ============================================================ */
/* #06383E is the accent, but it only works on light ground. Rather than
   patch every rule that sits on navy, the dark surfaces redefine the token
   itself, so every descendant that already says var(--ee-accent) retargets
   to the pale tier automatically. --ee-accent-fg is the text colour that
   pairs with a solid accent fill on that ground. */
.ee-nav,
.ee-on-dark,
.ee-track,
.ee-cta,
.ee-foot,
.ee-ctax,
.ee-video,
.ee-menu__panel,
.ee-serv__card,
.ee-proj__item,
.ee-bento__item,
.ee-who__stage,
.ee-txcard__photo,
.ee-modal__video{
  --ee-accent:var(--ee-accent-dark);
  --ee-accent-fg:var(--ee-navy);
}

/* The years badge is the one place the brief names outright: ring and
   numeral both #06383E, on the white disc. */
.ee-who__years{--ee-accent:#06383E}
.ee-who__years b{color:var(--ee-accent);background:none;-webkit-text-fill-color:currentColor}

/* ---- elite difference: the frame unwinds, the inset travels ----
   The large plate lands zoomed in and settles to its natural framing as the
   section arrives. The small inset starts flush with its top edge and rides
   the full height down to the bottom edge. Both are scrubbed, so scrolling
   back up reverses them rather than replaying. JS owns the transform; the
   rules here only set the rest state and the geometry it travels through. */
.ee-diffx__media{padding-bottom:0}
@media (max-width:1024px){ .ee-diffx__media{padding-bottom:0} }
@media (max-width:767px){ .ee-diffx__media{padding-bottom:0;margin-bottom:var(--ee-lg)} }

.ee-diffx__large{overflow:hidden}
.ee-diffx__large img{will-change:transform;transform-origin:50% 50%}

.ee-diffx__small{
  top:0;bottom:auto;right:0;
  will-change:transform;
}
@media (max-width:767px){ .ee-diffx__small{top:0;bottom:auto;right:0;width:56%;border-width:3px} }

/* No-JS and reduced-motion both land on the settled end state rather than
   the entry state, so the section is never stuck mid-animation. */
.ee-diffx__small{transform:translateY(calc(var(--ee-diff-h,0px)))}
.js .ee-diffx__small{transform:none}
@media (prefers-reduced-motion:reduce){
  .ee-diffx__large img{transform:none !important}
  .ee-diffx__small{transform:none !important;top:auto;bottom:0}
}

/* ---- our range: continuous card rail ----
   Replaces the accordion. Cards are 4:5 portraits with the category tags
   inside the image over a scrim, and the title and description below it. */
.ee-rangex{background:var(--ee-surface);padding-block:var(--ee-section);overflow:hidden}
.ee-rangex__head{
  max-width:var(--ee-max);margin-inline:auto;padding-inline:64px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;
  margin-bottom:56px;
}
.ee-rangex__eyebrow{
  display:block;font-size:12px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ee-accent);margin-bottom:12px;
}
.ee-rangex__intro{font-size:17px;line-height:1.6;max-width:42ch;color:var(--ee-muted);margin-bottom:24px}
.ee a.ee-rangex__btn{
  display:inline-block;background:var(--ee-ink);color:#fff;
  font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--ee-r-pill);
  white-space:nowrap;transition:background .3s var(--ee-ease),transform .3s var(--ee-ease);
}
.ee a.ee-rangex__btn:hover{background:var(--ee-accent);transform:translateY(-2px)}
.ee a.ee-rangex__btn:active{transform:scale(.98)}

.ee-rangex__mask{position:relative;overflow:hidden}
.ee-rangex__rail{
  display:flex;gap:28px;width:max-content;padding-inline:64px;
  will-change:transform;
}
.ee-rangex__card{display:block;width:380px;flex:0 0 auto}
.ee-rangex__img{
  display:block;position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(145deg,#1E3A4C,var(--ee-navy) 58%,#02131F);
}
.ee-rangex__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.ee-rangex__card:hover .ee-rangex__img img,
.ee-rangex__card:focus-visible .ee-rangex__img img{transform:scale(1.06)}
.ee-rangex__scrim{
  display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,36,62,.88) 0%,rgba(4,36,62,.5) 34%,rgba(4,36,62,0) 68%);
}
.ee-rangex__tags{
  position:absolute;left:22px;right:22px;bottom:22px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.ee-rangex__tags li{
  background:#fff;color:var(--ee-ink);font-size:13px;font-weight:700;line-height:1;
  padding:7px 12px;border-radius:var(--ee-r-pill);white-space:nowrap;
}
.ee-rangex__arrow{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--ee-ink);display:grid;place-items:center;
  opacity:0;transform:translate(8px,-8px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.ee-rangex__card:hover .ee-rangex__arrow,
.ee-rangex__card:focus-visible .ee-rangex__arrow{opacity:1;transform:translate(0,0)}
.ee-rangex__card h3{
  font-size:24px;font-weight:700;color:var(--ee-ink);
  line-height:1.25;margin-top:22px;letter-spacing:-.3px;
}
.ee-rangex__card p{
  font-size:15.5px;line-height:1.55;color:var(--ee-muted);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ee-rangex__nav{
  max-width:var(--ee-max);margin:40px auto 0;padding-inline:64px;
  display:flex;gap:12px;
}
.ee-rangex__nav button{
  width:52px;height:52px;border-radius:50%;background:none;cursor:pointer;
  border:1px solid var(--ee-rule);color:var(--ee-ink);display:grid;place-items:center;
  transition:border-color .3s var(--ee-ease),background .3s var(--ee-ease);
}
.ee-rangex__nav button:hover{border-color:var(--ee-accent);background:rgba(0,57,64,.06)}
.ee-rangex__card:focus-visible{outline:2px solid var(--ee-accent);outline-offset:6px;border-radius:18px}

@media (max-width:1024px){
  .ee-rangex__head{grid-template-columns:1fr;gap:20px;align-items:start;padding-inline:var(--ee-gutter);margin-bottom:32px}
  .ee-rangex__rail{padding-inline:var(--ee-gutter)}
  .ee-rangex__nav{padding-inline:var(--ee-gutter)}
}
@media (max-width:767px){
  .ee-rangex{padding-block:64px}
  .ee-rangex__rail{gap:16px}
  .ee-rangex__card{width:78vw}
  .ee-rangex__img{border-radius:14px}
  .ee-rangex__tags{left:16px;right:16px;bottom:16px;gap:6px}
  .ee-rangex__tags li{font-size:12px;padding:6px 10px}
  .ee-rangex__card h3{font-size:20px;margin-top:16px}
  .ee-rangex__card p{font-size:14.5px}
}

/* Reduced motion: the rail stops marching and becomes an ordinary
   horizontally scrollable row, and the hover transitions drop out. */
@media (prefers-reduced-motion:reduce){
  .ee-rangex__mask{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ee-rangex__rail{transform:none !important}
  .ee-rangex__img img,.ee-rangex__arrow{transition:none}
}

/* ============================================================
   v8: round 6 — mobile type scale, compact proof card, hero film
   ============================================================ */

/* ---- 1. a real mobile type scale ----
   .ee-lede was 18px at every width, which is why the phone read at desktop
   size: the headline stepped down but the body copy never did. */
@media (max-width:1100px){
  .ee-lede{font-size:16.5px}
  .ee-hero .ee-lede{max-width:46ch}
}
@media (max-width:767px){
  .ee-lede{font-size:15.5px;line-height:1.62}
  .ee-display{font-size:33px;letter-spacing:-.7px}
  .ee-h2{font-size:27px;letter-spacing:-.6px}
}
@media (max-width:400px){
  .ee-display{font-size:30px}
  .ee-lede{font-size:15px}
}

/* ---- 2. the paragraph sat directly on the two calls to action ---- */
.ee-hero__cta{margin-top:var(--ee-lg)}
@media (max-width:767px){ .ee-hero__cta{margin-top:24px;gap:24px} }

/* ---- 3. proof card: a small square once the hero stacks ----
   The hero grid collapses to one column at 1100px, and from there the card
   was an unconstrained flex child with min-width:250px, so it stretched the
   full row (772x212 at 820px). It becomes a fixed square block instead. */
/* superseded by v9: the proof card is compact at every width. */
/* ---- 4. on tablet and phone the accent reads as green against the film,
          so the two hero controls go white. The card keeps its white rule. ---- */
/* superseded by v9: the accent token itself is white on dark grounds. */

/* ---- 5. review stars are gold; the overflow bubble inverts to white ---- */
:root{--ee-star:#F0B429}
.ee-proof__stars{color:var(--ee-star)}
.ee-proof__more{background:#fff;color:var(--ee-navy)}

/* ---- 6. hero film ----
   Sits on the same layer the still occupied (z-index -2), so the directional
   scrim at -1 still carries the copy. The container background image stays as
   the paint-before-first-frame and as the reduced-motion still. */
.ee-hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ee-hero__bg video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .ee-hero__bg video{display:none}
}

/* ---- 7. trusted by: label and rotating word on one line, marks beneath ----
   .ee-rot was display:block, which pushed the rotating word onto its own
   line under "Trusted by". */
.ee-logos__label{display:flex;align-items:center;gap:.34em;white-space:nowrap;flex-wrap:nowrap}
.ee-rot{flex:0 0 auto}
@media (max-width:1100px){
  /* justify-items:start here would shrink-wrap BOTH cells, and the marquee's
     content is its 1800px track, so it would size to that and push the page
     into a horizontal scroll. Only the label shrink-wraps; the marquee keeps
     the column width and clips its own track. */
  .ee-logos__row{grid-template-columns:minmax(0,1fr);gap:var(--ee-md)}
  .ee-logos__label{justify-self:start}
  .ee-marquee{justify-self:stretch;width:100%;min-width:0}
}
@media (max-width:767px){
  .ee-logos__label{font-size:16px}
  .ee-marquee__track{gap:44px}
  .ee-marquee__track img{height:34px}
}
@media (max-width:400px){ .ee-logos__label{font-size:15px} }

/* ---- 8. the reveal mask was shaving the last glyph of every word ----
   Headlines run at -0.07em, and letter-spacing is applied after the final
   character too, so a word's advance width ends ~3px inside where its last
   glyph actually finishes. The mask is overflow:hidden, so that tail was
   being cut -- visible on the round "e" ending both Equine and Excellence.
   The reserve is padding cancelled by an equal negative margin, so the mask
   grows but the text still sits exactly where it did. */
.ee-w{
  padding-inline:.04em .12em;
  margin-inline:-.04em -.12em;
}

/* ============================================================
   v9: round 7 — one dark accent, filled nav CTA, compact proof card
   ============================================================ */

/* ---- 1. the hero film had no box to paint into ----
   Elementor puts position:relative on every widget wrapper, so the absolutely
   positioned .ee-hero__bg was sizing against that wrapper rather than the
   hero. The wrapper's only child is out of flow, so it had collapsed to zero
   height: the video was loading and then rendering 1397x0. The wrapper itself
   now carries the fill. */
.ee-hero__bgwrap{
  position:absolute;inset:0;z-index:-2;
  margin:0;padding:0;pointer-events:none;
}
.ee-hero__bg{position:absolute;inset:0;overflow:hidden}
.ee-hero__bg video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  /* the container background is the film's own first frame, so hiding the
     video leaves the same image rather than a gap */
  .ee-hero__bg video{display:none}
}

/* ---- 2. navigation CTA: solid fill, white label, white arrow disc ---- */
.ee-nav .ee-btn{
  background:var(--ee-accent-solid,#06383E);
  color:#fff;
  padding:10px 10px 10px 26px;
}
.ee-nav .ee-btn::before{display:none}
.ee-nav .ee-btn:hover{background:#0A4C54;transform:translateY(-2px)}
.ee-nav .ee-btn__badge{background:#fff;color:#06383E}

/* ---- 3. proof card: the reference proportions ----
   Small block, tight padding, number over label over the avatar row. It was
   190x190 with 18px of padding; the reference sits nearer 176 wide and sizes
   to its content instead of being held square. */
.ee-proof{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:6px;
  width:176px;min-width:0;max-width:176px;min-height:0;
  padding:14px;border-radius:16px;
  align-self:start;justify-self:start;
}
.ee-proof__num{grid-area:auto;font-size:30px;margin:0;line-height:1}
.ee-proof__stars{grid-area:auto;margin:0;gap:2px}
.ee-proof__stars svg{width:11px;height:11px}
.ee-proof__label{grid-area:auto;margin:0;font-size:11.5px;line-height:1.25}
.ee-proof__row{grid-area:auto;margin:4px 0 0;justify-self:auto}
.ee-proof__row img,.ee-proof__more{width:34px;height:34px;margin-left:-10px;font-size:16px}
.ee-proof__row img:first-child{margin-left:0}

/* ============================================================
   v10: round 8 — difference section
   ============================================================ */

/* ---- 1. the reason list loses its rules ----
   Without the separators the 22px gaps read as unrelated lines, so the
   rhythm tightens to keep the four reasons reading as one set. */
.ee-diff__list li{border-bottom:0;padding-block:14px}
.ee-diff__list li:first-child{border-top:0;padding-top:0}
.ee-diff__list li:last-child{padding-bottom:0}

/* ---- 2. the inset overhangs the plate at both ends of its travel ----
   Per the reference: it starts above the plate's top-right corner and
   finishes below the bottom-right one, rather than sitting flush inside.
   The media column reserves that overhang so neither end is clipped and
   the copy beside it never collides. */
.ee-diffx__media{padding-block:7%}
.ee-diffx__small{right:-7%;top:0;bottom:auto}
@media (max-width:1024px){ .ee-diffx__media{padding-block:8%} }
@media (max-width:767px){
  .ee-diffx__media{padding-block:10%}
  .ee-diffx__small{right:-4%}
}
@media (prefers-reduced-motion:reduce){
  /* settles at the end of the journey rather than mid-way */
  .ee-diffx__small{transform:none !important;top:auto;bottom:0}
}

/* ============================================================
   v11: round 9 — range cards, difference copy
   ============================================================ */

/* ---- 1. pills sit near the card edge ----
   The UA list padding was winning: the reset uses :where(), which carries
   zero specificity, so the theme's ul padding-left (42.5px) stacked on top
   of the 22px inset and pushed every pill block 65px in from the image. */
.ee-rangex__tags{
  padding:0;margin:0;
  left:12px;right:12px;bottom:12px;
  gap:6px;
}
.ee-rangex__tags li{font-weight:500}

/* The photographs carry themselves; the scrim is gone from the markup and
   the pills stay legible because they are opaque. */
.ee-rangex__scrim{display:none}

/* ---- 2. section CTA matches the navigation ---- */
.ee a.ee-rangex__btn.ee-btn{
  background:#06383E;color:#fff;
  padding:10px 10px 10px 26px;border-radius:var(--ee-r-pill);
  display:inline-flex;align-items:center;gap:var(--ee-md);
}
.ee a.ee-rangex__btn.ee-btn::before{display:none}
.ee a.ee-rangex__btn.ee-btn:hover{background:#0A4C54;transform:translateY(-2px)}
.ee-rangex__btn .ee-btn__badge{background:#fff;color:#06383E}

/* ---- 3. difference section: prose instead of a reason list ---- */
.ee-diff__body{margin-top:var(--ee-lg);display:grid;gap:14px;max-width:58ch}
.ee-diff__body p{font-size:16.5px;line-height:1.65;color:var(--ee-muted)}
@media (max-width:767px){
  .ee-diff__body{margin-top:var(--ee-md);gap:12px}
  .ee-diff__body p{font-size:15.5px}
}

/* ============================================================
   v12: round 10 — Greenspire spacing, single-colour headlines,
   testimonial hover, horse crop, hero + difference buttons
   ============================================================ */

/* ---- 1. spacing system, benchmarked against the Greenspire template ----
   Measured there: 100 / 80 / 60px section padding, a 1204px container with
   32px gutters and 20px on phones. Ours was 120px / 1400px / 24px, which
   ran tighter horizontally and looser vertically than the reference. */
:root{
  --ee-section:100px;
  --ee-max:1204px;
  --ee-gutter:32px;
}
@media (max-width:1100px){ :root{--ee-section:80px} }
@media (max-width:767px){ :root{--ee-section:60px;--ee-gutter:20px} }

/* Headline scale follows the same reference: 52 / 44 / 30. */
@media (max-width:1100px){ .ee-h2{font-size:44px;letter-spacing:-.9px} }
@media (max-width:767px){ .ee-h2{font-size:30px;letter-spacing:-.6px} }

/* ---- 2. one colour per headline ---- */
.ee .ee-accent{color:inherit}

/* ---- 3. hero: a real button rather than an underlined link ---- */
.ee a.ee-hero__btn.ee-btn{background:#06383E;color:#fff;padding:10px 10px 10px 26px}
.ee a.ee-hero__btn.ee-btn::before{display:none}
.ee a.ee-hero__btn.ee-btn:hover{background:#0A4C54;transform:translateY(-2px)}
.ee-hero__btn .ee-btn__badge{background:#fff;color:#06383E}

/* ---- 4. who we are: the horse was losing its legs ----
   The section resolved to overflow-x:clip, and a clip on one axis forces the
   other axis out of `visible`, so the horse was cut at the section boundary.
   Overflow goes back to visible and the section reserves the room instead. */
.ee-who{overflow:visible;padding-bottom:120px}
.ee-who__stage{overflow:visible}
@media (max-width:1024px){ .ee-who{padding-bottom:90px} }
@media (max-width:767px){ .ee-who{padding-bottom:0} }

/* ---- 5. difference: taller plate, CTA under the copy ---- */
.ee-diffx__large{aspect-ratio:4/5}
.ee a.ee-diff__btn.ee-btn{background:#06383E;color:#fff;padding:10px 10px 10px 26px;margin-top:var(--ee-lg)}
.ee a.ee-diff__btn.ee-btn::before{display:none}
.ee a.ee-diff__btn.ee-btn:hover{background:#0A4C54;transform:translateY(-2px)}
.ee-diff__btn .ee-btn__badge{background:#fff;color:#06383E}

/* ---- 6. testimonials ----
   The theme styles <blockquote> with a left border. The reset used :where(),
   which has no specificity and only covered margin and padding, so a blue bar
   sat beside every quote on hover. The curly marks were drawn by CSS too. */
.ee-txcard__quote{border:0;padding-left:0;padding-right:0}
.ee-txcard__quote::before,.ee-txcard__quote::after{content:none}

/* dark azure replaces navy on the hover ground */
.ee-txcard__veil{background:rgba(6,56,62,.90)}
.ee-txcard__photo::before{background:linear-gradient(to top,rgba(6,56,62,.78),rgba(6,56,62,.1) 45%,transparent 65%)}

/* the supplied mark stands in for the typographic quote */
@media (min-width:768px){
  .ee-txcard__mark{
    display:block;position:absolute;right:22px;bottom:92px;
    width:118px;height:118px;font-size:0;z-index:1;pointer-events:none;
    background:url("img/quote.png") center/contain no-repeat;
    opacity:0;transition:opacity .4s var(--ee-ease);
  }
  .ee-txcard:hover .ee-txcard__mark,
  .ee-txcard:focus-visible .ee-txcard__mark,
  .ee-txcard:focus-within .ee-txcard__mark{opacity:.22}
}
@media (max-width:767px){
  /* keeps the 52% lead-in that pushes the copy into the lower half */
  .ee-txcard__mark{
    font-size:0;width:40px;height:auto;min-height:40px;margin-bottom:12px;
    background:url("img/quote.png") left bottom/40px 40px no-repeat;
  }
}

/* the right-hand paragraph starts level with the headline */
.ee-tx__head{align-items:start}

/* ---- 7. two consequences of the narrower container ----
   a) The full navigation needs about 900px. It only collapsed at 767, so
      between 768 and 1023 the Contact Us button ran 78px past the viewport.
      Fixed nav elements do not extend scrollWidth, so this was invisible to
      an overflow check but clipped on screen.
   b) The difference inset overhangs the plate by 7%. Once the grid stacks,
      that column is full width and the overhang has no gutter to sit in, so
      it pushed the page 21px sideways. It keeps the overhang only where
      there is room for it. */
@media (max-width:1023px){
  .ee-nav__links{display:none}
  .ee-nav__toggle{display:block}
}
@media (max-width:1100px){
  .ee-diffx__small{right:0}
}

/* ---- 8. the quote mark is an <img>, not a background ----
   Elementor blanks background-image on every descendant of a lazy container
   (.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) *) until its own JS
   marks it loaded, and that selector outruns a single class. An element beats
   the rule outright and is the better semantic anyway. */
.ee img.ee-txcard__mark{object-fit:contain;pointer-events:none}
@media (min-width:768px){
  .ee img.ee-txcard__mark{
    display:block;position:absolute;right:22px;bottom:92px;
    width:118px;height:118px;z-index:1;
    opacity:0;transition:opacity .4s var(--ee-ease);
  }
  .ee-txcard:hover img.ee-txcard__mark,
  .ee-txcard:focus-visible img.ee-txcard__mark,
  .ee-txcard:focus-within img.ee-txcard__mark{opacity:.22}
}
@media (max-width:767px){
  /* the photo column is already justify-content:flex-end, so the old 52%
     lead-in is no longer what holds the copy down */
  .ee img.ee-txcard__mark{
    display:block;position:relative;z-index:1;
    width:40px;height:40px;padding-top:0;margin-bottom:10px;opacity:1;
  }
}

/* ============================================================
   v13: round 11 — mobile type system, section rhythm, footer
   ============================================================ */

/* ---- 1. one vertical rhythm for the whole page ----
   Sections were running 100/100, 40/100, 48/48, 32/64 and 0/120, which is why
   some gaps read as twice the others. Full sections use the section token;
   bands (logo wall, gallery) use a consistent 60% of it. */
.ee-section,.ee-rangex,.ee-tx,.ee-diffx{padding-block:var(--ee-section)}
.ee-section.ee-projects{padding-top:var(--ee-section)}
.ee-logos,.ee-gallery{padding-block:calc(var(--ee-section) * .6)}
.ee-foot{padding-top:var(--ee-section)}
/* the horse overhangs into the section's own bottom padding rather than
   adding a second helping of it */
.ee-who{padding-bottom:12px}
@media (max-width:1024px){ .ee-who{padding-bottom:12px} }
@media (max-width:767px){ .ee-who{padding-bottom:0} }

/* ---- 2. mobile typography system ----
   Body copy was running 14.5 / 15 / 15.5 / 17 / 17.5px across sections. One
   scale now: 16px body, 15px card copy. text-wrap:balance was also keeping
   headlines off the full measure, which is what pushed "Crafted around the
   horse…" onto four short lines, and the hard <br> made it worse. */
@media (max-width:767px){
  .ee{font-size:16px}

  .ee-display{font-size:32px;line-height:1.12;letter-spacing:-.6px}
  .ee-h2{font-size:28px;line-height:1.18;letter-spacing:-.5px}
  /* `normal` is not a text-wrap keyword, so the declaration was dropped and
     balance kept holding the headlines off the full measure. `wrap` is the
     real default. */
  .ee-display,.ee-h2{text-wrap:wrap;max-width:none}
  .ee-h2 br,.ee-display br{display:none}

  .ee-lede,
  .ee-tx__lede,
  .ee-rangex__intro,
  .ee-who__body,
  .ee-diff__body p,
  .ee-ctax__content .ee-lede{font-size:16px;line-height:1.6}

  .ee-rangex__card h3{font-size:19px;line-height:1.3;margin-top:16px}
  .ee-rangex__card p{font-size:15px;line-height:1.55}
  .ee-foot__blurb,.ee-foot__contact,.ee-foot__col a{font-size:15px;line-height:1.6}
}

/* ---- 3. difference section on phones ----
   The inset does not earn its place at this width, and the CTA was a grid
   child so it stretched the full column. */
@media (max-width:767px){
  .ee-diffx__small{display:none}
  .ee-diffx__media{padding-block:0}
}
.ee a.ee-diff__btn.ee-btn{justify-self:start;width:max-content;max-width:100%}

/* ---- 4. testimonials: the paragraph starts level with the headline ----
   The eyebrow and the headline share a wrapper, so aligning to the top of
   that wrapper put the paragraph level with the eyebrow. display:contents
   lifts both into the grid so the paragraph can sit on the headline's row. */
@media (min-width:768px){
  .ee-tx__head{grid-template-columns:1fr 1fr;align-items:start}
  .ee-tx__head > div{display:contents}
  .ee-tx__head .ee-pilltag{grid-column:1;grid-row:1}
  .ee-tx__head .ee-h2{grid-column:1;grid-row:2}
  .ee-tx__lede{grid-column:2;grid-row:2;margin:0}
}

/* ---- 5. testimonial card: mark, then quote, then who ----
   The three were independently absolutely positioned, so the mark floated
   behind the copy. The face becomes a flex column and they stack in order. */
@media (min-width:768px){
  .ee-txcard__photo{display:flex;flex-direction:column;padding:26px}
  .ee-txcard__photo img{position:absolute;inset:0;width:100%;height:100%}
  .ee img.ee-txcard__mark{
    position:relative;right:auto;bottom:auto;
    width:46px;height:46px;margin:0 0 14px;flex:none;
  }
  .ee-txcard__quote{position:relative;left:auto;right:auto;top:auto;margin:0}
  .ee-txcard__who{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto}
  .ee-txcard:hover img.ee-txcard__mark,
  .ee-txcard:focus-visible img.ee-txcard__mark,
  .ee-txcard:focus-within img.ee-txcard__mark{opacity:.9}
}

/* ---- 6. the gallery keeps marching on phones ---- */
@media (max-width:767px){
  .ee-gallery{overflow:hidden;scroll-snap-type:none}
  .ee-gallery__track{
    animation:ee-gallery 70s linear infinite;
    width:max-content;padding-inline:0;
  }
  .ee-gallery__track img{scroll-snap-align:none}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .ee-gallery{overflow-x:auto}
  .ee-gallery__track{animation:none;padding-inline:var(--ee-gutter)}
}

/* ---- 7. footer ---- */
.ee-foot__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1.1fr 1.4fr;
  gap:var(--ee-xl);align-items:start;
  padding-block:0 var(--ee-xl);
}
.ee-foot__blurb{max-width:34ch;margin:0 0 var(--ee-lg);font-size:15px;line-height:1.6;color:rgba(255,255,255,.66)}
.ee-foot__contact{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ee-foot__contact li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;font-size:14.5px;line-height:1.5}
.ee-foot__contact svg{margin-top:4px;opacity:.7}
.ee-foot__contact a{color:inherit}
.ee-foot__contact a:hover{color:#fff}

.ee-foot__col h3,.ee-foot__news h3{
  font-size:15px;font-weight:900;color:#fff;margin:0 0 var(--ee-md);
  letter-spacing:.01em;
}
.ee-foot__col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ee-foot__col a{font-size:15px;color:rgba(255,255,255,.66);transition:color .2s var(--ee-ease)}
.ee-foot__col a:hover{color:#fff}

.ee-foot__news p{max-width:36ch;margin:0 0 var(--ee-md);font-size:15px;line-height:1.6;color:rgba(255,255,255,.66)}
.ee-foot__form{display:flex;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.08);border-radius:var(--ee-r-pill);padding:6px}
.ee-foot__form input{
  flex:1 1 150px;min-width:0;background:none;border:0;outline:none;
  color:#fff;font:inherit;font-size:15px;padding:10px 16px;
}
.ee-foot__form input::placeholder{color:rgba(255,255,255,.5)}
.ee-foot__form input:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px;border-radius:var(--ee-r-pill)}
.ee-foot__form button{
  flex:none;background:#fff;color:#06383E;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:15px;padding:10px 22px;
  border-radius:var(--ee-r-pill);transition:transform .2s var(--ee-ease),background .2s var(--ee-ease);
}
.ee-foot__form button:hover{background:rgba(255,255,255,.88);transform:translateY(-1px)}
.ee-foot__srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ee-foot__legal{
  display:flex;justify-content:space-between;align-items:center;gap:var(--ee-lg);
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:var(--ee-lg);font-size:14px;
}

@media (max-width:1100px){
  .ee-foot__grid{grid-template-columns:1fr 1fr;gap:var(--ee-lg) var(--ee-xl)}
  .ee-foot__news{grid-column:1 / -1}
  .ee-foot__news p{max-width:52ch}
}
@media (max-width:767px){
  .ee-foot__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
  .ee-foot__news{grid-column:auto}
  .ee-foot__blurb,.ee-foot__news p{max-width:none}
  .ee-foot__form{flex-wrap:nowrap}
  .ee-foot__form button{padding:10px 18px}
  .ee-foot__legal{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---- 8. testimonial paragraph sits on the headline's first line ----
   align-items:start lines up the boxes, but a 50px headline carries far more
   half-leading and cap offset than a 17px paragraph, so the paragraph still
   landed 22px low. The nudge is the difference between those two cap offsets,
   and it changes with the headline size, hence the two values. */
@media (min-width:1101px){ .ee-tx__lede{margin-top:-17px} }
@media (min-width:768px) and (max-width:1100px){ .ee-tx__lede{margin-top:-5px} }

/* ============================================================
   v14: round 12 — head alignment on both split sections
   ============================================================ */

/* Both section heads pair an eyebrow + headline on the left with a
   paragraph on the right. Aligning the columns aligns the paragraph with
   the EYEBROW, because the eyebrow and headline share a wrapper. Lifting
   the wrapper's children into the grid lets the paragraph sit on the
   headline's own row, which is what the alignment mark asks for. */

/* ---- our range ---- */
@media (min-width:768px){
  .ee-rangex__head{
    grid-template-columns:1.5fr 1fr;
    align-items:start;
  }
  .ee-rangex__head > div:first-child{display:contents}
  .ee-rangex__eyebrow{grid-column:1;grid-row:1}
  .ee-rangex__head .ee-h2{grid-column:1;grid-row:2;margin:0}
  /* the copy and its button stay one block, moved onto the headline's row */
  .ee-rangex__head > div:last-child{grid-column:2;grid-row:2;margin:0}
}

/* ---- testimonials ----
   The earlier -17px nudge came from a measurement taken before the word
   reveal had fired, which put the headline 58px lower than it really sits.
   With both items on the same row the natural position is already right. */
@media (min-width:768px){ .ee-tx__lede{margin-top:0} }

/* ============================================================
   v15: round 13 — Helvetica body, natural tracking, hero restored
   ============================================================ */

/* ---- 1. body copy: Helvetica in place of Lato ----
   Same weights as before. The supplied Helvetica has Regular and Bold
   only, so anything that asked Lato for 900 resolves to Bold. */
@font-face{
  font-family:"EE Helvetica";
  src:url("fonts/helvetica-400.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfairdisplay-600i.woff2") format("woff2");
  font-weight:600;font-style:italic;font-display:swap;
}
:root{
  --ee-font:"EE Helvetica",Helvetica,"Helvetica Neue",Arial,sans-serif;
  --ee-track:normal;
}

/* ---- 2. headlines at default letter spacing ----
   Tracking was set in a dozen places (-0.07em token plus per-component
   negatives). Uppercase labels keep their deliberate wide tracking. */
.ee :is(h1,h2,h3,h4,h5,h6):not(.ee-pilltag *):not(.ee-hero__pill *):not(.ee-foot h4),
.ee :is(h1,h2,h3,h5,h6):not(.ee-pilltag *):not(.ee-hero__pill *) *,
.ee-display,.ee-display *,.ee-h2,.ee-h2 *,
.ee-proof__num,.ee-stat__num,.ee-about__copy,.ee-quote p,
.ee-band h2,.ee-video__cap,.ee-nav__brand,.ee-who__years b,
.ee-bento__copy h3,.ee-services__item h3,.ee-accent{
  letter-spacing:normal !important;
}
/* the reveal mask only needed its side reserve for negative tracking */
.ee-w{padding-inline:0 .06em;margin-inline:0 -.06em}

/* ---- 3. navigation ---- */
.ee-nav__links > a,
.ee-nav__links .ee-menu__top{
  font-family:var(--ee-font);font-weight:700;
}
/* Contact Us: Royal Navy Blue */
.ee-nav .ee-btn{background:var(--ee-navy);border:1px solid rgba(255,255,255,.28)}
.ee-nav .ee-btn:hover{background:#0B3558}
.ee-nav .ee-btn__badge{background:#fff;color:var(--ee-navy)}

/* ---- 4. hero ---- */
/* black scrim, same directional weighting as before */
.ee-hero::after{
  background:
    linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.34) 40%,rgba(0,0,0,.04) 70%),
    linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.04) 60%);
}

/* the Equine Excellence pill, white */
.ee .elementor-element.ee-hero__pill{align-self:flex-start;width:auto;max-width:max-content}
.ee .elementor-element.ee-hero__pill{margin:0 0 16px}
.ee .elementor-element.ee-hero__pill .elementor-heading-title{
  display:inline-block;margin:0;
  font-family:var(--ee-font);font-size:11px;font-weight:700;line-height:1.65;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.55);border-radius:var(--ee-r-pill);
  padding:6px 16px;
}

/* "Designed to Last" in Playfair italic, on its own line */
.ee-hero .ee-display .ee-accent{
  display:block;
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:600;
  color:#fff;
}
.ee-hero .ee-display .ee-accent .ee-w{padding-inline:0 .1em;margin-inline:0 -.1em}

/* proof card back to the homepage's size and weight */
.ee-proof{
  display:block;gap:0;
  width:auto;min-width:250px;max-width:none;
  padding:26px 28px;border-radius:28px;
  align-self:end;
}
.ee-proof__num{font-size:42px;line-height:1;margin:0}
.ee-proof__stars{display:flex;gap:3px;margin:6px 0 0}
.ee-proof__stars svg{width:13px;height:13px}
.ee-proof__label{font-size:14px;line-height:1.65;margin:8px 0 0}
.ee-proof__row{margin:20px 0 0}
.ee-proof__row img,.ee-proof__more{width:46px;height:46px;margin-left:-14px;font-size:20px}
.ee-proof__row img:first-child{margin-left:0}

/* tablet: the grid stacks at 1100, card sits under the CTAs */
@media (max-width:1100px){
  .ee-proof{align-self:start;justify-self:start;padding:22px 24px;border-radius:22px}
  .ee-proof__num{font-size:36px}
  .ee-proof__row img,.ee-proof__more{width:42px;height:42px;margin-left:-12px;font-size:18px}
}

/* phone: one compact row, number and label left, faces right */
@media (max-width:767px){
  .ee .elementor-element.ee-hero__pill{margin-bottom:12px}
  .ee .elementor-element.ee-hero__pill .elementor-heading-title{font-size:10px;padding:5px 14px}
  .ee-proof{
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"num row" "stars row" "label row";
    column-gap:16px;align-items:center;
    width:100%;max-width:400px;min-width:0;padding:16px 18px;border-radius:18px;
  }
  .ee-proof__num{grid-area:num;font-size:30px}
  .ee-proof__stars{grid-area:stars;margin-top:4px}
  .ee-proof__stars svg{width:11px;height:11px}
  .ee-proof__label{grid-area:label;margin-top:4px;font-size:12.5px;line-height:1.3}
  .ee-proof__row{grid-area:row;margin:0;justify-self:end}
  .ee-proof__row img,.ee-proof__more{width:38px;height:38px;margin-left:-11px;font-size:16px}
  .ee-proof__row img:first-child{margin-left:0}
}
@media (max-width:360px){
  .ee-proof__row img:nth-child(4){display:none}
}

/* mobile sheet: the navy button needs its edge on the navy panel */
@media (max-width:1023px){
  .ee-nav__links[data-open] .ee-btn{border-color:rgba(255,255,255,.5)}
}

/* ============================================================
   v17: round 14 — section bands, tighter rhythm, one image radius,
   larger film, eyebrow spacing
   (a `v16` label already exists mid-file, hence the jump)
   ============================================================ */

:root{
  --ee-alt:#F6F6F6;          /* Greenspire's alternate band */
  --ee-media-r:10px;         /* the only corner radius for photos and film */
  --ee-eyebrow-gap:22px;     /* eyebrow to headline, everywhere */
  --ee-section:80px;
}
@media (max-width:1100px){ :root{--ee-section:64px;--ee-eyebrow-gap:18px} }
@media (max-width:767px){ :root{--ee-section:48px;--ee-eyebrow-gap:14px} }

/* ---- 1. alternating bands ----
   White and #F6F6F6 alternate down the page. The class sits on the
   Elementor container (Advanced > CSS Classes), so the client can move it.
   Sections that paint their own white ground go transparent inside a band. */
.ee-band-alt{background:var(--ee-alt)}
.ee-band-alt .ee-rangex,
.ee-band-alt .ee-ctax,
.ee-band-alt .ee-tx,
.ee-band-alt .ee-gallery{background:transparent}

/* ---- 2. rhythm ----
   Section padding drops from 100/80/60 to 80/64/48. The logo strip keeps its
   0.6 ratio. The who section no longer reserves room for the horse. */
.ee-logos{border-bottom:0}
.ee-who{padding-bottom:0}
@media (max-width:1024px){ .ee-who{padding-bottom:0} }

/* ---- 3. one radius for every photograph and film ---- */
.ee-who__player,.ee-who__screen,
.ee-diffx__large,.ee-diffx__small,
.ee-rangex__img,
.ee-bento__item,.ee-proj__item,
.ee-txcard__photo,
.ee-ctax__card,
.ee-modal__video,
.ee-gallery__track img,
.ee-video{border-radius:var(--ee-media-r)}
@media (max-width:767px){
  /* the full-bleed phone CTA stays square edge to edge */
  .ee-ctax__card{border-radius:0}
}

/* ---- 4. who we are: the film carries the section ----
   The horse is gone, so the stage fills its column and the column grows. */
.ee img.ee-who__horse{display:none}
.ee-who{--player-w:100%}
.ee-who__grid{
  grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:56px;
}
.ee-who__stage{width:100%;margin-inline:0}
@media (max-width:1024px){
  .ee-who{--player-w:100%}
  .ee-who__grid{grid-template-columns:1fr;gap:var(--ee-lg)}
}

/* the quote and its attribution, stacked */
.ee-who__quote p + p{margin-top:12px}
.ee .elementor-widget-text-editor.ee-who__quote p.ee-who__cite{
  font-weight:400;font-size:15px;line-height:1.5;color:var(--ee-muted);
}

/* play button: a slow ring that breathes out from the disc, plus a small
   lift on hover. It stops as soon as the film starts. */
.ee-who__big{overflow:visible}
.ee-who__big::before{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .ee-who__big::before{animation:ee-play-ring 2.8s cubic-bezier(.16,1,.3,1) infinite}
  .ee-who__big svg{animation:ee-play-nudge 2.8s ease-in-out infinite}
  .ee-who__big:hover{transform:scale(1.06)}
}
.ee-who__player[data-started="1"] .ee-who__big::before,
.ee-who__player[data-started="1"] .ee-who__big svg{animation:none}
@keyframes ee-play-ring{
  0%  {transform:scale(1);opacity:.75}
  70% {transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
@keyframes ee-play-nudge{
  0%,60%,100%{transform:translateX(0)}
  75%{transform:translateX(2px)}
}

/* ---- 5. eyebrow to headline: one gap, scaled by breakpoint ---- */
.ee .elementor-element.ee-pilltag,
.ee .elementor-element.ee-hero__pill{margin:0 0 var(--ee-eyebrow-gap)}
.ee-pilltag:not(.elementor-element){margin-bottom:var(--ee-eyebrow-gap)}
.ee-rangex__eyebrow{margin-bottom:var(--ee-eyebrow-gap)}
@media (max-width:767px){
  .ee .elementor-element.ee-hero__pill{margin-bottom:var(--ee-eyebrow-gap)}
}
/* the two split heads place eyebrow and headline in separate grid rows, so
   the grid's row gap was stacking on top of the eyebrow margin (70 / 86px) */
@media (min-width:768px){
  .ee-rangex__head,.ee-tx__head{row-gap:0}
}
/* "Crafted around the horse," needs ~700px at 52px now that headlines run at
   normal tracking; at 1.5fr it broke onto four lines */
@media (min-width:1101px){
  .ee-rangex__head{grid-template-columns:2fr 1fr}
}
/* stacked who: the grid gap already separates copy and film */
@media (max-width:1024px){ .ee-who__stage{margin-top:0} }
@media (max-width:767px){ .ee-who__player{margin-bottom:40px} }

/* ============================================================
   v18: round 15 — carousel controls, project tiles, services cards,
   testimonial rail + video lightbox, CTA button, larger gallery
   ============================================================ */

/* ---- 1. one carousel control, everywhere ----
   White disc, green ring, green arrow. 52px on desktop, 46px on phones,
   which stays above the 44px touch-target minimum. */
.ee-rangex__nav button,
.ee-carousel-nav button{
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:#fff;border:1.5px solid #06383E;color:#06383E;
  display:grid;place-items:center;padding:0;
  transition:transform .3s var(--ee-ease),box-shadow .3s var(--ee-ease);
}
.ee-rangex__nav button:hover,
.ee-carousel-nav button:hover{background:#fff;border-color:#06383E;transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(6,56,62,.45)}
.ee-rangex__nav button:active,
.ee-carousel-nav button:active{transform:scale(.96)}
.ee-rangex__nav button:focus-visible,
.ee-carousel-nav button:focus-visible{outline:2px solid #06383E;outline-offset:3px}
.ee-carousel-nav{display:flex;gap:12px;margin-top:32px}
@media (max-width:767px){
  .ee-rangex__nav button,
  .ee-carousel-nav button{width:46px;height:46px}
  .ee-carousel-nav{margin-top:24px}
}

/* ---- 2. project tiles: black scrim, tight copy ---- */
.ee-bento__item::after{
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.38) 45%,transparent 72%);
}
.ee .ee-bento__copy h3{margin:0}
.ee .ee-bento__copy p{margin:6px 0 0}
.ee-bento__name{margin-bottom:6px}

/* ---- 3. services cards: less padding, softer shadow, equal height ---- */
.ee-proc__steps{grid-auto-rows:1fr}
.ee-proc__step{
  padding:40px 36px;
  box-shadow:0 14px 34px -22px rgba(4,36,62,.22);
}
.ee .ee-proc__step p{margin-bottom:0}
@media (max-width:1100px){ .ee-proc__step{padding:36px 32px} }
@media (max-width:767px){ .ee-proc__step{padding:28px 24px} }

/* ---- 4. testimonials: alternating photo / words rail ----
   Every card is the same box, so the rail reads as one tidy strip. */
.ee-txm{margin-top:8px}
.ee-txm__mask{
  overflow:hidden;cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)));
}
.ee-txm__mask:active{cursor:grabbing}
.ee-txm__mask:focus-visible{outline:2px solid #06383E;outline-offset:4px}
.ee-txm__rail{display:flex;gap:16px;width:max-content;will-change:transform}
.ee-txm__card{
  position:relative;flex:none;width:400px;height:520px;
  border-radius:var(--ee-media-r);overflow:hidden;isolation:isolate;
}
.ee img.ee-txm__photo{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2;
  pointer-events:none;
}
.ee-txm__card--person::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 26%,rgba(0,0,0,0) 52%);
}
.ee-txm__card--person .ee-txm__who{position:absolute;left:28px;right:96px;bottom:26px}
.ee-txm__who b{display:block;color:#fff;font-size:17px;font-weight:700;line-height:1.3}
.ee-txm__who span{display:block;color:rgba(255,255,255,.72);font-size:14px;line-height:1.4;margin-top:2px}

.ee-txm__play{
  position:absolute;right:24px;bottom:22px;width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.85);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0 0 0 3px;
  transition:transform .3s var(--ee-ease),background .3s var(--ee-ease);
}
.ee-txm__play:hover{transform:scale(1.07);background:rgba(0,0,0,.5)}
.ee-txm__play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ee-txm__play::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .ee-txm__play::before{animation:ee-play-ring 2.8s cubic-bezier(.16,1,.3,1) infinite}
}

.ee-txm__card--quote{
  background:#06383E;color:#fff;
  display:flex;flex-direction:column;padding:32px 32px 28px;
}
.ee-txm__mark{
  display:block;font-family:var(--ee-font);font-weight:700;
  font-size:96px;line-height:.72;height:52px;color:#fff;opacity:.92;
}
.ee .ee-txm__quote{margin:18px 0 0;padding:0;border:0}
.ee .ee-txm__quote p{
  color:#fff;font-family:var(--ee-font);font-weight:700;
  font-size:20px;line-height:1.42;letter-spacing:normal;margin:0;
}
.ee-txm__foot{
  margin-top:auto;padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ee-txm__foot .ee-txm__who{min-width:0}
.ee img.ee-txm__avatar{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.85);
}
.ee-txm__nav{justify-content:flex-end}

@media (max-width:1100px){
  .ee-txm__card{width:350px;height:480px}
  .ee .ee-txm__quote p{font-size:18.5px}
}
@media (max-width:767px){
  .ee-txm__rail{gap:12px}
  .ee-txm__card{width:min(80vw,320px);height:460px}
  .ee-txm__card--quote{padding:26px 22px 22px}
  .ee-txm__mark{font-size:80px;height:42px}
  .ee .ee-txm__quote{margin-top:14px}
  .ee .ee-txm__quote p{font-size:16.5px;line-height:1.45}
  .ee-txm__card--person .ee-txm__who{left:20px;right:84px;bottom:20px}
  .ee-txm__play{right:18px;bottom:18px;width:52px;height:52px}
  .ee-txm__nav{justify-content:center}
}
@media (max-width:360px){
  .ee .ee-txm__quote p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .ee-txm__mask{overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto}
  .ee-txm__card{scroll-snap-align:start}
}

/* ---- 5. video lightbox ----
   Black wash with a soft vignette behind the film, matching the hero's
   black treatment. Portrait and landscape films both fit the viewport. */
.ee-lightbox{
  border:0;padding:0;background:transparent;overflow:visible;
  max-width:none;max-height:none;width:auto;height:auto;margin:auto;
}
.ee-lightbox::backdrop{
  background:radial-gradient(ellipse at center,rgba(0,0,0,.78) 0%,rgba(0,0,0,.94) 70%);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.ee-lightbox__frame{position:relative}
.ee-lightbox__video{
  display:block;max-width:min(92vw,1100px);max-height:86vh;width:auto;height:auto;
  border-radius:var(--ee-media-r);background:#000;
}
.ee-lightbox__close{
  position:absolute;top:-54px;right:0;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.ee-lightbox__close:hover{background:rgba(255,255,255,.26)}
@media (max-width:767px){
  .ee-lightbox__video{max-height:78vh}
  .ee-lightbox__close{top:-52px}
}
html.ee-lb-open{overflow:hidden}

/* ---- 6. closing CTA: Contact Us under the headline ---- */
.ee-ctax__content .ee-ctax__btn{margin-top:28px}
@media (max-width:767px){ .ee-ctax__content .ee-ctax__btn{margin-top:22px} }

/* ---- 7. gallery: twice the height (four times the area) ----
   Width follows from each photo's own ratio, so nothing stretches. The
   track is twice as long, so the loop runs twice as long to keep the same
   pace. Hover pauses it on devices that can hover. */
.ee-gallery__track{gap:12px;animation-duration:140s}
.ee-gallery__track img{height:560px;width:auto;aspect-ratio:1680/1128;object-fit:cover}
@media (hover:hover){
  .ee-gallery:hover .ee-gallery__track{animation-play-state:paused}
}
@media (max-width:1100px){
  .ee-gallery__track img{height:440px}
}
@media (max-width:767px){
  .ee-gallery__track{gap:8px;animation-duration:110s}
  .ee-gallery__track img{height:300px}
}
/* Blocksy's reset zeroes dialog margins, so margin:auto centring fails and
   the dialog stretches edge to edge. Make that deliberate: a full-viewport
   dialog that centres the frame. A click on the empty area is a click on the
   dialog itself, which closes it. */
.ee-lightbox[open]{
  position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;
  max-width:none;max-height:none;
  display:flex;align-items:center;justify-content:center;padding:72px 16px 24px;
}

/* ============================================================
   v19: round 16 — tight eyebrows, CTA gap, centre-focus gallery,
   partner logos, FAQ, words-only review cards
   ============================================================ */

/* ---- 1. eyebrow sits tight on its headline (client's red-line mark) ---- */
:root{--ee-eyebrow-gap:10px}
@media (max-width:1100px){ :root{--ee-eyebrow-gap:10px} }
@media (max-width:767px){ :root{--ee-eyebrow-gap:8px} }

/* the hero's script voice, reusable in any headline */
.ee .ee-script{
  font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:600;
  letter-spacing:normal;
}
.ee-split .ee-script .ee-w{padding:0 .1em .24em 0;margin:0 -.1em -.24em 0}

/* ---- 2. closing CTA: white ground, button closer to the headline ---- */
.ee-ctax__content .ee-ctax__btn{margin-top:16px}
@media (max-width:767px){ .ee-ctax__content .ee-ctax__btn{margin-top:14px} }

/* ---- 3. review cards: the words only ---- */
.ee-txm__card--quote .ee-txm__quote{margin-top:22px}

/* ---- 4. gallery: centre-focus rail ---- */
.ee-galx{padding-block:var(--ee-section);background:#fff;overflow:hidden}
.ee-galx__head{text-align:center;max-width:860px;margin-inline:auto}
.ee-galx__head .ee-pilltag{display:block}
.ee-galx__head .ee-h2{max-width:none;text-wrap:balance}
.ee-galx__stage{
  --galx-w:440px;--galx-gap:20px;
  position:relative;height:calc(var(--galx-w) * .8 + 24px);margin-top:48px;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ee-galx__stage:active{cursor:grabbing}
.ee-galx__card{
  position:absolute;left:0;top:50%;margin:0;
  width:var(--galx-w);aspect-ratio:5/4;
  border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee;
  transform-origin:50% 50%;will-change:transform;
  box-shadow:0 18px 40px -28px rgba(4,36,62,.35);
}
.ee img.ee-galx__card img,.ee-galx__card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* before the script lays the cards out, show a simple centred row */
.ee-galx:not(.is-ready) .ee-galx__card{position:relative;display:inline-block;transform:none}
@media (max-width:1100px){
  .ee-galx__stage{--galx-w:360px;margin-top:40px}
}
@media (max-width:767px){
  .ee-galx__stage{--galx-w:min(68vw,300px);--galx-gap:14px;margin-top:32px}
}

/* ---- 5. trusted partners: continuous logo strip ---- */
.ee-partners{padding-block:calc(var(--ee-section) * .8);background:var(--ee-alt);overflow:hidden}
.ee-partners__title{text-align:center;margin-bottom:44px}
.ee-partners__mask{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.ee .ee-partners__track{
  display:flex;align-items:center;gap:88px;width:max-content;margin:0;padding:0;list-style:none;
  animation:ee-partners 48s linear infinite;
}
.ee-partners__track li{flex:none;display:flex;align-items:center;justify-content:center;width:170px;height:72px}
.ee .ee-partners__track img{height:64px;width:auto;max-width:170px;object-fit:contain}
@keyframes ee-partners{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){ .ee-partners__mask:hover .ee-partners__track{animation-play-state:paused} }
@media (max-width:767px){
  .ee-partners__title{margin-bottom:28px}
  .ee .ee-partners__track{gap:48px;animation-duration:36s}
  .ee-partners__track li{width:120px;height:52px}
  .ee .ee-partners__track img{height:46px;max-width:120px}
}
@media (prefers-reduced-motion:reduce){
  .ee .ee-partners__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:24px}
  .ee-partners__track li[aria-hidden]{display:none}
}

/* ---- 6. FAQ ---- */
.ee-faq{background:#fff}
.ee-faq__head{max-width:760px;margin-bottom:48px}
.ee-faq__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:32px;align-items:end}
.ee-faq__ask{
  background:#06383E;color:#fff;border-radius:var(--ee-media-r);padding:30px 28px;
}
.ee .ee-faq__ask h3{color:#fff;font-size:21px;font-weight:700;line-height:1.3;margin:0 0 10px}
.ee .ee-faq__ask p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.6;margin:0 0 24px}
.ee a.ee-faq__btn.ee-btn{background:#fff;color:#06383E;padding:8px 8px 8px 22px;font-weight:700}
.ee a.ee-faq__btn.ee-btn::before{display:none}
.ee-faq__btn .ee-btn__badge{background:#06383E;color:#fff}
.ee a.ee-faq__btn.ee-btn:hover{transform:translateY(-2px)}

.ee-faq__list{display:grid;gap:12px}
.ee-faq__item{background:var(--ee-alt);border-radius:var(--ee-media-r);border:1px solid transparent;transition:border-color .3s var(--ee-ease),background .3s var(--ee-ease)}
.ee-faq__item.is-open{background:#fff;border-color:#06383E}
.ee .ee-faq__q{margin:0;font-size:inherit}
.ee-faq__q button{
  all:unset;box-sizing:border-box;width:100%;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 22px;min-height:64px;
  font-family:var(--ee-font);font-weight:700;font-size:17px;line-height:1.4;color:var(--ee-ink);
}
.ee-faq__q button:focus-visible{outline:2px solid #06383E;outline-offset:2px;border-radius:var(--ee-media-r)}
.ee-faq__icon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#06383E;transition:transform .45s var(--ee-ease),background .3s var(--ee-ease)}
.ee-faq__item.is-open .ee-faq__icon{transform:rotate(45deg);background:#06383E;color:#fff}
.ee-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ee-ease)}
.ee-faq__item.is-open .ee-faq__a{grid-template-rows:1fr}
.ee-faq__inner{overflow:hidden;padding:0 22px;opacity:0;transition:opacity .3s var(--ee-ease),padding .45s var(--ee-ease)}
.ee-faq__item.is-open .ee-faq__inner{opacity:1;padding-bottom:22px}
.ee .ee-faq__inner p{font-size:16px;line-height:1.65;color:var(--ee-muted);margin:0 0 12px;max-width:68ch}
.ee .ee-faq__inner p:last-child{margin-bottom:0}
.ee .ee-faq__inner ul{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:10px}
.ee .ee-faq__inner ul:last-child{margin-bottom:0}
.ee .ee-faq__inner li{position:relative;padding-left:18px;font-size:16px;line-height:1.6;color:var(--ee-muted);max-width:68ch}
.ee .ee-faq__inner li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:#06383E}
.ee .ee-faq__inner li b{color:var(--ee-ink);font-weight:700}
.ee .ee-faq__table{margin:0 0 12px;display:grid;gap:0;max-width:520px}
.ee .ee-faq__table > div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--ee-rule)}
.ee .ee-faq__table > div:first-child{border-top:1px solid var(--ee-rule)}
.ee .ee-faq__table dt{font-weight:700;color:var(--ee-ink);font-size:15.5px}
.ee .ee-faq__table dd{margin:0;color:var(--ee-muted);font-size:15.5px;text-align:right}
@media (prefers-reduced-motion:reduce){
  .ee-faq__a,.ee-faq__inner,.ee-faq__icon{transition:none}
}
@media (max-width:1024px){
  .ee-faq__grid{grid-template-columns:1fr}
  .ee-faq__ask{order:2}
}
@media (max-width:767px){
  .ee-faq__head{margin-bottom:28px}
  .ee-faq__q button{padding:16px 16px;font-size:16px;min-height:58px;gap:14px}
  .ee-faq__inner{padding:0 16px}
  .ee-faq__item.is-open .ee-faq__inner{padding-bottom:18px}
  .ee .ee-faq__inner p,.ee .ee-faq__inner li{font-size:15.5px}
  .ee .ee-faq__table > div{flex-direction:column;gap:2px}
  .ee .ee-faq__table dd{text-align:left}
  .ee-faq__ask{padding:24px 22px}
}
/* phones: a narrower focus card so both neighbours peek in, as in the reference */
@media (max-width:767px){ .ee-galx__stage{--galx-w:min(60vw,280px)} }

/* ============================================================
   v20: round 17 — motion layer, immersive focal gallery, smaller
   partners title, +/- FAQ icon, footer newsletter
   ============================================================ */

/* ---- 1. one motion vocabulary ----
   Reveal: 18px rise + fade, .7s, expo-out, 90ms stagger (set in JS).
   Hover: 2-4px lift or 1.03-1.05 zoom over .5s on the same curve.
   Nothing bounces, nothing loops except the rails. */
:root{--ee-move:cubic-bezier(.16,1,.3,1)}

/* image reveal: inset crop opens, photo settles from a light zoom */
.js .ee-imgrev{clip-path:inset(6% 4% 6% 4% round var(--ee-media-r))}
.js .ee-imgrev img{transform:scale(1.08)}
.js .ee-imgrev.is-shown{clip-path:inset(0 0 0 0 round var(--ee-media-r));transition:clip-path 1s var(--ee-move)}
.js .ee-imgrev.is-shown img{transform:scale(1);transition:transform 1.2s var(--ee-move)}
/* the difference plate's image is scrubbed by GSAP; only its frame opens */
.js .ee-diffx__large.ee-imgrev img{transform:none}

/* hover: cards, photos, controls */
@media (hover:hover){
  .ee-bento__item img{transition:transform 1s var(--ee-move)}
  .ee-bento__item:hover img{transform:scale(1.05)}
  .ee-proc__step{transition:transform .5s var(--ee-move),box-shadow .5s var(--ee-move)}
  .ee-proc__step:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(4,36,62,.28)}
  .ee-txm__card--person img.ee-txm__photo{transition:transform .9s var(--ee-move)}
  .ee-txm__card--person:hover img.ee-txm__photo{transform:scale(1.04)}
  .ee-txm__card--quote{transition:transform .5s var(--ee-move)}
  .ee-txm__card--quote:hover{transform:translateY(-4px)}
  .ee-rangex__img img{transition:transform .9s var(--ee-move)}
  .ee-rangex__card:hover .ee-rangex__img img{transform:scale(1.04)}
  .ee-faq__item:not(.is-open):hover{background:#EEF0F1}
  .ee-who__player{transition:transform .6s var(--ee-move),box-shadow .6s var(--ee-move)}
  .ee-who__player:hover{transform:translateY(-3px)}
  .ee-partners__track img{opacity:.78;transition:opacity .4s var(--ee-move)}
  .ee-partners__track li:hover img{opacity:1}
  .ee a.ee-explore{transition:color .3s var(--ee-move),opacity .3s var(--ee-move)}
  .ee a.ee-explore:hover{opacity:.78}
  .ee-foot__col a,.ee-foot a{transition:color .3s var(--ee-move)}
}
@media (prefers-reduced-motion:reduce){
  .js .ee-imgrev,.js .ee-imgrev img{clip-path:none;transform:none;transition:none}
}

/* ---- 2. gallery: immersive, one dominant focus image ----
   --galx-base is the standard card width; the focus card is
   base x (1 + boost). JS reads these, so they are the only knobs. */
.ee-galx__stage{
  --galx-base:400px;--galx-boost:.5;--galx-gap:12px;--galx-speed:70;
  height:calc(var(--galx-base) * (1 + var(--galx-boost)) * .75 + 32px);
  margin-top:40px;
}
.ee-galx__card{
  width:calc(var(--galx-base) * (1 + var(--galx-boost)));aspect-ratio:4/3;
  box-shadow:0 26px 50px -34px rgba(4,36,62,.45);
}
.ee-galx__card.is-focus{box-shadow:0 34px 70px -34px rgba(4,36,62,.55)}
@media (max-width:1100px){
  .ee-galx__stage{--galx-base:300px;--galx-speed:60;margin-top:32px}
}
@media (max-width:767px){
  /* the focus card fills most of the phone; neighbours peek either side */
  .ee-galx__stage{
    --galx-base:min(52vw,240px);--galx-boost:.55;--galx-gap:8px;--galx-speed:50;
    height:calc(min(52vw,240px) * 1.55 * .75 + 24px);margin-top:28px;
  }
}

/* ---- 3. partners: a quiet label, the logos lead ---- */
.ee .ee-partners__title{
  font-size:22px;line-height:1.3;font-weight:700;margin-bottom:36px;
}
@media (max-width:767px){
  .ee .ee-partners__title{font-size:19px;margin-bottom:24px}
  .ee-partners{padding-block:44px}
}

/* ---- 4. FAQ icon: + closed, - open ---- */
.ee-faq__item.is-open .ee-faq__icon{transform:none}
.ee-faq__icon svg{overflow:visible}
.ee-faq__v{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ee-move),opacity .25s var(--ee-move)}
.ee-faq__item.is-open .ee-faq__v{transform:scaleY(0);opacity:0}
@media (max-width:767px){
  .ee-faq__icon{width:36px;height:36px}
}

/* ---- 5. footer newsletter: one field, button inside ---- */
.ee .ee-foot__form{
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
  width:100%;max-width:360px;height:56px;padding:5px 5px 5px 18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  transition:border-color .3s var(--ee-move),background .3s var(--ee-move);
}
.ee .ee-foot__form:focus-within{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.09)}
.ee .ee-foot__form input{
  flex:1 1 auto;min-width:0;width:auto;height:100%;padding:0;margin:0;
  background:transparent;border:0;outline:0;box-shadow:none;
  color:#fff;font-family:var(--ee-font);font-size:15px;
}
.ee .ee-foot__form input::placeholder{color:rgba(255,255,255,.55)}
.ee .ee-foot__form button{
  flex:none;height:44px;padding:0 22px;margin:0;border:0;border-radius:999px;
  background:#fff;color:#04243E;font-family:var(--ee-font);font-weight:700;font-size:14.5px;
  cursor:pointer;white-space:nowrap;transition:transform .3s var(--ee-move),background .3s var(--ee-move);
}
.ee .ee-foot__form button:hover{transform:translateY(-1px);background:#EAF0F2}
.ee .ee-foot__form button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ee-foot__news p{margin-bottom:20px}
@media (max-width:767px){
  .ee .ee-foot__form{max-width:none}
}
/* revealed cards keep their hover lift (the reveal's settled state is more specific) */
@media (hover:hover){
  .js .ee-proc__step.ee-reveal.is-in:hover{transform:translateY(-3px)}
}

/* ============================================================
   v21: round 18 — final polish
   Motion follows one rule set (Emil Kowalski's design-engineering
   guidance): strong ease-out for entrances, under 300ms for anything
   the hand triggers, 0.97 press feedback, hover only for real pointers,
   reduced motion keeps fades and drops movement.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --navy:#04243E;
  --navy-hover:#0B3558;
}

/* ---- 1. motion tuning ---- */
/* entrances: 14px rise, 600ms, strong ease-out */
.js .ee-armed{transform:translateY(14px)}
.js .ee-armed.is-in{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
/* word reveal: quicker per word so a long headline never makes you wait */
.js .ee-split.is-in .ee-w__i,
.js .ee-armed.ee-split.is-in .ee-w__i{
  transition:transform .7s var(--ease-out);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * 32ms);
}
/* image reveal: from the bottom edge up, the photo settling as it opens */
.js .ee-imgrev{clip-path:inset(0 0 14% 0 round var(--ee-media-r))}
.js .ee-imgrev.is-shown{clip-path:inset(0 0 0 0 round var(--ee-media-r));transition:clip-path .9s var(--ease-out)}
.js .ee-imgrev img{transform:scale(1.06)}
.js .ee-imgrev.is-shown img{transform:scale(1);transition:transform 1.1s var(--ease-out)}

/* press feedback on everything pressable */
.ee .ee-btn,.ee-carousel-nav button,.ee-rangex__nav button,.ee-txm__play,.ee-who__big,
.ee .ee-foot__form button,.ee-lightbox__close{
  transition:transform .16s var(--ease-out),background-color .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ee .ee-btn:active,.ee-carousel-nav button:active,.ee-rangex__nav button:active,
.ee .ee-foot__form button:active,.ee-lightbox__close:active{transform:scale(.97)}
.ee-txm__play:active{transform:scale(.95)}
.ee-faq__q button:active,.ee-racc__h button:active{opacity:.85}

/* hover only where a real pointer hovers; short and quiet */
@media (hover:hover) and (pointer:fine){
  .ee .ee-btn:hover{transform:translateY(-1px)}
  .ee-proc__step,.ee-txm__card--quote,.ee-who__player{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .ee-bento__item img,.ee-rangex__img img,.ee-txm__card--person img.ee-txm__photo{transition:transform .6s var(--ease-out)}
  .ee-faq__item{transition:background-color .2s ease,border-color .2s ease}
}
@media (hover:none){
  /* touch: no stuck hover lifts, press feedback instead */
  .ee-proc__step:hover,.ee-txm__card--quote:hover,.ee-who__player:hover{transform:none}
}

/* reduced motion: keep the fades, drop every movement */
@media (prefers-reduced-motion:reduce){
  .js .ee-armed{opacity:0;transform:none}
  .js .ee-armed.is-in{opacity:1;transition:opacity .4s ease}
  .js .ee-split .ee-w__i,.js .ee-armed.ee-split .ee-w__i{transform:none;transition:none}
  .ee .ee-btn:active{transform:none}
}

/* smooth scrolling: Lenis on mouse/trackpad, native smooth anchors elsewhere */
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
#contact,#enquire,#faq,#testimonials,#projects,#products,#about{scroll-margin-top:24px}

/* ---- 2. every CTA outside the hero: Royal Navy ---- */
.ee a.ee-diff__btn.ee-btn,
.ee a.ee-rangex__btn.ee-btn,
.ee a.ee-ctax__btn.ee-btn,
.ee .ee-nav a.ee-btn{background:var(--navy);color:#fff}
.ee a.ee-diff__btn.ee-btn:hover,
.ee a.ee-rangex__btn.ee-btn:hover,
.ee a.ee-ctax__btn.ee-btn:hover{background:var(--navy-hover)}
.ee a.ee-diff__btn .ee-btn__badge,
.ee a.ee-ctax__btn .ee-btn__badge,
.ee a.ee-rangex__btn .ee-btn__badge{background:#fff;color:var(--navy)}
/* on the green FAQ panel the navy button carries a light ring so it reads */
.ee a.ee-faq__btn.ee-btn{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ee a.ee-faq__btn.ee-btn:hover{background:var(--navy-hover)}
.ee-faq__btn .ee-btn__badge{background:#fff;color:var(--navy)}

/* ---- 3. closing CTA: crisp type, no glow ----
   The old text-shadow was clipped by each word's reveal mask, which drew a
   grey box behind every word. A barely-there wash on the film does the
   legibility job instead. */
.ee-ctax__content .ee-h2{text-shadow:none}
.ee-ctax__card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.26) 0%,rgba(0,0,0,.08) 70%);
}
.ee-ctax__content{z-index:2}

/* ---- 4. difference: portrait inset ---- */
.ee-diffx__small{width:36%;aspect-ratio:4/5}
.ee-diffx__small img{object-position:50% 72%}
@media (max-width:1024px){ .ee-diffx__small{width:34%} }

/* ---- 5. partners on white ---- */
.ee-partners{background:#fff;padding-top:calc(var(--ee-section) * .4)}

/* ---- 6. FAQ: the contact box rides alongside the questions ----
   It is a sticky grid item that starts level with the first question and
   stops at the bottom of its own column, so it can never leave the
   section. Phones: it sits after the questions, not sticky. */
@media (min-width:1025px){
  .ee-faq__grid{align-items:start}
  .ee-faq__ask{position:sticky;top:112px;align-self:start}
}

/* ---- 7. range: accordion on phones, rail elsewhere ---- */
.ee-rangex__acc{display:none}
@media (max-width:767px){
  .ee-rangex__mask,.ee-rangex__nav{display:none}
  .ee-rangex__acc{display:block;padding-inline:var(--ee-gutter);border-top:1px solid var(--ee-rule)}
  .ee-racc__item{border-bottom:1px solid var(--ee-rule)}
  .ee .ee-racc__h{margin:0;font-size:inherit}
  .ee-racc__h button{
    all:unset;box-sizing:border-box;width:100%;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:60px;padding:16px 0;
    font-family:var(--ee-font-display);font-weight:700;font-size:19px;line-height:1.3;color:var(--ee-ink);
  }
  .ee-racc__h button:focus-visible{outline:2px solid #06383E;outline-offset:2px}
  .ee-racc__item:not(.is-open) .ee-racc__h button{color:#5B6670}
  .ee-racc__chev{flex:none;width:32px;height:32px;display:grid;place-items:center;color:#06383E;transition:transform .25s var(--ease-out)}
  .ee-racc__item.is-open .ee-racc__chev{transform:rotate(180deg)}
  .ee-racc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
  .ee-racc__item.is-open .ee-racc__panel{grid-template-rows:1fr}
  .ee-racc__inner{overflow:hidden;opacity:0;transition:opacity .2s ease}
  .ee-racc__item.is-open .ee-racc__inner{opacity:1;padding-bottom:22px;transition:opacity .3s ease .05s}
  .ee-racc__media{position:relative;display:block;border-radius:var(--ee-media-r);overflow:hidden;aspect-ratio:4/3}
  .ee .ee-racc__media img{width:100%;height:100%;object-fit:cover}
  .ee .ee-racc__tags{
    position:absolute;left:10px;right:10px;bottom:10px;margin:0;padding:0;list-style:none;
    display:flex;flex-wrap:wrap;gap:5px;
  }
  .ee .ee-racc__tags li{
    background:rgba(255,255,255,.92);color:var(--ee-ink);border-radius:999px;
    font-size:10.5px;font-weight:700;line-height:1;padding:6px 9px;letter-spacing:.01em;
  }
  .ee .ee-racc__inner p{margin:14px 0 10px;font-size:15.5px;line-height:1.6;color:var(--ee-muted)}
  .ee-racc__more{display:inline-block}
}
@media (prefers-reduced-motion:reduce){
  .ee-racc__panel,.ee-racc__inner,.ee-racc__chev{transition:none}
}

/* ---- 8. FAQ: interaction timing to the same rules ---- */
.ee-faq__a{transition:grid-template-rows .3s var(--ease-out)}
.ee-faq__inner{transition:opacity .2s ease,padding .3s var(--ease-out)}
.ee-faq__v{transition:transform .2s var(--ease-out),opacity .15s ease}

/* ============================================================
   v22: round 19 — years badge restored, FAQ button white
   ============================================================ */

/* the image reveal now runs on the screen, not the player, so the
   player never clips the years badge that overhangs its corner */
.ee-who__player{clip-path:none;overflow:visible}

/* FAQ panel: white button, green label and arrow disc */
.ee a.ee-faq__btn.ee-btn{background:#fff;color:#06383E;box-shadow:none}
.ee-faq__btn .ee-btn__badge{background:#06383E;color:#fff}
@media (hover:hover) and (pointer:fine){
  .ee a.ee-faq__btn.ee-btn:hover{background:#EEF4F3;box-shadow:0 8px 20px -12px rgba(0,0,0,.45)}
}
.ee a.ee-faq__btn.ee-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* phones: give the player back the room its overhanging badge was designed
   with (round 14 trimmed this to 40px, which pushed the disc out of the band) */
@media (max-width:767px){ .ee-who__player{margin-bottom:62px} }
/* tablet: the stacked player sits on the page margin, so the badge's
   desktop overhang (-42%) ran off screen. Pull it in, keep it on the corner,
   and reserve the room below the player that the horse layout used to give. */
@media (min-width:768px) and (max-width:1024px){
  .ee-who__years{transform:translate(-12%,42%)}
  .ee-who__player{margin-bottom:64px}
}
@media (min-width:768px) and (max-width:1024px){ .ee-who__bar{left:118px} }

/* ============================================================
   v23: project page template (.eep-*)
   Veranda's project layout, Elite Equine's system: same tokens,
   type, radius, CTA styles, eyebrow spacing and motion rules.
   Full-bleed photography runs edge to edge with no radius (like the
   homepage hero); every contained image keeps --ee-media-r.
   ============================================================ */

/* ---- shared bits ---- */
.eep-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ee-muted);margin-bottom:8px;
}
.eep-pill{
  display:inline-block;font-family:var(--ee-font);font-size:11px;font-weight:700;line-height:1.65;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 16px;
}
.eep-pill--dark{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.eep-head{max-width:820px;margin-bottom:48px}
.eep-head .ee-pilltag{display:block}
.eep-head--center{margin-inline:auto;text-align:center}
.eep-prose p{font-size:17px;line-height:1.7;color:var(--ee-muted);margin:0 0 16px;max-width:60ch}
.eep-prose p:last-child{margin-bottom:0}
.ee .eep-hero .ee-script,.ee .eep-statement .ee-script{font-weight:600}

/* ---- 1. hero: the photograph is the page's first word ---- */
.eep-hero{
  position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;color:#fff;text-align:center;
}
.eep-hero__media{position:absolute;inset:-8% 0;z-index:-2}
.ee .eep-hero__media img{width:100%;height:100%;object-fit:cover;max-width:none}
.eep-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.28) 100%);
}
.eep-hero__inner{padding-block:140px 96px;display:flex;flex-direction:column;align-items:center}
.eep-hero__inner .eep-pill{margin-bottom:var(--ee-eyebrow-gap)}
.ee .eep-hero__title{color:#fff;max-width:16ch;margin:0;text-wrap:balance}
.eep-hero--index .eep-hero__title{max-width:18ch}
.eep-hero__meta{margin:22px 0 0;display:flex;gap:18px;align-items:center;font-size:15px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.88)}
.eep-hero__meta span + span{padding-left:18px;border-left:1px solid rgba(255,255,255,.45)}
.eep-hero--index{min-height:78vh;min-height:78dvh}

/* ---- 2. project details: hairline columns, like Veranda ---- */
.eep-info{padding-block:56px;background:#fff}
.eep-info__grid{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
  border-block:1px solid var(--ee-rule);
}
.eep-info__item{padding:28px 20px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.eep-info__item + .eep-info__item{border-left:1px solid var(--ee-rule)}
.eep-info__item b{font-size:17px;line-height:1.4;color:var(--ee-ink);font-weight:700}

/* ---- 3. story: full-bleed half photograph, half copy ---- */
.eep-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(560px,92vh,900px);background:#fff}
.eep-split__media{position:relative;margin:0;overflow:hidden;min-height:420px}
.ee .eep-split__media img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;max-width:none}
.eep-split__copy{display:flex;align-items:center;padding:clamp(40px,6vw,104px)}
.eep-split__inner{max-width:560px}
.eep-split__inner .ee-h2{margin-bottom:28px}
.eep-split--right .eep-split__media{order:2}
.eep-split + .eep-split .eep-split__copy{background:var(--ee-alt)}
.eep-split + .eep-split + .eep-split .eep-split__copy{background:#fff}

.eep-text{background:#fff}
.eep-text__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.eep-text__grid .ee-pilltag{display:block}

/* ---- statement ---- */
.eep-statement{text-align:center;background:#fff}
.ee .eep-statement__text{max-width:24ch;margin:0 auto;text-wrap:balance}

/* ---- feature plate: full bleed, slow parallax ---- */
.eep-feature{background:#fff}
.eep-feature__media{position:relative;margin:0;overflow:hidden;height:clamp(420px,82vh,840px)}
.ee .eep-feature__media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;max-width:none}

/* ---- image pairing: portrait beside a lower landscape ---- */
.eep-pair__grid{display:grid;grid-template-columns:5fr 7fr;gap:12px;align-items:end}
.eep-pair__grid figure{margin:0;border-radius:var(--ee-media-r);overflow:hidden}
.eep-pair__a{aspect-ratio:4/5}
.eep-pair__b{aspect-ratio:3/2}
.ee .eep-pair__grid img{width:100%;height:100%;object-fit:cover}

/* ---- what we delivered ---- */
.eep-delivered__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}
.eep-delivered__head{position:sticky;top:120px}
.eep-delivered__head .ee-pilltag{display:block}
.ee .eep-delivered__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ee-rule)}
.eep-delivered__list li{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--ee-rule);font-size:17px;line-height:1.5;color:var(--ee-ink);font-weight:700}
.eep-tick{flex:none;color:#06383E;margin-top:2px}

/* ---- before / after ---- */
.eep-ba__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:992px;margin:0 auto}
.eep-ba__fig{position:relative;margin:0;border-radius:var(--ee-media-r);overflow:hidden;aspect-ratio:4/3}
.ee .eep-ba__fig img{width:100%;height:100%;object-fit:cover}
.eep-ba__fig figcaption{position:absolute;left:14px;top:14px}

/* ---- benefits ---- */
.ee .eep-benefits__grid{margin:48px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.eep-benefit{background:var(--ee-alt);border-radius:var(--ee-media-r);padding:28px 24px}
.ee .eep-benefit h3{font-size:19px;font-weight:700;color:var(--ee-ink);margin:0 0 10px}
.ee .eep-benefit p{font-size:15.5px;line-height:1.6;color:var(--ee-muted);margin:0}

/* ---- gallery: editorial rows ---- */
.eep-g{display:grid;gap:12px}
.eep-g__row{display:grid;gap:12px}
.eep-g__row--pp,.eep-g__row--ll{grid-template-columns:1fr 1fr}
.eep-g__row--lp{grid-template-columns:1.45fr 1fr}
.eep-g__row--pl{grid-template-columns:1fr 1.45fr}
.eep-g__row--solo{grid-template-columns:minmax(0,560px);justify-content:center}
.eep-g__item{display:block;position:relative;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee;cursor:zoom-in}
.ee .eep-g__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.eep-g__row--pp .eep-g__item,.eep-g__row--solo .eep-g__item{aspect-ratio:4/5}
.eep-g__row--ll .eep-g__item{aspect-ratio:3/2}
.eep-g__row--lp .eep-g__item:last-child,.eep-g__row--pl .eep-g__item:first-child{aspect-ratio:4/5}
.eep-g__row--full .eep-g__item{aspect-ratio:2/1}
.eep-g__strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.eep-g__strip .eep-g__item{width:min(100%,360px);aspect-ratio:4/3}
.eep-g__strip .eep-g__item.is-portrait{width:min(100%,270px);aspect-ratio:3/4}
@media (hover:hover) and (pointer:fine){
  .eep-g__item:hover img{transform:scale(1.03)}
}
.eep-g__item:focus-visible{outline:2px solid #06383E;outline-offset:3px}

/* ---- more projects: pinned horizontal rail on desktop ---- */
.eep-more{background:#fff;padding-block:var(--ee-section) 0;overflow:hidden}
.eep-more__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.eep-more__head .ee-pilltag{display:block}
.eep-more__nav{margin-top:0}
.eep-more__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--ee-section)}
.eep-more__viewport::-webkit-scrollbar{display:none}
.eep-more__track{
  display:flex;gap:16px;width:max-content;
  padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)));
}
.eep-card{display:block;width:440px;flex:none;scroll-snap-align:start;color:inherit}
.eep-card__media{margin:0;border-radius:var(--ee-media-r);overflow:hidden;aspect-ratio:4/5;background:#e9ecee}
.ee .eep-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.eep-card__body{padding-top:18px;display:grid;gap:4px}
.ee .eep-card__body h3{font-size:22px;font-weight:700;color:var(--ee-ink);margin:0}
.eep-card__meta{font-size:14.5px;color:var(--ee-muted)}
.eep-card__more{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-weight:700;font-size:14.5px;color:#04243E}
.eep-card__more .ee-btn__badge{width:30px;height:30px;background:#04243E;color:#fff;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eep-card:hover .eep-card__media img{transform:scale(1.04)}
  .eep-card:hover .ee-btn__badge{transform:rotate(45deg)}
}
/* pinned version (JS adds .is-pinned on wide screens with a fine pointer) */
.eep-more.is-pinned .eep-more__viewport{overflow:visible;scroll-snap-type:none;padding-bottom:0}
.eep-more.is-pinned .eep-more__pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}

/* ---- project CTA: inset photograph, navy button ---- */
.eep-cta{background:#fff}
.eep-cta__card{position:relative;border-radius:var(--ee-media-r);overflow:hidden;isolation:isolate;min-height:clamp(380px,62vh,600px);display:flex;align-items:center;justify-content:center;text-align:center;padding:64px 24px}
.ee img.eep-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;max-width:none}
.eep-cta__card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.35))}
.eep-cta__copy{display:flex;flex-direction:column;align-items:center}
.eep-cta__copy .eep-pill{margin-bottom:var(--ee-eyebrow-gap)}
.ee .eep-cta__copy .ee-h2{color:#fff;max-width:18ch;text-wrap:balance}
.ee a.eep-cta__btn.ee-btn{margin-top:24px;background:#04243E;color:#fff;padding:10px 10px 10px 26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ee a.eep-cta__btn.ee-btn:hover{background:#0B3558}
.eep-cta__btn .ee-btn__badge{background:#fff;color:#04243E}

/* ---- index ---- */
.eep-index__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 16px}
.eep-index .eep-card{width:auto}
.eep-index .eep-card__media{aspect-ratio:4/3}

/* ---- image reveal for contained images (gallery, pairs) ---- */
.js .eep-imgrev.ee-imgrev{clip-path:inset(0 0 14% 0 round var(--ee-media-r))}

/* ---- tablet ---- */
@media (max-width:1100px){
  .eep-info__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eep-info__item + .eep-info__item{border-left:0}
  .eep-info__item:nth-child(even){border-left:1px solid var(--ee-rule)}
  .eep-info__item:nth-child(n+3){border-top:1px solid var(--ee-rule)}
  .ee .eep-benefits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eep-card{width:380px}
}
@media (max-width:900px){
  .eep-split{grid-template-columns:1fr;min-height:0}
  .eep-split--right .eep-split__media{order:0}
  .eep-split__media{aspect-ratio:4/3;min-height:0}
  .eep-split__copy{padding:48px var(--ee-gutter)}
  .eep-text__grid,.eep-delivered__grid{grid-template-columns:1fr;gap:24px}
  .eep-delivered__head{position:static}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eep-hero__inner{padding-block:120px 72px}
  .eep-hero__meta{font-size:13.5px;gap:12px;flex-wrap:wrap;justify-content:center}
  .eep-hero__meta span + span{padding-left:12px}
  .eep-info{padding-block:32px}
  .eep-info__item{padding:20px 12px}
  .eep-info__item b{font-size:15.5px}
  .eep-split__media{aspect-ratio:4/5}
  .eep-split__copy{padding:40px var(--ee-gutter) 48px}
  .eep-prose p{font-size:16px}
  .eep-feature__media{height:min(70vh,520px)}
  .eep-pair__grid{grid-template-columns:1fr;gap:8px}
  .eep-pair__b{aspect-ratio:4/3}
  .eep-g,.eep-g__row{gap:8px}
  .eep-g__row--pp{grid-template-columns:1fr 1fr}
  .eep-g__row--ll,.eep-g__row--lp,.eep-g__row--pl{grid-template-columns:1fr}
  .eep-g__row--lp .eep-g__item,.eep-g__row--pl .eep-g__item,.eep-g__row--ll .eep-g__item{aspect-ratio:4/3}
  .eep-g__row--full .eep-g__item{aspect-ratio:4/3}
  .eep-ba__grid{grid-template-columns:1fr;gap:8px}
  .ee .eep-benefits__grid{grid-template-columns:1fr;gap:8px}
  .eep-more__head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
  .eep-more__nav{display:none}
  .eep-card{width:78vw}
  .eep-index__grid{grid-template-columns:1fr;gap:40px}
  .eep-cta__card{min-height:420px}
}
@media (prefers-reduced-motion:reduce){
  .ee .eep-g__item img,.ee .eep-card__media img{transition:none}
}

/* ---- project gallery lightbox ---- */
.eep-lb[open]{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:64px 72px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s var(--ease-out)}
.eep-lb.is-open{opacity:1}
.eep-lb::backdrop{background:rgba(0,0,0,.92)}
.eep-lb__frame{margin:0;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.eep-lb__img{max-width:min(92vw,1600px);max-height:calc(100dvh - 140px);width:auto;height:auto;border-radius:var(--ee-media-r);opacity:0;transform:scale(.985);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.eep-lb__img.is-in{opacity:1;transform:none}
.eep-lb .ee-lightbox__close{position:fixed;top:18px;right:18px}
.eep-lb__nav{position:fixed;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid #06383E;color:#06383E;display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .16s var(--ease-out)}
.eep-lb__nav:active{transform:scale(.97)}
.eep-lb__prev{left:16px}
.eep-lb__next{right:16px}
.eep-lb__count{position:fixed;bottom:18px;left:0;right:0;margin:0;text-align:center;color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.12em}
@media (max-width:767px){
  .eep-lb[open]{padding:64px 12px 56px}
  .eep-lb__nav{top:auto;bottom:10px;margin-top:0;width:46px;height:46px}
  .eep-lb__prev{left:calc(50% - 110px)}
  .eep-lb__next{right:calc(50% - 110px)}
  .eep-lb__count{bottom:24px}
}
@media (prefers-reduced-motion:reduce){ .eep-lb[open],.eep-lb__img{transition:none} }
/* hero copy sits in the lower third so the subject of the photograph
   (often a horse's head, dead centre) stays clear */
.eep-hero{align-items:flex-end}
.eep-hero__inner{padding-block:140px clamp(64px,11vh,120px)}
.ee .eep-statement__text{max-width:30ch}

/* ============================================================
   v24: projects showcase (.eepx-*)
   Timed-cards hero + a case study that follows the active project.
   ============================================================ */

/* ---- hero ---- */
.eepx-hero{
  --cw:210px;--ch:300px;--cg:18px;
  position:relative;height:100vh;height:100dvh;min-height:620px;overflow:hidden;isolation:isolate;
  color:#fff;background:#0e1214;
}
.eepx-bg,.eepx-bg__img{position:absolute;inset:0;width:100%;height:100%}
.ee .eepx-bg__img{object-fit:cover;max-width:none}
.eepx-expand{position:absolute;z-index:1;overflow:hidden;will-change:left,top,width,height}
.ee .eepx-expand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.eepx-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.46) 36%,rgba(0,0,0,.06) 68%),
    linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%);
  transition:background .6s ease;
}
/* the bright-sky exterior needs a firmer wash for white type */
.eepx-hero[data-active="eureka"] .eepx-shade{
  background:
    linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.2) 72%),
    linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 42%);
}
.eepx-copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);z-index:3}
.eepx-copy > *{max-width:min(620px,48%)}
.eepx-kicker{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.eepx-rule{width:44px;height:1px;background:rgba(255,255,255,.8);flex:none}
.ee .eepx-title{
  font-family:var(--ee-font-display);font-weight:700;color:#fff;margin:0;
  font-size:clamp(46px,6vw,88px);line-height:1.02;letter-spacing:normal;max-width:12.5ch;text-wrap:balance;
}
.ee .eepx-sum{margin:22px 0 0;font-size:18px;line-height:1.55;color:rgba(255,255,255,.84);max-width:44ch}
.eepx-explore{margin-top:30px}
.eepx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.eepx-w__i{display:inline-block;will-change:transform}

/* cards: the queue, bottom right */
.eepx-cards{
  position:absolute;z-index:4;margin:0;padding:0;list-style:none;
  left:calc(100% - var(--ee-gutter) - 3 * var(--cw) - 2 * var(--cg));
  bottom:132px;width:calc(3 * var(--cw) + 2 * var(--cg));height:var(--ch);
}
.eepx-card{
  position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);
  transform:translateX(calc(var(--slot,0) * (var(--cw) + var(--cg))));
  transition:transform .9s var(--ease-in-out),opacity .45s ease;
}
.eepx-card.is-off{opacity:0;pointer-events:none}
.eepx-card.is-instant{transition:none}
.eepx-card__btn{
  all:unset;box-sizing:border-box;position:relative;display:block;width:100%;height:100%;cursor:pointer;
  border-radius:var(--ee-media-r);overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);
}
.ee .eepx-card__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .6s var(--ease-out)}
.eepx-card__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0) 55%)}
.eepx-card__txt{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:grid;gap:3px}
.eepx-card__txt small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.eepx-card__txt b{font-size:15px;line-height:1.25;font-weight:700;color:#fff}
.eepx-card__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .eepx-card:not(.is-off) .eepx-card__btn:hover img{transform:scale(1.05)}
}

/* control bar */
.eepx-bar{position:absolute;left:0;right:0;bottom:40px;z-index:5;display:flex;align-items:center;gap:28px}
.eepx-arrows{margin:0}
.eepx-progress{flex:1;max-width:360px;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.eepx-progress span{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
.eepx-num{margin:0 0 0 auto;font-family:var(--ee-font-display);font-weight:700;font-size:56px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}

/* ---- case study ---- */
.eepx-case[hidden]{display:none}
.eepx-anchor{position:relative;top:-24px}
.eepx-todo{background:rgba(240,180,41,.2);color:inherit;border-radius:4px;padding:0 .3em;font-weight:inherit}
.eepx-pill{
  display:inline-block;font-size:11px;font-weight:700;line-height:1.65;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:6px 16px;
}

.eepx-brief__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.eepx-brief__copy .ee-pilltag{display:block}
.ee .eepx-brief__text{margin:0;font-size:clamp(21px,2vw,28px);line-height:1.45;color:var(--ee-ink);max-width:30ch}
.eepx-brief__media{margin:0;aspect-ratio:4/5;border-radius:var(--ee-media-r);overflow:hidden}
.ee .eepx-brief__media img{width:100%;height:100%;object-fit:cover}

.eepx-stats__grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:32px}
.eepx-stat{display:grid;gap:10px;align-content:start}
.eepx-stat b{font-family:var(--ee-font-display);font-weight:700;font-size:clamp(56px,6vw,84px);line-height:1;color:var(--ee-ink);font-variant-numeric:tabular-nums}
.eepx-stat > span{font-size:15.5px;color:var(--ee-muted);max-width:24ch}

.eepx-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.eepx-block + .eepx-block{margin-top:96px}
.eepx-block--right .eepx-block__media{order:2}
.eepx-block__media{margin:0;aspect-ratio:4/3;border-radius:var(--ee-media-r);overflow:hidden}
.ee .eepx-block__media img{width:100%;height:100%;object-fit:cover}
.eepx-block__copy .ee-pilltag{display:block}
.ee .eepx-block__copy .ee-h2{margin-bottom:22px}
.ee .eepx-block__copy p{font-size:17px;line-height:1.7;color:var(--ee-muted);margin:0;max-width:50ch}

.eepx-ba__frame{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee;touch-action:pan-y}
.eepx-ba__frame figure{position:absolute;inset:0;margin:0}
.ee .eepx-ba__frame img{width:100%;height:100%;object-fit:cover;max-width:none}
.eepx-ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.eepx-ba__tag{position:absolute;top:16px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border-radius:999px;padding:6px 12px}
.eepx-ba__tag--b{left:16px}
.eepx-ba__tag--a{right:16px}
.eepx-ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;z-index:2;pointer-events:none}
.eepx-ba__handle i{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#06383E;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.eepx-ba__handle i svg{width:14px;height:14px}
.eepx-ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.eepx-ba__range:focus-visible + *,.eepx-ba__frame:focus-within{outline:2px solid #06383E;outline-offset:4px}
.eepx-during{max-width:1100px;margin:20px auto 0}
.eepx-during__row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.eepx-during__fig{margin:0;width:200px;aspect-ratio:4/3;border-radius:var(--ee-media-r);overflow:hidden}
.ee .eepx-during__fig img{width:100%;height:100%;object-fit:cover}

.eepx-gallery .ee-galx__head{text-align:center}

.eepx-delivered__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.eepx-delivered__grid .ee-pilltag{display:block}
.ee .eepx-delivered__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.eepx-delivered__list li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45;font-weight:700;color:var(--ee-ink)}

.eepx-products__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.eepx-prod{display:block;color:var(--ee-ink)}
.eepx-prod figure{margin:0;aspect-ratio:4/5;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee}
.ee .eepx-prod img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.eepx-prod > span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;font-weight:700;font-size:16.5px}
.eepx-prod .ee-btn__badge{width:30px;height:30px;background:#04243E;color:#fff;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eepx-prod:hover img{transform:scale(1.04)}
  .eepx-prod:hover .ee-btn__badge{transform:rotate(45deg)}
}

.eepx-quote__card{max-width:760px;margin:0 auto;height:auto}
.eepx-quote__who{margin:24px 0 0;display:grid;gap:2px;color:#fff}
.eepx-quote__who span{color:rgba(255,255,255,.72);font-size:14px}

.eepx-next{background:#fff}
.eepx-next__btn{
  all:unset;box-sizing:border-box;position:relative;display:block;width:100%;cursor:pointer;
  height:clamp(380px,70vh,680px);overflow:hidden;isolation:isolate;color:#fff;
}
.ee .eepx-next__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;z-index:-2;transition:transform 1s var(--ease-out)}
.eepx-next__btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,.18) 60%)}
.eepx-next__copy{position:absolute;left:0;right:0;bottom:clamp(40px,8vh,80px);display:grid;justify-items:start;gap:16px;
  padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)))}
.eepx-next__copy b{font-family:var(--ee-font-display);font-weight:700;font-size:clamp(40px,5.4vw,76px);line-height:1.02}
.eepx-next__meta{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.eepx-next__btn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (hover:hover) and (pointer:fine){ .eepx-next__btn:hover img{transform:scale(1.03)} }

.eepx-cta__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.ee .eepx-cta__inner .ee-h2{max-width:18ch}
.ee a.eepx-cta__btn.ee-btn{margin-top:28px;background:#04243E;color:#fff;padding:10px 10px 10px 26px}
.ee a.eepx-cta__btn.ee-btn:hover{background:#0B3558}
.eepx-cta__btn .ee-btn__badge{background:#fff;color:#04243E}

/* ---- tablet ---- */
@media (max-width:1100px){
  .eepx-hero{--cw:170px;--ch:240px;--cg:14px}
  .eepx-copy > *{max-width:min(560px,56%)}
  .eepx-brief__grid,.eepx-block{gap:40px}
}
@media (max-width:900px){
  .eepx-brief__grid,.eepx-delivered__grid{grid-template-columns:1fr}
  .eepx-brief__media{aspect-ratio:4/3}
  .eepx-block{grid-template-columns:1fr;gap:24px}
  .eepx-block--right .eepx-block__media{order:0}
  .eepx-block + .eepx-block{margin-top:56px}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eepx-hero{--cw:116px;--ch:160px;--cg:10px;min-height:560px}
  .eepx-shade{background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.1) 78%)}
  .eepx-hero[data-active="eureka"] .eepx-shade{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.2) 82%)}
  .eepx-copy{top:auto;bottom:calc(96px + var(--ch) + 22px);transform:none}
  .eepx-copy > *{max-width:100%}
  .eepx-kicker{font-size:11px;margin-bottom:12px}
  .eepx-rule{width:28px}
  .ee .eepx-title{font-size:clamp(32px,9vw,42px);max-width:none}
  .ee .eepx-sum{font-size:15px;margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .eepx-explore{margin-top:18px}
  .eepx-cards{left:auto;right:var(--ee-gutter);bottom:88px;width:calc(2 * var(--cw) + var(--cg))}
  .eepx-card__txt{left:10px;right:10px;bottom:10px}
  .eepx-card__txt small{font-size:9.5px}
  .eepx-card__txt b{font-size:12.5px}
  .eepx-bar{bottom:22px;gap:14px}
  .eepx-progress{max-width:none}
  .eepx-num{font-size:34px;margin-left:0}
  .eepx-stats__grid{grid-template-columns:1fr 1fr;gap:28px 16px}
  .ee .eepx-delivered__list{grid-template-columns:1fr;gap:16px}
  .eepx-ba__frame{aspect-ratio:4/3}
  .eepx-during__fig{width:calc(50% - 4px)}
  .eepx-products__grid{grid-template-columns:1fr 1fr;gap:12px}
  .eepx-next__btn{height:clamp(320px,60vh,480px)}
}
@media (prefers-reduced-motion:reduce){
  .eepx-card,.eepx-shade{transition:none}
}
/* the theme's img{height:auto} outranks a single class; the background must fill */
.ee img.eepx-bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}

/* ============================================================
   v25: master project template (.eepm-*), Full Circle Stables first.
   Veranda's scale and flow in Elite Equine's system. No script type.
   ============================================================ */

/* ---- hero: pinned; the page scrolls up over it ----
   The hero's Elementor container is sticky at the top, and every section
   after it sits above it on a white ground, so the content slides over the
   photograph like a sheet being drawn up. */
.eepm-hero-wrap{position:sticky;top:0;z-index:0;height:100vh;height:100dvh}
.eepm-over{position:relative;z-index:1;background:#fff}
.eepm-hero{position:relative;height:100%;overflow:hidden;color:#fff;display:flex;align-items:flex-end;justify-content:center;text-align:center;isolation:isolate}
.eepm-hero__media{position:absolute;inset:0;z-index:-2}
.ee .eepm-hero__media img{width:100%;height:100%;object-fit:cover;max-width:none;transform:scale(1.06);will-change:transform}
.eepm-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 46%,rgba(0,0,0,.3) 100%)}
.eepm-hero__veil{position:absolute;inset:0;z-index:0;background:#000;opacity:0;pointer-events:none}
.eepm-hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding-block:120px clamp(72px,12vh,128px)}
.eepm-hero__inner .eep-pill{margin-bottom:var(--ee-eyebrow-gap)}
.ee .eepm-hero__title{color:#fff;margin:0;font-size:clamp(48px,7.4vw,112px);line-height:1;max-width:14ch;text-wrap:balance}

/* ---- 50/50 introduction: copy beside a large sticky photograph ---- */
.eepm-intro{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.eepm-intro__copy{padding:clamp(80px,12vh,140px) clamp(32px,6vw,112px) clamp(80px,12vh,140px) max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)))}
.eepm-intro__block{max-width:600px}
.eepm-intro__block + .eepm-intro__block{margin-top:clamp(72px,12vh,128px)}
.eepm-intro__block .ee-pilltag{display:block}
.ee .eepm-intro__block .ee-h2{margin:0 0 28px;font-size:clamp(34px,3.4vw,52px)}
.eepm-prose p{font-size:17.5px;line-height:1.72;color:var(--ee-muted);margin:0 0 16px;max-width:56ch}
.eepm-prose p:last-child{margin-bottom:0}
.ee .eepm-delivered{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.eepm-delivered li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45;font-weight:700;color:var(--ee-ink)}
.eepm-intro__media{position:relative}
.eepm-intro__fig{position:sticky;top:0;height:100vh;height:100dvh;margin:0;overflow:hidden}
.ee .eepm-intro__fig img{width:100%;height:100%;object-fit:cover;max-width:none}

/* ---- gallery: the photography takes the page ---- */
.eepm-gallery{background:#fff}
.eepm-plates{display:grid;gap:12px;padding:12px}
.eepm-plate{margin:0;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee}
.eepm-plate a{display:block;width:100%;height:100%;cursor:zoom-in;transition:transform .9s var(--ease-out)}
.ee .eepm-plate img{width:100%;height:100%;object-fit:cover;max-width:none;will-change:transform}
.eepm-plate--full{height:clamp(520px,94vh,1080px)}
.eepm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eepm-plate--tall{aspect-ratio:4/5;max-height:110vh}
@media (hover:hover) and (pointer:fine){ .eepm-plate:hover a{transform:scale(1.02)} }
.eepm-plate a:focus-visible{outline:3px solid #06383E;outline-offset:-6px}
/* reveal: the plate opens upward as it arrives */
.js .eepm-reveal{clip-path:inset(10% 0 0 0 round var(--ee-media-r))}
.js .eepm-reveal.is-shown{clip-path:inset(0 0 0 0 round var(--ee-media-r));transition:clip-path 1.1s var(--ease-out)}

/* ---- client quote, Veranda's two-column treatment ---- */
.eepm-quote{padding-block:clamp(110px,18vh,200px)}
.eepm-quote__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:end}
.eepm-quote__who{display:grid;gap:6px;align-self:end}
.eepm-quote__who b{font-size:19px;color:var(--ee-ink)}
.eepm-quote__who span{font-size:15px;color:var(--ee-muted)}
.eepm-quote__grid .ee-pilltag{display:block}
.ee .eepm-quote__text{margin:0;padding:0;border:0;font-family:var(--ee-font-display);font-weight:700;font-size:clamp(30px,3.6vw,54px);line-height:1.14;color:var(--ee-ink);max-width:22ch}
.eepm-quote__note{margin:18px 0 0;font-size:13px;color:var(--ee-muted)}

/* ---- more projects ----
   Desktop with a real pointer: the section is as tall as its sideways
   travel, its inner frame is CSS-sticky, and scroll progress drives the
   track. No GSAP pin, so there is no pin spacer to go stale and nothing
   jumps. Elsewhere: a native swipe rail with snap points. */
.eepm-more{position:relative;background:#fff;padding-top:clamp(80px,12vh,140px)}
.eepm-more__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.eepm-more__head .ee-pilltag{display:block}
.eepm-more__nav{margin:0}
.eepm-more__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:clamp(80px,12vh,140px);overscroll-behavior-x:contain}
.eepm-more__viewport::-webkit-scrollbar{display:none}
.eepm-more__track{display:flex;gap:16px;width:max-content;padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)))}
.eepm-card{display:block;flex:none;width:clamp(320px,30vw,500px);scroll-snap-align:start;color:inherit}
.eepm-card__media{margin:0;aspect-ratio:4/5;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee}
.ee .eepm-card__media img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .7s var(--ease-out)}
.eepm-card__body{padding-top:18px;display:grid;gap:4px}
.ee .eepm-card__body h3{margin:0;font-size:22px;font-weight:700;color:var(--ee-ink)}
.eepm-card__meta{font-size:14.5px;color:var(--ee-muted)}
.eepm-card__more{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-weight:700;font-size:14.5px;color:#04243E}
.eepm-card__more .ee-btn__badge{width:30px;height:30px;background:#04243E;color:#fff;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eepm-card:hover .eepm-card__media img{transform:scale(1.04)}
  .eepm-card:hover .ee-btn__badge{transform:rotate(45deg)}
}
.eepm-card:focus-visible{outline:2px solid #06383E;outline-offset:6px;border-radius:var(--ee-media-r)}
.eepm-more.is-sticky{padding-top:0}
.eepm-more.is-sticky .eepm-more__sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.eepm-more.is-sticky .eepm-more__viewport{overflow:visible;scroll-snap-type:none;padding-bottom:0}
.eepm-more.is-sticky .eepm-more__track{will-change:transform}

/* ---- floating CTA: Contact our team ---- */
.eepm-cta{
  position:fixed;right:24px;bottom:24px;z-index:85;
  display:inline-flex;align-items:center;gap:16px;padding:9px 9px 9px 24px;border-radius:999px;
  background:#04243E;color:#fff;font-weight:700;font-size:15px;line-height:1;text-decoration:none;
  box-shadow:0 18px 40px -18px rgba(4,36,62,.6),inset 0 0 0 1px rgba(255,255,255,.16);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),background-color .2s ease;
}
.ee a.eepm-cta{color:#fff}
.eepm-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.eepm-cta .ee-btn__badge{width:38px;height:38px;background:#fff;color:#04243E;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eepm-cta:hover{background:#0B3558}
  .eepm-cta:hover .ee-btn__badge{transform:rotate(45deg)}
}
.eepm-cta:active{transform:scale(.97)}
.eepm-cta:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px #04243E}

/* ---- tablet ---- */
@media (max-width:1100px){
  .ee .eepm-delivered{grid-template-columns:1fr}
}
@media (max-width:900px){
  .eepm-intro{grid-template-columns:1fr}
  .eepm-intro__media{order:-1}
  .eepm-intro__fig{position:relative;height:auto;aspect-ratio:4/5;max-height:88vh}
  .eepm-intro__copy{padding:64px var(--ee-gutter) 72px}
  .eepm-quote__grid{grid-template-columns:1fr;gap:28px}
  .eepm-quote__who{order:2}
}
/* ---- phone ---- */
@media (max-width:767px){
  .ee .eepm-hero__title{font-size:clamp(40px,11vw,54px)}
  .eepm-hero__inner{padding-bottom:88px}
  .eepm-intro__fig{aspect-ratio:4/5;max-height:none}
  .eepm-intro__block + .eepm-intro__block{margin-top:64px}
  .ee .eepm-intro__block .ee-h2{font-size:30px;margin-bottom:18px}
  .eepm-prose p{font-size:16px}
  .eepm-plates{gap:8px;padding:8px}
  .eepm-plate--full{height:auto;aspect-ratio:4/5}
  .eepm-pair{grid-template-columns:1fr;gap:8px}
  .eepm-plate--tall{max-height:none}
  .eepm-quote{padding-block:88px}
  .eepm-more__head{flex-direction:column;align-items:flex-start;margin-bottom:24px}
  .eepm-more__nav{display:none}
  .eepm-card{width:80vw}
  .eepm-cta{right:12px;bottom:12px;gap:10px;padding:6px 6px 6px 16px;font-size:13.5px}
  .eepm-cta .ee-btn__badge{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  .js .eepm-reveal,.js .eepm-reveal.is-shown{clip-path:none;transition:none}
  .eepm-cta{transition:none}
  .ee .eepm-hero__media img{transform:none}
}
/* the hero sizes itself: Elementor's widget wrapper has no height of its own */
.eepm-hero{height:100vh;height:100dvh;min-height:560px}
/* tablet portrait: landscape plates keep their own 4:3 shape instead of a
   tall viewport crop that would cut the facility in half */
@media (min-width:768px) and (max-width:1100px) and (orientation:portrait){
  .eepm-plate--full{height:auto;aspect-ratio:4/3}
}

/* ============================================================
   v26: master project template, corrected sequence.
   hero -> four callouts -> four alternating 50/50 sections ->
   2 x 2 gallery -> quote -> 2 x 2 gallery -> more projects.
   ============================================================ */

/* ---- project callouts: one clean row under the hero ---- */
.eepm-facts{background:#fff;padding:clamp(36px,6vh,64px) clamp(12px,3vw,48px);border-bottom:1px solid var(--ee-rule)}
.eepm-facts__grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.eepm-facts__item{display:flex;flex-direction:column;gap:10px;padding:6px clamp(20px,2.6vw,44px)}
.eepm-facts__item:first-child{padding-left:0}
.eepm-facts__item + .eepm-facts__item{border-left:1px solid var(--ee-rule)}
.eepm-facts__label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ee-muted)}
.eepm-facts__item b{font-size:clamp(19px,1.6vw,25px);line-height:1.25;font-weight:700;color:var(--ee-ink)}

/* ---- 50/50 editorial sections ---- */
.eepm-split{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(640px,100vh,1100px);background:#fff}
.eepm-split__fig{position:relative;margin:12px;border-radius:var(--ee-media-r);overflow:hidden;background:#e9ecee}
.ee .eepm-split__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;will-change:transform}
.eepm-split__copy{display:flex;align-items:center;padding:clamp(72px,12vh,140px) clamp(40px,6vw,120px)}
.eepm-split--image-first .eepm-split__copy{padding-left:clamp(40px,5vw,96px)}
.eepm-split__inner{max-width:580px;width:100%}
.eepm-split__inner .ee-pilltag{display:block}
.ee .eepm-split__inner .ee-h2{margin:0 0 28px;font-size:clamp(34px,3.4vw,54px)}
.eepm-split .eepm-delivered{margin-top:4px}

/* ---- galleries: two large images per row ---- */
.eepm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 12px 12px}
.eepm-grid .eepm-plate{aspect-ratio:1/1;max-height:94vh;width:100%}
.eepm-quote + .eepm-gallery .eepm-grid,
.e-con:has(.eepm-quote) + .e-con .eepm-grid{padding-top:0}

/* ---- more projects: native rail, larger cards, drag on desktop ---- */
.eepm-more__viewport{scroll-padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)))}
.eepm-card{width:clamp(320px,34vw,580px)}
.eepm-more__nav button:disabled{opacity:.35;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .eepm-more__viewport{cursor:grab}
  .eepm-more.is-dragging .eepm-more__viewport{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .eepm-more.is-dragging .eepm-card{pointer-events:none}
}

/* ---- laptop / small desktop ---- */
@media (max-width:1100px){
  .eepm-split__copy{padding-inline:clamp(32px,4vw,56px)}
  .ee .eepm-split .eepm-delivered{grid-template-columns:1fr}
}
/* ---- tablet: sections stack, image always first ---- */
@media (max-width:900px){
  .eepm-split{grid-template-columns:1fr;min-height:0}
  .eepm-split__fig{order:-1;aspect-ratio:4/3;margin:12px 12px 0}
  .eepm-split__copy,.eepm-split--image-first .eepm-split__copy{padding:56px var(--ee-gutter) 72px}
  .eepm-split__inner{max-width:640px}
  .ee .eepm-split .eepm-delivered{grid-template-columns:1fr 1fr}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eepm-facts{padding:8px var(--ee-gutter)}
  .eepm-facts__grid{grid-template-columns:1fr 1fr}
  .eepm-facts__item,.eepm-facts__item:first-child{padding:22px 14px 22px 0;gap:6px}
  .eepm-facts__item + .eepm-facts__item{border-left:0}
  .eepm-facts__item:nth-child(even){border-left:1px solid var(--ee-rule);padding-left:16px}
  .eepm-facts__item:nth-child(n+3){border-top:1px solid var(--ee-rule)}
  .eepm-facts__label{font-size:11.5px}
  .eepm-facts__item b{font-size:17px}
  .eepm-split__fig{aspect-ratio:4/5;margin:8px 8px 0}
  .eepm-split__copy,.eepm-split--image-first .eepm-split__copy{padding:44px var(--ee-gutter) 60px}
  .ee .eepm-split__inner .ee-h2{font-size:30px;margin-bottom:18px}
  .ee .eepm-split .eepm-delivered{grid-template-columns:1fr}
  .eepm-grid{grid-template-columns:1fr;gap:8px;padding:0 8px 8px}
  .eepm-grid .eepm-plate{aspect-ratio:1/1;max-height:none}
  .eepm-card{width:82vw}
}
/* figure margins: beat the theme's figure reset */
.ee .elementor .elementor-widget figure.eepm-split__fig.eepm-split__fig{margin:12px}
@media (max-width:900px){ .ee .elementor .elementor-widget figure.eepm-split__fig.eepm-split__fig{margin:12px 12px 0} }
@media (max-width:767px){ .ee .elementor .elementor-widget figure.eepm-split__fig.eepm-split__fig{margin:8px 8px 0} }

/* ============================================================
   v27: project page refinements (Full Circle Stables).
   Sharp image edges, living hero, centred callouts, gallery label.
   ============================================================ */

/* sharp edges for every image on project pages (hero, sections,
   galleries, more-projects cards) */
.e-con.eepm-hero-wrap,.e-con.eepm-over{--ee-media-r:0px}

/* hero: the photograph drifts slowly closer on arrival, then keeps
   closing in as the page rises over it (scroll part lives in ee-el.js) */
.ee .eepm-hero__media img{transform:none}
.eepm-hero__media{transform-origin:50% 55%;will-change:transform}
@keyframes eepmHeroIn{from{transform:scale(1)}to{transform:scale(1.08)}}
.js .eepm-hero__media{animation:eepmHeroIn 9s cubic-bezier(.23,1,.32,1) .1s both}
@media (prefers-reduced-motion:reduce){ .js .eepm-hero__media{animation:none} }

/* callouts: centred label and value, dividers kept */
.eepm-facts__item,.eepm-facts__item:first-child{align-items:center;text-align:center;padding-inline:clamp(16px,2.4vw,40px)}
@media (max-width:767px){
  .eepm-facts__item,.eepm-facts__item:first-child,.eepm-facts__item:nth-child(even){padding:22px 10px}
}

/* "Project Gallery": a boxed label on a hairline that runs the width of
   the gallery, sitting tight to the images it introduces */
.eepm-gallery--first{padding-top:clamp(72px,11vh,128px)}
.eepm-gallery__head{display:flex;align-items:center;gap:20px;padding:0 12px 12px}
.eepm-gallery__label{
  flex:none;display:inline-block;background:#04243E;color:#fff;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 20px;
}
.eepm-gallery__rule{flex:1;height:1px;background:var(--ee-rule)}
.eepm-gallery__count{flex:none;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ee-muted)}
@media (max-width:767px){
  .eepm-gallery--first{padding-top:56px}
  .eepm-gallery__head{gap:12px;padding:0 8px 8px}
  .eepm-gallery__label{font-size:10.5px;padding:11px 14px}
  .eepm-gallery__count{font-size:10.5px;letter-spacing:.14em}
}
.ee .eep-lb__img,.ee .eep-lb__frame{border-radius:0}

/* ============================================================
   v28: connected imagery (Veranda), editorial gallery heading,
   looping More Projects rail, tighter mobile rhythm.
   ============================================================ */

/* callouts: no closing rule; the first section starts straight after */
.eepm-facts{border-bottom:0;padding-bottom:clamp(28px,4vh,44px)}

/* 50/50 sections: photographs fill their half edge to edge, so the
   image of one section meets the image of the next at the corner */
.ee .elementor .elementor-widget figure.eepm-split__fig.eepm-split__fig{margin:0}

/* gallery: heading as a real headline on a hairline; plates nearly touch */
.eepm-gallery--first{padding-top:clamp(56px,8vh,96px)}
.eepm-gallery__head{gap:28px;padding:0 clamp(20px,4vw,64px) clamp(24px,3.5vh,36px)}
.ee .eepm-gallery__title{margin:0;flex:none;font-size:clamp(34px,3.4vw,54px);line-height:1.05}
.eepm-gallery__rule{align-self:center;margin-top:.3em}
.eepm-grid{gap:4px;padding:0}
.eepm-quote + .eepm-gallery .eepm-grid{padding-top:0}

/* more projects: continuous rail. The track is moved by transform from
   ee-el.js; touch keeps vertical page scroll (pan-y), horizontal drags
   steer the rail. */
.eepm-more__viewport{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;padding-bottom:clamp(72px,10vh,120px);cursor:grab}
.eepm-more__track{padding-inline:0;will-change:transform;user-select:none;-webkit-user-select:none}
.eepm-more.is-dragging .eepm-more__viewport{cursor:grabbing}
.eepm-more.is-dragging .eepm-card{pointer-events:none}
.eepm-card{scroll-snap-align:none}
.eepm-card img{-webkit-user-drag:none}

/* ---- tablet ---- */
@media (max-width:900px){
  .ee .elementor .elementor-widget figure.eepm-split__fig.eepm-split__fig{margin:0}
  .eepm-split__copy,.eepm-split--image-first .eepm-split__copy{padding:48px var(--ee-gutter) 56px}
}
/* ---- phone ---- */
@media (max-width:767px){
  /* hero: a landscape-leaning crop instead of a full screen, title kept */
  .e-con.eepm-hero-wrap,.eepm-hero-wrap{height:62vh;height:62svh;min-height:420px;max-height:560px}
  .eepm-hero{height:62vh;height:62svh;min-height:420px;max-height:560px}
  .ee .eepm-hero__media img{object-position:var(--focal-m,50% 50%) !important}
  .eepm-hero__inner{padding:96px var(--ee-gutter) 40px}
  .ee .eepm-hero__title{font-size:clamp(38px,10.5vw,48px)}

  .eepm-facts{padding:4px var(--ee-gutter) 8px}
  .eepm-split__fig{aspect-ratio:4/5}
  .eepm-split__copy,.eepm-split--image-first .eepm-split__copy{padding:32px var(--ee-gutter) 40px}
  .ee .eepm-split__inner .ee-h2{font-size:28px;margin-bottom:14px}
  .eepm-split__inner .ee-pilltag{margin-bottom:10px}

  .eepm-gallery--first{padding-top:24px}
  .eepm-gallery__head{gap:16px;padding:0 var(--ee-gutter) 16px}
  .ee .eepm-gallery__title{font-size:28px}
  .eepm-grid{gap:4px;padding:0}
  .eepm-grid .eepm-plate{aspect-ratio:4/5}

  .eepm-quote{padding-block:56px}
  .eepm-more{padding-top:56px}
  .eepm-more__viewport{padding-bottom:56px}
  .eepm-card{width:78vw}
}

/* ============================================================
   v29: template variants for the remaining projects.
   ============================================================ */
/* text section: used when a project has no photograph good enough to
   carry a 50/50 half. Headline | copy, on a hairline. */
.eepm-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,120px);
  margin:0 clamp(20px,4vw,64px);padding:clamp(64px,10vh,120px) 0;border-top:1px solid var(--ee-rule);background:#fff}
.eepm-text__head .ee-pilltag{display:block}
.ee .eepm-text__head .ee-h2{margin:0;font-size:clamp(34px,3.4vw,54px);max-width:16ch}
.eepm-text__body{max-width:620px}
.ee .eepm-text .eepm-delivered{grid-template-columns:1fr}
/* benefit points (title + line) */
.eepm-points{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px;margin-top:28px}
.eepm-point b{display:block;font-size:17px;color:var(--ee-ink);margin-bottom:6px}
.eepm-point p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ee-muted)}
/* odd gallery count: the last photograph runs the full width */
.eepm-grid .eepm-plate--wide{grid-column:1 / -1;aspect-ratio:2/1;max-height:92vh}
@media (max-width:900px){
  .eepm-text{grid-template-columns:1fr;gap:20px}
}
@media (max-width:767px){
  .eepm-text{margin:0 var(--ee-gutter);padding:40px 0 44px}
  .ee .eepm-text__head .ee-h2{font-size:28px}
  .eepm-points{grid-template-columns:1fr;gap:18px;margin-top:20px}
  .eepm-grid .eepm-plate--wide{aspect-ratio:4/3}
}

/* homepage: the "Built for horse comfort" section no longer ends in a button */
.ee-diff__body p:last-child{margin-bottom:0}

/* ============================================================
   v30: /projects/ page. Homepage sections under the showcase hero;
   in "Built for horse comfort" the moving inset photo is replaced by the
   hero's 5-star Google review card, fixed in the photo's bottom corner.
   ============================================================ */
.ee .ee-diffx__media.ee-diffx__media--proof{padding-block:0}
.ee .ee-diffx__media--proof .ee-proof{position:absolute;right:20px;bottom:20px;z-index:2;margin:0;
  background:rgba(12,20,26,.34)}
@media (max-width:767px){
  .ee .ee-diffx__media--proof .ee-proof{left:12px;right:12px;bottom:12px;width:auto}
}

/* ============================================================
   v31: product page template (.eeprod-*), Stable Fronts & Panels first.
   Large vertical gallery left, sticky information column right.
   ============================================================ */

/* nav sits on a white page here, so it is solid navy from the start */
.e-con.eeprod-navwrap .ee-nav,.e-con.eeprod-navwrap .ee-nav.is-frost{background:#04243E;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- 1. top: gallery | sticky info ---- */
.eeprod-top{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(360px,1fr);gap:clamp(32px,4vw,72px);
  max-width:1680px;margin:0 auto;align-items:start;
  padding:clamp(104px,12vh,128px) clamp(16px,3vw,48px) clamp(72px,10vh,120px);background:#fff;
}
.eeprod-gallery{min-width:0}
.eeprod-gallery__track{display:grid;gap:10px}
.eeprod-shot{margin:0;border-radius:var(--ee-media-r);overflow:hidden;background:#eef0f1;aspect-ratio:2000/2483}
.eeprod-shot a{display:block;width:100%;height:100%;cursor:zoom-in}
.ee .eeprod-shot img{width:100%;height:100%;object-fit:cover;max-width:none;display:block;transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .eeprod-shot:hover img{transform:scale(1.015)} }
.eeprod-gallery__ui{display:none}

/* the column holds while the photographs scroll; when it is taller than the
   screen, ee-el.js lowers --stick so it scrolls to its end, then holds */
.eeprod-info{align-self:stretch}
.eeprod-info__in{position:sticky;top:var(--stick,104px)}
.eeprod-crumb{display:flex;gap:8px;font-size:13px;color:var(--ee-muted);margin-bottom:18px}
.eeprod-crumb a{color:var(--ee-muted);text-decoration:underline;text-underline-offset:3px}
.ee .eeprod-title{margin:0;font-family:var(--ee-font-display);font-weight:700;font-size:clamp(34px,2.9vw,46px);line-height:1.08;color:var(--ee-ink);letter-spacing:-.01em;text-wrap:balance}
.eeprod-oneliner{margin:12px 0 26px;font-size:17px;line-height:1.5;color:var(--ee-muted)}
.ee a.eeprod-btn--block{display:flex;width:100%;justify-content:space-between}
.eeprod-services{list-style:none;margin:22px 0 8px;padding:18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--ee-rule);border-bottom:1px solid var(--ee-rule)}
.eeprod-services li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:13px;font-weight:700;line-height:1.3;color:var(--ee-ink)}
.eeprod-services svg{color:#06383E}

/* accordions: same grammar as the site FAQ (+ closed, minus open) */
.eeprod-acc__item{border-bottom:1px solid var(--ee-rule)}
.ee .eeprod-acc__q{margin:0;font-size:inherit}
.eeprod-acc__q button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;font-weight:700;font-size:16px;color:var(--ee-ink)}
.eeprod-acc__q button:focus-visible{outline:2px solid #06383E;outline-offset:2px}
.eeprod-acc__icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#F6F6F6;color:var(--ee-ink);flex:none;transition:background .2s var(--ease-out)}
.eeprod-acc__v{transform-origin:center;transition:transform .3s var(--ease-out)}
.eeprod-acc__item.is-open .eeprod-acc__v{transform:scaleY(0)}
@media (hover:hover){ .eeprod-acc__q button:hover .eeprod-acc__icon{background:#E9ECEE} }
.eeprod-acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
.eeprod-acc__item.is-open .eeprod-acc__a{grid-template-rows:1fr}
.eeprod-acc__inner{overflow:hidden;min-height:0}
.eeprod-acc__inner > :last-child{margin-bottom:20px}
.eeprod-acc__inner p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--ee-muted)}
.ee .eeprod-acc__inner h4{margin:6px 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ee-ink)}
.ee .eeprod-spec{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.eeprod-spec li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.55;color:var(--ee-muted)}
.eeprod-spec li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#06383E}
.eeprod-spec b{color:var(--ee-ink)}
/* unconfirmed values keep their brackets and read as "to be confirmed" */
.eeprod-tbc{background:#FFF4D6;color:#5C4500;border-radius:3px;padding:0 3px}

/* customers also bought: compact list inside the column */
.eeprod-also{margin-top:30px}
.ee .eeprod-also__title{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ee-muted)}
.ee .eeprod-also__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.eeprod-also__item{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center}
.eeprod-also__img{margin:0;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#F4F5F6;display:grid;place-items:center}
.ee .eeprod-also__img img{width:100%;height:100%;object-fit:contain;padding:6px;max-width:none}
.ee .eeprod-also__img--cover img{object-fit:cover;padding:0}
.eeprod-also__txt{display:grid;gap:2px;min-width:0}
.eeprod-also__txt b{font-size:14.5px;color:var(--ee-ink)}
.eeprod-also__txt span{font-size:13px;line-height:1.45;color:var(--ee-muted)}
.eeprod-also__txt em{font-style:normal;font-size:13.5px;font-weight:700;color:#06383E;margin-top:2px}

/* image reveal: opens upward once, gently */
.js .eeprod-reveal{clip-path:inset(8% 0 0 0 round var(--ee-media-r));opacity:.001}
.js .eeprod-reveal.is-shown{clip-path:inset(0 0 0 0 round var(--ee-media-r));opacity:1;transition:clip-path 1s var(--ease-out),opacity .5s var(--ease-out)}

/* ---- 2. intro + film ---- */
.eeprod-intro{background:#F6F6F6;text-align:center}
.eeprod-intro__copy{max-width:760px;margin:0 auto clamp(40px,6vh,64px)}
.ee .eeprod-intro__copy .ee-h2{margin:0 0 22px;text-wrap:balance}
.eeprod-intro__copy p{margin:0 auto 14px;max-width:64ch;font-size:17px;line-height:1.7;color:var(--ee-muted)}
.eeprod-film__stage{--player-w:min(1240px,100%);text-align:left}

/* ---- 3. benefits ---- */
.eeprod-benefits{background:#fff}
.ee .eeprod-benefits__grid{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.eeprod-benefit{text-align:center;padding:8px 12px}
.eeprod-benefit svg{color:#06383E;margin-bottom:16px}
.ee .eeprod-benefit h3{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ee-ink)}
.eeprod-benefit p{margin:0 auto;max-width:34ch;font-size:15.5px;line-height:1.6;color:var(--ee-muted)}
.eeprod-center{text-align:center}

/* ---- 4. specifically designed for horses ---- */
.eeprod-rows-head{background:#fff;text-align:center;padding:clamp(56px,8vh,96px) 0 clamp(28px,4vh,44px);border-top:1px solid var(--ee-rule)}
.ee .eeprod-rows-head .ee-h2{margin:0}
.eeprod-row{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(560px,92vh,1000px);background:#fff}
.eeprod-row__fig{position:relative;margin:0;overflow:hidden;background:#eef0f1;--ee-media-r:0px}
.ee .eeprod-row__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.eeprod-row__copy{display:flex;align-items:center;padding:clamp(56px,10vh,120px) clamp(32px,6vw,112px)}
.eeprod-row__inner{max-width:560px}
.eeprod-row__mini{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#06383E}
.eeprod-row__rule{width:28px;height:1px;background:currentColor}
.ee .eeprod-row .ee-h2{margin:0 0 22px;font-size:clamp(32px,3.2vw,50px)}
.eeprod-row__copy p:not(.eeprod-row__mini){margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--ee-muted)}

/* ---- 5. reassurance ---- */
.eeprod-reassure{background:#F6F6F6;padding:clamp(40px,6vh,64px) 0}
.ee .eeprod-reassure__list{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr)}
.eeprod-reassure__list li{display:flex;align-items:center;justify-content:center;gap:14px;font-weight:700;font-size:16px;color:var(--ee-ink);padding:6px 16px}
.eeprod-reassure__list li + li{border-left:1px solid var(--ee-rule)}
.eeprod-reassure__list svg{color:#06383E;flex:none}

/* ---- final CTA ---- */
.eeprod-final{background:#fff;padding:clamp(56px,9vh,104px) 0}
.eeprod-final__panel{background:#04243E;border-radius:var(--ee-media-r);text-align:center;padding:clamp(56px,9vh,104px) clamp(24px,6vw,96px)}
.ee .eeprod-final__panel .ee-h2{color:#fff;margin:0 0 16px}
.eeprod-final__panel p{margin:0 auto 32px;max-width:58ch;font-size:17px;line-height:1.65;color:rgba(255,255,255,.78)}
.ee a.eeprod-btn--light{background:#fff;color:#04243E}
.ee a.eeprod-btn--light .ee-btn__badge{background:#04243E;color:#fff}
@media (hover:hover){ .ee a.eeprod-btn--light:hover{background:#EAF0F4} }

/* ---- tablet ---- */
@media (max-width:1100px){
  .eeprod-top{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr)}
  .eeprod-row__copy{padding-inline:clamp(28px,4vw,56px)}
}
@media (max-width:900px){
  /* one column: the gallery becomes a swipeable carousel, info follows */
  .eeprod-top{grid-template-columns:minmax(0,1fr);gap:28px;padding:88px 0 56px}
  .eeprod-info,.eeprod-gallery{min-width:0}
  .eeprod-gallery__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .eeprod-gallery__track::-webkit-scrollbar{display:none}
  .eeprod-shot{flex:0 0 100%;border-radius:0;scroll-snap-align:center}
  .js .eeprod-shot.eeprod-reveal{clip-path:none;opacity:1}
  .eeprod-gallery__ui{display:flex;justify-content:space-between;align-items:center;padding:12px var(--ee-gutter) 0}
  .eeprod-gallery__count{font-size:13px;color:var(--ee-muted);font-variant-numeric:tabular-nums}
  .eeprod-gallery__count b{color:var(--ee-ink)}
  .eeprod-gallery__dots{display:flex;gap:6px}
  .eeprod-gallery__dots span{width:6px;height:6px;border-radius:50%;background:#C9CFD3;transition:transform .25s var(--ease-out),background .25s}
  .eeprod-gallery__dots span.is-on{background:#04243E;transform:scale(1.35)}
  .eeprod-info{padding:0 var(--ee-gutter)}
  .eeprod-info__in{position:static}
  .eeprod-row{grid-template-columns:1fr;min-height:0}
  .eeprod-row__fig{order:-1;aspect-ratio:4/3}
  .eeprod-row__copy{padding:40px var(--ee-gutter) 56px}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eeprod-shot{aspect-ratio:4/5}
  .ee .eeprod-title{font-size:32px}
  .eeprod-oneliner{font-size:16px;margin-bottom:20px}
  .eeprod-services{gap:6px;padding:14px 0}
  .eeprod-services li{font-size:12px}
  .eeprod-services svg{width:22px;height:22px}
  /* customers also bought: a compact sideways swipe row */
  .ee .eeprod-also__list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--ee-gutter) * -1);padding:0 var(--ee-gutter)}
  .eeprod-also__list::-webkit-scrollbar{display:none}
  .eeprod-also__item{flex:0 0 74%;scroll-snap-align:start;grid-template-columns:64px 1fr;border:1px solid var(--ee-rule);border-radius:10px;padding:10px}
  .eeprod-also__img{width:64px;height:64px}
  .ee .eeprod-benefits__grid{grid-template-columns:1fr;gap:28px;margin-bottom:32px}
  .eeprod-row__fig{aspect-ratio:4/5}
  .ee .eeprod-row .ee-h2{font-size:28px}
  .eeprod-row__copy p:not(.eeprod-row__mini){font-size:16px}
  .ee .eeprod-reassure__list{grid-template-columns:1fr;gap:4px}
  .eeprod-reassure__list li{justify-content:flex-start;padding:10px 0}
  .eeprod-reassure__list li + li{border-left:0;border-top:1px solid var(--ee-rule)}
  .eeprod-final{padding:40px 0}
  .eeprod-final__panel{padding:48px 22px}
}
@media (prefers-reduced-motion:reduce){
  .js .eeprod-reveal,.js .eeprod-reveal.is-shown{clip-path:none;opacity:1;transition:none}
  .eeprod-acc__a,.eeprod-acc__v{transition:none}
}
/* product CTA: the site's Royal Navy button */
.ee a.ee-btn.eeprod-btn{background:#04243E;color:#fff;border-color:#04243E}
.ee a.ee-btn.eeprod-btn .ee-btn__badge{background:#fff;color:#04243E}
@media (hover:hover){ .ee a.ee-btn.eeprod-btn:hover{background:#0B3558} }
.ee a.ee-btn.eeprod-btn:active{transform:scale(.98)}
.ee a.ee-btn.eeprod-btn--light{background:#fff;color:#04243E;border-color:#fff}
.ee a.ee-btn.eeprod-btn--light .ee-btn__badge{background:#04243E;color:#fff}
@media (hover:hover){ .ee a.ee-btn.eeprod-btn--light:hover{background:#EAF0F4} }
/* product: refinements after review */
.eeprod-benefit svg{width:44px;height:44px}
.eeprod-also__img--dark{background:#0b0b0b}
.ee .eeprod-also__img--dark img{object-fit:contain;padding:4px}
@media (max-width:767px){ .ee .eeprod-also__list{scroll-padding-inline:var(--ee-gutter)} }

/* v31b: gallery as RB Sellars: two photographs per row, square edges,
   a hairline between them, and a wider share of the page */
@media (min-width:901px){
  .eeprod-top{grid-template-columns:minmax(0,2.15fr) minmax(400px,1fr);gap:clamp(32px,3.5vw,64px)}
  .eeprod-gallery{--ee-media-r:0px}
  .eeprod-gallery__track{grid-template-columns:1fr 1fr;gap:3px}
  .eeprod-shot{border-radius:0}
}
@media (min-width:901px) and (max-width:1100px){
  .eeprod-top{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr)}
}

/* ============================================================
   v32: product page refinements.
   ============================================================ */
/* CTA at its natural width; callouts sit under it without a top rule */
.ee a.ee-btn.eeprod-btn{display:inline-flex;width:auto}
.eeprod-services{border-top:0;margin-top:18px;padding-top:4px}

/* customers also bought: every render on clean white, same frame */
.eeprod-also__img,.eeprod-also__img--cover,.eeprod-also__img--dark{background:#fff;border:1px solid var(--ee-rule)}
.ee .eeprod-also__img img,.ee .eeprod-also__img--cover img,.ee .eeprod-also__img--dark img{object-fit:contain;padding:8px;background:#fff}

/* intro copy: wider measure, fewer lines */
.eeprod-intro__copy{max-width:1080px}
.eeprod-intro__copy p{max-width:none}

/* specifically designed for horses: contained, balanced 50/50 rows with a
   3:2 photograph, like the homepage "Built for horse comfort" section */
.eeprod-feat{background:#fff;padding:clamp(36px,5vh,56px) 0}
.eeprod-feat__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:center}
.eeprod-feat__fig{margin:0;aspect-ratio:3/2;border-radius:var(--ee-media-r);overflow:hidden;background:#eef0f1}
.ee .eeprod-feat__fig img{width:100%;height:100%;object-fit:cover;max-width:none;display:block}
.eeprod-feat__copy{max-width:560px}
.eeprod-feat--text-first .eeprod-feat__copy{justify-self:end}
.ee .eeprod-feat .ee-h2{margin:0 0 18px;font-size:clamp(30px,2.8vw,44px)}
.eeprod-feat__copy p:not(.eeprod-row__mini){margin:0 0 12px;font-size:16.5px;line-height:1.7;color:var(--ee-muted)}
.eeprod-feat__copy p:last-child{margin-bottom:0}
.eeprod-rows-head{padding-bottom:clamp(12px,2vh,20px)}
@media (max-width:900px){
  .eeprod-feat__grid{grid-template-columns:1fr;gap:22px}
  .eeprod-feat__fig{order:-1}
  .eeprod-feat__copy,.eeprod-feat--text-first .eeprod-feat__copy{max-width:none;justify-self:stretch}
}
@media (max-width:767px){
  .eeprod-feat{padding:24px 0}
  .ee .eeprod-feat .ee-h2{font-size:27px;margin-bottom:12px}
  .eeprod-feat__copy p:not(.eeprod-row__mini){font-size:16px}
}
/* each row sits in its own container, so the last row gets its breathing room from the band below */
.eeprod-reassure{margin-top:clamp(28px,4vh,48px)}
@media (max-width:767px){ .eeprod-reassure{margin-top:24px} }

/* ============================================================
   v33: About Us page (.eeab-*).
   ============================================================ */
/* hero: 50/50, copy left, photograph right with the Google card */
.eeab-hero{background:#fff;padding:clamp(112px,14vh,148px) 0 0}
.eeab-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center}
.ee .eeab-title{margin:0 0 24px;font-family:var(--ee-font-display);font-weight:700;font-size:clamp(40px,4.3vw,68px);line-height:1.04;letter-spacing:-.015em;color:var(--ee-ink);text-wrap:balance;max-width:15ch}
.eeab-lede{margin:0;max-width:52ch;font-size:18px;line-height:1.7;color:var(--ee-muted)}
.eeab-hero__fig{position:relative;margin:0;aspect-ratio:5/4;border-radius:var(--ee-media-r);overflow:hidden;background:#eef0f1}
.ee .eeab-hero__fig > img{width:100%;height:100%;object-fit:cover;max-width:none;display:block}
.ee .eeab-hero__fig .eeab-proof{position:absolute;left:20px;bottom:20px;z-index:2;margin:0;background:rgba(12,20,26,.34)}

/* anchor row: plain text, a line draws in on hover, the current section keeps it */
.eeab-anchors{margin-top:clamp(36px,5vh,56px);border-top:1px solid var(--ee-rule);padding:18px 0}
.ee .eeab-anchors ul{list-style:none;margin:0;padding:0;display:flex;gap:0;align-items:center;overflow-x:auto;scrollbar-width:none}
.eeab-anchors ul::-webkit-scrollbar{display:none}
.eeab-anchors li{flex:none;display:flex;align-items:center}
.eeab-anchors li + li::before{content:"";width:1px;height:14px;background:var(--ee-rule);margin:0 22px}
.ee .eeab-anchors a{position:relative;display:inline-block;padding:6px 0;font-size:15px;font-weight:600;color:var(--ee-ink)}
.eeab-anchors a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#06383E;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
@media (hover:hover){ .eeab-anchors a:hover::after{transform:scaleX(1);transform-origin:left} }
.eeab-anchors a.is-active::after{transform:scaleX(1);transform-origin:left}
.eeab-anchors a:focus-visible{outline:2px solid #06383E;outline-offset:4px;border-radius:2px}

/* rotating imagery: three large tiles; each crossfades to a new photograph
   in turn, so the row is always moving but never snaps like a slider */
.eeab-rotate{background:#fff;padding:clamp(28px,4vh,44px) clamp(16px,2.4vw,40px) clamp(64px,9vh,104px)}
.eeab-rotate__row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1720px;margin:0 auto}
.eeab-tile{position:relative;margin:0;aspect-ratio:5/4;border-radius:var(--ee-media-r);overflow:hidden;background:#eef0f1}
.ee .eeab-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease-out),transform 6s var(--ease-out)}
.ee .eeab-tile img.is-on{opacity:1;transform:scale(1)}

/* statistics: the number leads */
.eeab-stats{background:#F6F6F6;padding:clamp(56px,8vh,96px) 0}
.ee .eeab-stats__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.eeab-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 16px}
.eeab-stat + .eeab-stat{border-left:1px solid var(--ee-rule)}
.eeab-stat__num{font-family:var(--ee-font-display);font-weight:700;font-size:clamp(56px,6.4vw,104px);line-height:1;letter-spacing:-.03em;color:var(--ee-ink);font-variant-numeric:tabular-nums}
.eeab-stat__label{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ee-muted)}

/* the company: image | text */
.eeab-company{background:#fff;padding:clamp(72px,10vh,120px) 0}
.eeab-company__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:center}
.eeab-company__fig{margin:0;aspect-ratio:3/2;border-radius:var(--ee-media-r);overflow:hidden;background:#eef0f1}
.ee .eeab-company__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;max-width:none;display:block}
.eeab-company__copy{max-width:560px}
.eeab-company__copy .ee-pilltag{display:block}
.ee .eeab-company__copy .ee-h2{margin:0 0 20px;font-size:clamp(32px,3vw,48px)}
.eeab-company__copy p:not(.ee-pilltag){margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--ee-muted)}

/* company / philosophy: two equal typographic columns */
.eeab-split{background:#F6F6F6;padding:clamp(72px,10vh,120px) 0}
.eeab-split__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.eeab-split__col{padding:0 clamp(24px,4vw,72px)}
.eeab-split__col:first-child{padding-left:0}
.eeab-split__col + .eeab-split__col{border-left:1px solid var(--ee-rule);padding-right:0}
.eeab-mini{display:flex;align-items:center;gap:14px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#06383E}
.eeab-mini__rule{width:64px;height:1px;background:currentColor;opacity:.6}
.ee .eeab-split .ee-h2{margin:0 0 20px;font-size:clamp(32px,3.2vw,52px);max-width:14ch}
.eeab-split__col p:not(.eeab-mini){margin:0 0 12px;max-width:50ch;font-size:17px;line-height:1.7;color:var(--ee-muted)}

/* image reveal (hero, tiles, company photo) */
.js .eeab-reveal{clip-path:inset(6% 0 0 0 round var(--ee-media-r));opacity:.001}
.js .eeab-reveal.is-shown{clip-path:inset(0 0 0 0 round var(--ee-media-r));opacity:1;transition:clip-path 1s var(--ease-out),opacity .5s var(--ease-out)}

/* anchor targets clear the fixed nav */
#the-company,#philosophy,#client-success{scroll-margin-top:96px}

/* ---- tablet ---- */
@media (max-width:900px){
  .eeab-hero{padding-top:104px}
  .eeab-hero__grid,.eeab-company__grid{grid-template-columns:1fr;gap:28px}
  .ee .eeab-title{max-width:none}
  .eeab-split__grid{grid-template-columns:1fr;gap:48px}
  .eeab-split__col,.eeab-split__col:first-child{padding:0}
  .eeab-split__col + .eeab-split__col{border-left:0;border-top:1px solid var(--ee-rule);padding-top:48px}
  .eeab-company__copy{max-width:none}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eeab-hero{padding-top:96px}
  .ee .eeab-title{font-size:clamp(32px,9vw,40px);margin-bottom:16px}
  .eeab-lede{font-size:16.5px}
  .eeab-hero__fig{aspect-ratio:4/3}
  .ee .eeab-hero__fig .eeab-proof{left:12px;right:auto;bottom:12px;width:auto}
  .eeab-anchors{margin-top:28px;padding:12px 0}
  .eeab-anchors li + li::before{margin:0 16px}
  .eeab-rotate{padding:20px 0 48px}
  .eeab-rotate__row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--ee-gutter);scroll-padding-inline:var(--ee-gutter)}
  .eeab-rotate__row::-webkit-scrollbar{display:none}
  .eeab-tile{flex:0 0 84%;scroll-snap-align:start;aspect-ratio:4/5}
  .eeab-stats{padding:40px 0}
  .ee .eeab-stats__grid{grid-template-columns:1fr;gap:0}
  .eeab-stat{padding:22px 0}
  .eeab-stat + .eeab-stat{border-left:0;border-top:1px solid var(--ee-rule)}
  .eeab-stat__num{font-size:64px}
  .eeab-company{padding:48px 0}
  .ee .eeab-company__copy .ee-h2,.ee .eeab-split .ee-h2{font-size:28px}
  .eeab-company__copy p:not(.ee-pilltag),.eeab-split__col p:not(.eeab-mini){font-size:16px}
  .eeab-split{padding:48px 0}
  .eeab-split__grid{gap:36px}
  .eeab-split__col + .eeab-split__col{padding-top:36px}
}
@media (prefers-reduced-motion:reduce){
  .js .eeab-reveal,.js .eeab-reveal.is-shown{clip-path:none;opacity:1;transition:none}
  .ee .eeab-tile img{transition:none;transform:none}
  .eeab-anchors a::after{transition:none}
}
/* about: hero and company run wider than the text sections so the
   photography reads as a feature */
@media (min-width:901px){
  .eeab-hero .ee-wrap,.eeab-company .ee-wrap{max-width:1360px}
  .eeab-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}
@media (min-width:901px){ .ee .eeab-title{max-width:none} }
.ee .eeab-split .ee-h2{max-width:17ch}
/* about hero on phones: the Google card becomes a slim one-line pill so the
   photograph stays visible */
@media (max-width:767px){
  .ee .eeab-hero__fig .eeab-proof{display:flex;align-items:center;gap:8px;width:auto;max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;min-height:0}
  .ee .eeab-hero__fig .eeab-proof .ee-proof__num{font-size:18px}
  .ee .eeab-hero__fig .eeab-proof .ee-proof__stars svg{width:10px;height:10px}
  .ee .eeab-hero__fig .eeab-proof .ee-proof__label{font-size:11.5px;margin:0;white-space:nowrap}
  .ee .eeab-hero__fig .eeab-proof .ee-proof__row{display:none}
  .eeab-hero__fig{aspect-ratio:5/4}
}
@media (max-width:767px){
  .ee .eeab-hero__fig .eeab-proof{flex-direction:row}
  .ee .eeab-anchors a{font-size:14px}
  .eeab-anchors li + li::before{margin:0 12px}
}

/* ============================================================
   v34: About Us revisions.
   ============================================================ */
/* anchors sit inside the hero copy, under the paragraph; no resting underline */
.eeab-hero{padding-bottom:clamp(40px,6vh,64px)}
.eeab-hero .eeab-anchors{margin-top:28px;border-top:0;padding:0}
.eeab-anchors a.is-active::after{transform:scaleX(0)}
@media (hover:hover){ .eeab-anchors a.is-active:hover::after,.eeab-anchors a:hover::after{transform:scaleX(1);transform-origin:left} }
.eeab-hero__grid{align-items:center}

/* hero trust badge: one compact horizontal glass pill */
.eeab-pill{position:absolute;left:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:12px;
  padding:7px 8px 7px 14px;border-radius:999px;color:#fff;
  background:rgba(12,20,26,.30);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.eeab-pill__num{font-family:var(--ee-font-display);font-size:19px;font-weight:700;line-height:1;letter-spacing:-.02em}
.eeab-pill__mid{display:flex;flex-direction:column;gap:3px}
.eeab-pill__stars{display:flex;gap:2px;color:var(--ee-star,#F5B301)}
.eeab-pill__label{font-size:11px;line-height:1;color:rgba(255,255,255,.85);white-space:nowrap}
.eeab-pill__faces{display:flex;align-items:center}
.ee .eeab-pill__faces img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9);margin-left:-8px;max-width:none}
.ee .eeab-pill__faces img:first-child{margin-left:0}
.eeab-pill__more{width:28px;height:28px;margin-left:-8px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#04243E;font-weight:700;font-size:14px;border:1.5px solid rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .eeab-pill{background:rgba(12,20,26,.62)} }

/* full-bleed photographic strip: square edges, 6px gaps, three across */
.eeab-strip{background:#fff;padding:0 0 clamp(56px,8vh,96px)}
.eeab-strip__view{overflow:hidden;touch-action:pan-y;cursor:grab}
.eeab-strip.is-dragging .eeab-strip__view{cursor:grabbing}
.eeab-strip__track{display:flex;gap:6px;width:max-content;will-change:transform;user-select:none;-webkit-user-select:none}
.eeab-strip__item{flex:none;margin:0;width:calc((100vw - 12px) / 3);aspect-ratio:4/3;overflow:hidden;background:#eef0f1}
.ee .eeab-strip__item img{width:100%;height:100%;object-fit:cover;max-width:none;display:block;-webkit-user-drag:none;pointer-events:none}

@media (max-width:767px){
  .eeab-hero{padding-bottom:32px}
  .eeab-hero .eeab-anchors{margin-top:20px}
  .eeab-pill{left:10px;bottom:10px;gap:8px;padding:5px 6px 5px 10px}
  .eeab-pill__num{font-size:15px}
  .eeab-pill__stars svg{width:9px;height:9px}
  .eeab-pill__label{font-size:10px}
  .ee .eeab-pill__faces img,.eeab-pill__more{width:22px;height:22px;margin-left:-7px;font-size:12px}
  .eeab-strip{padding-bottom:40px}
  .eeab-strip__track{gap:4px}
  .eeab-strip__item{width:80vw;aspect-ratio:4/3}
}

/* v35: about statistics as three boxes on white; the centre one featured */
.eeab-stats{background:#fff;padding:clamp(48px,7vh,80px) 0}
.ee .eeab-stats__grid{gap:clamp(14px,1.6vw,24px);max-width:1120px;margin:0 auto}
.eeab-stat,.eeab-stat + .eeab-stat{border:0;border-radius:18px;background:#F6F6F6;padding:clamp(32px,4.5vh,48px) 24px;gap:12px}
.eeab-stat:nth-child(2){background:#04243E}
.eeab-stat:nth-child(2) .eeab-stat__num{color:#fff}
.eeab-stat:nth-child(2) .eeab-stat__label{color:rgba(255,255,255,.75)}
@media (max-width:767px){
  .eeab-stats{padding:36px 0}
  .ee .eeab-stats__grid{gap:12px}
  .eeab-stat,.eeab-stat + .eeab-stat{border-top:0;padding:26px 20px}
  .eeab-stat__num{font-size:56px}
}
/* about: tighter rhythm around the statistics boxes */
.eeab-strip{padding-bottom:clamp(28px,4vh,40px)}
.eeab-stats{padding:0}
.eeab-company{padding-top:clamp(40px,6vh,64px)}
@media (max-width:767px){
  .eeab-strip{padding-bottom:20px}
  .eeab-stats{padding:0}
  .eeab-company{padding-top:32px}
}

/* v36: projects showcase hero on phones. The copy starts just below the
   nav instead of sitting low in a full-screen hero; the hero is only as
   tall as copy + cards + controls, and the shade now darkens the top where
   the text sits. */
@media (max-width:767px){
  .eepx-hero{height:672px;min-height:0}
  .eepx-copy{top:116px;bottom:auto;transform:none}
  .eepx-shade,.eepx-hero[data-active] .eepx-shade{background:linear-gradient(to bottom,rgba(0,0,0,.78) 0%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.35) 66%,rgba(0,0,0,.72) 100%)}
}

/* ============================================================
   v37: MOBILE TYPOGRAPHY STANDARD (all pages, phones only).
   Hero headline 30px; every other section headline 22px; body 14px;
   CTA text 14px; labels/eyebrows stay smaller than body.
   Kept last in the file and marked !important on purpose: it is the
   site-wide rule for phones and must win over per-section sizes.
   Desktop and tablet are untouched.
   ============================================================ */
@media (max-width:767px){
  /* -- hero headlines: 30px -- */
  .ee h1,
  .ee .ee-display,.ee .ee-display .elementor-heading-title,
  .ee .eepx-title,.ee .eeab-title,.ee .eeprod-title,.ee .eepm-hero__title,.ee .eep-hero__title{
    font-size:30px !important;line-height:1.12 !important;letter-spacing:-.01em !important;
  }
  /* -- sub-headings inside sections (cards, steps, accordions): below 22px -- */
  .ee h3,.ee h4{font-size:17px !important;line-height:1.3 !important}
  /* -- section headlines: 22px -- */
  .ee h2,.ee .ee-h2,.ee .ee-h2 .elementor-heading-title,.ee .eepm-gallery__title{
    font-size:22px !important;line-height:1.22 !important;letter-spacing:-.005em !important;
  }
  .ee .ee-h2:not(:last-child):not(.eepm-gallery__title){margin-bottom:14px !important}
  /* deliberately smaller titles keep their place in the hierarchy */
  .ee .ee-partners__title{font-size:18px !important}
  .ee .ee-foot h3,.ee .ee-foot h4{font-size:15px !important}
  .ee .eeprod-benefit h3,.ee .eeprod-also__title,.ee .eeprod-acc__inner h4{font-size:12px !important;line-height:1.4 !important}
  .ee .eepm-quote__text{font-size:19px !important;line-height:1.3 !important}
  .ee .ee-faq__q button,.ee .ee-faq__q span,.ee .ee-racc__h,.ee .eeprod-acc__q button{font-size:15px !important;line-height:1.35 !important}
  .ee .eepm-facts__item b{font-size:15px !important}

  /* -- body copy: 14px -- */
  .ee p,.ee li,.ee dd,.ee dt,.ee blockquote,.ee .elementor-widget-text-editor{font-size:14px !important;line-height:1.6 !important}
  .ee p + p{margin-top:0}
  /* labels and eyebrows written as paragraphs or list items stay smaller */
  .ee .ee-pilltag,.ee .eeprod-row__mini,.ee .eeab-mini,.ee .eepx-kicker,.ee .eeab-stat__label,
  .ee .eepm-facts__label,.ee .eeprod-services li,.ee .eeab-pill__label{font-size:11px !important;line-height:1.4 !important}
  .ee .eepm-quote__note,.ee .eeprod-crumb,.ee .eeprod-also__txt span,.ee .eeprod-also__txt em{font-size:12.5px !important;line-height:1.45 !important}
  .ee .eeprod-also__txt b,.ee .ee-txm__who b,.ee b.ee-txm__who{font-size:14px !important}

  /* -- CTAs: 14px, compact -- */
  .ee a.ee-btn,.ee button.ee-btn{font-size:14px !important;padding:6px 6px 6px 20px !important;gap:12px !important}
  .ee .ee-btn .ee-btn__badge{width:32px !important;height:32px !important}
}
@media (max-width:767px){
  .ee .ee-foot a,.ee .ee-foot__form button,.ee .ee-logos__label{font-size:14px !important}
  .ee .eepm-quote__who b{font-size:15px !important}
  .ee .eepm-quote__who span,.ee .eepm-card__meta,.ee .eepm-card__more{font-size:13.5px !important}
}
@media (max-width:767px){ .ee .ee-rot li{font-size:inherit !important;line-height:1.3em !important} }

/* ============================================================
   v38: Stable collection page (.eest-*).
   ============================================================ */
/* hero: the homepage hero with a photograph in place of the film; it
   breathes slowly in and out, alternating, so there is never a reset */
.eest-hero__bg{position:absolute;inset:0;overflow:hidden}
.ee .eest-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;max-width:none;
  transform-origin:50% 60%;animation:eestBreathe 26s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
@keyframes eestBreathe{from{transform:scale(1)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){ .ee .eest-hero__bg img{animation:none} }

/* why choose: centred, icon-led */
.eest-why{background:#fff;padding:clamp(72px,10vh,112px) 0;text-align:center}
.eest-why__head{max-width:760px;margin:0 auto clamp(40px,6vh,64px)}
.eest-why__head .ee-pilltag{display:block}
.ee .eest-why__head .ee-h2{margin:0 0 16px}
.eest-why__head p{margin:0 auto;max-width:60ch;font-size:17px;line-height:1.7;color:var(--ee-muted)}
.ee .eest-why__grid{list-style:none;margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.eest-why__item svg{color:#06383E;margin-bottom:18px}
.ee .eest-why__item h3{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ee-ink)}
.eest-why__item p{margin:0 auto;max-width:34ch;font-size:15.5px;line-height:1.65;color:var(--ee-muted)}
.eest-center{text-align:center}
.ee a.ee-btn.eest-btn{background:#04243E;color:#fff;border-color:#04243E}
.ee a.ee-btn.eest-btn .ee-btn__badge{background:#fff;color:#04243E}
@media (hover:hover){ .ee a.ee-btn.eest-btn:hover{background:#0B3558} }
.ee a.ee-btn.eest-btn:active{transform:scale(.98)}

/* four category cards: large, editorial; description rises on hover */
.eest-cats{background:#fff;padding:0 0 clamp(72px,10vh,112px)}
.eest-cats__wrap{max-width:1680px;margin:0 auto;padding:0 clamp(16px,2.4vw,40px)}
.ee .eest-cats__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.eest-cat{position:relative;aspect-ratio:3/4.3;border-radius:var(--ee-media-r);overflow:hidden;background:#1a2226;color:#fff;outline:none}
.eest-cat__fig{position:absolute;inset:0;margin:0}
.ee .eest-cat__fig img{width:100%;height:100%;object-fit:cover;max-width:none;transform:scale(1.01);transition:transform 1.6s var(--ease-out)}
.eest-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,20,30,.82) 0%,rgba(4,20,30,.35) 38%,rgba(4,20,30,0) 62%);transition:opacity .6s var(--ease-out)}
.eest-cat::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(4,20,30,.28);opacity:0;transition:opacity .6s var(--ease-out)}
.eest-cat__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px}
.ee .eest-cat__body h3{margin:0;font-size:22px;font-weight:700;line-height:1.2;color:#fff}
.eest-cat__body p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;
  transition:max-height .6s var(--ease-out),opacity .45s var(--ease-out),transform .6s var(--ease-out),margin .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eest-cat:hover .eest-cat__fig img,.eest-cat:focus-visible .eest-cat__fig img{transform:scale(1.06)}
  .eest-cat:hover::before,.eest-cat:focus-visible::before{opacity:1}
  .eest-cat:hover .eest-cat__body p,.eest-cat:focus-visible .eest-cat__body p{max-height:6em;opacity:1;transform:none;margin-top:8px}
}
@media (hover:none){ .eest-cat__body p{max-height:none;opacity:1;transform:none;margin-top:8px} }
.eest-cat:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px #06383E}

/* stable front design: text | layered photographs */
.eest-design{background:#F6F6F6;padding:clamp(80px,11vh,128px) 0 clamp(96px,13vh,152px)}
.eest-design__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,88px);align-items:center}
.eest-design__copy .ee-pilltag{display:block}
.ee .eest-design__copy .ee-h2{margin:0 0 20px}
.eest-design__copy p:not(.ee-pilltag){margin:0 0 14px;max-width:52ch;font-size:17px;line-height:1.7;color:var(--ee-muted)}
.eest-design__copy .ee-btn{margin-top:14px}
.eest-design__media{position:relative;padding-bottom:14%}
.eest-design__main{margin:0;aspect-ratio:16/10;border-radius:var(--ee-media-r);overflow:hidden}
.eest-design__inset{position:absolute;left:-7%;bottom:0;width:44%;margin:0;aspect-ratio:16/9;border-radius:var(--ee-media-r);overflow:hidden;
  border:5px solid #F6F6F6;box-shadow:0 26px 50px -24px rgba(4,36,62,.45)}
.ee .eest-design__main img,.ee .eest-design__inset img{width:100%;height:100%;object-fit:cover;max-width:none;display:block}

/* render gallery: a calm, swipeable design selection */
.eest-renders{background:#fff;padding:clamp(72px,10vh,112px) 0 clamp(40px,6vh,64px)}
.eest-renders__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.ee .eest-renders__head .ee-h2{margin:0}
.ee .eest-renders__rail{list-style:none;margin:0;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)));scroll-padding-inline:max(var(--ee-gutter),calc((100vw - var(--ee-max)) / 2 + var(--ee-gutter)))}
.eest-renders__rail::-webkit-scrollbar{display:none}
.eest-render{flex:0 0 clamp(300px,31vw,480px);scroll-snap-align:start}
.eest-render figure{margin:0;aspect-ratio:3/2;border-radius:var(--ee-media-r);overflow:hidden;background:#F4F5F6}
.ee .eest-render img{width:100%;height:100%;object-fit:contain;max-width:none;padding:6%;mix-blend-mode:multiply;transition:transform .9s var(--ease-out)}
@media (hover:hover){ .eest-render:hover img{transform:scale(1.03)} }
.eest-render--custom > div{height:100%;aspect-ratio:3/2;border-radius:var(--ee-media-r);background:#04243E;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(24px,3vw,40px)}
.ee .eest-render--custom h3{margin:0 0 8px;font-size:22px;color:#fff}
.eest-render--custom p{margin:0 0 20px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.78)}
.ee .eest-render--custom a.ee-btn.eest-btn{background:#fff;color:#04243E}
.ee .eest-render--custom a.ee-btn.eest-btn .ee-btn__badge{background:#04243E;color:#fff}

/* customisation tabs */
.eest-custom{background:#fff;padding:clamp(40px,6vh,64px) 0 clamp(80px,11vh,128px)}
.ee .eest-custom .ee-h2{margin:0 0 22px}
.eest-tabs{display:flex;gap:28px;border-bottom:1px solid var(--ee-rule);overflow-x:auto;scrollbar-width:none;margin-bottom:32px}
.eest-tabs::-webkit-scrollbar{display:none}
.eest-tabs button{all:unset;box-sizing:border-box;position:relative;flex:none;padding:14px 0;font-size:15px;font-weight:700;color:var(--ee-muted);cursor:pointer;transition:color .25s var(--ease-out)}
.eest-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#04243E;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.eest-tabs button[aria-selected="true"]{color:var(--ee-ink)}
.eest-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
@media (hover:hover){ .eest-tabs button:hover{color:var(--ee-ink)} }
.eest-tabs button:focus-visible{outline:2px solid #06383E;outline-offset:4px;border-radius:2px}
.eest-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.eest-panel[hidden]{display:none}
.eest-panel.is-on{animation:eestPanelIn .45s var(--ease-out)}
@keyframes eestPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ee .eest-panel__copy h3{margin:0 0 12px;font-size:clamp(24px,2.2vw,32px);color:var(--ee-ink)}
.eest-panel__copy p{margin:0 0 20px;max-width:46ch;font-size:16.5px;line-height:1.7;color:var(--ee-muted)}
.ee .eest-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.eest-chips li{padding:9px 16px;border:1px solid var(--ee-rule);border-radius:999px;font-size:14px;font-weight:600;color:var(--ee-ink);background:#fff}
.eest-panel__fig{margin:0;aspect-ratio:3/2;border-radius:var(--ee-media-r);overflow:hidden;background:#F4F5F6}
.ee .eest-panel__fig img{width:100%;height:100%;object-fit:contain;max-width:none;padding:6%;mix-blend-mode:multiply}

/* reveals */
.js .eest-reveal{opacity:.001;transform:translateY(14px)}
.js .eest-reveal.is-shown{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}

/* ---- tablet ---- */
@media (max-width:1024px){
  .ee .eest-cats__row{grid-template-columns:repeat(2,1fr)}
  .eest-cat{aspect-ratio:4/5}
}
@media (max-width:900px){
  .eest-design__grid,.eest-panel{grid-template-columns:1fr}
  .eest-design__media{padding-bottom:0;display:grid;gap:10px}
  .eest-design__inset{position:static;width:auto;border:0;box-shadow:none}
}
/* ---- phone ---- */
@media (max-width:767px){
  .eest-why{padding:48px 0}
  .ee .eest-why__grid{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  .eest-why__item svg{width:32px;height:32px;margin-bottom:10px}
  .eest-cats{padding-bottom:48px}
  .eest-cats__wrap{padding:0}
  .ee .eest-cats__row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--ee-gutter);scroll-padding-inline:var(--ee-gutter)}
  .eest-cats__row::-webkit-scrollbar{display:none}
  .eest-cat{flex:0 0 78vw;aspect-ratio:4/5;scroll-snap-align:start}
  .eest-cat__body{padding:18px}
  .eest-design{padding:48px 0}
  .eest-renders{padding:48px 0 28px}
  .eest-renders__head .ee-carousel-nav{display:none}
  .eest-render{flex-basis:82vw}
  .eest-custom{padding:28px 0 56px}
  .eest-tabs{gap:20px;margin:0 calc(var(--ee-gutter) * -1) 22px;padding:0 var(--ee-gutter)}
  .eest-panel{gap:18px}
  .eest-panel__fig{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .js .eest-reveal,.js .eest-reveal.is-shown{opacity:1;transform:none;transition:none}
  .eest-panel.is-on{animation:none}
  .ee .eest-cat__fig img{transition:none}
}
@media (max-width:767px){ .ee .eest-why__item h3{font-size:13px !important;letter-spacing:.12em !important} }

/* ============================================================
   v39: Stables page revisions.
   ============================================================ */
/* hero: about twice as quick; zoom in, then straight back out, no reset */
.ee .eest-hero__bg img{animation:eestBreathe 11s cubic-bezier(.45,0,.55,1) infinite alternate}

/* category cards: a gradient only at the foot for the text; on hover the
   photograph keeps breathing in and out while the description rises */
.eest-cat::before{display:none}
.eest-cat::after{background:linear-gradient(to top,rgba(4,16,24,.85) 0%,rgba(4,16,24,.45) 26%,rgba(4,16,24,0) 46%)}
.ee .eest-cat__fig img{transition:none;transform:scale(1)}
@keyframes eestCardBreathe{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (hover:hover) and (pointer:fine){
  .eest-cat:hover .eest-cat__fig img,.eest-cat:focus-visible .eest-cat__fig img{transform:scale(1);animation:eestCardBreathe 4.5s cubic-bezier(.45,0,.55,1) infinite alternate}
}

/* stable front design: its own white section; inset photograph bottom right */
.eest-design{background:#fff;border-top:1px solid var(--ee-rule)}
.eest-design__inset{left:auto;right:-6%;border-color:#fff}
.eest-design__media{margin-right:6%}

/* compact designs panel under the copy, in the same section */
.eest-designs{margin-top:clamp(56px,8vh,88px);max-width:1080px}
.eest-designs__tab{display:inline-block;background:#F6F6F6;border-radius:12px 12px 0 0;padding:12px 26px 10px;font-size:15px;font-weight:700;color:var(--ee-ink)}
.eest-designs__card{background:#F6F6F6;border-radius:0 12px 12px 12px;padding:22px 24px 18px}
.ee .eest-designs__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.eest-designs__row li{aspect-ratio:3/2;display:grid;place-items:center}
.ee .eest-designs__row img{width:100%;height:100%;object-fit:contain;max-width:none;mix-blend-mode:multiply;transition:transform .5s var(--ease-out)}
@media (hover:hover){ .eest-designs__row li:hover img{transform:scale(1.06)} }
.ee .eest-designs__notes{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--ee-rule);display:flex;flex-wrap:wrap;gap:6px 22px}
.eest-designs__notes li{font-size:13px;color:var(--ee-muted)}

/* make it yours: Royal Navy */
.eest-custom{background:#04243E;color:#fff;padding:clamp(72px,10vh,112px) 0}
.ee .eest-custom .ee-h2{color:#fff}
.eest-custom .eest-tabs{border-bottom-color:rgba(255,255,255,.18)}
.eest-custom .eest-tabs button{color:rgba(255,255,255,.6)}
.eest-custom .eest-tabs button[aria-selected="true"]{color:#fff}
.eest-custom .eest-tabs button::after{background:#fff}
@media (hover:hover){ .eest-custom .eest-tabs button:hover{color:#fff} }
.eest-custom .eest-tabs button:focus-visible{outline-color:#fff}
.eest-panel{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.ee .eest-custom .eest-panel__copy h3{color:#fff}
.eest-custom .eest-panel__copy > p{color:rgba(255,255,255,.78)}
.eest-group{margin-top:22px}
.ee .eest-group h4{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.eest-group h4 span{margin-left:8px;font-weight:500;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.6)}
.ee .eest-sw__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px}
.eest-sw{width:104px;display:flex;flex-direction:column;gap:7px}
.eest-sw__img{display:block;width:104px;height:70px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:#fff}
.ee .eest-sw__img img{width:100%;height:100%;object-fit:cover;max-width:none;display:block}
.eest-sw__label{font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.85)}
.eest-custom .eest-chips li{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.eest-panel__note{margin:22px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.6);max-width:56ch}
.eest-custom .eest-panel__fig{background:#fff;position:sticky;top:110px}
.ee .eest-panel__fig--photo img{object-fit:cover;padding:0;mix-blend-mode:normal}

@media (max-width:900px){
  .eest-design__media{margin-right:0}
  .eest-panel{grid-template-columns:1fr}
  .eest-custom .eest-panel__fig{position:static}
}
@media (max-width:767px){
  .eest-designs{margin-top:36px}
  .eest-designs__tab{font-size:13px;padding:10px 18px 8px}
  .eest-designs__card{padding:14px 12px 12px;border-radius:0 12px 12px 12px}
  .ee .eest-designs__row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:8px}
  .eest-designs__row::-webkit-scrollbar{display:none}
  .eest-designs__row li{flex:0 0 40%;scroll-snap-align:start}
  .eest-custom{padding:48px 0}
  .eest-sw,.eest-sw__img{width:88px}
  .eest-sw__img{height:60px}
  .ee .eest-group h4{font-size:11px !important;line-height:1.4 !important}
  .ee .eest-designs__notes li,.ee .eest-panel__note{font-size:12.5px !important}
}
@media (prefers-reduced-motion:reduce){
  .ee .eest-cat:hover .eest-cat__fig img{animation:none}
}

/* ============================================================
   v40: Stables round 2. Who We Are (wider, with points), named
   design collections, category sections, FAQ.
   ============================================================ */
/* who we are on this page: equal columns, room for the points */
.e-con.eest-who{padding-block:clamp(88px,12vh,136px)}
@media (min-width:1025px){ .eest-who .ee-who__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,5vw,80px);align-items:center} }
.eest-who .ee-who__copy{max-width:none}
.eest-who .ee-who__copy .ee-pilltag{display:block}
.ee .eest-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.eest-checks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.45;font-weight:600;color:var(--ee-ink)}
.eest-checks svg{flex:none;color:#06383E;margin-top:1px}

/* named design collections: the approved panel, sized to its contents */
.eest-collections{margin-top:clamp(56px,8vh,88px);display:grid;gap:28px}
.eest-collections .eest-designs{margin-top:0}
.eest-designs{width:fit-content;max-width:100%}
.ee .eest-designs__row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,196px);gap:16px}
.eest-dcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.eest-dcard figure{margin:0;width:100%;aspect-ratio:3/2;display:grid;place-items:center;border-radius:8px;overflow:hidden}
.eest-designs__row .eest-dcard{aspect-ratio:auto;display:flex}
.ee .eest-dcard--render img{width:100%;height:100%;object-fit:contain;max-width:none;mix-blend-mode:multiply;transition:transform .5s var(--ease-out)}
.ee .eest-dcard--photo img{width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .5s var(--ease-out)}
@media (hover:hover){ .eest-dcard:hover img{transform:scale(1.05)} }
.eest-dcard b{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ee-ink)}
.eest-dcard span{font-size:12.5px;line-height:1.4;color:var(--ee-muted);max-width:22ch}

/* category sections: copy | designs panel, alternating soft grey */
.eest-catsec{background:#fff;padding:clamp(72px,10vh,112px) 0}
.eest-catsec--alt{background:#F6F6F6}
.eest-catsec--alt .eest-designs__tab,.eest-catsec--alt .eest-designs__card{background:#fff}
.eest-catsec__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,80px);align-items:center}
.eest-catsec__copy .ee-pilltag{display:block}
.ee .eest-catsec__copy .ee-h2{margin:0 0 16px}
.eest-catsec__copy > p{margin:0 0 22px;max-width:48ch;font-size:16.5px;line-height:1.7;color:var(--ee-muted)}
.eest-spec{margin:0 0 26px;border-top:1px solid var(--ee-rule);padding-top:18px}
.ee .eest-spec h4{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#06383E}
.ee .eest-spec ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.eest-spec li{position:relative;padding-left:16px;font-size:15px;line-height:1.5;color:var(--ee-ink)}
.eest-spec li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#06383E}
.eest-catsec .eest-designs{justify-self:end}

/* category cards now lead to their sections */
.eest-cat__link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.eest-cat__link:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #fff}
.eest-cat:has(.eest-cat__link:focus-visible) .eest-cat__body p{max-height:6em;opacity:1;transform:none;margin-top:8px}
#walls-partitions,#stable-windows,#external-stable-doors,#stable-front-design{scroll-margin-top:80px}

@media (max-width:1024px){
  .eest-catsec__grid{grid-template-columns:1fr}
  .eest-catsec .eest-designs{justify-self:start}
  .ee .eest-checks{grid-template-columns:1fr}
}
@media (max-width:767px){
  .e-con.eest-who{padding-block:56px}
  .eest-checks li{font-size:14px}
  .eest-collections{margin-top:36px;gap:20px}
  .eest-designs{width:auto}
  .ee .eest-designs__row{display:flex;grid-auto-flow:unset}
  .eest-designs__row .eest-dcard{flex:0 0 46%}
  .eest-catsec{padding:48px 0}
  .ee .eest-spec h4,.ee .eest-dcard b{font-size:11px !important;line-height:1.4 !important}
  .ee .eest-dcard span{font-size:12px !important}
}
/* who (stables page): ragged-right, no hyphenation for the points and lede */
.eest-who .ee-who__body,.eest-who .ee-who__body p,.eest-checks li{text-align:left !important;hyphens:none !important;-webkit-hyphens:none !important;word-spacing:normal}
/* panels never outgrow the page: the track is capped and the row scrolls */
.eest-collections{grid-template-columns:minmax(0,1fr)}
.eest-designs,.eest-designs__card{max-width:100%;min-width:0}
.ee .eest-designs__row{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.eest-designs__row::-webkit-scrollbar{display:none}
.eest-designs__row .eest-dcard{scroll-snap-align:start}

/* ============================================================
   v41: one product-section component for all four stable categories
   (Stable Front Design is the master), each followed by Make It Yours.
   ============================================================ */
.eest-product{background:#fff;padding:clamp(80px,11vh,128px) 0 clamp(80px,11vh,120px)}
.ee .eest-product__title{margin:0;font-family:var(--ee-font-display);font-weight:700;font-size:clamp(36px,3.6vw,56px);line-height:1.06;letter-spacing:-.015em;color:var(--ee-ink)}
.ee .eest-design__copy p.eest-product__sub{margin:12px 0 22px;font-size:clamp(19px,1.6vw,24px);line-height:1.35;font-weight:500;color:#3d4a55;max-width:30ch}
.eest-product .eest-spec{margin-top:6px}
/* make it yours: heading is a level below the section h2, styled as before */
.ee .eest-custom__title{margin:0 0 22px;font-family:var(--ee-font-display);font-weight:700;font-size:clamp(34px,3.2vw,52px);line-height:1.08;color:#fff}
.ee .eest-panel__copy .eest-panel__title{margin:0 0 12px;font-size:clamp(24px,2.2vw,32px);font-weight:700;color:#fff;letter-spacing:0;text-transform:none}
.eest-panel--full{grid-template-columns:1fr}
/* accessories (from the parked product page) */
.ee .eest-acc{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;max-width:900px}
.eest-acc li{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.eest-acc__img{width:76px;height:76px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden}
.ee .eest-acc__img img{width:100%;height:100%;object-fit:contain;padding:8px;max-width:none}
.eest-acc__txt{display:grid;gap:3px}
.eest-acc__txt b{font-size:15px;color:#fff}
.eest-acc__txt span{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.eest-acc__txt em{font-style:normal;font-size:13.5px;font-weight:700;color:#fff}
@media (max-width:767px){
  .eest-product{padding:48px 0}
  .ee .eest-product__title{font-size:22px !important;line-height:1.2 !important}
  .ee .eest-design__copy p.eest-product__sub{font-size:16px !important;line-height:1.4 !important;margin:8px 0 16px}
  .ee .eest-custom__title{font-size:22px !important;line-height:1.2 !important}
  .ee .eest-panel__copy .eest-panel__title{font-size:18px !important}
  .ee .eest-acc{grid-template-columns:1fr}
  .eest-acc li{grid-template-columns:64px 1fr}
  .eest-acc__img{width:64px;height:64px}
  .ee .eest-acc__txt b{font-size:14px !important}
  .ee .eest-acc__txt span,.ee .eest-acc__txt em{font-size:12.5px !important}
}
/* the layered pair keeps its overlap on tablet and phone, scaled down */
@media (max-width:900px){
  .eest-design__media{display:block;position:relative;padding-bottom:16%;margin-right:0}
  .eest-design__main{width:90%}
  .ee .eest-design__inset,.eest-design__inset{position:absolute;right:0;left:auto;bottom:0;width:46%;border:4px solid #fff;box-shadow:0 18px 36px -18px rgba(4,36,62,.45)}
}
@media (max-width:767px){
  .eest-design__media{padding-bottom:20%}
  .eest-design__main{width:92%}
  .ee .eest-design__inset,.eest-design__inset{width:50%;border-width:3px}
}
@media (max-width:900px){ .eest-design__media{padding-bottom:12%} }
@media (max-width:767px){ .eest-design__media{padding-bottom:13%} }

/* ============================================================
   v42 (14 Oct): /projects/ hero zoom + projects listing (.eepl-*)
   ============================================================ */
.ee .eepx-hero .eepx-bg__img{animation:eestBreathe 11s cubic-bezier(.45,0,.55,1) infinite alternate;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){ .ee .eepx-hero .eepx-bg__img{animation:none} }

.eepl{background:#fff;padding-block:clamp(80px,11vh,128px)}
.eepl__head{max-width:640px;margin-bottom:clamp(28px,4vh,40px)}
.eepl__head .ee-pilltag{display:inline-block}
.ee .eepl__head p{margin:14px 0 0;color:var(--ee-muted);font-size:17px;line-height:1.6}
.eepl-filters{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0 0 clamp(28px,4vh,40px)}
.ee .eepl-pill{appearance:none;border:1px solid #E4E6E8;background:#F6F6F6;color:var(--ee-ink);font:600 15px/1 var(--ee-font);
  padding:13px 24px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ee-ease)}
@media (hover:hover){ .ee .eepl-pill:hover{background:#ECEEF0;border-color:#D6DADE} }
.ee .eepl-pill:active{transform:scale(.97)}
.ee .eepl-pill.is-on{background:var(--ee-navy);border-color:var(--ee-navy);color:#fff}
.ee .eepl-pill:focus-visible{outline:2px solid var(--ee-accent);outline-offset:3px}
.eepl-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ee .eepl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.eepl-card[hidden]{display:none !important}
.eepl-card__in{display:flex;flex-direction:column;height:100%;background:#F6F6F6;border-radius:14px;overflow:hidden;color:inherit;text-decoration:none}
.ee .eepl-card__in{text-decoration:none}
.eepl-card__fig{margin:0;aspect-ratio:3/2;overflow:hidden;background:#e9ebec}
.ee .eepl-card__fig img{width:100%;height:100%;object-fit:cover;max-width:none;display:block;transition:transform .7s var(--ee-ease)}
.eepl-card__body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.ee .eepl-card__title{margin:0;font-size:22px;line-height:1.25;font-weight:700;color:var(--ee-ink);letter-spacing:-.2px}
.ee .eepl-card__text{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ee-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eepl-card__cta{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ee-ink)}
.eepl-card__cta svg{transition:transform .25s var(--ee-ease)}
@media (hover:hover){
  a.eepl-card__in:hover .eepl-card__fig img{transform:scale(1.05)}
  a.eepl-card__in:hover .eepl-card__cta svg{transform:translate(2px,-2px)}
  a.eepl-card__in:hover .eepl-card__cta{text-decoration:underline;text-underline-offset:4px}
}
a.eepl-card__in:focus-visible{outline:2px solid var(--ee-accent);outline-offset:3px}
.eepl-card__in--sample{cursor:default}
@media (max-width:1024px){ .ee .eepl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} }
@media (max-width:767px){
  .eepl{padding-block:56px}
  .ee .eepl__head p{font-size:14px !important}
  .eepl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--ee-gutter) * -1);padding-inline:var(--ee-gutter);gap:8px}
  .eepl-filters::-webkit-scrollbar{display:none}
  .ee .eepl-pill{font-size:13px !important;padding:11px 18px}
  .ee .eepl-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ee .eepl-card__title{font-size:17px !important}
  .ee .eepl-card__text{font-size:14px !important}
  .eepl-card__body{padding:18px 18px 20px}
  .eepl-card__cta{font-size:14px;padding-top:16px}
}
@media (min-width:768px){ .eepl-filters{gap:8px} .ee .eepl-pill{font-size:14px;padding:12px 18px} }