/* ===================================================================
   PALETTE — Ariyana core tokens + Plexuro brand mark
   =================================================================== */
:root{
  --linen:#E9DCD2;
  --off-white:#F0F0F0;
  --black-primary:#000000;
  --black-secondary:#121212;
  --black-secondary-30:rgba(18,18,18,.3);
  --gray:#383838;
  --white:#FFFFFF;
  --white-30:rgba(255,255,255,.3);
  /* ---------------------------------------------------------------
     ACCENT SYSTEM — anchored to the logo, not to the reference site.
     The logo ships exactly three colours (#000, #FFF, #003CFF), so the
     page runs one hue family instead of fighting it with orange.
       --accent          #003CFF  on light grounds  (5.26:1 on cream)
       --accent-on-dark  #5B8CFF  on black/near-black
                                  (#003CFF is only 3.09:1 there)
       --brand-mark      #003CFF  the logo mark, exact, on every ground
     --------------------------------------------------------------- */
  --accent:#003CFF;
  --accent-press:#0030CC;
  --accent-on-dark:#5B8CFF;
  --brand-mark:#003CFF;

  /* tonal ramp — replaces the peach / lavender / lime sticker set */
  --tint-1:#EDF1FF;
  --tint-2:#D9E2FF;
  --tint-3:#B8CBFF;
  --tint-4:#8FA9FF;
  --navy:#001B7A;
  --navy-deep:#00136B;

  /* legacy token names kept so every rule resolves to the new system */
  --vivid-orange:var(--accent);
  --vivid-red:var(--navy);
  --vivid-red-active:var(--navy-deep);
  --yellow:var(--accent-on-dark);
  --brand-blue:var(--brand-mark);

  --container:1680px;
  --pad-global:5%;
  --r-sm:16px; --r-md:20px; --r-lg:24px; --r-xl:60px; --r-999:999px;
  --sec-pad:100px;
  --ease-out:cubic-bezier(.5,0,.1,1);
  color-scheme:light;
}
@media (max-width:991px){ :root{ --sec-pad:80px; --r-xl:40px; --r-lg:20px; --r-sm:12px; } }
@media (max-width:767px){ :root{ --sec-pad:64px; --r-xl:32px; } }

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

/* lenis.css — the reference loads this alongside the library and it matters:
   it keeps the document height honest, clips overflow while scroll is
   stopped, and kills pointer events on iframes mid-scroll. */
html.lenis,html.lenis body{height:auto;}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}
.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete;}
body{
  margin:0;
  background-color:var(--white);          /* page ground is WHITE */
  color:var(--gray);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:16px;line-height:1.5;font-weight:400;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:"Bebas Neue",Arial,sans-serif;font-weight:400;color:var(--black-secondary);margin:0;line-height:1;letter-spacing:-.01em;}
p{margin:0;} ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--vivid-orange);outline-offset:4px;}

.padding_global{padding-left:var(--pad-global);padding-right:var(--pad-global);}
.container{max-width:var(--container);margin-inline:auto;width:100%;}
section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);position:relative;}

/* floating caption chip — candy colours only */
.floating_text{
  font-family:"Bebas Neue",Arial,sans-serif;color:var(--black-secondary);
  font-size:clamp(1.25rem,.9rem + 1vw,2.1rem);line-height:.9;letter-spacing:-.01em;
  background-color:var(--candy-lime);padding:14px 24px;transform:rotate(-8deg);
  display:inline-block;white-space:nowrap;
}
@media (max-width:767px){ .floating_text{padding:8px 16px;transform:rotate(-6deg);} }

/* ============================ PRELOADER ============================ */
.preloader{position:fixed;inset:0;z-index:9999;background-color:var(--black-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;}
.preloader_mark{width:clamp(64px,9vw,110px);opacity:0;}
.preloader_logo{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.4rem,9vw,7rem);color:var(--white);line-height:.8;letter-spacing:-.03em;display:flex;overflow:hidden;}
.preloader_logo span{display:inline-block;}
.preloader_bar{position:absolute;bottom:0;left:0;height:3px;width:0%;background-color:var(--accent);}
.preloader_pct{position:absolute;bottom:36px;right:5%;font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,6vw,5rem);color:var(--accent-on-dark);line-height:1;}

/* ============================ NAV ============================ */
/* ============================ TOP BAR (closed state) ============================
   Transparent bar laid out as a row of cells, each with its own underline
   segment; links carry a ring marker. Slash toggle sits in the last cell. */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:900;
  padding:24px var(--pad-global);background:transparent;
  display:grid;grid-template-columns:1.5fr repeat(4,1fr) auto;
  column-gap:clamp(16px,3vw,54px);align-items:center;
}
@media (max-width:1023px){ .nav{display:flex;align-items:center;justify-content:space-between;} }
.nav_cell{position:relative;display:flex;align-items:center;}
/* underline wipes in from the left on hover, rather than sitting there */
.nav_cell.is_link::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:1px;
  background-color:rgba(255,255,255,.9);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-out);
}
.nav_cell.is_link:hover::after,
.nav_cell.is_link:focus-within::after{transform:scaleX(1);}
.nav_logo{display:block;flex:none;}
.nav_logo img{height:40px;width:auto;}
@media (max-width:767px){ .nav_logo img{height:32px;} }

.nav_link{
  display:flex;align-items:center;gap:14px;
  font-size:clamp(13px,1vw,16px);font-weight:500;letter-spacing:.06em;
  color:var(--white);white-space:nowrap;
}
.nav_link_dot{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:1.5px solid var(--white);background-color:transparent;
  transition:background-color .35s ease,transform .35s ease;
}
.nav_link:hover .nav_link_dot{background-color:var(--white);transform:scale(1.18);}
.nav_link_label{position:relative;display:block;overflow:hidden;height:1.25em;}
.nav_link_label span{display:block;transition:transform .42s var(--ease-out);}
.nav_link_label span+span{position:absolute;inset:100% 0 auto;color:var(--accent-on-dark);}
.nav_link:hover .nav_link_label span{transform:translateY(-100%);}
@media (max-width:1023px){ .nav_cell.is_link{display:none;} }

/* ---- slash toggle: 16/32/16 bars in a wrapper rotated 45deg, so at rest it
   reads as a "//" echoing the logo; on hover it morphs into a hamburger ---- */
.menu_btn{
  width:44px;height:44px;flex:none;background:transparent;
  display:flex;align-items:center;justify-content:flex-end;margin-left:auto;
}
.menu_bars{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:32px;transform:rotate(45deg);will-change:transform;
}
.menu_bars i{display:block;height:2px;border-radius:999px;background-color:var(--white);}
.menu_bars i:nth-child(1){width:16px;}
.menu_bars i:nth-child(2){width:32px;}
.menu_bars i:nth-child(3){width:16px;}

/* ============================ OVERLAY PANEL ============================ */
/* No parked transform here on purpose. A CSS translateY(-100%) is read by
   GSAP as a pixel offset on `y`, which leaves its `yPercent` at 0 — the
   open tween then animates 0 → 0 and the panel never moves. GSAP owns the
   transform instead, set at init below. */
.canvas_menu{
  position:fixed;inset:0;z-index:999;width:100vw;height:100dvh;
  background-color:#121212;overflow:hidden;
  visibility:hidden;
  display:flex;flex-direction:column;
}
/* stage holds the watermark; it is deliberately clipped by the panel edge */
/* The watermark used to be set larger than the stage and hard-clipped, so it
   collided with the first row. It now sits fully inside its own band, which
   is centred rather than pinned to a negative top offset. */
.canvas_menu_stage{
  position:relative;flex:none;
  height:clamp(112px,20vh,190px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.canvas_menu_ghost{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.4rem,10.5vw,8.5rem);line-height:.9;letter-spacing:-.03em;
  color:#262626;white-space:nowrap;pointer-events:none;user-select:none;
  margin:0;
}
.canvas_menu_sticker{
  position:absolute;top:50%;left:50%;
  transform:translate(-186%,-136%) rotate(-15deg);
  background-color:var(--tint-3);
  color:#000000;font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(.85rem,1.25vw,1.3rem);line-height:1;letter-spacing:.02em;
  padding:11px 18px;white-space:nowrap;
}
@media (max-width:900px){ .canvas_menu_sticker{transform:translate(-140%,-150%) rotate(-15deg);padding:9px 14px;} }
@media (max-width:640px){ .canvas_menu_sticker{transform:translate(-50%,-190%) rotate(-8deg);padding:7px 12px;} }
.menu_close{
  position:absolute;top:20px;right:var(--pad-global);z-index:4;
  width:52px;height:52px;border-radius:50%;
  background-color:var(--white);color:#000000;
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s ease;
}
.menu_close:hover{transform:rotate(90deg);}

/* ---- rows: full-bleed bands ---- */
/* rows share the remaining height, so the stack fills the panel */
.canvas_menu_links{display:flex;flex-direction:column;width:100%;flex:1;min-height:0;}
.canvas_menu_link{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;flex:1;min-height:51px;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.canvas_menu_link:first-child{border-top:1px solid rgba(255,255,255,.3);}
@media (max-width:640px){ .canvas_menu_link{min-height:46px;} }
.active-bg{
  position:absolute;inset:0;z-index:0;
  background-color:var(--vivid-orange);
  transform:scaleY(0);transform-origin:center;will-change:transform;
}
/* the mask must be exactly one label tall, so it carries the label's own
   font-size — 1em against the inherited 16px body size would collapse it */
.canvas_menu_text{
  position:relative;z-index:1;display:block;overflow:hidden;
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.1rem,4.4vw,4rem);line-height:1;height:1em;
}
.menu_text{
  display:block;font-family:inherit;font-size:inherit;
  line-height:1;letter-spacing:-.01em;
  color:#808080;white-space:nowrap;will-change:transform;
}
.menu_text.is_hidden{position:absolute;top:100%;left:0;right:0;color:var(--white);}
.canvas_menu_link:focus-visible{outline:3px solid var(--white);outline-offset:-3px;}
.canvas_menu_bottom{
  margin-top:auto;padding:26px var(--pad-global);flex:none;
  display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.3);color:var(--white);font-size:15px;
}
@media (max-width:767px){ .canvas_menu_bottom{padding:18px var(--pad-global);font-size:13px;} }
.canvas_menu_bottom .hero_social_links .eyebrow{color:var(--white);}
.canvas_menu_bottom a:hover{color:var(--accent-on-dark);}

/* =====================================================================
   BUTTON — reference build: 2px ring + 3 white line-masks that fly
   apart on hover, arrow line, and a two-layer text swap
   ===================================================================== */
