/* ===================================================================
   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;}
}

/* these six names are used by the shared components but are not in the base palette */
: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;
}
/* ==================================================================
   CASE STUDY

   Built to the reference's own anatomy: a flat banner in THE CLIENT'S
   brand colour with everything centred and an image trail chasing the
   cursor, then a warm paper ground for the story, then a full-height
   panel where the next case study loads itself as you keep scrolling.

   Every colour that belongs to the client lives in the five tokens
   below and nowhere else, so a new case study is a five-line change.
   The values here were sampled off Morpankh's own artwork: the pink of
   the printed tote (#E5BFD0) and the mauve in its pattern (#A5899C).
   Plexuro's blue is deliberately absent until the closing call, where
   it is us talking rather than the client.
   ================================================================== */
:root{
  --c-brand:#E5BFD0;          /* Morpankh's pink — the banner ground */
  --c-brand-soft:#F2DEE7;     /* the same pink lifted, for filled panels */
  --c-brand-deep:#A5899C;     /* the mauve in the pattern — small type on pink */
  --c-brand-ink:#171412;      /* Morpankh's pink is a pastel, so its type is
                                 near-black rather than the white a saturated
                                 brand colour would take */
  --c-next:#26232A;           /* the NEXT case study's colour (Meera Jewellers) */
  --c-next-ink:#FFFFFF;

  --c-paper:#FBF9EF;          /* warm paper, not white */
  --c-ink:#171412;
  --c-muted:#8E827C;          /* stone — every small label on paper sits here */
  --c-line:rgba(23,20,18,.14);
  --c-accent:#003CFF;         /* Plexuro's own blue, used once, at the close */
  --c-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
/* ---- the header, over a pale banner --------------------------------
   The shared nav is built white for this site's dark heroes. Morpankh's
   pink is a pastel, so on this page the header inverts to the same
   near-black the banner type uses. The nav is absolutely positioned, so
   it scrolls away with the banner and needs no scroll handling; the
   logo swaps to the dark artwork in the page script. */
.nav.is_light .nav_link,
.nav.is_light .nav_link_dot,
.nav.is_light .nav_link_label,
.nav.is_light .nav_link_label span{color:var(--c-brand-ink);}
.nav.is_light .nav_link_label span + span{color:var(--c-accent);}
.nav.is_light .menu_bars i{background-color:var(--c-brand-ink);}

.case_label{
  display:block;font-family:var(--c-mono);
  font-size:10px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);
}

/* ============================ BANNER ============================
   Flat colour, no photograph. One column, centred, with the title
   given the whole middle of the screen. */
.case_hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(96px,12vh,150px) 0 clamp(26px,4vh,50px);
  background-color:var(--c-brand);color:var(--c-brand-ink);
  text-align:center;
}
.case_hero .padding_global{position:relative;z-index:2;width:100%;}
.case_hero_top{flex:0 0 auto;}
.case_hero_mid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;}
.case_hero_foot{flex:0 0 auto;}

