:root{--ink:#414141;--yellow:#F9E900;--paper:#F2F1EC;--white:#fff;--blk:#1B1B1B;
--f:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--blk)}
.topbleed{position:absolute;left:0;top:-140vh;width:100%;height:140vh;background:var(--yellow);pointer-events:none;z-index:-1}
.pagebg{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--yellow);pointer-events:none;z-index:-1}
body{position:relative;z-index:0;font-family:var(--f);color:var(--ink);background:var(--blk);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.03}
.wrap{max-width:1240px;margin:0 auto;padding:0 26px}
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}
.js [data-r].in{opacity:1;transform:none}
.kick{font-size:12.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:22px}
.kick::before{content:"";width:11px;height:11px;background:currentColor;border-radius:50%}
.btn{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:700;font-size:14px;padding:12px 24px;border-radius:999px;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 rgba(0,0,0,.4)}
.sheet{position:relative;border-radius:38px 38px 0 0;margin-top:-38px;padding:104px 0;backface-visibility:hidden}
.s-ink{background:var(--ink);color:var(--white)}
.s-paper{background:var(--paper);color:var(--ink)}
.s-yellow{background:var(--yellow);color:var(--ink)}
#services,#work,#where,#clients,#faq,#manifesto{scroll-margin-top:74px}
:root{--hold:.4}
/* XII i: plain sections pin uniformly inside a wrapper that is one
   viewport plus the shared hold; the inner panel sticks for that beat */
/* light-pin: section eases to rest filling the fold, holds a short beat,
   eases out. The wrapper carries the extra scroll length (the hold); the
   section sticks and fills the viewport. Fold height lives here and is
   independent of any motion fallback (XVIII). */
.lpinwrap{position:relative;height:calc((1 + var(--hold))*100vh)}
/* top-align (not centre) so a section taller than the fold never has its
   top clipped; centre-ish look kept via balanced padding. overflow stays
   hidden only to contain the pin (XIX) */
.lpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.lpin>.wrap{margin-top:auto;margin-bottom:auto;width:100%;max-height:100%}
.lpin.sheet{padding:72px 0 40px}
.fold{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
/* manitail (XII i): scroll distance after the crawl completes so the
   settled manifesto holds full-screen for the shared beat before
   services slides up. No top-pin, so the crawl is never frozen. */
/* end-catch only: a short sticky hold (hold*100vh) after the manifesto,
   no full extra fold, so there is no long white runway (XIX) */
/* hold long enough to finish the paragraph reveal while pinned + a beat,
   then release to services (XXVI) */
.manitail{height:calc((.6 + var(--hold))*100vh);pointer-events:none;position:relative}

/* HALFTONE: one shared asset, multiply so it reads tone-on-tone across any seam (16) */
.hpng{position:absolute;pointer-events:none;mix-blend-mode:multiply;background:var(--htu) center/contain no-repeat;opacity:.16}

/* NAV: retitled + anchored (1, 15) */
nav{position:fixed;inset:0 0 auto 0;z-index:80;background:rgba(58,58,58,.96);backdrop-filter:blur(9px);border-bottom:2px solid var(--blk);color:var(--paper)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px}
.navactions{display:flex;gap:12px;align-items:center}
.tns{display:inline-block;font-weight:700;line-height:.92;letter-spacing:-.035em;text-transform:lowercase;white-space:nowrap}
.tns .mk{display:inline-block;width:.633em;height:.633em;margin-left:.151em;vertical-align:.244em}
nav .tns{font-size:19px;color:var(--yellow)}
.nl{display:flex;gap:18px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;align-items:center}
.nl a:hover{color:var(--yellow)}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;letter-spacing:.08em;border:2px solid var(--paper);border-radius:999px;padding:7px 13px;transition:transform .15s,box-shadow .2s,background .2s;color:var(--paper)}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{transform:translate(-2px,-2px);box-shadow:4px 5px 0 rgba(0,0,0,.45)}
.lang svg{width:15px;height:15px}
.lang[open] summary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.lpanel{position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;padding:8px;min-width:185px;box-shadow:8px 9px 0 rgba(0,0,0,.55);z-index:90;color:var(--ink)}
.lpanel a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;font-size:13.5px;font-weight:700}
.lpanel a:hover{background:var(--yellow)}
.lpanel i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;flex:none}
.lpanel a.on i{background:var(--yellow);color:var(--ink);outline:2px solid var(--ink)}
.lpanel small{display:block;font-weight:500;font-size:11px;opacity:.65;letter-spacing:.02em}

/* HERO: entrance and scrub fully separated; every line pushes from the first scrolled pixel,
   1:1 reversible, exits clip only at the viewport edge (2.1, 2.2, 3) */