.button_primary{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;border:2px solid var(--black-secondary);border-radius:var(--r-999);
  background-color:transparent;color:var(--black-secondary);
  font-size:15px;font-weight:600;letter-spacing:.08em;overflow:visible;
  --mask:var(--white);
}
.button_line_mask_wrapper{pointer-events:none;position:absolute;inset:0;}
.button_line_mask{position:absolute;background-color:var(--mask);width:25px;height:5px;top:-3.5px;left:40px;transition:transform .5s cubic-bezier(.36,0,.66,-.56);}
.button_line_mask._2{width:25px;top:auto;left:auto;right:65px;bottom:-3.5px;}
.button_line_mask._3{width:10px;top:auto;left:auto;right:45px;bottom:-3.5px;}
.button_primary:hover .button_line_mask{transform:translateX(-26px) scaleX(0);}
.button_primary:hover .button_line_mask._2{transform:translateX(26px) scaleX(0);}
.button_primary:hover .button_line_mask._3{transform:translateX(34px) scaleX(0);}
.button_line{border-radius:var(--r-999);background-color:currentColor;width:25px;height:2px;transform-origin:100% 50%;transition:transform .45s var(--ease-out);flex:none;}
.button_primary:hover .button_line{transform:scaleX(.45);}
.button_text_wrapper{position:relative;overflow:hidden;display:block;height:1.15em;}
.button_text{display:block;transition:transform .45s var(--ease-out);}
.button_text.second_text{position:absolute;inset:100% 0 auto;color:var(--vivid-orange);}
.button_primary:hover .button_text{transform:translateY(-100%);}
/* variants — the mask must match whatever sits behind the ring */
.button_primary.on-offwhite{--mask:var(--off-white);}
.button_primary.on-linen{--mask:var(--linen);}
.button_primary.on-black{--mask:var(--black-primary);border-color:var(--white);color:var(--white);}
.button_primary.on-black .button_text.second_text{color:var(--accent-on-dark);}
.button_primary.on-card{--mask:transparent;}
.button_primary.on-card .button_line_mask{display:none;}

.link-primary{position:relative;display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom;}
.link-primary span{display:block;transition:transform .4s var(--ease-out);}
.link-primary span+span{color:var(--vivid-orange);}
.link-primary:hover span{transform:translateY(-100%);}

.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--gray);}
.eyebrow::before{content:"";width:34px;height:1px;background-color:var(--vivid-orange);}

.section_header{margin-bottom:var(--sec-pad);position:relative;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.section_header h2{font-size:clamp(2.75rem,1.4757rem + 5.4369vw,8rem);line-height:.88;letter-spacing:-.02em;}

/* ============================ HERO ============================ */
/* hero: full-bleed banner image behind everything (reference: .hero_image
   position:absolute; inset:0; background-position:50% 100%; cover) */
/* reference rhythm: 170px in, a 230px gap under the wordmark, 250px under
   the copy row, 100px out — that stacking is what makes the banner tall */
.hero_section{position:relative;padding-top:170px;padding-bottom:var(--sec-pad);overflow:clip;}
@media (max-width:1200px){ .hero_section{padding-top:130px;} }
@media (max-width:767px){ .hero_section{padding-top:110px;padding-bottom:64px;} }
/* Layered so each element owns exactly one transform and nothing collides:
   .hero_image clips  →  _par takes scroll + pointer  →  _kb runs the drift. */
.hero_image{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero_image_par{position:absolute;inset:-10%;will-change:transform;}
.hero_image_kb{
  position:absolute;inset:0;
  background-position:50% 100%;background-repeat:no-repeat;background-size:cover;
  /* the shot runs violet→blue; easing the saturation stops the magenta end
     from dragging the #003CFF logo mark toward purple */
  filter:saturate(.82);
  animation:heroDrift 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1.02) translate3d(0,0,0);}
  to{transform:scale(1.09) translate3d(-1.4%,-1.2%,0);}
}
.hero_veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* navy-tinted veil, not neutral black — keeps the whole banner in the
     brand's hue family and lifts the white lockup off the background */
  background:
    linear-gradient(180deg,rgba(0,12,58,.58) 0%,rgba(0,12,58,.22) 38%,rgba(0,10,50,.38) 74%,rgba(0,8,40,.80) 100%),
    linear-gradient(90deg,rgba(0,32,140,.30) 0%,rgba(0,32,140,0) 55%);
}
/* slow sheen crossing the banner so the blue never sits completely still */
.hero_sheen{
  position:absolute;inset:-30% -60%;z-index:2;pointer-events:none;
  background:linear-gradient(72deg,rgba(255,255,255,0) 38%,rgba(140,180,255,.14) 50%,rgba(255,255,255,0) 62%);
  animation:heroSheen 14s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes heroSheen{
  0%,100%{transform:translate3d(-28%,0,0);opacity:0;}
  45%{opacity:1;}
  60%{transform:translate3d(28%,0,0);opacity:0;}
}
@media (max-width:767px){ .hero_image_kb{background-position:45% 100%;} }
.hero_section > .padding_global{position:relative;z-index:2;}

/* scroll cue */
.hero_cue{
  position:absolute;left:50%;bottom:26px;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.75);font-size:11px;font-weight:600;letter-spacing:.24em;
}
.hero_cue_rail{
  width:1px;height:52px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;
}
.hero_cue_rail::after{
  content:"";position:absolute;left:0;right:0;top:0;height:40%;
  background:var(--white);animation:cueRun 2.2s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-100%);}
  60%,100%{transform:translateY(260%);}
}
@media (max-width:767px){ .hero_cue{display:none;} }

.hero_top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:clamp(90px,14vw,250px);}
@media (max-width:991px){ .hero_top{margin-bottom:72px;} }
/* subtitle is display type on the reference — Bebas at 6vw, not body copy */
.hero_sub_title{
  font-family:"Bebas Neue",Arial,sans-serif;font-weight:400;
  font-size:clamp(2.2rem,5.6vw,7rem);line-height:1;letter-spacing:-.01em;
  max-width:13ch;color:var(--white);text-shadow:0 2px 26px rgba(0,0,0,.35);
}
@media (max-width:767px){ .hero_sub_title{font-size:clamp(2rem,8vw,3rem);max-width:none;} }
.hero_sub_title em{font-style:normal;color:var(--accent-on-dark);}
.hero_info{max-width:450px;font-size:18px;line-height:1.4;font-weight:500;color:var(--white);text-shadow:0 2px 18px rgba(0,0,0,.45);}
@media (max-width:1200px){ .hero_info{max-width:300px;} }
@media (max-width:767px){ .hero_info{font-size:16px;max-width:none;} }
/* The wordmark IS the banner. Letters are justified edge to edge and sit on
   a horizontal rule. Tracking is 0, not negative: negative tracking pulls the
   final O's advance inside the box and overflow:hidden then shaves its right
   side, which is what made that letter look wrong. */
/* clip-path masks top and bottom for the letter reveal while leaving the
   horizontal axis open — overflow:hidden was shaving the final L */
.hero_heading{
  width:100%;
  clip-path:inset(0 -12% -6% -12%);
  margin-bottom:clamp(80px,13vw,230px);
}
@media (max-width:991px){ .hero_heading{margin-bottom:64px;} }
/* "PLEXURO DIGITAL" measures about 5.16em in Bebas. At 17.5vw that exceeded
   the container and space-between pushed the last letter past the edge, so
   the size is set to leave headroom and the gaps do the justifying. */
.hero_heading_inner{
  display:flex;justify-content:space-between;align-items:flex-end;width:100%;
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2rem,15.2vw,14.5rem);line-height:.86;letter-spacing:0;
  color:var(--white);
}
.hero_heading .ch{display:inline-block;will-change:transform;}
/* word gap — space-between alone would space it like any other letter */
.hero_heading .ch_space{flex:0 0 .3em;}
.hero_proof_area{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.hero_social_links{display:flex;align-items:center;gap:14px;}
.hero_social_links .eyebrow{color:var(--white);}
.hero_social_links .eyebrow::before{background-color:var(--accent-on-dark);}
.hero_social_line{width:70px;height:1px;background-color:var(--white-30);}
.hero_social_icon_link{width:44px;height:44px;border-radius:var(--r-999);border:1px solid var(--white-30);display:flex;align-items:center;justify-content:center;color:var(--white);transition:background-color .35s cubic-bezier(.39,.58,.57,1),color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.39,.58,.57,1);}
.hero_social_icon_link:hover{background-color:var(--white);color:var(--black-secondary);border-color:var(--white);transform:translateY(-4px);}
.hero_stat{display:flex;align-items:center;gap:18px;}
.hero_stat_icon{width:74px;height:74px;border-radius:var(--r-999);flex:none;background-color:var(--vivid-red);color:var(--white);display:flex;align-items:center;justify-content:center;}
.hero_stat_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.6rem,5vw,4.4rem);line-height:.85;color:var(--white);}
.hero_stat_info{font-size:14px;letter-spacing:.06em;max-width:20ch;color:rgba(255,255,255,.85);}

/* ---- REELS: self-contained looping story cards ---- */
.reels_section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.hero_reels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:900px){ .hero_reels{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .hero_reels{grid-template-columns:1fr;max-width:320px;margin-inline:auto;} }
.reel_card{position:relative;display:block;overflow:hidden;border-radius:var(--r-md);aspect-ratio:9/16;background-color:var(--black-secondary);transition:transform .5s var(--ease-out);}
.reel_card:hover{transform:translateY(-6px);}
.reel_play_btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:4;
  width:54px;height:54px;border-radius:50%;
  background-color:rgba(255,255,255,.92);color:var(--black-secondary);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s ease,transform .5s var(--ease-out);
}
.reel_card:hover .reel_play_btn{opacity:1;transform:translate(-50%,-50%) scale(1);}
/* the YouTube player sits on top of the poster stack; a 16:9 frame is blown
   up and centre-cropped so a vertical reel fills the 9:16 card */
.reel_frame_yt{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .6s ease;}
.reel_card.yt-live .reel_frame_yt{opacity:1;}
.reel_card.yt-live .reel_bars{display:none;}
.reel_frame_yt iframe{position:absolute;top:50%;left:50%;width:calc(100% * 16 / 9 * 1.36);height:136%;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.reel_stage{position:absolute;inset:0;}
.reel_slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
.reel_slide.is-on{opacity:1;}
.reel_slide img{width:100%;height:100%;object-fit:cover;animation:reelZoom 7s ease-in-out infinite alternate;}
@keyframes reelZoom{from{transform:scale(1.02);}to{transform:scale(1.14);}}
.reel_shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 58%,rgba(0,0,0,.62) 100%);}
.reel_bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3;}
.reel_bars i{flex:1;height:3px;border-radius:2px;background-color:rgba(255,255,255,.34);overflow:hidden;}
.reel_bars i b{display:block;height:100%;width:0%;background-color:var(--white);border-radius:2px;}
.reel_meta{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.reel_caption{color:var(--white);font-size:12px;font-weight:700;letter-spacing:.12em;text-shadow:0 1px 8px rgba(0,0,0,.6);}
.reel_badge{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-999);background-color:rgba(0,0,0,.5);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.14em;flex:none;}
.reel_badge i{width:6px;height:6px;border-radius:50%;background-color:var(--accent-on-dark);animation:pulseDot 1.6s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.65);}}


/* =====================================================================
   ABOUT — horizontal track (x → -84%, scrub .8)
   ===================================================================== */
.about_section{padding-bottom:0;overflow:clip;}
.about_header_area{display:flex;justify-content:space-between;align-items:center;gap:60px;flex-wrap:wrap;margin-bottom:120px;}
@media (max-width:991px){ .about_header_area{margin-bottom:70px;} }
/* caption lockup — reference: 28px filled circle + 24px semibold text,
   with only the "(the)" italic. Sized as a caption, never as display type. */
.section_caption{display:flex;align-items:center;gap:10px;}
.section_caption_circle{aspect-ratio:1;width:28px;border-radius:100%;background-color:var(--black-secondary);flex:none;}
@media (max-width:767px){ .section_caption_circle{width:20px;} }
.section_caption_text{color:var(--black-secondary);font-size:24px;line-height:1;font-weight:600;letter-spacing:.02em;}
@media (max-width:767px){ .section_caption_text{font-size:20px;} }
.text-italic{font-style:italic;color:var(--accent);}