/* the trail lives behind the type and never eats a click */
.case_trail{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.case_trail img{
  position:absolute;top:0;left:0;
  width:448px;height:280px;object-fit:cover;border-radius:4px;
  will-change:transform,opacity;
}
@media (max-width:767px){ .case_trail{display:none;} }

.case_breadcrumb{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center;
  font-family:var(--c-mono);font-size:12px;letter-spacing:.04em;
  color:var(--c-brand-deep);
}
.case_breadcrumb a{color:var(--c-brand-deep);transition:color .3s ease;}
.case_breadcrumb a:hover{color:var(--c-brand-ink);}
.case_breadcrumb i{font-style:normal;opacity:.6;}
.case_breadcrumb span[aria-current]{color:var(--c-brand-ink);}

.case_title{
  font-family:"Bebas Neue",Arial,sans-serif;
  /* long names ("Morpankh") ran edge to edge at 15vw */
  font-size:clamp(3.2rem,11vw,9.5rem);line-height:.84;letter-spacing:-.02em;
  color:var(--c-brand-ink);
}
.case_meta{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(26px,5vw,72px);
  margin-top:clamp(26px,4vh,54px);
}
.case_meta div{display:flex;flex-direction:column;gap:6px;}
.case_meta dt{
  font-family:var(--c-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-brand-deep);
}
.case_meta dd{margin:0;font-size:15px;font-weight:500;color:var(--c-brand-ink);text-transform:none;}

.case_baseline{
  font-size:clamp(1.15rem,2.1vw,1.75rem);line-height:1.2;font-weight:400;
  color:var(--c-brand-ink);max-width:24ch;margin:0 auto clamp(14px,2vh,22px);text-transform:none;
}
.case_cue{
  display:block;font-family:var(--c-mono);font-size:12px;letter-spacing:.04em;
  color:var(--c-brand-deep);
}

/* ======================= THE PAPER GROUND ======================= */
.case_body{background-color:var(--c-paper);color:var(--c-ink);}
.case_body .container{max-width:1040px;}

/* ---- overview: the story, with the service list alongside ---- */
.case_overview{padding-top:var(--sec-pad);padding-bottom:clamp(50px,6vw,80px);}
.case_overview_row{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;
  gap:clamp(34px,6vw,90px);align-items:start;
}
@media (max-width:880px){ .case_overview_row{grid-template-columns:1fr;gap:38px;} }
.case_overview p{
  font-size:clamp(1.2rem,2.1vw,1.75rem);line-height:1.34;
  color:var(--c-ink);text-transform:none;
}
.case_overview p + p{margin-top:1.1em;}
.case_overview p b{font-weight:500;}
.case_services{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.case_services li{font-size:14px;line-height:1.4;color:var(--c-ink);text-transform:none;}

/* ---- gallery: half / half / full, repeating ---- */
.case_gallery{padding-bottom:clamp(50px,6vw,80px);}
.case_gallery_wrap{display:flex;flex-wrap:wrap;gap:16px;}
.case_shot{
  /* figure carries the UA default margin:1em 40px, which added 80px to
     every item and stopped the half-width pairs fitting on one row */
  margin:0;
  border-radius:11px;overflow:hidden;background-color:var(--c-brand-soft);
  flex:0 0 calc(50% - 8px);position:relative;
  aspect-ratio:441/459;   /* the reference's half-width ratio */
}
.case_shot.is_full{flex:0 0 100%;aspect-ratio:896/520;}
.case_shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease-out);}
.case_shot:hover img{transform:scale(1.03);}
.case_shot figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7));
  font-family:var(--c-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);opacity:0;transition:opacity .4s ease;
}
.case_shot:hover figcaption{opacity:1;}
@media (max-width:700px){ .case_gallery_wrap .case_shot,.case_gallery_wrap .case_shot.is_full{flex:0 0 100%;aspect-ratio:16/11;} }

/* ---- what the client said ----------------------------------------
   A filled panel in the client's pink rather than a rule on bare
   paper: the quote had a whole screen of cream to itself and read as
   an empty section. The mark sits opposite the words so the panel
   carries the brand and not just the colour. */
.case_words{padding-bottom:clamp(50px,6vw,80px);}
.case_quote{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  background-color:var(--c-brand);color:var(--c-brand-ink);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:stretch;gap:0;
}
@media (max-width:860px){ .case_quote{grid-template-columns:1fr;} }
.case_quote_body{
  padding:clamp(34px,4.5vw,68px);
  display:flex;flex-direction:column;justify-content:center;
}
.case_quote_stars{display:flex;gap:5px;color:var(--c-brand-ink);opacity:.75;margin-bottom:22px;}
.case_quote blockquote{
  font-size:clamp(1.3rem,2.5vw,2.1rem);line-height:1.22;font-weight:400;
  color:var(--c-brand-ink);text-transform:none;
}
.case_quote figcaption{
  margin-top:24px;font-family:var(--c-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-brand-deep);
}
.case_quote_media{
  position:relative;margin:0;overflow:hidden;min-height:clamp(230px,26vw,340px);
  background-color:var(--c-brand-soft);
}
.case_quote_media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}