.heroWrap{height:225vh;background:var(--yellow)}
.hero{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:84px 0 36px}
.heroIn{width:100%;position:relative}
.h-kick{font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-bottom:22px}
.js .h-kick{transform:translateX(calc(var(--hp,0)*-70vw))}
.rise{display:block;overflow:visible;font-weight:700;font-size:clamp(37px,7.68vw,109px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;padding-right:.06em}
.heroIn.exiting .rise{overflow:visible}
.ent,.hx{display:block}
.js .ent.e1{animation:hup .85s cubic-bezier(.2,.7,.2,1) both}
.js .ent.e2{animation:hup .85s cubic-bezier(.2,.7,.2,1) .12s both}
.js .ent.e3{animation:hfade .85s ease .3s both}
.js .ent.e4{animation:hfade .85s ease .5s both}
@keyframes hup{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes hfade{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.js .hx{will-change:transform}
.js .hx1{transform:translateX(calc(var(--hp,0)*-165vw))}
.js .hx2{transform:translateX(calc(var(--hp,0)*150vw))}
.js .hx3{transform:translateX(calc(var(--hp,0)*-135vw))}
.js .hx4{transform:translateX(calc(var(--hp,0)*120vw))}
.hl{background:var(--ink);color:var(--yellow);padding:.085em .12em .115em;line-height:.72;display:inline-block}
.hl.hlx{padding-top:.27em;margin-top:-.185em}
.hacc .rise:nth-of-type(2){margin-top:.125em}
.hacc .rise:nth-of-type(3){margin-top:.15em}
.hacc .rise:nth-of-type(4){margin-top:.05em}
.hollow{color:transparent;-webkit-text-stroke:2.4px var(--ink)}
/* hero rotating noun, vertical departure-board slide (own iteration) */
.flipline{display:block;overflow:visible;clip-path:inset(-0.34em -0.08em -0.3em -0.03em);height:.92em;position:relative}
.flipword+.flipword{opacity:0}
.flipline.golock{animation:tnsflipmask .55s ease both}
.flip.go .flipword:first-child{animation:tnsfadeout .55s ease both}
.flip.go .flipword:last-child{animation:tnsfadein .55s ease both}
@keyframes tnsflipmask{0%{clip-path:inset(-0.34em -0.08em -0.3em -0.03em)}8%,80%{clip-path:inset(0 -0.08em 0 -0.03em)}100%{clip-path:inset(-0.34em -0.08em -0.3em -0.03em)}}
@keyframes tnsfadeout{0%,72%{opacity:1}96%,100%{opacity:0}}
@keyframes tnsfadein{0%,14%{opacity:0}24%,100%{opacity:1}}
/* the slot is always exactly 2em tall (current word at top, next stacked
   directly beneath); rolling up exactly 1em reveals the next word and
   never changes the flipline box, so no line below is ever displaced */
.flip{display:block;position:absolute;left:0;top:0;width:100%;height:1.84em;will-change:transform}
.flipword{display:block;white-space:nowrap;height:.92em;line-height:.92;transform-origin:left center}
.js .flip.go{animation:fliproll .55s cubic-bezier(.4,0,.2,1) both}
@keyframes fliproll{from{transform:translateY(0)}to{transform:translateY(-.92em)}}
.kLA{letter-spacing:.025em}
.amark{display:inline-block;width:.7em;height:.7em;margin:0 .085em;vertical-align:0}
.js .heroIn.exiting .amark{visibility:hidden}
.hero-row{display:flex;flex-wrap:wrap;gap:38px;align-items:flex-start;justify-content:flex-start;margin-top:24px}
.js .hero-row{transform:translateY(calc(var(--hp,0)*112vh))}
.lede{max-width:60ch;font-size:16.5px;line-height:1.6;font-weight:500}
.lede strong{display:block;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.lede .hlt{background:var(--ink);color:var(--yellow);padding:2px 8px;font-weight:700;display:inline-block;margin-bottom:8px}
.scrolltip{margin-top:44px;font-size:10.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;opacity:.55}
.js .scrolltip{transform:translateX(calc(var(--hp,0)*82vw))}
/* mobile sweep restored with a bound (P): the cue sweeps with the exit, but the
   visible text's right edge is capped at a 26px inset from the viewport right.
   --cueMax is measured in main.js from the text box and viewport widths so the
   cap holds at any width. The reduced motion rule still zeroes the transform. */
@media(max-width:880px){.js .scrolltip{transform:translateX(min(calc(var(--hp,0)*82vw),var(--cueMax,0px)))}}
.spinwrap{position:absolute;right:max(8px,calc(9.0vw - 64px));top:81%;transform:translateY(-50%);width:128px;height:128px;flex:none;display:block;z-index:3}
.js .spinwrap{transform:translateY(-50%) translateY(calc(var(--hp,0)*112vh))}
.spin{position:absolute;inset:0;animation:rot 34.7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.spin text{font:700 13px var(--f);text-transform:uppercase;fill:var(--ink)}
.score{position:absolute;inset:35px;background:var(--ink);border-radius:50%;display:grid;place-items:center;transition:transform .25s}
.score svg{width:50%;height:50%;color:var(--yellow)}
.spinwrap:hover .score{transform:scale(1.1)}
.spin text{transition:fill .2s ease,filter .2s ease}
.spinwrap:hover .spin text{fill:var(--ink);filter:drop-shadow(2px 2px 0 var(--yellow))}

/* EXIT THEATRE B · THE ANCHOR: the mark holds the yellow, descends vertically,
   then slides left to dock as the bullet of Our Manifesto (5) */
.mproxy{position:fixed;left:0;top:0;width:100px;height:100px;z-index:70;pointer-events:none;opacity:0;will-change:transform;color:var(--ink);transform-origin:0 0;transition:none}
.mproxy svg{display:block;width:100%;height:100%}
.mpast .mproxy{opacity:0!important}
.kick.km::before{display:none}
.kms{width:18px;height:18px;display:inline-block;flex:none}
.kms svg{display:block;width:100%;height:100%}
.js .kms svg{opacity:0}
.js .kms.docked svg{opacity:1}

/* MANIFESTO: right-to-left crawl, per-word pop, breathing room (6, 7, 8) */
#manifesto{padding-bottom:40px;overflow:visible}
.zig{width:100%;overflow:hidden;margin:2px 0 64px;pointer-events:none}
.zig text{font:700 46px var(--f);letter-spacing:0;text-transform:uppercase;pointer-events:auto;cursor:default}
.zs{fill:var(--ink)}
.zh{fill:var(--paper);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.za{fill:var(--yellow);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.zw{pointer-events:auto;will-change:transform;transition:transform .22s ease,text-shadow .22s ease,fill .22s ease}
text.zw:hover,.zw.zpop{transform:translate(-3px,-6px)}
text.zw.zs:hover,.zw.zs.zpop{text-shadow:5px 6px 0 var(--yellow)}
text.zw.zh:hover,.zw.zh.zpop{fill:var(--ink);text-shadow:5px 6px 0 var(--yellow)}
text.zw.za:hover,.zw.za.zpop{text-shadow:5px 6px 0 rgba(65,65,65,.9)}
.zigpath{fill:none}
.mani{max-width:980px;font-size:clamp(24px,3.6vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.22}
/* end-pin: the paragraph holds on screen while it finishes revealing and a
   beat after, before services (XXVI). Reveal is scrollY-driven so the pin
   does not freeze it. */
.maniHold{position:sticky;top:24vh}
.js .mani .w{opacity:.14}

/* SERVICES: stage one pops exactly like the case cards, then expands; icons carry the
   second extension; fixed copy height kills the layout jolt (9.1, 9.2) */
#services h2{font-size:clamp(34px,5.2vw,62px)}
.seo-lede{margin-top:14px;max-width:78ch;font-size:15px;line-height:1.55;color:rgba(255,255,255,.85);font-weight:500}
.seo-lede strong{color:var(--yellow)}
.srow{display:flex;gap:14px;margin-top:14px}
.srow:first-of-type{margin-top:20px}
.stile{flex:1 1 0;min-width:0;border:2px solid rgba(255,255,255,.2);border-radius:24px;padding:20px 18px;color:var(--white);cursor:default;touch-action:manipulation;overflow:hidden;
transition:transform .3s ease,box-shadow .3s ease,flex-grow .5s cubic-bezier(.2,.7,.2,1),background-color .3s ease,border-color .3s ease,color .3s ease}
.stile svg{width:60px;height:60px;color:var(--yellow);filter:drop-shadow(0 0 0 rgba(27,27,27,0));transition:color .3s,transform .3s ease}
.stile h3{font-size:17px;margin-top:10px;letter-spacing:-.02em}
.stile p{font-size:13px;line-height:1.45;margin-top:6px;opacity:0;max-width:30ch;height:3em;overflow:hidden;transition:opacity .35s .26s}
.stile.hot{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk);background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.stile.hot svg{color:var(--ink);transform:translate(-2px,-4px)}
.stile.hot p{opacity:.92}
@keyframes iconpop{from{filter:drop-shadow(0 0 0 rgba(27,27,27,0))}to{filter:drop-shadow(2px 2.35px 0 rgba(27,27,27,.28))}}
@media(max-width:920px){.srow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.srow:first-of-type{margin-top:20px}.stile p{opacity:.85;max-width:none;height:auto}.stile h3{white-space:normal}}
@media(max-width:560px){.srow{gap:10px}.stile{padding:18px 15px}.stile svg{width:52px;height:52px}.stile h3{font-size:16px}}

/* WORK */
.worksWrap{position:relative}
.worksSticky{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:90px 0 40px}
/* match the lpin sections: the heading wrap fills the width so the kick + h2
   left-align to the 1240-box edge instead of centring as a shrink-wrapped
   flex item (XXXI) */
.worksSticky>.wrap{width:100%}
#work h2{font-size:clamp(34px,5.2vw,62px)}
.track{display:flex;gap:26px;margin-top:44px;will-change:transform;padding:14px 4px 22px}
.case{flex:0 0 min(82vw,680px);border-radius:26px;padding:44px 40px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;border:3px solid var(--ink);transition:transform .3s,box-shadow .3s}
.case.c1,.case.c4{background:var(--white)}
.case.c2{background:var(--yellow)}
.case.c3{background:var(--ink);color:var(--yellow)}
.case .tag{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.65}
.case h3{font-size:clamp(40px,5.4vw,68px);margin:18px 0;display:inline-block;cursor:pointer;transition:transform .35s,text-shadow .35s}
.case p{font-size:15px;line-height:1.6;font-weight:500;max-width:50ch}
.case.c3 p{color:rgba(255,255,255,.92)}
.res{margin-top:20px;align-self:flex-start;border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--yellow);cursor:pointer;transition:transform .3s,box-shadow .3s}
.case.c3 .res{background:var(--yellow);color:var(--ink)}
a.case{text-decoration:none;color:inherit;cursor:pointer}
.workhint{margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.5}
/* case-study swipe UI: hint + directional arrow + pagination dots (batch 5) */
.swipeui{display:none}
@media(max-width:880px){
  .swipeui{flex-direction:column;align-items:center;gap:15px;margin-top:24px;overflow:visible}
  .swipemsg{position:relative;display:grid;justify-items:center;align-items:center;min-height:1.5em;width:100%}
  .hm{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;text-align:center;max-width:calc(100vw - 56px);color:var(--ink);transition:transform .5s cubic-bezier(.45,0,.15,1),opacity .45s ease}
  .hm-swipe{opacity:.55;transform:translateX(0)}
  .hm-scroll{opacity:0;transform:translateX(54px)}
  .swipemsg.atend .hm-swipe{opacity:0;transform:translateX(-54px)}
  .swipemsg.atend .hm-scroll{opacity:.55;transform:translateX(0)}
  .fa{display:inline-block;width:0;height:0;flex:none}
  .fa-right{border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;animation:swfloatX 1.6s ease-in-out infinite}
  .fa-down{border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor;animation:swfloatY 1.6s ease-in-out infinite}
  .swipedots{display:flex;gap:9px;justify-content:center}
  .sdot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.26;transition:opacity .25s ease,transform .25s ease}
  .sdot.on{opacity:1;transform:scale(1.4)}
}
@keyframes swfloatX{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes swfloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.fa{animation:none}}

.h-1{top:0;right:0;width:min(56vw,1088px);height:612px;border-radius:0 38px 0 0;background:var(--htc) top right/contain no-repeat}
/* XII iii: inverted halftone rising from the bottom-left, quarter to half as the section scrolls */
.h-1b{bottom:0;left:0;width:min(56vw,1088px);height:612px;border-radius:0 0 0 38px;background:var(--htcb) bottom left/contain no-repeat;clip-path:inset(calc((1 - var(--hl,0))*50%) 0 0 0);transform:translateY(calc((1 - var(--hl,0))*40%))}
@media(max-width:880px),(prefers-reduced-motion:reduce){
.worksWrap{height:auto!important}
.lpinwrap{height:auto!important}
.lpin{position:static!important;height:auto!important;min-height:100vh}
.manitail{height:0!important}
.maniHold{position:static!important;top:auto!important}
#manifesto{padding-bottom:88px}
.worksSticky{position:static;min-height:0;padding:60px 0 112px}
.track{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transform:none!important;gap:16px;margin-left:-26px;margin-right:-26px;padding:14px 26px 24px;scroll-padding-left:26px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.case{flex:0 0 min(84vw,560px);width:auto;scroll-snap-align:start;min-height:0;padding:34px 28px}
.workhint{display:none}
.swipeui{display:flex}}

/* WHERE: uniform medium-weight linework, visible hard shadow on the pop,
   label reacts with the country (10.1, 10.2) */
#where{overflow:visible}
#where .grid{display:grid;grid-template-columns:1.28fr 1fr;gap:56px;align-items:center;position:relative;max-height:100%}
#where h2{font-size:clamp(30px,4.2vw,50px);color:var(--white);line-height:1.04}
#where h2 em{font-style:normal;color:var(--yellow)}
#where .intro{margin:12px 0 clamp(10px,1.8vh,20px);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85);max-width:48ch}
.clist{max-width:598px}
.crow{display:flex;align-items:baseline;gap:16px;padding:clamp(3px,1.05vh,11px) 6px;border-bottom:1.5px solid rgba(255,255,255,.18);cursor:default;touch-action:manipulation;transition:transform .22s,border-color .22s}
.crow i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;opacity:.5;width:24px;flex:none}
.crow b{font-size:clamp(18px,min(2.3vw,3.3vh),30px);font-weight:700;letter-spacing:.01em;color:transparent;-webkit-text-stroke:1.7px #9a9a96;transition:color .22s,text-shadow .22s;text-transform:uppercase}
.crow.solid b{color:var(--white);-webkit-text-stroke:0}
.crow small{margin-left:auto;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.crow.hot{transform:translate(-5px,-4px);border-color:var(--yellow)}
.crow.hot b{color:var(--yellow);-webkit-text-stroke:0;text-shadow:5px 6px 0 #262626}
.crow.hot small{opacity:1;transform:none}
@media(min-width:901px){.crow b{white-space:nowrap}}
.mapbox{position:relative;transform:translate(2vw,7vh) scale(1.12);transform-origin:center}
#mapsvg{width:100%;height:auto;display:block;position:relative;touch-action:manipulation}
.cty:not(.op),.cty:not(.op) .land{pointer-events:none}
.hit{fill:#000;opacity:0;pointer-events:all;cursor:pointer}
.tri,.lshadow,.land{pointer-events:none}
.land{stroke:var(--yellow);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;fill:rgba(249,233,0,0);transition:transform .25s ease;pointer-events:none}
.tri{stroke:var(--yellow);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;opacity:1;pointer-events:none}
.js .land{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease,transform .25s ease}
.js .tri{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease}
.js .mapbox.in .land{stroke-dashoffset:0}
.js .mapbox.in .tri{stroke-dashoffset:0;transition-delay:.45s}
.cty.op:hover .land,.cty.op.hot .land{fill:var(--paper);stroke:var(--paper);transform:translate(-7px,-7px)}
.lshadow{fill:#0c0c0c;stroke:#0c0c0c;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;opacity:0;transform:translate(8px,8px);pointer-events:none;transition:opacity .15s ease}
.cty.op:hover .lshadow,.cty.op.hot .lshadow{opacity:1}
.cty.op:hover .tri,.cty.op.hot .tri{opacity:0}
.dot{fill:#fff;transition:fill .15s}
.ring{stroke:#fff;stroke-width:2;opacity:.5;transition:stroke .15s}
.cmark{transform:translate(0,0);transition:transform .45s cubic-bezier(.25,.8,.25,1)}
#m-mexico.hot{transform:translate(-60px,74px)}
#m-panama.hot{transform:translate(-62px,22px)}
#m-colombia.hot{transform:translate(-76px,2px)}
#m-ecuador.hot{transform:translate(-70px,6px)}
#m-peru.hot{transform:translate(-86px,20px)}
#m-brazil.hot{transform:translate(98px,145px)}
#m-chile.hot{transform:translate(-80px,12px)}
#m-argentina.hot{transform:translate(78px,28px)}
#m-panama.hot .lbl{transform:translate(0,-21px)}
#m-colombia.hot .lbl{transform:translate(-127px,19px)}
.halo{fill:#414141;transition:opacity .15s}
.cmark.hot .halo{opacity:0}
.cmark.hot .ring,.cmark:hover .ring{animation:pulse 1.1s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.cmark .ring{transform-box:fill-box;transform-origin:center}
.lbl{font:700 15px var(--f);fill:#fff;letter-spacing:.08em;text-transform:uppercase;paint-order:stroke;stroke:#414141;stroke-width:5;stroke-linejoin:round;transition:transform .3s,font-size .25s;pointer-events:none}
.cmark.hot .lbl,.cmark:hover .lbl{font-size:16.5px}
.cnxl{stroke:#fff;stroke-width:1.5;fill:none;opacity:0;stroke-dasharray:1;stroke-dashoffset:1;transition:opacity .2s,stroke-dashoffset .35s ease .1s;pointer-events:none}
.cnxl.hot{opacity:.85;stroke-dashoffset:0}
@media(max-width:900px){#where .grid{grid-template-columns:1fr}.mapbox{transform:none}}

/* CLIENTS: supplied GREY logo set, Santander pop matched to the case cards (11, 12) */
#clients h2{font-size:clamp(34px,5.2vw,62px)}
/* clients top-right corner halftone: identical asset/shape to case studies
   .h-1; --clh (0..1) slides it up as the section is pushed through */
/* clients quarter-disc halftone (pizza slice): 150% size, top-right corner,
   scrolls up via --clh as the section is pushed through (XXXVIII) */
/* clients halftone: full circle (disc), case-studies footprint width, raised
   so the top arc tucks above view (edges uncropped), scrolls up via --clh */
.h-2{top:0;right:0;width:min(56vw,1088px);height:min(56vw,1088px);max-height:none;border-radius:0;background:var(--htdome) top right/contain no-repeat;transform:translateY(-32%) translateY(calc(var(--clh,0)*-46%))}
.clthwrap{position:relative}
.clstage{position:sticky;top:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.clstage>.wrap{width:100%}
.lgmar{margin-top:46px;overflow:visible;padding:20px 0}
/* first/last logo cards sit one inter-card gap (16px) off the page edges, so
   the edge spacing matches the gap between cards (XL) */
.lgtrack{padding-left:16px;padding-right:16px}
.lgtrack{display:flex;gap:16px;width:max-content;will-change:transform}
.lg{border:3px solid var(--ink);border-radius:18px;display:grid;place-items:center;padding:31px 24px;min-height:154px;width:250px;flex:none;transition:transform .25s,box-shadow .25s;background:var(--yellow)}
.lg.hot{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
.clogo{display:block;width:180px;height:89px;background:var(--ink);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@media(max-width:880px),(prefers-reduced-motion:reduce){
.clthwrap{height:auto!important}
.clstage{position:static;min-height:0}
.h-2{transform:none!important}
.lgmar{padding:10px 0}
.lgtrack{transform:none!important;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:auto;padding-left:clamp(34px,8vw,64px);padding-right:clamp(34px,8vw,64px)}
.lgtrack{padding:0 14px}
.lg{width:auto;min-width:0;aspect-ratio:125/77;min-height:0;padding:8px 5px}
.clogo{width:92%;height:82%}}
.partner{margin-top:40px;display:flex;align-items:center;gap:22px;background:var(--ink);color:var(--paper);border-radius:24px;padding:26px 30px;transition:transform .3s,box-shadow .3s}
.partner.pop{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
.partner>svg{width:44px;height:44px;flex:none;color:var(--yellow)}
.partner .pk{font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.partner p{font-size:15px;line-height:1.55;font-weight:500;max-width:72ch}
.partner b{color:var(--white)}

/* ABOUT (nav title) keeps its FAQ kicker on the page (1) */
#faq{overflow:visible;padding-bottom:64px}
#faq h2{font-size:clamp(34px,5.2vw,62px)}
#faq .fwrap{margin-top:38px;max-width:880px}
details.q{border-bottom:2px solid var(--ink);padding:20px 4px}
details.q summary{cursor:pointer;font-weight:700;font-size:18px;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";font-size:26px;font-weight:700;transition:transform .25s;flex:none}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{margin-top:12px;font-size:15px;line-height:1.65;font-weight:500;max-width:74ch}

/* CLOSE THEATRE: 8 degree blades in frame from the start, the yellow window rides the
   scroll from the seam and morphs into The Standard bar, a giant hollow Let's Raise
   condenses into the heading, edges slide out with the user (13.1 to 13.5) */
.closeWrap{height:330vh;background:var(--paper);position:relative;border-radius:38px 38px 0 0;margin-top:-38px;backface-visibility:hidden}
.cstage{position:sticky;top:0;height:100vh;overflow:hidden;border-radius:38px 38px 0 0}
.scz{position:absolute;left:50%;top:50%;width:240vw;height:240vh;margin:-120vh 0 0 -120vw;transform:rotate(-5deg)}
.blade{position:absolute;left:0;width:100%;height:calc(50% + 2px);background:var(--ink);will-change:transform;overflow:hidden}
.blade.bt{top:0}
.blade.bb{bottom:0}
.seam{position:absolute;left:0;top:calc(50% - 3px);width:100%;height:6px;background:var(--yellow);will-change:transform}
.h-3{bottom:4%;left:52%;width:540px;height:540px;opacity:.5}
.lockzone{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.lockhead{position:relative;width:fit-content;margin:0 auto 54px;text-align:center}
.lockhead .lr,.lockhead .hl2{display:inline-block;will-change:transform}
.lockhead h2{font-size:clamp(32px,5vw,60px);color:var(--paper);white-space:nowrap}
.lockhead .hl2{background:var(--yellow);color:var(--ink);padding:.09em .28em;border-radius:14px;display:inline-block}
.lockhead .bk{position:absolute;width:38px;height:38px;color:var(--yellow);opacity:var(--bo,1)}
.lockhead .bk1{left:-66px;top:-46px;transform:scaleX(-1) scale(var(--bs,1))}.lockhead .bk2{right:-66px;top:-46px;transform:scale(var(--bs,1))}
.lockhead .bk3{right:-66px;bottom:-46px;transform:scaleY(-1) scale(var(--bs,1))}.lockhead .bk4{left:-66px;bottom:-46px;transform:scale(-1,-1) scale(var(--bs,1))}
.arrow{width:78px;height:58px;vertical-align:-12px;margin-left:6px}
.arrow path{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--ad,0)}
.cbody{opacity:var(--p3,1);transform:translateY(calc((1 - var(--p3,1))*32px));will-change:transform,opacity}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;margin-top:8px;align-items:start}
.cmeta{font-size:16px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.9)}
.cmeta a{font-weight:700;color:var(--yellow);display:inline-block;border-bottom:3px solid var(--yellow)}
.cmeta .big{font-size:clamp(18px,2vw,22px);letter-spacing:-.02em;margin-bottom:13px}
.cmeta address{font-style:normal;margin-top:20px;line-height:1.7}
.cmeta .small{margin-top:20px;font-size:13px;opacity:.75;line-height:1.7;max-width:46ch}
form{display:grid;gap:14px}
.send{font-family:var(--f);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:none;border-radius:999px;padding:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,box-shadow .2s}
.send svg{width:15px;height:21px}
.send:hover{transform:translate(-3px,-5px);box-shadow:7px 9px 0 rgba(242,241,236,.9)}
/* WPForms, the locked underline treatment codified (R): the field design
   approved as rendered in 1.0.65, charcoal-invisible fill with a 1px yellow
   bottom rule, is written into the theme with selectors that outrank the
   WPForms per form inline style block (body #wpforms-ID scope), so the look
   holds deterministically with or without the panel styles. Labels stay in
   the markup for screen readers, visually hidden. Submit is the as shipped
   1.0.63 button verbatim, boosted for the same cascade reason (R item 1). */
#contact .wpforms-container{max-width:none}
#contact .wpforms-form{display:grid;gap:14px}
#contact .wpforms-field-container{display:grid;gap:14px}
#contact .wpforms-field{padding:0;margin:0}
#contact .wpforms-field-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body #contact .cgrid .wpforms-form .wpforms-field input[type=text],body #contact .cgrid .wpforms-form .wpforms-field input[type=email],body #contact .cgrid .wpforms-form .wpforms-field input[type=tel],body #contact .cgrid .wpforms-form .wpforms-field textarea,body #contact .cgrid .wpforms-form .wpforms-field select{font-family:var(--f);font-size:15px;padding:15px 18px;background:transparent;border:0;border-bottom:1px solid var(--yellow);border-radius:0;color:var(--paper);caret-color:var(--yellow);width:100%}
body #contact .cgrid .wpforms-form .wpforms-field input::placeholder,body #contact .cgrid .wpforms-form .wpforms-field textarea::placeholder{color:rgba(242,241,236,.5)}
body #contact .cgrid .wpforms-form .wpforms-field input:focus,body #contact .cgrid .wpforms-form .wpforms-field textarea:focus,body #contact .cgrid .wpforms-form .wpforms-field select:focus{outline:none;border-bottom:2px solid var(--yellow)!important;padding-bottom:14px}
body #contact .cgrid .wpforms-form .wpforms-field textarea{min-height:112px;resize:vertical}
#contact .wpforms-recaptcha-container{margin:0}
#contact .wpforms-submit-container{padding:0;margin:0}
body #contact .cgrid .wpforms-form button.wpforms-submit{font-family:var(--f);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:none;border-radius:999px;padding:18px;cursor:pointer;width:100%;transition:transform .15s,box-shadow .2s}
body #contact .cgrid .wpforms-form button.wpforms-submit:hover{transform:translate(-3px,-5px);box-shadow:7px 9px 0 rgba(242,241,236,.9);background:var(--yellow);color:var(--ink)}
#contact button.wpforms-submit svg{width:15px;height:21px;vertical-align:-4px;margin-left:8px}
body #contact .cgrid .wpforms-form label.wpforms-error,body #contact .cgrid .wpforms-form em.wpforms-error{display:block;position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;color:var(--yellow)!important;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;margin:6px 0 0;padding:0;border:0}
body #contact .cgrid .wpforms-form .wpforms-field input.wpforms-error,body #contact .cgrid .wpforms-form .wpforms-field textarea.wpforms-error{border-bottom:2px solid var(--yellow)!important;padding-bottom:14px}
#contact .wpforms-confirmation-container-full{background:transparent;border:2px solid var(--yellow);color:var(--paper);border-radius:15px;padding:18px}
/* Screen-reader-only form announcements, verified against the real WPForms
   Lite source (U part 2). WPForms injects accessibility announcements, such as
   the submit-disabled live-region text that appears during an AJAX submit,
   into its own .wpforms-screen-reader-element node. The frontend bundle does
   not create that text; it only disables the button, swaps the button alt-text,
   and fires wpformsFormSubmitButtonDisable. WPForms normally hides the node via
   its bundled rule div.wpforms-container-full .wpforms-form
   .wpforms-screen-reader-element, but this form runs with WPForms "Include Form
   Styling" set to No Styling, so that stylesheet is never enqueued and the
   class has no hiding rule on this site. That is why the earlier part-1 rule,
   which targeted .screen-reader-text, never caught it: the announcement uses a
   different class. Mirroring WPForms' own rule into the theme so it survives No
   Styling. The .wpforms-error / em.wpforms-error validation text is a separate
   class and stays visible. Hides visually only; the node and its text stay in
   the DOM for assistive technology. */
.wpforms-screen-reader-element,#contact .wpforms-screen-reader-element,div.wpforms-container-full .wpforms-form .wpforms-screen-reader-element{position:absolute!important;clip:rect(0,0,0,0)!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;word-wrap:normal!important}
/* Part 1, kept: the WordPress-standard .screen-reader-text convention scoped to
   the form, in case any announcement uses core's class inside #contact. */
#contact .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Belt and suspenders: core's wp.a11y.speak() writes into body-level
   .screen-reader-text containers that sit outside #contact, which a
   #contact-scoped rule cannot reach. This global sr-only rule (matching the one
   the blog templates use, which do not load on the homepage) closes that gap
   sitewide, and only ever hides content authored as screen-reader-only. */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Confirmed target, captured from live Web Inspector during an actual submit
   (U part 3). The live announcement element is:
   <div class="wpforms-hidden" id="wpforms-form-1476-submit-btn-disabled">
   so it carries the class .wpforms-hidden AND an id ending in
   -submit-btn-disabled (the 1476 segment is the form ID, so the three language
   forms yield -1476-, -1624-, -1629-; the id-suffix selector below catches all
   three). Parts 1 and 2 above targeted .screen-reader-text and
   .wpforms-screen-reader-element, which this element does not use, so they never
   matched it. With WPForms in No Styling mode nothing hides .wpforms-hidden on
   this site, so the div renders visibly. High specificity plus !important here
   follows the theme's house pattern (body #contact prefix) so the rule wins over
   any residual WPForms rule or inline block regardless of the cascade. Safety:
   the id-suffix selector is unique to this announcement and touches no error
   markup. The scoped .wpforms-hidden selector is also safe because visible
   validation errors use em.wpforms-error / label.wpforms-error (made visible
   above with overflow:visible; clip:auto), never .wpforms-hidden; the only other
   .wpforms-hidden node is WPForms' own sr-only error prefix, which is meant to be
   hidden anyway. Hides visually only; text stays in the DOM for assistive tech. */
body #contact .wpforms-hidden,body #contact [id$="-submit-btn-disabled"],[id$="-submit-btn-disabled"]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* inner-page contact (case studies + blog): the homepage contact content with
   no scroll theatre. A normal dark sheet that laps over the page above it and
   sits under the footer. */
.contactblk{background:var(--ink);border-radius:38px 38px 0 0;margin-top:-38px;padding:104px 0;position:relative}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}.lockhead h2{white-space:normal}.lockhead{margin:0 auto 112px}.lockhead .bk{width:26px;height:26px}.lockhead .bk1{left:-38px;top:-36px}.lockhead .bk2{right:-38px;top:-36px}.lockhead .bk3{right:-38px;bottom:-36px}.lockhead .bk4{left:-38px;bottom:-36px}.lockhead .arrow{position:absolute;left:0;right:0;top:calc(100% + 44px);width:58px;height:43px;margin:0 auto;vertical-align:0}}
@media(max-width:880px),(prefers-reduced-motion:reduce){
.closeWrap{height:auto;background:var(--ink)}
.cstage{position:static;height:auto;padding:104px 0;overflow:visible}
.scz{display:none}
.lockzone{position:static;display:block}
.lockhead .lr,.lockhead .hl2{transform:none!important;opacity:1!important}
.cbody{opacity:1;transform:none}}
html.no-js .closeWrap{height:auto;background:var(--ink)}
html.no-js .cstage{position:static;height:auto;padding:104px 0}
html.no-js .scz{display:none}
html.no-js .lockzone{position:static}
html.no-js .lockhead,html.no-js .cbody{transform:none;opacity:1}
html.no-js .lockhead .lr,html.no-js .lockhead .hl2{transform:none;opacity:1}
html.no-js .kms svg{opacity:1}
html.no-js .mproxy{display:none}

/* FOOTER */
footer{background:var(--blk);color:#9b9b97;border-radius:38px 38px 0 0;margin-top:-38px;position:relative;padding:84px 0 42px;font-size:14px;backface-visibility:hidden}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
footer .tns{color:var(--yellow);font-size:30px}
footer .blurb{margin-top:26px;line-height:1.7;max-width:42ch}
footer h4{color:#fff;font-size:15px;margin:24px 0 12px;letter-spacing:-.01em}
footer h4:first-child{margin-top:0}
footer ul{list-style:none}
footer li{margin:7px 0}
footer a:hover{color:var(--yellow)}
footer .legal{margin-top:28px;line-height:1.6}
footer .legal.links{margin-top:14px}
footer .legal.links a{color:#9b9b97}
footer .ai{display:inline-flex;align-items:center;gap:8px}
footer address{font-style:normal;display:flex;flex-direction:column;gap:22px}
footer .addr-contact{line-height:1.7}
footer .addr-post{line-height:1.7}
.lang2{display:flex;gap:16px;align-items:center}
.lang2 svg{width:14px;height:14px}
.lang2 a:hover{color:var(--yellow)}
.fbar{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;letter-spacing:.12em}
@media(max-width:980px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
.badge{position:fixed;bottom:14px;left:14px;z-index:90;background:#000;color:var(--yellow);font:700 11px/1 var(--f);letter-spacing:.14em;padding:8px 12px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
.js [data-r]{opacity:1;transform:none;transition:none}
.js .ent{animation:none!important;opacity:1!important;transform:none!important}
.js .hx,.js .h-kick,.js .scrolltip,.js .hero-row{transform:none!important}
.mproxy{display:none!important}
.js .kms svg{opacity:1}
.heroIn.exiting .amark{visibility:visible!important}
.land,.tri{stroke-dashoffset:0!important;transition:none!important}
.js .mani .w{opacity:1!important}
.flip.go{animation:none!important}
.flip.go .flipword{animation:none!important;opacity:1!important}
.flip{transform:none!important}
.flipword.out{display:none!important}
.stile:hover svg{animation:none!important;filter:drop-shadow(2px 2.35px 0 rgba(27,27,27,.28))!important}
.spin{animation:none!important}}
.no-js .seam{display:none}

/* mobile breathing room + hero badge declutter (batch 2) */
@media(max-width:880px){#services{padding-bottom:96px}#where{padding-bottom:96px}.crow.hot b{text-shadow:none}}

/* ===== Responsive navigation (batch 3) =====
   desktop (>1100): full row (default). tablet portrait (768-1100): same row,
   compacted so all seven items fit. phone (<=767): hamburger -> dropdown panel. */
@media(max-width:1100px) and (min-width:768px){
  nav .wrap{gap:12px}
  .nl{gap:10px;font-size:11px;letter-spacing:.03em}
  .navactions{gap:10px}
  nav .btn{padding:10px 16px}
}
nav .btn{white-space:nowrap}
/* hamburger button: only on phone */
.navtoggle{display:none;width:42px;height:38px;flex:none;padding:0;cursor:pointer;
  background:transparent;border:2px solid var(--paper);border-radius:11px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:border-color .2s}
.navtoggle span{display:block;width:18px;height:2px;background:var(--paper);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease,background .2s}
@media(max-width:767px){
  .navtoggle{display:inline-flex}
  .nl{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(48,48,48,.985);backdrop-filter:blur(9px);
    border-bottom:2px solid var(--blk);box-shadow:0 16px 24px rgba(0,0,0,.42);
    padding:4px 0 10px}
  nav.menu-open .nl{display:flex}
  .nl a{padding:15px 26px;font-size:14.5px;letter-spacing:.07em;
    border-bottom:1px solid rgba(255,255,255,.08)}
  .nl a:last-child{border-bottom:none}
  .nl a:active{background:rgba(0,0,0,.32);color:var(--yellow)}
  nav .btn{padding:10px 14px;white-space:nowrap}
  .lang summary{padding:6px 11px}
  .navactions{gap:8px}
  nav .wrap{gap:7px}
  .spinwrap{display:none}
}
/* hamburger -> X when the menu is open */
nav.menu-open .navtoggle{border-color:var(--yellow)}
nav.menu-open .navtoggle span{background:var(--yellow)}
nav.menu-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.menu-open .navtoggle span:nth-child(2){opacity:0}
nav.menu-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Service tiles are links to the service pages. */
a.stile{text-decoration:none;cursor:pointer}

@media(max-width:880px){.zig text{font-size:80.5px}}
.case.pop{transform:translate(-4px,-9px)}
.case.c1.pop,.case.c2.pop,.case.c4.pop{box-shadow:12px 14px 0 var(--ink)}
.case.c3.pop{box-shadow:12px 14px 0 rgba(27,27,27,.85)}
a.case,.stile,.lg,.crow,.partner,a.pcard{-webkit-tap-highlight-color:transparent}
@media(hover:hover){
.stile:hover{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk);flex-grow:2.1;background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.stile:hover svg{color:var(--ink);transform:translate(-2px,-4px);animation:iconpop .34s ease .04s both}
.stile:hover p{opacity:.92}
.case:hover{transform:translate(-4px,-9px)}
.case.c1:hover,.case.c2:hover,.case.c4:hover{box-shadow:12px 14px 0 var(--ink)}
.case.c3:hover{box-shadow:12px 14px 0 rgba(27,27,27,.85)}
.case h3:hover{transform:translate(-4px,-7px);text-shadow:7px 9px 0 rgba(65,65,65,.32)}
.case.c3 h3:hover{text-shadow:7px 9px 0 rgba(27,27,27,.9)}
.res:hover{transform:translate(-4px,-7px);box-shadow:7px 9px 0 rgba(65,65,65,.45)}
.case.c3 .res:hover{box-shadow:7px 9px 0 rgba(27,27,27,.9)}
.crow:hover{transform:translate(-5px,-4px);border-color:var(--yellow)}
.crow:hover b{color:var(--yellow);-webkit-text-stroke:0;text-shadow:5px 6px 0 #262626}
.crow:hover small{opacity:1;transform:none}
.lg:hover{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
.partner:hover{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
}