.about_section_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(3.5rem,11vw,12rem);line-height:.82;letter-spacing:-.03em;color:var(--black-secondary);}
/* Bebas Neue is caps-only — "the" renders as "THE" there whatever
   text-transform says, and its italic is a synthesised skew. Setting the
   aside in DM Sans gives real lowercase and a true italic. */
.about_section_title i{
  font-family:"DM Sans",Arial,sans-serif;
  font-style:italic;
  font-weight:500;
  text-transform:lowercase;
  font-size:.3em;
  letter-spacing:-.01em;
  color:var(--accent);
  vertical-align:.34em;
  margin-left:.16em;
}
.about_left_area{max-width:46ch;display:flex;flex-direction:column;gap:26px;align-items:flex-start;}
.about_statement{font-size:clamp(1.25rem,1.6vw,1.75rem);line-height:1.3;color:var(--black-secondary);font-weight:500;}
.about_statement .word{display:inline-block;}

.about_track{height:340vh;position:relative;}
/* padding-block keeps the card clear of the viewport edges; without it the
   image ran under the progress rail and got cut on shorter screens */
.about_sticky{position:sticky;top:0;height:100vh;width:100%;display:flex;align-items:center;overflow:hidden;padding-block:80px 96px;}
@media (max-height:820px){ .about_sticky{padding-block:60px 76px;} }
.year_wrapper{display:flex;align-items:center;gap:clamp(48px,7vw,130px);flex:none;padding-inline:var(--pad-global);will-change:transform;height:100%;}
.year_item{display:flex;flex-direction:column;justify-content:center;width:min(620px,74vw);flex:none;position:relative;max-height:100%;}
@media (max-width:991px){ .year_item{width:80vw;} }

/* badge sits ABOVE the number on its own line — overlapping it buried the
   percent sign, so it stays clear of the figure */
.year_badge_row{display:flex;margin-bottom:14px;padding-left:6px;}
.year_text_wrapper{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);margin-bottom:22px;}
.year_text{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(3.5rem,9vw,10rem);line-height:.8;letter-spacing:-.04em;color:var(--black-secondary);flex:none;}
.year_text sup{font-size:.3em;vertical-align:super;color:var(--vivid-orange);line-height:1;}
.year_text_line{background-color:var(--black-primary);height:8px;flex:1;min-width:40px;max-width:120px;}
@media (max-width:767px){ .year_text_line{height:5px;} }
.year_divider{background-color:var(--black-primary);width:100%;height:1px;}
.year_info_text{margin-top:16px;margin-bottom:20px;color:var(--black-secondary);text-transform:none;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:52ch;}
/* fixed height + cover keeps every crop consistent and never squashes */
.year_image{border-radius:var(--r-lg);width:100%;overflow:hidden;height:clamp(110px,17vh,210px);flex:none;background-color:var(--off-white);}
.year_image img{width:100%;height:100%;object-fit:cover;}
.about_progress{position:absolute;left:var(--pad-global);right:var(--pad-global);bottom:34px;height:2px;background-color:var(--black-secondary-30);}
.about_progress i{display:block;height:100%;width:0%;background-color:var(--vivid-orange);}

/* ============================ STEPS (#F0F0F0, radius 60) ============================ */
/* ---- STEPS, reference build: centred header, dashed connector line with
   pentagon markers, white cards, gradient title swap, chevron button ---- */
.step_section{background-color:var(--off-white);border-radius:var(--r-xl);padding-top:var(--sec-pad);padding-bottom:calc(var(--sec-pad) + 40px);margin-inline:var(--pad-global);}
.step_section_head{text-align:center;max-width:900px;margin:0 auto 80px;}
.step_section_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,1.2112rem + 3.3657vw,5.25rem);line-height:1;letter-spacing:-.01em;color:var(--black-secondary);margin-bottom:12px;}
.step_section_info{line-height:1.4;text-transform:none;font-size:18px;color:var(--gray);}
.steps_wrapper{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
@media (max-width:991px){ .steps_wrapper{gap:16px;} }
@media (max-width:820px){ .steps_wrapper{grid-template-columns:1fr;gap:52px;} }
.steps_line{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:79%;max-width:1300px;border-top:2px dashed #D9D9D9;}
@media (max-width:820px){ .steps_line{display:none;} }
.step_item{position:relative;display:flex;flex-direction:column;align-items:center;}
.step_line_icon{margin-bottom:24px;color:var(--black-primary);display:inline-flex;position:relative;z-index:2;}
.step_item_inner{position:relative;z-index:2;padding:40px 24px 64px;border-radius:var(--r-lg);text-align:center;background-color:var(--white);width:100%;}
@media (max-width:991px){ .step_item_inner{padding-left:20px;padding-right:20px;} }
.step_count{margin-bottom:20px;font-family:"Bebas Neue",Arial,sans-serif;color:var(--black-primary);font-size:20px;line-height:1;letter-spacing:.04em;}
.step_title_wrapper{position:relative;overflow:hidden;}
.step_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(1.75rem,1.5376rem + .9061vw,2.625rem);line-height:1;letter-spacing:-.01em;color:var(--black-secondary);transition:transform .5s var(--ease-out);}
.step_title.is_gradiant{position:absolute;inset:100% 0 auto;background-image:linear-gradient(180deg,var(--navy),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.step_item:hover .step_title{transform:translateY(-100%);}
/* reference behaviour: the copy is collapsed until the card is engaged */
.step_item_info_wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out);}
.step_item_info_wrap > *{overflow:hidden;min-height:0;}
.step_item:hover .step_item_info_wrap,
.step_item:focus-within .step_item_info_wrap,
.step_item.is-open .step_item_info_wrap{grid-template-rows:1fr;}
@media (max-width:820px){ .step_item_info_wrap{grid-template-rows:1fr;} }
.step_info{margin-top:20px;font-size:16px;line-height:1.4;color:var(--gray);text-transform:none;}
.step_icon{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);width:60px;aspect-ratio:1;border-radius:50%;background-color:#D9D9D9;display:flex;align-items:center;justify-content:center;color:var(--black-primary);z-index:3;transition:background-color .4s ease,transform .5s var(--ease-out);}
.step_item:hover .step_icon{background-color:var(--vivid-orange);transform:translateX(-50%) rotate(180deg);}

/* =====================================================================
   WORK — CSS position:sticky card stack, inside the container so the
   cards keep space on BOTH sides (reference: max-width 1480px)
   ===================================================================== */
/* =====================================================================
   SCROLL-DRIVEN STACKED CARD DECK
   .track is ~2.5x the card height (the scroll distance);
   .stack is sticky at top:48px with perspective:1500px;
   cards sit absolutely on top of each other, z-index counting down.
   All transforms are owned by GSAP — CSS sets none of them.
   ===================================================================== */
.work_section{padding-bottom:var(--sec-pad);}
/* Ariyana's own geometry: 300vh track, wrapper sticky at top:10% with
   perspective:1500px, first card in flow (it sets the height) and the rest
   absolutely stacked on it at inset:0 0 auto, z-index counting down. */
/* The wrapper carries an explicit height that fits inside the 90vh left by
   top:10%. Letting the first card size it meant a tall card ran past the
   bottom of the viewport and got cut. */
.work_items_track{position:relative;height:300vh;}
.work_items_wrapper{position:sticky;top:10%;perspective:1500px;width:100%;height:min(78vh,640px);}
.work_card_slot{
  position:absolute;inset:0;
  transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
}
.work_item{height:100%;}
.work_item{
  border-radius:var(--r-lg);overflow:clip;max-width:1480px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background-color:var(--vivid-orange);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.5);
}
.work_left_content{padding:clamp(32px,4vw,60px) clamp(26px,3.4vw,56px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}

.work_tagline{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--black-secondary);opacity:.68;margin-bottom:16px;}
.work_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,1.2112rem + 3.3657vw,5.25rem);line-height:1;color:var(--black-secondary);max-width:18ch;}
.work_description_text{margin-top:14px;margin-bottom:clamp(20px,3vh,36px);color:var(--black-secondary);text-transform:none;max-width:520px;font-size:16px;line-height:1.6;}
.work_right_content{padding:clamp(20px,2.6vw,34px);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.work_image_visual{aspect-ratio:1;border-radius:var(--r-sm);max-width:min(440px,100%);max-height:100%;width:auto;height:100%;overflow:hidden;}
.work_image_visual img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);}
.work_item:hover .work_image_visual img{transform:scale(1.05);}
/* the two saturated cards carry white type — black would fail on them */
.work_item.is-dark .work_title,
.work_item.is-dark .work_description_text{color:var(--white);}
.work_item.is-dark .work_tagline{color:var(--white);opacity:.75;}
.work_item.is-dark .button_primary{border-color:var(--white);color:var(--white);}
.work_item.is-dark .button_primary::before{background-color:var(--white);}
.work_item.is-dark .button_primary .button_text.second_text{color:var(--accent);}
.work_item.is-dark .button_primary:hover{color:var(--black-secondary);}
.work_item.is-dark .button_line{background-color:var(--white);}
/* under 768px the sticky + 3D combo is dropped entirely; cards become a
   plain vertical list (the reference turns the effect off here too) */
@media (max-width:767px){
  .work_items_track{height:auto !important;}
  .work_items_wrapper{position:relative;top:0;height:auto;perspective:none;display:flex;flex-direction:column;gap:20px;}
  .work_card_slot{position:relative !important;inset:auto;transform:none !important;opacity:1 !important;will-change:auto;}
  .work_item{grid-template-columns:1fr;height:auto !important;}
  .work_left_content{padding:40px 26px;}
  .work_right_content{padding:24px;}
}
@media (min-width:768px) and (max-width:991px){
  .work_item{grid-template-columns:1fr;}
  .work_left_content{padding:32px 26px;}
  .work_right_content{padding:20px;}
  .work_image_visual{max-width:230px;}
}

/* ============================ BRANDS (BLACK) ============================ */
.brands_section{background-color:var(--black-primary);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);overflow:clip;}
.ticker{overflow:hidden;display:flex;width:100%;}
.ticker_row{display:flex;flex:none;min-width:100%;will-change:transform;}
.brands_ticker_text{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.6rem,7vw,7rem);line-height:1;color:var(--white);padding-inline:26px;white-space:nowrap;}
.brands_ticker_text.is-out{color:transparent;-webkit-text-stroke:1.5px var(--white);}
.ticker_icon{display:flex;align-items:center;color:var(--accent-on-dark);font-size:clamp(1.4rem,3vw,2.6rem);}
.brands_testimony_area{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center;margin-top:70px;padding-top:56px;border-top:1px solid var(--white-30);}
@media (max-width:900px){ .brands_testimony_area{grid-template-columns:1fr;gap:40px;} }
.brands_testimony_text{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(1.9rem,3.6vw,3.4rem);line-height:1.02;color:var(--white);}
.brands_testimony_text i{font-style:normal;color:var(--yellow);}
.brands_testimony_author_content{display:flex;align-items:center;gap:18px;margin-top:30px;}
/* white disc so the mark keeps its exact #003CFF against the black band */
.bta_mark{width:58px;height:58px;border-radius:50%;flex:none;background-color:var(--white);display:flex;align-items:center;justify-content:center;padding:13px;}
.brands_testimony_author_name{color:var(--white);font-size:16px;font-weight:600;letter-spacing:.06em;}
.brands_testimony_author_designation{color:var(--white-30);font-size:13px;letter-spacing:.08em;}
.brands_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:480px){ .brands_grid{grid-template-columns:repeat(2,1fr);} }
.brand_logo_wrapper{aspect-ratio:3/2;border-radius:var(--r-md);border:1px solid var(--white-30);background-color:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;padding:14px;transition:background-color .8s cubic-bezier(.34,1.56,.64,1),border-color .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1);}
.brand_logo_wrapper:hover{background-color:var(--white);border-color:var(--white);transform:translateY(-6px);}
.brand_logo{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1) brightness(1.9);opacity:.85;transition:filter .5s ease,opacity .5s ease;}
.brand_logo_wrapper:hover .brand_logo{filter:none;opacity:1;}