/* ---- credits: a plain ledger, no boxes ---- */
.case_credits{padding-bottom:var(--sec-pad);}
.case_credits_grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 clamp(20px,3vw,40px);margin-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--c-line);
}
.case_credit{padding:16px 0;border-bottom:1px solid var(--c-line);}
.case_credit dt{
  font-family:var(--c-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-muted);margin-bottom:6px;
}
.case_credit dd{margin:0;font-size:15px;color:var(--c-ink);text-transform:none;line-height:1.45;}

/* ---- the closing call: a wide dark card with a narrow flag beside it ---- */
.case_cta{padding-bottom:var(--sec-pad);}
.case_cta_row{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,15vw,218px);
  gap:clamp(12px,1.6vw,22px);align-items:stretch;
  min-height:clamp(400px,52vw,640px);
}
@media (max-width:767px){ .case_cta_row{grid-template-columns:1fr;min-height:0;} }
.case_cta_card{
  border-radius:var(--r-md);background-color:#1C1A19;color:var(--white);
  padding:clamp(34px,4.4vw,62px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(30px,5vw,60px);
}
.case_cta_card h2{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:.9;letter-spacing:-.02em;
  /* 11ch measured only 409px of a 662px column and broke the line five
     ways; 7.5em gives the reference's four-line block */
  color:var(--white);max-width:7.5em;
}
/* the call row: label first, then the dial in its own ring */
.case_cta_call{display:inline-flex;align-items:center;gap:16px;align-self:flex-start;}
/* :not() keeps this off the dial — .case_cta_call span outranks
   .case_cta_dial, which was painting the phone icon white on white */
.case_cta_call span:not(.case_cta_dial){
  font-family:var(--c-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);
}
.case_cta_dial{
  flex:none;width:46px;height:46px;border-radius:50%;
  background-color:var(--white);color:#1C1A19;
  display:grid;place-items:center;
  transition:transform .5s var(--ease-out),background-color .35s ease,color .35s ease;
}
.case_cta_call:hover .case_cta_dial{transform:rotate(24deg) scale(1.08);background-color:var(--c-accent);color:var(--white);}
.case_cta_dial svg{width:18px;height:18px;display:block;}

.case_cta_flag{
  border-radius:var(--r-md);background-color:var(--c-accent);color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:clamp(20px,3vw,34px) 12px;text-align:center;
}
.case_cta_flag .made{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.5rem,2.4vw,2.4rem);line-height:1;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.85);
}
.case_cta_flag .love{
  display:flex;align-items:center;gap:7px;
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.9rem,3.1vw,3rem);line-height:1;color:var(--white);
}
.case_cta_flag .love svg{width:.72em;height:.72em;display:block;}

/* ================== THE NEXT CASE STUDY LOADS ==================
   A tall wrapper gives the scroll something to travel through; the
   panel inside sticks to the viewport while it fills. When the
   counter reaches 100% the next case study opens on its own. */
.case_next_wrap{position:relative;height:230vh;background-color:var(--c-next);}
.case_next{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--c-next);color:var(--c-next-ink);text-align:center;
}
.case_next_t{margin-bottom:clamp(20px,3vh,34px);color:rgba(255,255,255,.5);}
.case_next_progress{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:clamp(18px,2.6vh,30px);
}
.case_next_progress .case_label{color:rgba(255,255,255,.5);}
.case_next_rail{
  position:relative;width:clamp(90px,14vw,168px);height:1px;
  background-color:rgba(255,255,255,.25);overflow:hidden;
}
.case_next_rail span{
  position:absolute;inset:0;transform-origin:0 50%;
  transform:scaleX(var(--p,0));background-color:var(--c-next-ink);
}
/* the name is set twice: a ghost underneath, and a copy above it that
   the counter wipes in from the left as the panel fills */