/* =====================================================================
   SERVICES — linen ground, CSS position:sticky panels at top:48px
   ===================================================================== */
.service_section{background-color:var(--off-white);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
/* the panel ground has to match the section — these stack as they stick */
.service_item{position:sticky;top:48px;padding-top:56px;padding-bottom:56px;border-top:1px solid rgba(10,10,10,.12);background-color:var(--off-white);}
@media (max-width:991px){ .service_item{padding-top:32px;padding-bottom:32px;} }
.service_item_inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:40px;}
.service_item_content{flex:330px;}
@media (max-width:991px){ .service_item_content{flex-basis:290px;} }
.service_item_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,1.2112rem + 3.3657vw,5.25rem);line-height:1;color:var(--black-secondary);margin-bottom:24px;}
.service_item_tags_subtitle{margin-bottom:16px;color:#003CFF;font-weight:700;font-size:16px;}
.service_item_tags_wrapper{display:flex;flex-wrap:wrap;gap:12px 8px;max-width:610px;}
/* white pills read 1.14:1 against #F0F0F0 — the hairline is what makes
   them visible; on hover the fill carries the contrast instead */
.service_item_tag{
  padding:8px 20px;background-color:var(--white);border-radius:var(--r-999);
  border:1px solid rgba(10,10,10,.12);
  transition:background-color .4s cubic-bezier(.39,.58,.57,1),border-color .4s ease,transform .4s cubic-bezier(.39,.58,.57,1);
}
.service_item_tag:hover,.service_item_tag:active{background-color:#003CFF;border-color:transparent;transform:translateY(-3px);}
.service_item_tag:hover .service_item_tag_text,.service_item_tag:active .service_item_tag_text{color:var(--white);}
.service_item_tag_text{color:var(--black-secondary);font-size:16px;font-weight:500;transition:color .3s ease;}
@media (max-width:767px){ .service_item_tag{padding:4px 12px;} .service_item_tag_text{font-size:14px;} }
.service_item_video_wrap{aspect-ratio:4/3;border-radius:var(--r-lg);flex:200px;max-width:600px;overflow:hidden;background-color:var(--black-secondary);}
@media (max-width:991px){ .service_item_video_wrap{flex-basis:320px;max-width:none;} }
.service_item_video{position:relative;width:100%;height:100%;overflow:hidden;}
.service_item_video img{width:100%;height:100%;object-fit:cover;animation:svcDrift 16s ease-in-out infinite alternate;}
@keyframes svcDrift{from{transform:scale(1.05) translate3d(0,0,0);}to{transform:scale(1.16) translate3d(-2%,-2%,0);}}

/* ============================ SHOWREEL ============================ */
.showreel_section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.reel_frame{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:clamp(360px,52vw,640px);background-color:var(--black-secondary);display:flex;align-items:center;justify-content:center;}
.reel_bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);opacity:.34;transition:opacity .5s ease;}
.reel_bg img{width:100%;height:100%;object-fit:cover;}
.reel_veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.78));transition:background .5s ease;}
.reel_center{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;}
.reel_word{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(3.4rem,11vw,10rem);line-height:.82;color:var(--white);}
.reel_word i{font-style:normal;color:transparent;-webkit-text-stroke:1.6px var(--white);}
.reel_play{width:clamp(96px,12vw,150px);height:clamp(96px,12vw,150px);border-radius:50%;background-color:var(--vivid-orange);color:var(--black-secondary);display:flex;align-items:center;justify-content:center;transition:transform .8s cubic-bezier(.34,1.56,.64,1),background-color .3s ease;}
.reel_play:hover{transform:scale(1.09);background-color:var(--yellow);}
.reel_proof{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px clamp(20px,4vw,48px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.reel_proof_num{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.9;color:var(--white);}
.reel_proof_txt{color:var(--white-30);font-size:13px;letter-spacing:.1em;max-width:26ch;}

/* ============================ BENEFITS ============================ */
.benefits_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px;}
@media (max-width:980px){ .benefits_grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .benefits_grid{grid-template-columns:1fr;} }
.benefit_card{border-radius:var(--r-lg);padding:30px 26px 32px;background-color:var(--off-white);display:flex;flex-direction:column;gap:14px;transition:transform .8s cubic-bezier(.34,1.56,.64,1),background-color .6s ease;}
.benefit_card:hover{transform:translateY(-8px);background-color:var(--black-secondary);}
.benefit_card:hover .benefit_title{color:var(--white);}
.benefit_card:hover .benefit_text{color:rgba(255,255,255,.7);}
.benefit_card:hover .benefit_num{color:var(--accent-on-dark);}
.benefit_num{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.6rem;color:var(--vivid-orange);line-height:1;transition:color .4s ease;}
.benefit_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.55rem;line-height:1;color:var(--black-secondary);transition:color .4s ease;}
.benefit_text{font-size:15px;line-height:1.6;color:var(--gray);text-transform:none;transition:color .4s ease;}

/* ============ CLIENTS — radial ring (reference: .leader_section) ============
   Ten cards hang off spokes from the circle centre, each rotated 36° from
   the last, on a 1px ring. The whole ring turns as the section scrolls. */
.leader_section{
  position:relative;min-height:150vh;overflow:clip;
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:991px){ .leader_section{min-height:118vh;} }
/* Ten cards of width W need a radius of at least 10W / 2π ≈ 1.6W or they
   collide. Diameter is capped by height as well as width so the whole ring
   stays on screen; the card size below is derived to keep that ratio. */
/* Deliberately larger than the viewport so the top and bottom cards bleed
   off the edges, as they do on the reference. Three nested layers keep the
   transforms apart: wrapper positions, scale layer handles hover, spin
   layer handles rotation — one transform each, so none can clobber another. */
.leader_circle_wrapper{
  position:absolute;top:50%;left:50%;
  width:min(1000px,84vw);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%);
}
.leader_ring_scale{position:absolute;inset:0;will-change:transform;}
.leader_ring_spin{position:absolute;inset:0;will-change:transform;}
/* Card width tracks the ring diameter (both caps mirror the wrapper) so the
   spacing holds at every width. The limit is centre-to-centre distance,
   2·orbit·sin(18°) ≈ 0.618·orbit — at 23.8% that fell below the card width
   and they overlapped. 21.9% leaves a ~25px gap. */
/* Each card hangs off a spoke pinned to the circle's centre. transform-origin
   at the spoke's base means rotating it swings the card around the ring and
   tilts it to face outward — GSAP sets the rotation.

   Sizing rule: neighbouring cards are rotated 36° apart, so their CORNERS
   meet before their edges do. Clearance needs centre-distance > ~1.25 x card
   (the rounded-square span), not > card width. That works out to a card no
   wider than ~19.8% of the ring diameter; 19% is used here (190/1000 and
   16/84 are the same ratio, so it holds at every width). */
.leader_circle_item{
  position:absolute;left:50%;bottom:50%;
  width:min(190px,16vw);height:50%;
  transform-origin:50% 100%;
  pointer-events:none;
  will-change:transform;
}
/* the entrance tween targets the image, so it can never overwrite the
   spoke rotation sitting on the item itself */
.leader_circle_image{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:clamp(12px,1.8vw,30px);
  display:block;box-shadow:0 18px 40px -28px rgba(10,10,10,.55);
  will-change:transform,opacity;
}
/* circular hit area filling the ring's clear middle — the text block alone
   was too small a target for the hover to feel reliable */
.leader_center{
  position:relative;z-index:10;
  width:min(480px,40vw);aspect-ratio:1;border-radius:50%;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
}
.leader_section_content{
  position:relative;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  max-width:min(310px,52vw);
}
/* No scrim behind the type. The ring is sized so the cards clear the text
   on their own, and any veil here washes the cards out. */
.leader_section_badge{
  position:absolute;top:-58px;left:6%;z-index:-1;
  transform:rotate(-15deg);
  background-color:var(--tint-2);color:#000;
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.05rem,.6rem + 1vw,1.7rem);line-height:1;letter-spacing:-.01em;
  padding:12px 20px;white-space:nowrap;
}
@media (max-width:991px){ .leader_section_badge{padding:9px 14px;top:-44px;left:2%;} }
@media (max-width:640px){ .leader_section_badge{padding:7px 11px;top:-34px;left:0;transform:rotate(-7deg);} }
/* sized to sit inside the ring's clear centre rather than run under the cards */
.leader_section_title{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2rem,4.4vw,4.6rem);line-height:.92;letter-spacing:-.02em;
  color:var(--black-secondary);max-width:10ch;margin-bottom:24px;
}
.text_gradiant{
  background-image:linear-gradient(180deg,var(--navy),var(--accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ============================ INQUIRY FORM ============================ */
/* keeps its side gutters like every other panel; rounded at the top only so
   no curved bottom corners are left floating above the marquee */
.inquiry_section{
  background-color:var(--off-white);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-inline:var(--pad-global);
  padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);
}
.inquiry_wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,90px);align-items:start;}
@media (max-width:940px){ .inquiry_wrap{grid-template-columns:1fr;gap:44px;} }
.inquiry_intro{display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
.inquiry_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,1.2112rem + 3.3657vw,4.5rem);line-height:1;letter-spacing:-.01em;color:var(--black-secondary);max-width:14ch;}
.inquiry_note{font-size:17px;line-height:1.6;color:var(--gray);text-transform:none;max-width:40ch;}
.inquiry_contact{margin-top:6px;display:flex;flex-direction:column;gap:12px;font-size:17px;color:var(--black-secondary);}
.inquiry_address{font-size:14px;line-height:1.6;color:var(--gray);max-width:30ch;}

.inquiry_form{display:flex;flex-direction:column;gap:22px;}
.field_row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:600px){ .field_row{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:9px;min-width:0;}
.field_label{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--black-secondary);}
.field_input{
  width:100%;padding:15px 18px;border-radius:var(--r-sm);
  background-color:var(--white);border:1px solid rgba(18,18,18,.16);
  color:var(--black-secondary);font-family:inherit;font-size:15px;
  text-transform:none;transition:border-color .3s ease,box-shadow .3s ease;
}
.field_input::placeholder{color:#9A9A9A;}
.field_input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,60,255,.16);}
.field_input.has_error{border-color:var(--vivid-red);}
.field_textarea{resize:vertical;min-height:120px;line-height:1.55;}
.field_error{font-size:12.5px;letter-spacing:.04em;color:var(--navy);text-transform:none;min-height:1em;}

.chip_set{display:flex;flex-wrap:wrap;gap:9px;}
.chip{position:relative;cursor:pointer;}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip span{
  display:inline-block;padding:9px 18px;border-radius:var(--r-999);
  background-color:var(--white);border:1px solid rgba(18,18,18,.16);
  font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--black-secondary);
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.chip:hover span{transform:translateY(-2px);border-color:var(--accent);}
.chip input:checked + span{background-color:var(--accent);border-color:var(--accent);color:var(--white);}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px;}

.inquiry_submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px;}
.form_status{font-size:13.5px;letter-spacing:.06em;text-transform:none;color:var(--gray);}
.form_status.is_ok{color:var(--accent);font-weight:600;}
.form_status.is_err{color:var(--navy);font-weight:600;}

/* ============================ CTA ============================ */
.cta_section{padding-block:0;background-color:var(--black-primary);}
.cta_marquee{overflow:hidden;display:flex;background-color:var(--vivid-red);padding-block:24px;}
.cta_marquee_text{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.4rem,6vw,5.5rem);line-height:1;color:var(--white);padding-inline:28px;white-space:nowrap;}
.cta_marquee_star{display:flex;align-items:center;color:var(--yellow);font-size:clamp(1.4rem,3vw,2.4rem);}
.cta_band{padding-block:var(--sec-pad);display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;}
.cta_band_title{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2.6rem,8vw,7rem);line-height:.85;color:var(--white);max-width:16ch;}
.cta_band_title i{font-style:normal;color:var(--accent-on-dark);}

/* ============================ FOOTER ============================ */
.footer{position:relative;background-color:var(--black-primary);padding-top:var(--sec-pad);padding-bottom:40px;overflow:clip;}
/* slow brand-blue aurora drifting behind the footer, same idea as the hero's
   ambient layer — keeps the black from reading as a dead slab */
.footer::before{
  content:"";position:absolute;left:50%;top:34%;
  width:140%;aspect-ratio:2/1;transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(0,60,255,.30),rgba(0,60,255,0) 70%),
    radial-gradient(closest-side,rgba(91,140,255,.20),rgba(91,140,255,0) 70%);
  background-size:62% 100%,48% 84%;
  background-position:18% 40%,78% 62%;
  background-repeat:no-repeat;
  animation:footerAurora 26s ease-in-out infinite alternate;
  pointer-events:none;z-index:0;will-change:background-position;
}
@keyframes footerAurora{
  from{background-position:14% 34%,80% 66%;}
  to{background-position:34% 58%,60% 38%;}
}
.footer > .padding_global{position:relative;z-index:1;}
.footer_logo{display:block;margin-bottom:56px;line-height:0;}
.footer_logo img{height:44px;width:auto;}
.footer_top_wrapper{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:44px;}
@media (max-width:1000px){ .footer_top_wrapper{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .footer_top_wrapper{grid-template-columns:1fr;} }
.footer_link_col_heading{font-size:12px;letter-spacing:.2em;color:var(--white-30);margin-bottom:20px;}
.footer_address_text{color:var(--white);font-size:15px;line-height:1.6;max-width:28ch;}
.footer_contact_link_wrapper{display:flex;flex-direction:column;gap:8px;margin-top:20px;color:var(--white);font-size:17px;}
.footer_link_wrapper{display:flex;flex-direction:column;gap:12px;}
.footer_link_widget{display:block;height:1.3em;overflow:hidden;color:var(--white);font-size:15px;letter-spacing:.05em;}
.footer_link_widget p{transition:transform .4s var(--ease-out);}
.footer_link_widget .secondary-text{color:var(--accent-on-dark);}
.footer_link_widget:hover p{transform:translateY(-100%);}
.footer_cta{margin-top:60px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end;}
.footer_cta_form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.footer_cta_input{min-width:min(320px,72vw);padding:16px 22px;border-radius:var(--r-999);background-color:transparent;border:1px solid var(--white-30);color:var(--white);font-family:inherit;font-size:14px;letter-spacing:.08em;text-transform:uppercase;}
.footer_cta_input::placeholder{color:var(--white-30);}
.footer_cta_input:focus{border-color:var(--accent-on-dark);outline:none;}
.footer_form_msg{color:var(--yellow);font-size:13px;letter-spacing:.1em;margin-top:12px;min-height:1.2em;}
.logo_big_text{position:relative;font-family:"Bebas Neue",Arial,sans-serif;font-size:24vw;line-height:.8;letter-spacing:-.04em;margin-top:56px;white-space:nowrap;text-align:center;
  /* a light band travels across the wordmark, echoing the hero sheen */
  color:transparent;
  background-image:linear-gradient(100deg,#FFFFFF 0%,#FFFFFF 38%,#8FB0FF 48%,#FFFFFF 58%,#FFFFFF 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:logoSheen 9s ease-in-out infinite;
  will-change:background-position;
}
@keyframes logoSheen{
  0%,100%{background-position:120% 0;}
  55%{background-position:-20% 0;}
}
.logo_big_text i{font-style:normal;color:var(--accent-on-dark);}
.footer_bottom_wrapper{border-top:1px solid var(--white-30);margin-top:26px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer_legal_text{color:var(--white-30);font-size:12px;letter-spacing:.12em;}
.footer_legal_text a:hover{color:var(--accent-on-dark);}
.to_top{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:var(--r-999);border:1px solid var(--white-30);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.16em;transition:border-color .35s ease,background-color .35s ease,color .35s ease;}
.to_top:hover{background-color:var(--vivid-orange);border-color:var(--vivid-orange);color:var(--black-secondary);}
.to_top_arrow{width:34px;height:34px;border-radius:50%;flex:none;background-color:var(--white);color:var(--black-secondary);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease-out),background-color .35s ease;}
.to_top:hover .to_top_arrow{transform:translateY(-4px);background-color:var(--black-secondary);color:var(--white);}

/* ============================ ANIM INITIAL STATES ============================ */
.js-on [data-hero-title],.js-on [data-hero-subtitle],.js-on [data-hero-text],
.js-on .hero_social_links,.js-on .hero_stat,.js-on .hero_reels,
.js-on [data-title-anim],.js-on [data-text-anim],.js-on [data-stagger] > *,
.js-on [data-floating-badge]{ visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .js-on [data-hero-title],.js-on [data-hero-subtitle],.js-on [data-hero-text],
  .js-on .hero_social_links,.js-on .hero_stat,.js-on .hero_reels,
  .js-on [data-title-anim],.js-on [data-text-anim],.js-on [data-stagger] > *,
  .js-on [data-floating-badge]{visibility:visible !important;opacity:1 !important;transform:none !important;}
  .ticker_row{animation:none !important;transform:none !important;}
  .about_track{height:auto !important;}
  .about_sticky{position:relative;height:auto;overflow-x:auto;}
  .year_wrapper{transform:none !important;}
  /* deck collapses to a plain vertical list */
  .work_items_track{height:auto !important;}
  .work_items_wrapper{position:relative;top:0;height:auto;perspective:none;display:flex;flex-direction:column;gap:20px;}
  .work_card_slot{position:relative !important;inset:auto;transform:none !important;will-change:auto;}
  .work_item{height:auto;}
  .reel_slide img,.service_item_video img{animation:none !important;}
  .hero_image_kb,.hero_sheen,.hero_cue_rail::after{animation:none !important;}
  .footer::before,.logo_big_text{animation:none !important;}
  .logo_big_text{color:var(--white);background-image:none;}
  .hero_sheen{display:none;}
  .hero_image_par{transform:none !important;}
  .leader_section{min-height:auto;padding-block:var(--sec-pad);}
  .leader_ring_spin{transform:none !important;}
  /* menu shows and hides instantly, no tweens */
  .menu_bars{transform:none !important;}
  .active-bg{transition:none !important;}
  .canvas_menu_link:hover .active-bg{transform:scaleY(1) !important;}
  *{transition-duration:.001ms !important;}
}

/* ---- Services dropdown in the top nav ------------------------------
   Hovering (or keyboard-focusing) Services reveals the six service
   destinations; the label itself stays a real link to services.html, so
   a click — and a tap on touch, where there is no hover — still goes to
   the page. .nav_cell is already position:relative. */
.nav_cell.has_sub{padding-bottom:6px;}
.nav_sub{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-8px);
  min-width:262px;padding:10px;z-index:60;
  display:flex;flex-direction:column;
  border-radius:var(--r-sm);
  background-color:rgba(12,12,16,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .28s var(--ease-out),visibility .28s;
}
.nav_cell.has_sub:hover .nav_sub,
.nav_cell.has_sub:focus-within .nav_sub,
.nav_cell.has_sub.is_open .nav_sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.nav_sub a{
  padding:11px 14px;border-radius:10px;
  font-size:12px;letter-spacing:.1em;font-weight:600;
  color:rgba(255,255,255,.74);white-space:nowrap;
  transition:background-color .25s ease,color .25s ease;
}
.nav_sub a:hover,.nav_sub a:focus-visible{background-color:var(--accent);color:var(--white);}
/* on a pale case banner the nav inverts, so the panel has to as well */
.nav.is_light .nav_sub{
  background-color:rgba(255,255,255,.92);
  border-color:rgba(18,18,18,.12);
}
.nav.is_light .nav_sub a{color:var(--ink-60);}
.nav.is_light .nav_sub a:hover{background-color:var(--accent);color:var(--white);}
/* the top nav is hidden below this width anyway; the slide-out menu
   already carries the same submenu there */
@media (max-width:991px){ .nav_sub{display:none;} }


/* ------------------------------------------------------------------
   These six names are used throughout the blocks below but were never
   defined in the base palette, so every rule referencing them was
   invalid at computed-value time and silently inherited instead — the
   blue accent on the stat figures and the hairline on the pills were
   both being dropped. Defined here against the existing ramp.
   ------------------------------------------------------------------ */
:root{
  --ink:#121212;               /* = --black-secondary */
  --ink-60:#383838;            /* = --gray            */
  --ink-30:rgba(18,18,18,.3);  /* = --black-secondary-30 */
  --hairline:rgba(18,18,18,.12);
  --paper:#FFFFFF;             /* = --white           */
  --brand-blue-light:#5B8CFF;  /* = --accent-on-dark  */
}
/* ============ SERVICE PAGE ============ */
.svc_hero{
  position:relative;overflow:clip;
  padding-top:190px;padding-bottom:clamp(48px,6vw,80px);
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(0,60,255,.16),rgba(0,60,255,0) 62%),
    radial-gradient(90% 80% at 8% 96%,rgba(91,140,255,.14),rgba(91,140,255,0) 60%),
    var(--white);
}
@media (max-width:991px){ .svc_hero{padding-top:150px;} }
@media (max-width:767px){ .svc_hero{padding-top:120px;} }
.svc_hero_grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);align-items:center;}
@media (max-width:900px){ .svc_hero_grid{grid-template-columns:1fr;} }

.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;letter-spacing:.12em;color:var(--ink-60);margin-bottom:26px;}
.breadcrumb a{color:var(--ink-60);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span[aria-current]{color:var(--ink);}
.breadcrumb i{font-style:normal;color:var(--ink-30);}

.svc_h1{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.5rem,1.4rem + 4.6vw,6.2rem);line-height:.94;letter-spacing:-.02em;
  color:var(--black-primary);max-width:17ch;margin-bottom:24px;
}
.svc_h1 i{font-style:normal;color:var(--accent);}
.svc_lede{font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.6;color:var(--gray);text-transform:none;max-width:52ch;margin-bottom:30px;}
.svc_cta_row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.svc_trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:26px;border-top:1px solid var(--hairline);}
.svc_trust_item{display:flex;flex-direction:column;gap:4px;}
.svc_trust_num{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--black-secondary);}
.svc_trust_num em{font-style:normal;color:var(--accent);}
.svc_trust_label{font-size:12px;letter-spacing:.12em;color:var(--ink-60);}