.case_next_name{position:relative;display:inline-block;}
.case_next_name span{
  display:block;
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(3rem,11vw,9rem);line-height:.9;letter-spacing:-.02em;
}
.case_next_name .ghost{color:rgba(255,255,255,.32);}
.case_next_name .fill{
  position:absolute;inset:0;color:var(--c-next-ink);
  clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0);
}
.case_next_hint{margin-top:clamp(20px,3vh,34px);color:rgba(255,255,255,.5);}
@media (max-width:767px){
  .case_next_wrap{height:auto;}
  .case_next{position:relative;height:auto;min-height:70svh;padding:70px 0;}
}

/* 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;}
}

/* ---- portfolio galleries -------------------------------------------
   The reference's fixed half / half / full rhythm was built for
   landscape photography. This work is social-format — 1:1 posts, 4:5
   grids, 9:16 stories, tall website scrolls — so a fixed landscape crop
   would cut the tops and bottoms off nearly all of it. These galleries
   keep each piece's own ratio, taken from the file's real dimensions
   and set on the figure as --ar, and flow it into a column grid. */
.case_grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));
  gap:16px;align-items:start;
}
.case_grid .case_shot{
  flex:none;
  aspect-ratio:var(--ar,1);
}
/* A piece worth more room spans two columns — but only once the grid
   really has two. The media query has to clear the container width, not
   just the phone breakpoint: at a 658px viewport the container is 562px,
   one column fits, and span 2 was inventing an empty 0px track. */
.case_grid .case_shot.is_wide{grid-column:span 1;}
@media (min-width:820px){
  .case_grid .case_shot.is_wide{grid-column:span 2;}
}
@media (max-width:640px){ .case_grid{grid-template-columns:1fr;} }

/* ---- related work ---------------------------------------------------
   Every case study used to lead only to the next one in the chain, which
   made each page a corridor rather than part of a site. Three siblings
   plus a link to the full index gives crawlers real paths between the
   seventeen work pages, and gives readers somewhere to go. */
.case_related{padding-bottom:var(--sec-pad);}
.case_rel_grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);margin-top:clamp(20px,3vw,32px);
}
@media (max-width:760px){ .case_rel_grid{grid-template-columns:1fr;} }
.case_rel{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;}
.case_rel_media{
  display:block;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background-color:var(--c-brand-soft);
}
.case_rel_media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out);
}
.case_rel:hover .case_rel_media img{transform:scale(1.05);}
.case_rel_name{
  font-family:"Bebas Neue",Arial,sans-serif;
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1;letter-spacing:-.01em;
  color:var(--c-ink);transition:color .35s ease;
}
.case_rel:hover .case_rel_name{color:var(--c-accent);}
.case_rel_meta{
  font-family:var(--c-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted);
}
.case_rel_all{
  display:inline-block;margin-top:clamp(22px,3vw,34px);
  font-family:var(--c-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-ink);
  border-bottom:1px solid var(--c-line);padding-bottom:4px;
  transition:color .3s ease,border-color .3s ease;
}
.case_rel_all:hover{color:var(--c-accent);border-color:var(--c-accent);}

/* the services list on a case study now links to the page that sells it */
.case_services li a{color:inherit;text-decoration:none;border-bottom:1px solid var(--c-line);transition:color .3s ease,border-color .3s ease;}
.case_services li a:hover{color:var(--c-accent);border-color:var(--c-accent);}

/* On a phone the four banner facts wrapped 3-then-1, leaving "Engagement"
   stranded on its own row. A 2x2 grid reads as a deliberate block. */
@media (max-width:560px){
  .case_meta{
    display:grid;grid-template-columns:1fr 1fr;
    gap:18px clamp(14px,5vw,28px);justify-items:center;
  }
  .case_meta div{align-items:center;text-align:center;}
}
/* the noscript list on the work page, if it is ever seen */
.project_fallback{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px;}
.project_fallback a{color:var(--ink);text-decoration:underline;}

/* ---- 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;} }