.svc_hero_visual{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background-color:var(--off-white);box-shadow:0 40px 80px -50px rgba(0,20,90,.5);}
.svc_hero_visual img{width:100%;height:100%;object-fit:cover;}

/* generic service section blocks */
.svc_section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.svc_section.is_tint{background-color:var(--off-white);}
.svc_head{max-width:62ch;margin-bottom:56px;}
.svc_h2{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2rem,1.2rem + 3.2vw,4.2rem);line-height:1;letter-spacing:-.01em;
  color:var(--black-secondary);margin-top:14px;margin-bottom:16px;
}
.svc_h2 i{font-style:normal;color:var(--accent);}
.svc_p{font-size:17px;line-height:1.65;color:var(--gray);text-transform:none;}
.svc_p + .svc_p{margin-top:16px;}

.svc_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:980px){ .svc_grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .svc_grid{grid-template-columns:1fr;} }
.svc_card{
  background-color:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:30px 26px 32px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .5s var(--ease-out),border-color .4s ease,box-shadow .5s ease;
}
.svc_card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 26px 50px -38px rgba(0,40,160,.55);}
.svc_card_icon{width:44px;height:44px;border-radius:12px;background-color:var(--tint-1);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.svc_card h3{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.5rem;line-height:1;color:var(--black-secondary);}
.svc_card p{font-size:15px;line-height:1.6;color:var(--gray);text-transform:none;}

/* numbered process */
.svc_process{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step;}
@media (max-width:1000px){ .svc_process{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc_process{grid-template-columns:1fr;} }
.svc_step{border-top:2px solid var(--black-secondary);padding-top:20px;display:flex;flex-direction:column;gap:10px;}
.svc_step_n{font-family:"Bebas Neue",Arial,sans-serif;font-size:2.6rem;line-height:.9;color:var(--accent);}
.svc_step h3{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.35rem;line-height:1;color:var(--black-secondary);}
.svc_step p{font-size:14.5px;line-height:1.6;color:var(--gray);text-transform:none;}

/* what affects cost */
.cost_wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
@media (max-width:900px){ .cost_wrap{grid-template-columns:1fr;} }
.cost_table{width:100%;border-collapse:collapse;text-transform:none;}
.cost_table caption{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);padding-bottom:14px;}
.cost_table th,.cost_table td{text-align:left;padding:16px 12px 16px 0;border-bottom:1px solid var(--hairline);font-size:15.5px;vertical-align:top;}
.cost_table th{font-weight:700;color:var(--black-secondary);width:52%;}
.cost_table td{color:var(--gray);font-variant-numeric:tabular-nums;}
.cost_note{margin-top:18px;font-size:13.5px;line-height:1.6;color:var(--ink-60);text-transform:none;}

/* FAQ */
.faq_list{border-top:1px solid var(--hairline);}
.faq_item{border-bottom:1px solid var(--hairline);}
.faq_q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;text-align:left;cursor:pointer;
  font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.1;
  color:var(--black-secondary);transition:color .3s ease;
}
.faq_q:hover{color:var(--accent);}
.faq_mark{
  width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--black-secondary-30);display:flex;align-items:center;justify-content:center;
  transition:transform .45s var(--ease-out),background-color .35s ease,color .35s ease,border-color .35s ease;
}
.faq_item.is_open .faq_mark{transform:rotate(45deg);background-color:var(--accent);border-color:var(--accent);color:var(--white);}
.faq_a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out);}
.faq_item.is_open .faq_a{grid-template-rows:1fr;}
.faq_a > div{overflow:hidden;min-height:0;}
.faq_a p{padding-bottom:26px;font-size:16px;line-height:1.7;color:var(--gray);text-transform:none;max-width:74ch;}

/* lead form */
.lead_section{background-color:var(--black-primary);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);position:relative;overflow:clip;}
.lead_section::before{
  content:"";position:absolute;left:50%;top:40%;width:130%;aspect-ratio:2/1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,60,255,.32),rgba(0,60,255,0) 70%);
}
.lead_wrap{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start;}
@media (max-width:940px){ .lead_wrap{grid-template-columns:1fr;} }
.lead_intro h2{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(2rem,3.4vw,3.6rem);line-height:1;color:var(--white);max-width:15ch;margin-bottom:18px;}
.lead_intro p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.65;text-transform:none;max-width:42ch;}
.lead_contacts{margin-top:26px;display:flex;flex-direction:column;gap:10px;font-size:17px;color:var(--white);}
.lead_form{display:flex;flex-direction:column;gap:18px;}
.lead_form .field_label{color:rgba(255,255,255,.8);}
.lead_form .field_input{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--white);}
.lead_form .field_input::placeholder{color:rgba(255,255,255,.4);}
.lead_form .field_input:focus{border-color:var(--brand-blue-light);box-shadow:0 0 0 3px rgba(91,140,255,.25);}
.lead_form .chip span{background-color:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--white);}
.lead_form .chip input:checked + span{background-color:var(--brand-blue-light);border-color:var(--brand-blue-light);color:var(--black-primary);}
.lead_form .field_error{color:#FFB3B3;}
.lead_form .form_status{color:rgba(255,255,255,.72);}
.lead_form .form_status.is_ok{color:var(--brand-blue-light);}
.lead_form .form_status.is_err{color:#FFB3B3;}

/* proof strip */
.proof_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:820px){ .proof_grid{grid-template-columns:1fr;} }
.proof_card{border-radius:var(--r-lg);overflow:hidden;background-color:var(--white);border:1px solid var(--hairline);}
.proof_card_img{aspect-ratio:4/3;overflow:hidden;background-color:var(--off-white);}
.proof_card_img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);}
.proof_card:hover .proof_card_img img{transform:scale(1.05);}
.proof_card_body{padding:22px 24px 26px;}
.proof_card_tag{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent);}
.proof_card h3{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.4rem;line-height:1;color:var(--black-secondary);margin-top:8px;}
.proof_card p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--gray);text-transform:none;}

/* nav on light ground */
.nav.is_light .nav_link{color:var(--ink);}
.nav.is_light .nav_link_dot{border-color:var(--ink);}
.nav.is_light .nav_link:hover .nav_link_dot{background-color:var(--ink);}
.nav.is_light .nav_link_label span+span{color:var(--accent);}
.nav.is_light .nav_cell.is_link::after{background-color:rgba(10,10,10,.75);}

@media (prefers-reduced-motion:reduce){
  .svc_card,.proof_card_img img{transition:none !important;}
}


/* submenu row inside the overlay menu */

/* ============================================================
   SHARED PAGE BANNER — the homepage hero, unchanged: same image,
   veil, sheen, drift and parallax. These four lines are the only
   per-page difference and they only set the type scale; everything
   else comes from .hero_section in the base stylesheet above.
   ============================================================ */
.page_hero{min-height:auto;}
.page_hero .hero_heading{margin-bottom:clamp(56px,8vw,130px);}
.page_hero .hero_heading_inner{font-size:clamp(3rem,20vw,20rem);}
.page_hero .hero_top{margin-bottom:clamp(40px,6vw,90px);}
/* the copy column: info paragraph with the page's CTA beneath it */
.hero_top_side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}

/* breadcrumb sits on the dark banner here, not the light ground */
.page_hero .breadcrumb{color:rgba(255,255,255,.65);margin-bottom:26px;}
.page_hero .breadcrumb a{color:rgba(255,255,255,.65);}
.page_hero .breadcrumb a:hover{color:var(--white);}
.page_hero .breadcrumb span[aria-current]{color:var(--white);}
.page_hero .breadcrumb i{color:rgba(255,255,255,.35);}

.page_banner_cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.page_banner_cta .button_primary{border-color:var(--white);color:var(--white);}
.page_banner_cta .button_primary::before{background-color:var(--white);}
.page_banner_cta .button_primary:hover{color:var(--black-secondary);}
.page_banner_cta .button_line{background-color:var(--white);}
.page_banner_cta .button_primary .button_text.second_text{color:var(--accent);}
.page_banner_cta .link-primary{color:var(--white);}
.page_banner_cta .link-primary span+span{color:var(--brand-blue-light);}

.page_stats{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,42px);padding-top:24px;padding-bottom:clamp(30px,4vw,54px);border-top:1px solid rgba(255,255,255,.28);}
.page_stat{display:flex;flex-direction:column;gap:4px;}
.page_stat_n{font-family:"Bebas Neue",Arial,sans-serif;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1;color:var(--white);}
.page_stat_n em{font-style:normal;color:var(--brand-blue-light);}
.page_stat_l{font-size:11.5px;letter-spacing:.13em;color:rgba(255,255,255,.66);}

/* keeps the full keyword phrase in the H1 for crawlers and screen readers
   while the banner shows the wordmark */
.visually_hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==================================================================
   WEB DESIGN PAGE — the reference's expertise layout in our palette.
   Shared display heading first: two-tone and centred, the quiet clause
   dropping back so the loud one carries the weight.
   ================================================================== */
.disp_head{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.2rem,5.6vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  text-align:center;max-width:20ch;margin:0 auto;
}
.disp_head .quiet{color:var(--ink-30);display:block;}
.disp_head .loud{color:var(--black-secondary);display:block;}
.on_dark .disp_head .quiet{color:rgba(255,255,255,.32);}
.on_dark .disp_head .loud{color:var(--white);}
.disp_eyebrow{
  display:block;text-align:center;font-size:11.5px;letter-spacing:.28em;
  font-weight:600;color:var(--ink-60);margin-bottom:18px;
}
.on_dark .disp_eyebrow{color:var(--brand-blue-light);}
/* the left-aligned variant used for the approach band */
.disp_head.is_left{text-align:left;margin-left:0;max-width:16ch;}

/* ============ POSITIONING ============ */
.wd_pos{background-color:var(--paper);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.wd_pos .disp_head{margin-bottom:clamp(30px,4vw,54px);}
.wd_cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);max-width:1040px;margin-inline:auto;
}
@media (max-width:860px){ .wd_cols{grid-template-columns:1fr;} }
.wd_cols p{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.65;color:var(--gray);text-transform:none;}
.wd_cols p b{color:var(--black-secondary);font-weight:600;}
.on_dark .wd_cols p{color:rgba(255,255,255,.74);}
.on_dark .wd_cols p b{color:var(--white);}
.wd_cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;margin-top:clamp(30px,4vw,48px);}

/* ============ THE PROJECT RING ============
   Measured off the reference: ten cards, each hanging off a spoke pinned
   to the circle centre (their columns carry transform-origin at the hub,
   446px down, with a 171px card — 19.2% of the diameter, the same ratio
   our homepage ring uses). The spoke's rotation IS the card's tilt, so
   every card sits tangential to the rim and its angle changes as it
   travels. The headline sits in the clear middle and never moves.

   Sizing rule: neighbouring cards are 36° apart, so their CORNERS meet
   before their edges do — clearance needs centre-distance > ~1.25 x the
   card, which caps the card at ~19% of the diameter. 190/1000 and 16/86
   are the same ratio, so it holds at every width. */
.wd_scatter{
  position:relative;background-color:#0A0A0C;
  padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);overflow:clip;
}
.wd_scatter_stage{
  position:relative;
  min-height:clamp(560px,62vw,880px);
  display:flex;align-items:center;justify-content:center;
}
/* the type never moves — the ring turns around it */
.wd_scatter_head{position:relative;z-index:4;max-width:13ch;pointer-events:none;}
.wd_scatter_head .quiet{color:rgba(255,255,255,.30);}
.wd_scatter_head .loud{color:var(--white);}

.wd_wheel{
  position:absolute;top:50%;left:50%;z-index:1;
  width:min(1000px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);   /* static centring; GSAP rotates the inner ring */
  pointer-events:none;
}
.wd_ring{position:absolute;inset:0;will-change:transform;}
/* each spoke runs from the hub to the rim; the card rides its far end */
.wd_spoke{
  position:absolute;left:50%;bottom:50%;
  width:min(190px,16vw);height:50%;
  transform-origin:50% 100%;
  will-change:transform;pointer-events:none;
}
.wd_orb{
  display:block;width:100%;aspect-ratio:1;
  border-radius:var(--r-md);overflow:hidden;position:relative;
  background-color:var(--black-secondary);text-decoration:none;
  box-shadow:0 26px 52px -24px rgba(0,0,0,.85);
  pointer-events:auto;
  transition:box-shadow .5s ease;
}
.wd_orb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);}
.wd_orb:hover{box-shadow:0 36px 64px -20px rgba(0,0,0,.95);}
.wd_orb:hover img{transform:scale(1.08);}
/* each card links to its own case study — those pages do not exist yet, so
   the href is a placeholder and the click is swallowed until a real URL is
   dropped in beside data-case */
.wd_orb_tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:24px 10px 9px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));
  font-size:9.5px;letter-spacing:.1em;font-weight:700;color:var(--white);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s var(--ease-out);
}
.wd_orb:hover .wd_orb_tag,.wd_orb:focus-visible .wd_orb_tag{opacity:1;transform:translateY(0);}

/* below the breakpoint the ring is off and the cards become a swipe strip */
@media (max-width:767px){
  .wd_scatter_stage{min-height:0;display:block;}
  .wd_wheel{
    position:relative;top:auto;left:auto;width:auto;aspect-ratio:auto;
    transform:none;margin-top:28px;
  }
  .wd_ring{
    position:relative;inset:auto;transform:none !important;
    display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .wd_spoke{
    position:relative;left:auto;bottom:auto;height:auto;
    flex:0 0 66%;width:auto;transform:none !important;scroll-snap-align:center;
  }
}

/* ============ APPROACH — dark band, left two-tone heading ============ */
.wd_approach{background-color:var(--black-primary);color:var(--white);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.wd_approach .wd_cols{margin-left:0;margin-top:clamp(34px,4vw,60px);max-width:none;}

/* ============ BUILD TYPES — offset colour blocks ============ */
.wd_builds{background-color:var(--black-primary);color:var(--white);padding-bottom:var(--sec-pad);}
.wd_blocks{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);margin-top:clamp(44px,5vw,80px);
}
@media (max-width:820px){ .wd_blocks{grid-template-columns:1fr;} }
@media (min-width:821px){ .wd_blocks > *:nth-child(even){transform:translateY(64px);} }
.wd_block{
  border-radius:var(--r-lg);padding:clamp(28px,2.8vw,44px);
  min-height:clamp(280px,24vw,360px);display:flex;flex-direction:column;
}
.wd_block:nth-child(1){background-color:#3A32C8;color:var(--white);}
.wd_block:nth-child(2){background-color:#003CFF;color:var(--white);}
.wd_block:nth-child(3){background-color:#F5F2EC;color:var(--black-secondary);}
.wd_block:nth-child(4){background-color:#001B7A;color:var(--white);}
.wd_block h3{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.45rem,2vw,2.05rem);line-height:1.04;letter-spacing:-.01em;
  color:inherit;margin-bottom:14px;
}
.wd_block p{font-size:15px;line-height:1.6;color:inherit;opacity:.85;text-transform:none;}
.wd_block p b{opacity:1;font-weight:700;}
.wd_block_n{margin-top:auto;padding-top:26px;font-family:"Bebas Neue",Arial,sans-serif;font-size:1.1rem;line-height:1;color:inherit;opacity:.55;}

/* ============ PROOF — a hand of client cards ============ */
.wd_proof{background-color:var(--off-white);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);overflow:clip;}
.wd_fan{position:relative;height:clamp(360px,33vw,460px);margin-top:clamp(40px,5vw,72px);}
.wd_card{
  position:absolute;top:0;left:50%;
  width:clamp(250px,25vw,340px);height:100%;
  padding:clamp(24px,2.2vw,34px);
  border-radius:var(--r-md);
  box-shadow:0 34px 60px -30px rgba(10,10,20,.5);
  display:flex;flex-direction:column;
}
.wd_card:nth-child(1){background-color:var(--navy);color:var(--white);}
.wd_card:nth-child(2){background-color:var(--paper);color:var(--black-secondary);}
.wd_card:nth-child(3){background-color:var(--accent);color:var(--white);}
.wd_card h3{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.4rem,1.9vw,2rem);line-height:1.04;color:inherit;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;
}
.wd_card p{font-size:14.5px;line-height:1.55;text-transform:none;color:inherit;opacity:.84;margin-top:18px;}
.wd_card p.wd_card_did{margin-top:auto;padding-top:20px;opacity:1;font-weight:600;}
@media (max-width:767px){
  .wd_fan{position:static;height:auto;display:flex;flex-direction:column;gap:16px;}
  .wd_card{position:static;left:auto;width:100%;height:auto;transform:none !important;}
}

/* ============ PROCESS — a pinned deck of step panels ============
   Taller and narrower than a banner: one photo, a heading big enough to
   carry the card, and the deliverables beneath it. The cards behind sit
   at the SAME vertical position and only step down in scale, so each one
   is fully inside the footprint of the card in front and nothing shows
   below the front card. */
.wd_process{background-color:var(--paper);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.wd_process_lede{
  text-align:center;max-width:46ch;margin:clamp(26px,3vw,40px) auto 0;
  font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6;color:var(--gray);text-transform:none;
}
.wd_process_arrow{display:block;text-align:center;font-size:22px;color:var(--ink-60);margin-top:22px;}
.wd_deck{position:relative;margin-top:clamp(36px,4vw,64px);}
.wd_deck_stage{
  height:100vh;min-height:620px;
  display:flex;align-items:center;justify-content:center;
  perspective:1700px;perspective-origin:50% 40%;
}
.wd_step{
  position:absolute;left:0;right:0;margin-inline:auto;
  width:100%;max-width:min(860px,94vw);
  /* a real floor, not just a vh fraction: on a short window 74vh alone
     left the card almost twice as wide as it was tall */
  height:auto;min-height:clamp(480px,78vh,660px);max-height:min(90vh,700px);
  border-radius:var(--r-lg);overflow:hidden;
  padding:0;
  color:var(--white);
  display:flex;flex-direction:column;   /* so the grid below can grow into the card */
  transform-style:preserve-3d;backface-visibility:hidden;
  box-shadow:0 44px 90px -44px rgba(0,10,50,.75);
}
/* split-tone panel: the copy side sits a shade lighter than the image
   side, which is what gives the card its weight without another box */
.wd_step:nth-child(1){background:linear-gradient(90deg,#4A42D8 0 53%,#2F28A8 53% 100%);}
.wd_step:nth-child(2){background:linear-gradient(90deg,#1A4FFF 0 53%,#0030CC 53% 100%);}
.wd_step:nth-child(3){background:linear-gradient(90deg,#002A9E 0 53%,#001560 53% 100%);}
.wd_step:nth-child(4){background:linear-gradient(90deg,#1C1C1F 0 53%,#0A0A0C 53% 100%);}
@media (max-width:860px){
  .wd_step:nth-child(1){background:#3A32C8;} .wd_step:nth-child(2){background:#003CFF;}
  .wd_step:nth-child(3){background:#001B7A;} .wd_step:nth-child(4){background:#121212;}
}
.wd_step_n{
  position:absolute;top:clamp(26px,2.8vw,50px);right:clamp(26px,2.8vw,50px);z-index:3;
  font-family:"Bebas Neue",Arial,sans-serif;font-size:1.3rem;line-height:1;
  color:inherit;opacity:.5;
}
.wd_step_grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:0;align-items:stretch;
  /* height:100% resolved against an auto-height card, so it was ignored and
     the photo sat short with dead space under it. Flexing fills the card. */
  flex:1 1 auto;min-height:0;
}
@media (max-width:860px){ .wd_step_grid{grid-template-columns:1fr;align-content:start;} }
@media (max-width:860px){ .wd_step_media{padding:0 clamp(22px,4vw,30px) clamp(28px,4vw,36px);aspect-ratio:16/10;} .wd_step_frame{transform:none;} }
/* the panel padding lives on the halves now, so the split runs edge to
   edge of the card instead of stopping at a gutter */
.wd_step_body{display:flex;flex-direction:column;padding:clamp(30px,3.2vw,56px);}
/* the heading is the card: big, tight and doing the work */
.wd_step_title{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.3rem,4.1vw,4.1rem);line-height:.92;letter-spacing:-.022em;
  color:inherit;margin-bottom:18px;max-width:13ch;
}
.wd_step_desc{font-size:15px;line-height:1.6;color:inherit;opacity:.8;text-transform:none;max-width:40ch;}
.wd_step_foot{margin-top:auto;padding-top:clamp(24px,3vw,40px);}
.wd_step_gets_t{
  display:block;font-size:10px;letter-spacing:.18em;font-weight:700;
  color:inherit;opacity:.55;margin-bottom:12px;
}
.wd_step_foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.wd_step_foot li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13.5px;line-height:1.45;color:inherit;text-transform:none;
}
.wd_step_foot li::before{
  content:"";flex:none;width:6px;height:6px;margin-top:6px;
  border-radius:50%;background-color:currentColor;opacity:.65;
}
/* one photo, filling its column edge to edge */
.wd_step_media{
  margin:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,2.6vw,44px);min-height:0;min-width:0;
}
/* the photo floats in its half on a tilt with a deep shadow. The
   rotation lives here and not on .wd_step_media, because GSAP owns
   that element's transform during the peel and would overwrite it. */
.wd_step_frame{
  display:block;width:100%;height:100%;
  border-radius:14px;overflow:hidden;
  transform:rotate(-2.5deg);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.65),0 6px 18px -8px rgba(0,0,0,.4);
  transition:transform .7s var(--ease-out);
}
.wd_step:hover .wd_step_frame{transform:rotate(0deg) scale(1.02);}
.wd_step_frame img{width:100%;height:100%;object-fit:cover;display:block;}

@media (max-width:767px){
  .wd_deck_stage{height:auto;min-height:0;display:block;perspective:none;}
  .wd_step{position:relative;height:auto;min-height:0;transform:none !important;opacity:1 !important;}
  .wd_step + .wd_step{margin-top:16px;}
}
@media (max-height:780px){
  .wd_step{min-height:clamp(450px,84vh,580px);}
  .wd_step_body{padding:clamp(24px,2.6vw,38px);}
  .wd_step_media{padding:clamp(18px,2vw,30px);}
  .wd_step_title{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:14px;}
  .wd_step_desc{font-size:14px;line-height:1.55;}
  .wd_step_foot{padding-top:20px;}
  .wd_step_foot li{font-size:12.5px;}
}

/* ============ APPROACH — heading left, a card holding the right ============
   The left-aligned heading left the whole right half of this dark band
   empty, which read as a mistake rather than as space. */
.wd_approach_grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4vw,72px);align-items:center;
}
@media (max-width:940px){ .wd_approach_grid{grid-template-columns:1fr;} }
.wd_approach .wd_cols{grid-template-columns:1fr;gap:18px;margin-top:clamp(24px,3vw,38px);max-width:none;}

.wd_spec{
  border-radius:var(--r-lg);padding:clamp(26px,2.6vw,40px);
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .55s var(--ease-out),border-color .45s ease,background-color .45s ease;
  will-change:transform;
}
/* the slight, smooth lift asked for — it tips toward the cursor rather than
   just rising, so it reads as a physical card */
.wd_spec:hover{
  border-color:rgba(91,140,255,.55);
  background-color:rgba(91,140,255,.06);
}
.wd_spec_label{
  display:block;font-size:11px;letter-spacing:.2em;font-weight:700;
  color:var(--brand-blue-light);margin-bottom:20px;
}
.wd_spec_list{display:flex;flex-direction:column;gap:0;margin:0;}
.wd_spec_row{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.14);
}
.wd_spec_row:first-child{border-top:0;padding-top:0;}
.wd_spec_row:last-child{padding-bottom:0;}
.wd_spec_row svg{flex:none;margin-top:2px;color:var(--brand-blue-light);}
.wd_spec_row dt{font-size:14.5px;font-weight:700;color:var(--white);margin-bottom:3px;}
.wd_spec_row dd{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7);text-transform:none;}

/* ============ TESTIMONIALS — a spread hand of quote cards ============ */
.wd_words{background-color:var(--off-white);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);overflow:clip;}
.wd_words .disp_head{text-align:left;margin-left:0;max-width:14ch;}
.wd_words_fan{
  position:relative;height:clamp(400px,36vw,520px);
  margin-top:clamp(40px,5vw,72px);
}
.wd_quote{
  position:absolute;top:0;left:50%;
  width:clamp(230px,21vw,300px);height:100%;
  padding:clamp(22px,2vw,30px);
  border-radius:var(--r-md);
  box-shadow:0 34px 60px -30px rgba(10,10,20,.45);
  display:flex;flex-direction:column;
}
.wd_quote:nth-child(odd){background-color:var(--paper);color:var(--black-secondary);}
.wd_quote:nth-child(even){background-color:var(--navy);color:var(--white);}
.wd_quote_stars{display:flex;gap:3px;margin-bottom:16px;color:var(--accent);}
.wd_quote:nth-child(even) .wd_quote_stars{color:var(--brand-blue-light);}
.wd_quote_text{font-size:14.5px;line-height:1.55;text-transform:none;color:inherit;}
.wd_quote_who{
  margin-top:auto;padding-top:18px;border-top:1px solid currentColor;
  font-size:10.5px;letter-spacing:.14em;font-weight:700;color:inherit;opacity:.7;
}
@media (max-width:767px){
  .wd_words_fan{position:static;height:auto;display:flex;flex-direction:column;gap:16px;}
  .wd_quote{position:static;left:auto;width:100%;height:auto;transform:none !important;}
}

/* ============ FAQ — heading left, questions right ============ */
.wd_faq{background-color:var(--black-primary);color:var(--white);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad);}
.wd_faq_grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,80px);align-items:start;
}
@media (max-width:900px){ .wd_faq_grid{grid-template-columns:1fr;gap:34px;} }
.wd_faq .disp_head{text-align:left;margin-left:0;max-width:11ch;}
.wd_faq_list{display:flex;flex-direction:column;gap:12px;}
.wd_faq_item{
  border-radius:var(--r-md);overflow:hidden;
  background-color:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  transition:background-color .4s ease,border-color .4s ease;
}
.wd_faq_item.is_open{background-color:rgba(255,255,255,.11);border-color:rgba(91,140,255,.45);}
.wd_faq_q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px clamp(20px,2vw,28px);background:transparent;cursor:pointer;text-align:left;
  font-size:clamp(15px,1.05vw,16.5px);font-weight:600;line-height:1.4;color:var(--white);
}
.wd_faq_q svg{flex:none;transition:transform .45s var(--ease-out);color:var(--brand-blue-light);}
.wd_faq_item.is_open .wd_faq_q svg{transform:rotate(180deg);}
.wd_faq_a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out);}
.wd_faq_a > div{overflow:hidden;min-height:0;}
.wd_faq_item.is_open .wd_faq_a{grid-template-rows:1fr;}
.wd_faq_a p{
  padding:0 clamp(20px,2vw,28px) 22px;font-size:14.5px;line-height:1.62;
  color:rgba(255,255,255,.74);text-transform:none;
}


/* the panel needs these six names; they are defined here too so any page
   that loads this block has them regardless of which sheet came first */
:root{
  --ink:#121212; --ink-60:#383838; --ink-30:rgba(18,18,18,.3);
  --hairline:rgba(18,18,18,.12); --paper:#FFFFFF; --brand-blue-light:#5B8CFF;
}
/* ==================================================================
   MENU — the three-line button keeps its old place at the right end of
   the nav; what changed is what it opens. Instead of the full-screen
   overlay it now slides out a frosted panel, with Services expandable
   to its six sub-services.
   ================================================================== */
.menu_btn{
  width:44px;height:44px;flex:none;background:transparent;
  display:flex;align-items:center;justify-content:flex-end;margin-left:auto;
  cursor:pointer;position:relative;z-index:1001;
}
.menu_bars{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  transform:none;   /* the base sheet still parks these at rotate(45deg) as a "//" mark */
  width:26px;
}
.menu_bars i{display:block;height:2px;border-radius:999px;background-color:var(--white);}
.menu_bars i:nth-child(1){width:26px;}
.menu_bars i:nth-child(2){width:18px;}
.menu_bars i:nth-child(3){width:26px;}
.nav.is_light .menu_bars i{background-color:var(--ink);}

/* ---- the panel ----
   This element is the scroll container and nothing else: no transform,
   no filter, no will-change. A transformed element becomes a containing
   block, which is what stopped middle-click autoscroll from picking it
   up — the open animation now runs on .rail_panel_inner instead. */
.rail_panel{
  position:fixed;top:96px;right:clamp(14px,2.2vw,32px);z-index:1000;
  width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 132px);
  overflow-y:auto;overscroll-behavior:contain;
  border-radius:26px;visibility:hidden;
  /* frosted rather than solid: the banner reads through it, and the
     blur plus the tint keeps the links legible over any ground */
  background-color:rgba(12,14,22,.58);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
/* browsers without backdrop-filter get a solid panel instead of a
   washed-out one that cannot be read */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .rail_panel{background-color:rgba(12,14,22,.94);}
}
/* the scrollbar was showing as a bare grey track down the right edge */
.rail_panel{scrollbar-width:none;-ms-overflow-style:none;}
.rail_panel::-webkit-scrollbar{width:0;height:0;display:none;}
@media (max-width:767px){ .rail_panel{top:76px;} }

.rail_panel_inner{padding:clamp(28px,3.4vw,46px) clamp(24px,3vw,44px);will-change:transform,opacity;}
@media (max-width:767px){ .rail_panel_inner{padding:26px 22px;} }

.rail_panel_links{display:flex;flex-direction:column;}
.rail_link{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06;letter-spacing:-.01em;
  color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:.34em;width:max-content;max-width:100%;
  transition:color .35s ease;cursor:pointer;background:transparent;text-align:left;
  padding:0;border:0;
  /* The Services row is a button element, and a UA stylesheet resets
     text-transform on form controls — so it rendered "Services" in title
     case while every link beside it inherited uppercase from body. */
  text-transform:uppercase;
}
.rail_link:hover,.rail_link:focus-visible,.rail_link.is_open{color:var(--white);}
.rail_link.is_current{color:var(--white);}
.rail_link_sign{font-size:.62em;line-height:1;display:inline-block;transition:transform .35s var(--ease-out);}
.rail_link.is_open .rail_link_sign{transform:rotate(45deg);}

/* submenu — height is animated, so no fixed value is needed */
.rail_sub{overflow:hidden;height:0;}
.rail_sub_inner{display:flex;flex-wrap:wrap;gap:10px 22px;padding:16px 0 20px;}
.rail_sub a{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;
  color:rgba(255,255,255,.72);transition:color .3s ease;
}
.rail_sub a:hover,.rail_sub a.is_current{color:var(--accent-on-dark);}

.rail_panel_foot{margin-top:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:6px;}
.rail_panel_foot a{font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.6);transition:color .3s ease;}
.rail_panel_foot a:hover{color:var(--white);}
.rail_panel_social{display:flex;gap:8px;margin-top:22px;}
.rail_panel_social a{
  width:32px;height:32px;border-radius:9px;flex:none;
  background-color:rgba(255,255,255,.14);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s ease;
}
.rail_panel_social a:hover{background-color:var(--accent);}

@media (prefers-reduced-motion:reduce){
  .rail_link_sign{transition:none !important;}
}


/* submenu row inside the overlay menu */
.canvas_menu_link.is_child{padding-left:0;}
.canvas_menu_link.is_child .menu_text{
  font-size:clamp(1.1rem,2vw,1.7rem);
  opacity:.82;
}
.canvas_menu_link.is_child .canvas_menu_text::before{
  content:"—";margin-right:14px;color:rgba(255,255,255,.5);
}


/* ============ SERVICES INDEX ============ */
.srv_index{display:flex;flex-direction:column;border-top:1px solid var(--hairline);}
.srv_row{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(16px,3vw,40px);
  align-items:start;padding:30px 0;border-bottom:1px solid var(--hairline);
  transition:padding-left .45s var(--ease-out),background-color .4s ease;
}
@media (max-width:760px){ .srv_row{grid-template-columns:44px 1fr;} .srv_go{grid-column:2;} }
.srv_row.is_live:hover{padding-left:16px;background-color:rgba(0,60,255,.04);}
.srv_n{font-family:"Bebas Neue",Arial,sans-serif;font-size:1.6rem;line-height:1.1;color:var(--ink-30);}
.srv_row.is_live:hover .srv_n{color:var(--accent);}
.srv_body h3{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1;color:var(--black-secondary);
  transition:color .35s ease;
}
.srv_row.is_live:hover .srv_body h3{color:var(--accent);}
.srv_body p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--gray);text-transform:none;max-width:60ch;}
.srv_tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.srv_tags span{
  padding:4px 13px;border:1px solid var(--black-secondary-30);border-radius:var(--r-999);
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-60);
}
.srv_go{display:flex;align-items:center;gap:12px;align-self:center;}
.srv_go_label{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);white-space:nowrap;}
@media (max-width:900px){ .srv_go_label{display:none;} }
.srv_arrow{
  width:48px;height:48px;border-radius:50%;flex:none;
  border:1px solid var(--black-secondary-30);display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .45s var(--ease-out);
}
.srv_row.is_live:hover .srv_arrow{background-color:var(--accent);border-color:var(--accent);color:var(--white);transform:rotate(-45deg);}
.srv_soon{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--ink-30);
  border:1px dashed var(--black-secondary-30);border-radius:var(--r-999);padding:8px 14px;white-space:nowrap;
}