/* ============================================================================
   BiSSMiXi — Refinement layer · v5 · September 2026
   Loads AFTER site.css and motion.css and only ADDS to them.
   Palette, type and easing are inherited from site.css — nothing is redefined
   except where the change is the improvement itself.

   Every animated rule in this file is switched off by the
   prefers-reduced-motion block at the bottom. Nothing here is required for the
   page to read correctly: with CSS animation disabled the layout is identical.
   ========================================================================== */

:root{
  --e-out:cubic-bezier(.16,1,.3,1);        /* long, expensive-feeling exit    */
  --e-soft:cubic-bezier(.33,1,.68,1);      /* short UI moves                  */
  --glow:0 0 0 1px rgba(255,255,255,.7), 0 30px 70px -34px rgba(137,116,192,.55);
  --rim:linear-gradient(135deg,rgba(255,255,255,.9),rgba(223,204,249,.55) 40%,rgba(185,163,228,.75));
  --nav-h:72px;
}

/* ---------------------------------------------------------------------------
   1 · Accessibility — a visible, branded focus ring everywhere
   The site had browser defaults. Keyboard users now get the brand.
   ------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
/* the custom cursor hides the system one; keyboard users must not lose focus */
html.has-cursor *:focus-visible{cursor:auto}

/* ---------------------------------------------------------------------------
   2 · Scroll progress — a single brand-gradient hairline at the top
   ------------------------------------------------------------------------- */
.bx-progress{
  position:fixed;inset-inline:0;top:0;height:2px;z-index:60;pointer-events:none;
  background:var(--grad-deep);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}
html[dir="rtl"] .bx-progress{transform-origin:right center}
.bx-progress::after{
  content:"";position:absolute;inset-inline-end:0;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--violet-soft);
  box-shadow:0 0 12px 2px rgba(169,149,214,.8);
  opacity:0;transition:opacity .4s;
}
html.bx-scrolled .bx-progress::after{opacity:1}

/* ---------------------------------------------------------------------------
   3 · Navigation — condenses on scroll, retreats when you read downward,
        returns the moment you scroll back up.
   ------------------------------------------------------------------------- */
.nav{
  transition:height .45s var(--e-soft),
             background .45s var(--e-soft),
             box-shadow .45s var(--e-soft),
             transform .5s var(--e-out);
}
.nav .wrap{transition:height .45s var(--e-soft)}
html.bx-scrolled .nav{
  background:rgba(246,245,254,.86);
  box-shadow:0 1px 0 rgba(34,30,51,.06), 0 18px 40px -32px rgba(77,58,127,.45);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
html.bx-scrolled .nav .wrap{height:60px}
html.bx-nav-away .nav{transform:translateY(-102%)}
html.bx-menu-open .nav{transform:none}
/* a gradient hairline under the bar instead of a flat rule */
.nav::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(137,116,192,.45),transparent);
  opacity:0;transition:opacity .45s var(--e-soft);
}
html.bx-scrolled .nav::after{opacity:1}
/* the pill under the current section, drawn rather than filled */
.menu a{position:relative}
.menu a::after{
  content:"";position:absolute;inset-inline:12px;bottom:3px;height:1.5px;
  background:var(--violet);border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .4s var(--e-out);
}
.menu a:hover::after,
.menu a[aria-current="page"]::after,
.menu a.bx-here::after{transform:scaleX(1)}

/* ---------------------------------------------------------------------------
   4 · Aurora fields — slow brand-coloured light behind light sections.
        Injected by enhance.js; animation is transform-only, so it is cheap.
   ------------------------------------------------------------------------- */
.bx-aurora{
  position:absolute;inset:-25% -12%;z-index:0;pointer-events:none;
  overflow:hidden;contain:paint;
}
.bx-aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.55;will-change:transform;
}
.bx-aurora i:nth-child(1){
  width:46%;padding-bottom:46%;inset-inline-start:-6%;top:2%;
  background:radial-gradient(circle,rgba(223,204,249,.95),rgba(223,204,249,0) 70%);
  animation:bxA 26s var(--e-soft) infinite alternate;
}
.bx-aurora i:nth-child(2){
  width:40%;padding-bottom:40%;inset-inline-end:-4%;top:22%;
  background:radial-gradient(circle,rgba(185,163,228,.9),rgba(185,163,228,0) 70%);
  animation:bxB 34s var(--e-soft) infinite alternate;
}
.bx-aurora i:nth-child(3){
  width:34%;padding-bottom:34%;inset-inline-start:38%;bottom:-8%;
  background:radial-gradient(circle,rgba(169,149,214,.7),rgba(169,149,214,0) 70%);
  animation:bxC 30s var(--e-soft) infinite alternate;
}
.on-violet .bx-aurora i,.field-ink .bx-aurora i{opacity:.42;mix-blend-mode:screen}
.on-violet .bx-aurora i:nth-child(1){background:radial-gradient(circle,rgba(169,149,214,.9),rgba(169,149,214,0) 70%)}
.on-violet .bx-aurora i:nth-child(2){background:radial-gradient(circle,rgba(137,116,192,.95),rgba(137,116,192,0) 70%)}
.on-violet .bx-aurora i:nth-child(3){background:radial-gradient(circle,rgba(223,204,249,.5),rgba(223,204,249,0) 70%)}
@keyframes bxA{to{transform:translate3d(9%,7%,0) scale(1.18)}}
@keyframes bxB{to{transform:translate3d(-11%,10%,0) scale(1.12)}}
@keyframes bxC{to{transform:translate3d(7%,-9%,0) scale(1.22)}}
/* Content must sit above the light, and the light must not widen the page.
   overflow:clip is preferred — unlike hidden it creates no scroll container,
   so a pinned or sticky child inside a lit section keeps working. Browsers
   without clip keep the hidden declared first. */
.bx-has-aurora{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.bx-has-aurora > .wrap,
.bx-has-aurora > .wrap-narrow,
.bx-has-aurora > .section-head{position:relative;z-index:1}

/* ---------------------------------------------------------------------------
   5 · Constellation — the brand ✦ as drifting, twinkling light.
        Generated by enhance.js so no markup is duplicated in the pages.
   ------------------------------------------------------------------------- */
.bx-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bx-stars b{
  position:absolute;display:block;color:var(--violet);
  font-size:10px;line-height:1;opacity:0;
  will-change:transform,opacity;
  animation:bxTwinkle var(--dur,9s) var(--e-soft) var(--delay,0s) infinite;
}
.on-violet .bx-stars b,.field-ink .bx-stars b{color:#fff}
@keyframes bxTwinkle{
  0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.6) rotate(0deg)}
  40%,60%{opacity:.85;transform:translate3d(0,-6px,0) scale(1) rotate(90deg)}
}

/* ---------------------------------------------------------------------------
   6 · Buttons — a light sweeps across on hover. No transform is touched:
        motion.js already owns transform on .btn for the magnetic effect.
   ------------------------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .8s var(--e-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
html[dir="rtl"] .btn::after{transform:translateX(120%)}
html[dir="rtl"] .btn:hover::after,
html[dir="rtl"] .btn:focus-visible::after{transform:translateX(-120%)}
.btn-ghost::after{background:linear-gradient(105deg,transparent 32%,rgba(137,116,192,.16) 50%,transparent 68%)}
.on-violet .btn-ghost::after{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%)}
/* the arrow leans into the direction of travel */
.btn .arr{display:inline-block;transition:transform .45s var(--e-out)}
.btn:hover .arr{transform:translateX(5px)}
html[dir="rtl"] .btn:hover .arr{transform:translateX(-5px)}

/* ---------------------------------------------------------------------------
   7 · Spotlight — cards lit from wherever the pointer is.
        --mx / --my are written by enhance.js, throttled to one frame.
   ------------------------------------------------------------------------- */
/* The light is painted as the element's own background-image, not as a
   pseudo-element. A positioned ::before paints ABOVE in-flow text, which would
   wash the copy out on hover; a background never can. */
[data-bx-spot]{
  position:relative;isolation:isolate;
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,0),rgba(255,255,255,0) 70%);
  transition:background-image .5s var(--e-soft);
}
[data-bx-spot].bx-lit{
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.55),transparent 70%);
}
.on-violet [data-bx-spot].bx-lit,
[data-bx-spot].violet.bx-lit{
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.16),transparent 70%);
}
/* .card-pod paints its own gradient in a child .bg, so leave it alone */
.card-pod[data-bx-spot]{background-image:none}

/* ---------------------------------------------------------------------------
   8 · Entrance — rise, un-blur, settle. Staggered by --i.
        Uses its own attribute so motion.js's data-rise is untouched.
   ------------------------------------------------------------------------- */
[data-bx-rise]{
  opacity:0;transform:translate3d(0,26px,0);
  filter:blur(10px);
  transition:opacity .9s var(--e-out) calc(var(--i,0) * 90ms),
             transform 1s var(--e-out) calc(var(--i,0) * 90ms),
             filter .9s var(--e-out) calc(var(--i,0) * 90ms);
  will-change:opacity,transform,filter;
}
[data-bx-rise].bx-in{opacity:1;transform:none;filter:blur(0)}

/* 9 · Headlines — per-word blur-up, used only where motion.js has not
        already claimed the element with data-reveal. */
.bx-split{display:inline}
.bx-split .bx-w{
  display:inline-block;
  opacity:0;transform:translate3d(0,.5em,0);filter:blur(8px);
  transition:opacity .8s var(--e-out) calc(var(--i,0) * 55ms),
             transform .9s var(--e-out) calc(var(--i,0) * 55ms),
             filter .8s var(--e-out) calc(var(--i,0) * 55ms);
}
.bx-in .bx-split .bx-w{opacity:1;transform:none;filter:blur(0)}

/* 10 · Media — uncovers rather than fades, and holds a slow drift after */
.bx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e-out)}
.bx-clip.bx-in{clip-path:inset(0 0 0 0)}

/* ---------------------------------------------------------------------------
   11 · Marquee — feathered ends, and it slows when you look at it
   ------------------------------------------------------------------------- */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  border-color:transparent;
  background:linear-gradient(180deg,rgba(232,231,254,0),rgba(232,231,254,.7),rgba(232,231,254,0));
}
.marquee .track{animation-duration:52s}
.marquee:hover .track{animation-duration:150s}
.marquee span{transition:color .4s var(--e-soft)}
.marquee:hover span{color:var(--violet-deep)}

/* ---------------------------------------------------------------------------
   12 · Academy ladder — five levels, one drawn line
   ------------------------------------------------------------------------- */
.acad{position:relative;overflow:hidden}
.ladder{position:relative;margin-top:clamp(32px,4vw,52px)}
.ladder .spine{
  position:absolute;inset-block:0;inset-inline-start:0;width:1px;
  background:var(--rule);
}
.ladder .spine i{
  position:absolute;inset-inline:0;top:0;height:0;
  background:var(--grad-deep);
  transition:height .2s linear;
}
.rung{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0 clamp(22px,3vw,34px) clamp(24px,4vw,52px);
  border-bottom:1px solid var(--rule);
  position:relative;
  transition:background .5s var(--e-soft);
}
html[dir="rtl"] .rung{padding-inline:clamp(24px,4vw,52px) 0}
.rung::before{
  content:"";position:absolute;inset-inline-start:-4.5px;top:calc(clamp(22px,3vw,34px) + .45em);
  width:10px;height:10px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--rule-strong);
  transition:background .45s var(--e-out),border-color .45s var(--e-out),transform .45s var(--e-out);
}
.rung.bx-on::before{background:var(--violet);border-color:var(--violet);transform:scale(1.25)}
.rung:hover{background:linear-gradient(90deg,rgba(223,204,249,.22),transparent 70%)}
html[dir="rtl"] .rung:hover{background:linear-gradient(-90deg,rgba(223,204,249,.22),transparent 70%)}
.rung .lvl{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet-ink);white-space:nowrap;
  padding-top:.4em;
}
html[lang="ar"] .rung .lvl{letter-spacing:0;font-size:13px}
.rung h3{font-size:clamp(24px,2.6vw,36px);margin-bottom:8px}
.rung p{margin:0;color:var(--muted);font-size:15.5px;max-width:56ch}
.rung .fee{
  font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:var(--ink);
  white-space:nowrap;padding-top:.15em;
}
@media (max-width:820px){
  .rung{grid-template-columns:1fr;gap:6px;align-items:start}
  .rung .fee{padding-top:8px}
}

/* ---------------------------------------------------------------------------
   13 · Package rail — the five discovery packages, priced
   ------------------------------------------------------------------------- */
.pk-rail{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(32px,4vw,52px);
}
.pk{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:clamp(22px,2.2vw,30px) clamp(18px,1.8vw,24px);
  border-radius:var(--r);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -44px rgba(137,116,192,.5);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out);
  overflow:hidden;isolation:isolate;
}
.pk:hover{transform:translateY(-6px);box-shadow:var(--glow)}
.pk .nm{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--violet-ink);
}
.pk .fig{font-family:var(--serif);font-size:clamp(26px,2.6vw,34px);line-height:1;color:var(--ink)}
.pk .fig small{font-size:.5em;color:var(--muted);letter-spacing:.06em;display:block;margin-bottom:4px;font-family:var(--sans)}
.pk .run{font-size:13px;color:var(--faint);letter-spacing:.04em}
.pk p{margin:6px 0 0;font-size:14.5px;color:var(--muted);flex:1}
.pk .go{
  margin-top:14px;font-size:13.5px;font-weight:600;color:var(--violet-ink);
  display:inline-flex;align-items:center;gap:6px;
}
.pk .go span{transition:transform .4s var(--e-out)}
.pk:hover .go span{transform:translateX(4px)}
html[dir="rtl"] .pk:hover .go span{transform:translateX(-4px)}
/* the one most brands choose carries the gradient rim */
.pk.lead{background:rgba(255,255,255,.82)}
.pk.lead::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  padding:1.5px;background:var(--grad-deep);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.pk .tagx{
  position:absolute;top:0;inset-inline-end:0;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--violet);padding:5px 12px;z-index:2;
  border-end-start-radius:12px;border-start-end-radius:var(--r);
}
html[lang="ar"] .pk .tagx{letter-spacing:0;font-size:11.5px}
@media (max-width:1080px){.pk-rail{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.pk-rail{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pk-rail{grid-template-columns:1fr}}

/* the four entry prices, one line each */
.entry{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);
  margin-top:clamp(36px,4vw,56px);padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--rule);
}
.entry a{display:block;transition:transform .5s var(--e-out)}
.entry a:hover{transform:translateY(-3px)}
.entry .k{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);color:var(--violet);line-height:1}
.entry .t{font-weight:600;font-size:15px;margin-top:10px}
.entry .d{font-size:13.5px;color:var(--muted);margin-top:3px}
@media (max-width:900px){.entry{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.entry{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   14 · Footer — the giant wordmark drifts, and a wash sits behind it
   ------------------------------------------------------------------------- */
footer{position:relative;isolation:isolate;overflow:hidden}
.giant .wm{will-change:transform}
footer::before{
  content:"";position:absolute;inset-inline:-10%;bottom:-30%;height:60%;
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(169,149,214,.35),transparent 70%);
  filter:blur(40px);
}
footer > .wrap{position:relative;z-index:1}

/* ---------------------------------------------------------------------------
   15 · Grain — one flat overlay, so gradients do not band on wide screens
   ------------------------------------------------------------------------- */
.bx-grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------------------------------------------------------------------------
   16 · Small refinements to what was already there
   ------------------------------------------------------------------------- */
/* cards lift with a longer, softer curve */
.card,.doc,.portal-card{transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s var(--e-soft)}
/* FAQ rows open with a marker that turns rather than swaps */
.faq summary{transition:color .35s var(--e-soft)}
.faq summary:hover{color:var(--violet)}
.faq details[open] summary{color:var(--violet)}
/* section headings breathe a little more on very wide screens */
@media (min-width:1600px){:root{--w:1320px}}
/* the scroll cue disappears once you have obviously started */
html.bx-scrolled .hero2 .scroll-cue{opacity:0;transition:opacity .6s}

/* ---------------------------------------------------------------------------
   17 · Reduced motion — everything above becomes static, nothing is hidden
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .bx-aurora i,.bx-stars b,.marquee .track{animation:none!important}
  .bx-stars b{opacity:.5}
  [data-bx-rise],[data-bx-rise].bx-in{opacity:1;transform:none;filter:none;transition:none}
  .bx-split .bx-w{opacity:1;transform:none;filter:none;transition:none}
  .bx-clip{clip-path:none;transition:none}
  .btn::after{display:none}
  .nav,.nav .wrap{transition:none}
  html.bx-nav-away .nav{transform:none}
  .pk:hover,.entry a:hover,.card:hover,.doc:hover{transform:none}
  .bx-progress{transition:none}
}

/* ---------------------------------------------------------------------------
   18 · In development — Academy and the AI video subscription platform
        Both are real, both are being built, and neither is open yet. The site
        says so in the nav and again at the top of each page, so nobody reads a
        price list believing they can buy today.
   ------------------------------------------------------------------------- */
.menu a{display:inline-flex;align-items:center;gap:7px}
.soon{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;
  color:var(--violet-deep);background:var(--lav);
  padding:3px 6px;border-radius:5px;white-space:nowrap;
  position:relative;top:-.5px;
}
html[lang="ar"] .soon{letter-spacing:0;font-size:10.5px;font-weight:600}
.on-violet .soon{color:var(--ink);background:rgba(255,255,255,.85)}

/* the notice that sits at the top of an unfinished page */
.wip{
  display:flex;gap:16px;align-items:flex-start;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,30px);
  border-radius:var(--r);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1.5px rgba(137,116,192,.28), 0 20px 50px -40px rgba(77,58,127,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  margin-bottom:clamp(28px,4vw,44px);
}
.wip .dot{
  flex:none;width:10px;height:10px;border-radius:50%;margin-top:.42em;
  background:var(--violet);
  box-shadow:0 0 0 0 rgba(137,116,192,.6);
  animation:wipPulse 2.6s var(--e-soft) infinite;
}
@keyframes wipPulse{
  70%{box-shadow:0 0 0 12px rgba(137,116,192,0)}
  100%{box-shadow:0 0 0 0 rgba(137,116,192,0)}
}
.wip b{display:block;font-weight:600;font-size:15.5px;margin-bottom:4px}
.wip p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
.wip .lbl{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet-ink);display:block;margin-bottom:8px;
}
html[lang="ar"] .wip .lbl{letter-spacing:0;font-size:11.5px}

/* the same status, inline on the home page sections */
.acad .section-head .eyebrow,
.sub-card .badge{position:relative}
@media (prefers-reduced-motion:reduce){ .wip .dot{animation:none} }

/* ---------------------------------------------------------------------------
   19 · Navigation fit
        Montserrat sets wider than the face it replaced, and the bar gained
        Contact while losing Videos. Items must never wrap: a two-line "AI
        Video" reads as two menu items.
   ------------------------------------------------------------------------- */
.menu a{white-space:nowrap}
.menu{gap:2px}
.nav .wrap{gap:16px}
@media (min-width:981px){
  .menu a{padding-inline:9px;font-size:14px;letter-spacing:-.005em}
  .soon{font-size:8.5px;padding:3px 5px}
}
@media (min-width:1240px){
  .menu a{padding-inline:11px;font-size:14.5px}
}
/* below this the burger menu takes over, so the bar has room again */
@media (max-width:1120px) and (min-width:981px){
  .menu a{padding-inline:7px;font-size:13.5px}
  .nav-actions .btn{padding:12px 16px;font-size:14px}
}

/* ---------------------------------------------------------------------------
   20 · Contrast, the last four
        #8974C0 is the brand primary and measures 3.55:1 on the paper tint —
        fine for display figures (3:1), short of the 4.5:1 that text under 24px
        needs. These are the places where it was doing a text job.
   ------------------------------------------------------------------------- */
.steps .step p{color:var(--muted)}                 /* was the brand violet at 15px */
.pk .tagx{background:var(--violet-ink)}            /* white sits on it: 6.04:1 */
.entry .k span{color:var(--violet-ink)}            /* the "/ mo" suffix, 17px */
.profile-sec .doc .ic{
  background:var(--grad-deep);                     /* the pale gradient could not hold white */
  color:#fff;
}

/* ---------------------------------------------------------------------------
   21 · Violet cards
        A card filled with the brand primary and set in white measures 3.95:1 —
        below the 4.5:1 body text needs. The fill moves to the darker step of
        the same hue; the card reads the same, the words are legible.
   ------------------------------------------------------------------------- */
.card.card-violet,
.card.card-link{background:var(--violet-ink)}
.card.card-violet .idx,
.card.card-link .idx{color:var(--pale)}
.card.card-violet p,
.card.card-link p{color:rgba(255,255,255,.9)}

/* ---------------------------------------------------------------------------
   22 · Discovery Portal — safe by default
        The four slides are position:absolute, inset:0. They only read as one
        card at a time because a scroll controller sets opacity, blur and
        translate on each. If that controller never starts — reduced motion, or
        a window that grows past 900px after load — the slides stay at their
        natural state and all four print on top of each other.

        So the pinned stage is now hidden until motion.js confirms a live
        controller (html.portal-live). Until then, and always under reduced
        motion, the reader gets the card list, which needs no JavaScript at all.
   ------------------------------------------------------------------------- */
.portal-stage,
.portal-hint{display:none}

.portal-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,18px);
  padding:0 var(--gutter);
}
.portal-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.85);
  border-radius:22px;padding:26px 22px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 24px 60px -44px rgba(77,58,127,.5);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out);
}
.portal-card:hover{transform:translateY(-6px);box-shadow:var(--glow)}
.portal-card h3{font-size:clamp(24px,2.2vw,30px);margin-top:4px}
.portal-card p{color:var(--muted);font-size:14.5px;margin:0;flex:1}
.portal-card .idx{font-family:var(--serif);color:var(--violet-ink);font-size:14px;letter-spacing:.12em}
.portal-card .link{margin-top:14px;font-weight:600;font-size:13.5px;color:var(--violet-ink)}

@media (max-width:1080px){.portal-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.portal-cards{grid-template-columns:1fr}}

/* the pinned stage, only once something is driving it */
@media (min-width:901px){
  html.portal-live .portal-stage,
  html.portal-live .portal-hint{display:block}
  html.portal-live .portal-cards{display:none}
}
@media (prefers-reduced-motion:reduce){
  .portal-stage,.portal-hint{display:none!important}
  .portal-cards{display:grid!important}
}

/* ---------------------------------------------------------------------------
   23 · The service rail — replaces the Discovery Portal
        The portal put copy left, an oversized title centre and a small media
        panel right, over a violet lens that dominated the frame. Three fixed
        columns cannot hold four services of different name lengths, so the
        proportions never settled, and the lens made a light page feel heavy.

        This reads as an editorial index instead: one line per service, and the
        work appears in a panel that follows the cursor rather than sitting in a
        column of its own. No fixed split to fight, and the page stays light.
   ------------------------------------------------------------------------- */
.svc-rail{border-top:1px solid var(--rule);margin-top:clamp(8px,1.5vw,20px)}
.svc-rail a{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:clamp(18px,3vw,44px);
  align-items:center;
  padding:clamp(24px,3.4vw,42px) 0;
  border-bottom:1px solid var(--rule);
  position:relative;isolation:isolate;
  transition:padding-inline .6s var(--e-out);
}
/* a wash of the brand tint moves in from the reading edge */
.svc-rail a::before{
  content:"";position:absolute;z-index:-1;
  inset:0 calc(clamp(18px,2.5vw,32px) * -1);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(223,204,249,.6),rgba(223,204,249,.12) 55%,transparent 78%);
  opacity:0;transform:translateX(-18px);
  transition:opacity .5s var(--e-out),transform .65s var(--e-out);
}
html[dir="rtl"] .svc-rail a::before{
  background:linear-gradient(-90deg,rgba(223,204,249,.6),rgba(223,204,249,.12) 55%,transparent 78%);
  transform:translateX(18px);
}
.svc-rail a:hover::before,.svc-rail a:focus-visible::before{opacity:1;transform:none}
/* and the rule under the line is drawn, not switched on */
.svc-rail a::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:1.5px;
  background:var(--violet);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .75s var(--e-out);
}
html[dir="rtl"] .svc-rail a::after{transform-origin:right center}
.svc-rail a:hover::after,.svc-rail a:focus-visible::after{transform:scaleX(1)}
.svc-rail a:hover,.svc-rail a:focus-visible{padding-inline:clamp(18px,2.5vw,32px) 0}
html[dir="rtl"] .svc-rail a:hover,
html[dir="rtl"] .svc-rail a:focus-visible{padding-inline:0 clamp(18px,2.5vw,32px)}

.svc-rail .n{
  font-family:var(--serif);font-size:clamp(14px,1.3vw,17px);
  letter-spacing:.16em;color:var(--violet-ink);
  transition:transform .6s var(--e-out),opacity .4s;
  opacity:.75;
}
.svc-rail a:hover .n{opacity:1;transform:translateY(-2px)}

.svc-rail .body{display:block;min-width:0}
.svc-rail .ttl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.svc-rail h3{
  font-size:clamp(26px,3.9vw,54px);line-height:1.02;
  transition:transform .6s var(--e-out);
}
.svc-rail a:hover h3{transform:translateX(12px)}
html[dir="rtl"] .svc-rail a:hover h3{transform:translateX(-12px)}
.svc-rail p{
  margin:10px 0 0;color:var(--muted);font-size:15px;max-width:52ch;
  transition:transform .6s var(--e-out) .04s;
}
.svc-rail a:hover p{transform:translateX(12px)}
html[dir="rtl"] .svc-rail a:hover p{transform:translateX(-12px)}

.svc-rail .price{
  font-family:var(--serif);font-size:clamp(17px,1.7vw,22px);
  color:var(--ink);white-space:nowrap;
}
.svc-rail .go{
  width:clamp(42px,3.4vw,54px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--rule-strong);
  display:grid;place-items:center;color:var(--violet-ink);
  font-size:17px;line-height:1;
  transition:background .45s var(--e-out),color .45s var(--e-out),
             border-color .45s var(--e-out),transform .55s var(--e-out);
}
.svc-rail a:hover .go{
  background:var(--violet-ink);color:#fff;border-color:var(--violet-ink);
  transform:rotate(-45deg);
}
html[dir="rtl"] .svc-rail a:hover .go{transform:rotate(45deg)}

/* the inline thumbnail is for touch, where there is no cursor to follow */
.svc-rail .thumb{display:none}
.svc-rail .thumb img,.svc-rail .thumb video{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
}

@media (max-width:900px){
  /* the price and the number cannot share a column: the price is wide, and it
     would push the number's column out and leave a dead gap beside it. The
     number sits on its own line instead, which is the editorial reading. */
  .svc-rail a{
    grid-template-columns:1fr auto;
    grid-template-areas:"n n" "body body" "thumb thumb" "price go";
    gap:10px 16px;align-items:start;
  }
  .svc-rail .n{grid-area:n}
  .svc-rail .body{grid-area:body}
  .svc-rail .thumb{
    grid-area:thumb;display:block;
    aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--pale);
    margin-top:6px;
  }
  .svc-rail .price{grid-area:price;align-self:center}
  .svc-rail .go{grid-area:go;justify-self:end}
  .svc-rail a:hover h3,.svc-rail a:hover p{transform:none}
  .svc-rail a:hover{padding-inline:0}
}

/* the floating panel: brand frame, and it banks into the direction of travel */
.hover-media{
  width:clamp(260px,22vw,330px);
  border-radius:18px;
  background:var(--pale);
  box-shadow:0 50px 90px -40px rgba(77,58,127,.6);
  border:1px solid rgba(255,255,255,.7);
  transform:translate(-50%,-50%) scale(.88) rotate(var(--tilt,0deg));
}
.hover-media.on{transform:translate(-50%,-50%) scale(1) rotate(var(--tilt,0deg))}

@media (prefers-reduced-motion:reduce){
  .svc-rail a,.svc-rail a::before,.svc-rail a::after,
  .svc-rail h3,.svc-rail p,.svc-rail .n,.svc-rail .go{transition:none}
  .svc-rail a::after{transform:scaleX(0)}
  .svc-rail a:hover h3,.svc-rail a:hover p,.svc-rail a:hover .go{transform:none}
  .svc-rail a:hover{padding-inline:0}
  .svc-rail .thumb{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;max-width:280px}
}

/* ---------------------------------------------------------------------------
   24 · The journey — replaces the five-column stage strip
        Five equal columns under a flat line stated the stages but showed no
        movement through them, and nothing said whose turn it was at any point.
        This walks: a spine that draws as you scroll, stations alternating
        either side of it, each naming who acts, and a final station that is
        the invitation itself — so the path ends somewhere rather than stopping.
   ------------------------------------------------------------------------- */
.journey-sec{position:relative;overflow:hidden}
.journey{position:relative;margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(20px,3vw,40px)}

/* ---- the spine ---- */
.jspine{
  position:absolute;inset-block:0;left:50%;translate:-50% 0;
  width:2px;border-radius:2px;background:var(--rule);
  z-index:0;
}
.jspine i{
  position:absolute;inset-inline:0;top:0;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--violet-soft),var(--violet));
  box-shadow:0 0 18px rgba(137,116,192,.55);
}
/* the brand mark rides the drawn edge */
.jspine b{
  position:absolute;left:50%;top:0;
  translate:-50% -50%;
  font-size:19px;line-height:1;color:var(--violet);
  text-shadow:0 0 16px rgba(249,240,254,.95);
  opacity:0;transition:opacity .4s;
}
.jspine.lit b{opacity:1}

/* ---- stations ---- */
.jsteps{list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:grid;gap:clamp(22px,3vw,44px)}
.jstep{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,84px);align-items:center}
.jstep:nth-child(even) .jcard{grid-column:2}
.jstep:nth-child(odd)  .jcard{grid-column:1}

.jcard{
  position:relative;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px);
  border-radius:var(--r);
  /* Opaque enough that the copy holds its contrast whatever frame drifts
     behind it, still translucent enough to read as glass. */
  background:rgba(255,255,255,.84);
  border:1px solid rgba(255,255,255,.95);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 26px 60px -46px rgba(77,58,127,.55);
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s;
}
.jcard:hover{transform:translateY(-4px);box-shadow:var(--glow)}
/* the connector from card to spine, and the dot that sits on it */
.jcard::after{
  content:"";position:absolute;top:50%;width:clamp(14px,2.5vw,42px);height:1px;
  background:var(--rule-strong);
}
.jstep:nth-child(odd) .jcard::after{inset-inline-end:calc(clamp(14px,2.5vw,42px) * -1)}
.jstep:nth-child(even) .jcard::after{inset-inline-start:calc(clamp(14px,2.5vw,42px) * -1)}
.jcard::before{
  content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  translate:0 -50%;z-index:2;
  background:var(--paper);border:2px solid var(--rule-strong);
  transition:background .45s var(--e-out),border-color .45s var(--e-out),scale .45s var(--e-out);
}
.jstep:nth-child(odd) .jcard::before{inset-inline-end:calc(clamp(14px,2.5vw,42px) * -1 - 5px)}
.jstep:nth-child(even) .jcard::before{inset-inline-start:calc(clamp(14px,2.5vw,42px) * -1 - 5px)}
.jstep.on .jcard::before{background:var(--violet);border-color:var(--violet);scale:1.25}

.jnum{
  font-family:var(--serif);font-size:14px;letter-spacing:.18em;
  color:var(--violet-ink);display:inline-block;margin-inline-end:12px;
}
.jwho{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;vertical-align:2px;
}
html[lang="ar"] .jwho{letter-spacing:0;font-size:12px;font-weight:600}
.jwho-you {color:var(--violet-deep);background:var(--lav)}
.jwho-both{color:var(--violet-deep);background:rgba(137,116,192,.18);box-shadow:inset 0 0 0 1px rgba(137,116,192,.35)}
.jwho-us  {color:#fff;background:var(--violet-ink)}
.jcard h3{font-size:clamp(21px,2.1vw,27px);margin:14px 0 8px;line-height:1.12}
.jcard p{margin:0;color:var(--muted);font-size:15px}
.jmeta{
  display:inline-block;margin-top:14px;font-size:12.5px;letter-spacing:.06em;
  color:var(--faint);padding-top:10px;border-top:1px solid var(--rule);
}

/* ---- the last station: the invitation ---- */
.jend{
  position:relative;z-index:1;margin-top:clamp(30px,4vw,56px);
  max-width:640px;margin-inline:auto;text-align:center;
  padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px);
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(223,204,249,.75),rgba(249,240,254,.9));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 34px 80px -50px rgba(77,58,127,.6);
}
.jend-dot{
  position:absolute;top:-6px;left:50%;translate:-50% 0;
  width:13px;height:13px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 5px var(--paper),0 0 22px rgba(137,116,192,.7);
}
.jend-k{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet-ink);margin:0 0 10px;
}
html[lang="ar"] .jend-k{letter-spacing:0;font-size:12.5px}
.jend h3{font-size:clamp(24px,2.7vw,36px);margin:0 0 12px}
.jend-p{color:var(--muted);font-size:15px;margin:0 0 22px}
.jend .btn-row{justify-content:center;flex-wrap:wrap;display:flex;gap:12px}

/* ---- one column below the split ---- */
@media (max-width:860px){
  .jspine{left:11px;translate:none}
  html[dir="rtl"] .jspine{left:auto;right:11px}
  .jstep{grid-template-columns:1fr;gap:0}
  .jstep:nth-child(even) .jcard,
  .jstep:nth-child(odd)  .jcard{grid-column:1;margin-inline-start:40px}
  html[dir="rtl"] .jstep .jcard{margin-inline-start:0;margin-inline-end:40px}
  .jcard::after{width:26px;top:34px}
  .jstep .jcard::after{inset-inline-start:-26px;inset-inline-end:auto}
  .jcard::before{top:34px}
  .jstep .jcard::before{inset-inline-start:-37px;inset-inline-end:auto}
  .jend{margin-inline-start:40px;margin-inline-end:0;text-align:start}
  html[dir="rtl"] .jend{margin-inline-start:0;margin-inline-end:40px}
  .jend-dot{left:-36px;translate:none;top:26px}
  html[dir="rtl"] .jend-dot{left:auto;right:-36px}
  .jend .btn-row{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .jspine i{height:100%!important}
  .jspine b{display:none}
  .jstep.on .jcard::before,.jcard::before{background:var(--violet);border-color:var(--violet);scale:1}
  .jcard:hover{transform:none}
}

/* Interlock the zig-zag. Each station sits in its own grid row, so stacking
   them leaves the opposite half empty and the section grows very tall. Pulling
   every station after the first upward lets the two sides mesh — they never
   collide because consecutive stations are on opposite sides. Desktop only:
   below the split everything is one column and an overlap would be a collision. */
@media (min-width:861px){
  .jstep + .jstep{margin-top:calc(-1 * clamp(34px,6vw,110px))}
}

/* ---------------------------------------------------------------------------
   25 · Scenery — the films, far behind
        The palette is four cool violets and nothing else, so a flat field of
        it reads cold however well it is composed. The films carry what the
        palette cannot: skin, daylight, timber, dusk. Set far back, blurred
        past recognition and veiled, they warm the field without competing
        with a word of it — and the glass cards in front finally have
        something to refract.
   ------------------------------------------------------------------------- */
:root{
  /* How much of the film field comes through. 0 = flat paper, 1 = strong.
     Change this one number to make the scenery bolder or quieter. */
  --scenery-strength:.5;
}
.has-scenery{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.has-scenery > .wrap,
.has-scenery > .wrap-narrow{position:relative;z-index:1}

.scenery{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:paint}

.scenery-grid{
  position:absolute;inset:-14%;
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;
  /* The films are cinematic and therefore dark — sampled around rgb(60,50,49)
     to rgb(112,108,111). Veiling a dark image only turns a light page grey, so
     the frames are lifted into a pale wash first: contrast pulled in toward the
     midpoint, brightness raised hard, saturation pushed so the warmth that
     survives is the part worth keeping. */
  filter:blur(26px) contrast(.68) brightness(1.85) saturate(1.45);
  opacity:var(--scenery-strength);
  will-change:transform;
  animation:sceneDrift 72s ease-in-out infinite alternate;
}
.scenery-grid > span{position:relative;overflow:hidden;display:block}
.scenery-grid img,.scenery-grid video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes sceneDrift{
  from{transform:scale(1.06) translate3d(-1.5%,-1%,0)}
  to  {transform:scale(1.14) translate3d(1.5%,1%,0)}
}

/* the warmth: a low sun laid over the imagery, not over the palette */
.scenery-warm{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(255,214,164,.30), transparent 62%),
    radial-gradient(60% 50% at 84% 78%, rgba(255,186,150,.20), transparent 62%);
  mix-blend-mode:soft-light;
}

/* and the veil that keeps every word above it legible */
/* Dense where the heading sits directly on it, open across the middle where
   the glass cards carry their own background and the imagery can be felt. */
.scenery-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--paper) 0%,
    rgba(249,240,254,.94) 11%,
    rgba(249,240,254,.86) 20%,
    rgba(249,240,254,.52) 34%,
    rgba(249,240,254,.50) 76%,
    rgba(249,240,254,.90) 93%,
    var(--paper) 100%);
}

@media (max-width:900px){
  .scenery-grid{grid-template-columns:repeat(2,1fr);filter:blur(20px) contrast(.68) brightness(1.85) saturate(1.45);opacity:calc(var(--scenery-strength) * .85)}
  .scenery-veil{background:linear-gradient(180deg,var(--paper) 0%,rgba(249,240,254,.93) 10%,rgba(249,240,254,.68) 24%,rgba(249,240,254,.66) 80%,var(--paper) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .scenery-grid{animation:none;opacity:calc(var(--scenery-strength) * .8)}
}

/* ---------------------------------------------------------------------------
   26 · Descenders
        Each headline line is wrapped in an overflow:hidden box so the line can
        rise into view from below. That box clips at the text baseline, which
        cuts the tail off every y, g, p and j — "Only what's worth finding."
        lost both. Extending the box downward and pulling the same amount back
        off the margin gives the tails room without moving the layout a pixel.
   ------------------------------------------------------------------------- */
.split-lines .line{padding-bottom:.2em;margin-bottom:-.2em}
.split-lines .line > div{padding-bottom:.02em}

/* ---------------------------------------------------------------------------
   27 · Hero — the sculpture, and the one action that matters
   ------------------------------------------------------------------------- */
/* it was wide enough to sit under the buttons and crop against the edge */
.hero2 .glass2{
  width:min(31vw,430px);
  inset-inline-end:-2%;
  top:6%;
}
@media (max-width:900px){
  .hero2 .glass2{width:64vw;inset-inline-end:-16%;top:-2%;opacity:.85}
}
/* the actions read left with the copy, and Start a project leads */
.hero2 .h-cta{justify-content:flex-start;gap:14px}
.hero2 .h-row{grid-template-columns:1.25fr 1fr;align-items:end}
@media (max-width:900px){.hero2 .h-cta{justify-content:flex-start}}
.hero2 .btn-primary{
  box-shadow:0 16px 40px -14px rgba(34,30,51,.55);
  padding-inline:30px;
}
.hero2 .btn-ghost{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-color:rgba(137,116,192,.45);
}

/* ---------------------------------------------------------------------------
   29 · Separation between sections
        Every section sat on the same tint with the same padding, so the page
        read as one continuous column and nothing announced where one idea
        ended and the next began. Three things now do that work: more air, a
        hairline that fades in from the centre, and alternating ground so no
        two neighbours share the same field.
   ------------------------------------------------------------------------- */
main > section{padding-block:clamp(92px,11vw,168px)}
main > section + section{position:relative}
main > section + section::before{
  content:"";position:absolute;top:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(137,116,192,.30) 22%,
                             rgba(137,116,192,.30) 78%,transparent);
  z-index:2;
}
/* neighbours that already carry their own ground need no line drawn over it */
main > section.field-pale + section.field-pale::before,
main > .marquee + section::before,
main > section.field-violet::before,
main > section.on-violet::before{display:none}

/* alternate the ground so the eye can count the sections */
main > section.journey-sec{background:linear-gradient(180deg,var(--paper),rgba(232,226,250,.55) 50%,var(--paper))}
main > section.packages-sec{background:var(--pale)}
main > section.acad{background:linear-gradient(180deg,var(--paper),rgba(249,240,254,.4))}

/* and give each section head a mark of its own, so a heading reads as a start */
main > section > .wrap > .section-head > .eyebrow::after,
main > section > .wrap-narrow > .section-head > .eyebrow::after{
  content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--grad-deep);margin-top:14px;
}

/* The hero fills the viewport and hangs its content off the bottom edge, so a
   headline this large pushed the actions onto the fold. Slightly smaller type
   and more floor keeps Start a project comfortably in view on a laptop. */
.hero2{padding-bottom:clamp(64px,9vh,110px)}
/* The hero is a full viewport tall and hangs its content off the bottom, so a
   headline sized only by WIDTH pushes the actions past the fold on any short
   screen. Capping it against height as well keeps Start a project in view from
   a 13-inch laptop upward. */
.hero2 h1{font-size:min(clamp(46px,7.6vw,120px), 13.5vh)}
html[lang="ar"] .hero2 h1{font-size:min(clamp(42px,6.8vw,104px), 12vh)}
.hero2 .tag-line{font-size:min(clamp(26px,3.8vw,56px), 6vh)}
.hero2 .lede{max-width:40ch}

/* ---------------------------------------------------------------------------
   30 · Contrast, after the rebuild
        motion.css styles these as `.svc2 a .n` and `.svc2 a .go`, which
        outranks a two-class selector however late it loads — so the brand
        violet was still being used at 17 and 20px, where it measures 3.55:1.
        Matching its specificity lets the readable variant win.
   ------------------------------------------------------------------------- */
.svc-rail a .n{color:var(--violet-ink)}
.svc-rail a .go{color:var(--violet-ink)}
.svc-rail a:hover .go{color:#fff}

/* a solid chip rather than a translucent one: the same look, and its contrast
   can actually be verified instead of depending on whatever sits behind it */
.jwho-both{background:#DED6F1;box-shadow:none}

/* ---------------------------------------------------------------------------
   31 · Hero, balanced
        The hero is a full viewport tall and hung its content off the bottom
        edge, which left a large dead field under the navigation — worse once
        the stat row came out. Centring the block closes that gap without
        touching the sculpture, watermark or scroll cue, all of which are
        positioned against the section rather than the content.
   ------------------------------------------------------------------------- */
.hero2{align-items:center}
.hero2 .wrap{padding-block:clamp(24px,5vh,64px)}

/* the sculpture: bigger again, and lifted off the buttons rather than shrunk
   away from them */
.hero2 .glass2{
  width:min(42vw,600px);
  inset-inline-end:-6%;
  top:auto;
  bottom:12%;
}
@media (max-width:1200px){.hero2 .glass2{width:46vw;inset-inline-end:-10%;bottom:16%}}
@media (max-width:900px){.hero2 .glass2{width:72vw;inset-inline-end:-18%;top:-2%;bottom:auto;opacity:.8}}

/* ---------------------------------------------------------------------------
   32 · The two hero actions, told apart by weight rather than outline
   ------------------------------------------------------------------------- */
.hero2 .btn-primary{
  background:var(--ink);color:#fff;
  box-shadow:0 18px 44px -16px rgba(34,30,51,.6), inset 0 1px 0 rgba(255,255,255,.12);
  padding-inline:32px;
}
.hero2 .btn-primary:hover{background:var(--violet-deep)}
.hero2 .btn-ghost{
  background:rgba(255,255,255,.72);
  color:var(--violet-deep);
  border-color:rgba(137,116,192,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -18px rgba(77,58,127,.5);
}
.hero2 .btn-ghost:hover{
  background:#fff;border-color:var(--violet);color:var(--violet-deep);
}

/* ---------------------------------------------------------------------------
   33 · The wordmark, with light moving across it
        It was a flat tint sitting behind the copy. A highlight band now travels
        along the letterforms — the mark reads as something lit rather than
        printed, and it stays behind the text because it never changes opacity.
   ------------------------------------------------------------------------- */
.watermark{
  background:linear-gradient(100deg,
    rgba(223,204,249,.42) 0%,
    rgba(223,204,249,.42) 28%,
    rgba(255,255,255,.92) 42%,
    rgba(185,163,228,.58) 52%,
    rgba(223,204,249,.42) 66%,
    rgba(223,204,249,.42) 100%);
  background-size:280% 100%;
  background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  animation:wmSheen 9s cubic-bezier(.5,0,.5,1) infinite;
  opacity:.82;
}
@keyframes wmSheen{
  0%,8%   {background-position:120% 0}
  92%,100%{background-position:-60% 0}
}
html[dir="rtl"] .watermark{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.watermark{animation:none;background-position:50% 0}}

/* ---------------------------------------------------------------------------
   34 · The ticker, rebuilt
        The outlined lettering read as WordArt and the bar was far too tall for
        what it says. This is a ticker now: one line of small, wide-tracked
        capitals, with the ✦ given equal air on both sides so it reads as a
        separator between offers rather than as punctuation stuck to one.
   ------------------------------------------------------------------------- */
.marquee{
  padding:clamp(11px,1.2vw,15px) 0;
  background:var(--paper);
  border-block:1px solid rgba(137,116,192,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee .track{display:inline-flex;align-items:center;gap:0}
.marquee span{
  display:inline-flex;align-items:center;gap:0;
  font-family:var(--sans);
  font-size:clamp(11.5px,.92vw,14px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
/* equal air either side, so the mark sits between two offers */
.marquee span::after{
  content:"✦";
  margin-inline:clamp(22px,2.4vw,38px);
  font-size:9px;
  letter-spacing:0;
  color:var(--violet);
  opacity:.55;
}
/* the alternation is a shift of colour, not a change of lettering */
.marquee .mq-out{
  color:var(--violet-ink);
  -webkit-text-stroke:0;
}
html[lang="ar"] .marquee span{
  letter-spacing:0;text-transform:none;font-size:clamp(13px,1.05vw,16px);font-weight:500;
}
.marquee:hover span{color:var(--violet-deep)}

/* ---------------------------------------------------------------------------
   35 · Hero column
        The copy and the actions were in a two-column row, which put the buttons
        out under the sculpture — they collided, and the headline ran into it
        too. Copy, lede and actions now share one column on the reading side and
        the sculpture has the other to itself. Nothing overlaps anything.
   ------------------------------------------------------------------------- */
.hero2{min-height:min(100svh,960px)}
.hero2 .h-row{display:block;margin-top:clamp(20px,3vh,34px)}
.hero2 .lede{max-width:46ch}
.hero2 .h-cta{margin-top:clamp(22px,3.4vh,34px);justify-content:flex-start}
/* the headline turns before it reaches the sculpture */
.hero2 h1{max-width:15ch}
.hero2 .tag-line{max-width:30ch}

.hero2 .glass2{
  width:min(36vw,510px);
  inset-inline-end:-3%;
  bottom:15%;
}
@media (max-width:1200px){.hero2 .glass2{width:40vw;inset-inline-end:-8%;bottom:18%;opacity:.9}}
@media (max-width:900px){
  .hero2{min-height:100svh}
  .hero2 h1,.hero2 .tag-line,.hero2 .lede{max-width:none}
  .hero2 .glass2{width:74vw;inset-inline-end:-20%;top:-2%;bottom:auto;opacity:.75}
}

/* At narrow widths this figure clamps down to 22px — under the 24px that lets
   3:1 suffice — so it needs the readable variant of the hue. */
.entry .k{color:var(--violet-ink)}

/* ============================================================================
   36 · RESTRAINT — the same four colours, used far less
   ============================================================================
   The guideline's palette is #FFFFFF, #F9F0FE, #DFCCF9 and #8974C0. Nothing
   here leaves it. What changes is the proportion: the violet tint stopped
   being the ground and became an accent.

   White carries the page. #F9F0FE returns as an occasional band rather than a
   constant wash. #DFCCF9 and #8974C0 appear where something is being pointed
   at — a mark, a figure, one word in a heading — and nowhere else. Restraint
   is what reads as expensive; more colour reads as louder, not richer.
   ========================================================================== */
:root{
  --paper:#FFFFFF;          /* the ground                                    */
  --pale:#F9F0FE;           /* the guideline tint, now an occasional band     */
  --rule:rgba(34,30,51,.10);
  --rule-strong:rgba(34,30,51,.18);
  --scenery-strength:.34;   /* the films sit further back on a white page     */
}

/* the tinted fields become white; only .field-pale keeps the tint, and that
   is what gives the page its rhythm */
.field-light{background:#FFFFFF}
main > section.journey-sec,
main > section.acad{background:#FFFFFF}
main > section.packages-sec{background:var(--pale)}

/* the aurora was painting violet light across half the page — it stays, but
   only as a whisper, and only where a section has no other ground */
.bx-aurora i{opacity:.16;filter:blur(90px)}
.field-pale .bx-aurora,
.packages-sec .bx-aurora{opacity:.5}

/* the ✦ constellation reads as decoration when there is a lot of it */
.bx-stars b{opacity:0;animation-duration:calc(var(--dur,9s) * 1.6)}
@keyframes bxTwinkle{
  0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.6) rotate(0deg)}
  40%,60%{opacity:.45;transform:translate3d(0,-6px,0) scale(1) rotate(90deg)}
}

/* grain is for gradients; on white it is just noise */
.bx-grain{opacity:.014}

/* section boundaries: a finer line on white */
main > section + section::before{
  background:linear-gradient(90deg,transparent,rgba(34,30,51,.12) 26%,
                             rgba(34,30,51,.12) 74%,transparent);
}

/* cards sit on white now, so they need an edge rather than a tint */
.pk,.jcard,.portal-card,.glass-card{
  background:#FFFFFF;
  border:1px solid rgba(34,30,51,.09);
  box-shadow:0 22px 50px -40px rgba(34,30,51,.4);
}
.pk:hover,.jcard:hover{box-shadow:0 30px 64px -38px rgba(34,30,51,.34)}
.pk.lead{background:#FFFFFF}

/* one accent per heading, and the eyebrow rule reads quieter */
main > section > .wrap > .section-head > .eyebrow::after,
main > section > .wrap-narrow > .section-head > .eyebrow::after{
  width:26px;height:1.5px;background:var(--violet);opacity:.75;
}

/* the ticker: ink on white, the mark alone in violet */
.marquee{background:#FFFFFF;border-block-color:rgba(34,30,51,.10)}
.marquee .mq-out{color:var(--muted)}

/* ---------------------------------------------------------------------------
   37 · The film rail
        Smaller frames, moving on their own, and grabbable.
   ------------------------------------------------------------------------- */
.films-pin[data-auto-rail]{
  padding:clamp(64px,8vw,110px) 0;
  background:#FFFFFF;
  overflow:hidden;overflow:clip;
}
.films-pin[data-auto-rail] .films-track{
  display:block;padding:0;transform:none;
  cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.films-pin[data-auto-rail] .films-track.dragging{cursor:grabbing}
.films-loop{display:flex;gap:clamp(14px,1.6vw,22px);will-change:transform}
.films-pin[data-auto-rail] .film{
  flex:0 0 auto;
  width:min(34vw,400px);
  aspect-ratio:16/9;
  border-radius:16px;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out);
  box-shadow:0 24px 50px -38px rgba(34,30,51,.55);
}
.films-pin[data-auto-rail] .film:hover{transform:translateY(-6px) scale(1.015)}
.films-pin[data-auto-rail] .film .cap{padding:44px 18px 16px}
.films-pin[data-auto-rail] .film .cap b{font-size:clamp(16px,1.5vw,21px)}
.films-pin[data-auto-rail] .film .cap span{font-size:12px;max-width:34ch}
.films-pin[data-auto-rail] .film .cap .i{font-size:12px}
.films-pin[data-auto-rail] .film .pill{font-size:9.5px;padding:5px 9px}

/* the closing line, now under the rail rather than inside it */
.films-outro{
  width:auto;max-width:62ch;margin:clamp(30px,4vw,48px) auto 0;
  padding:0 var(--gutter);text-align:center;display:block;
}
.films-outro .lede{margin:0 auto}
.films-outro .btn-row{justify-content:center;display:flex;margin-top:18px}

/* say plainly that it can be pushed */
.rail-hint{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);align-self:center;
}
html[lang="ar"] .rail-hint{letter-spacing:0;font-size:12.5px}

@media (max-width:900px){
  .films-pin[data-auto-rail] .film{width:76vw}
  .films-pin[data-auto-rail] .films-track{overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  /* it stands still and becomes a normal scrolling strip */
  .films-pin[data-auto-rail] .films-track{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .films-loop{transform:none!important}
}

/* at this size the caption sits over a much smaller area of frame, so it needs
   a deeper scrim to stay readable on the brighter films */
.films-pin[data-auto-rail] .film .cap{
  background:linear-gradient(to top,
    rgba(20,17,32,.92) 0%, rgba(20,17,32,.72) 38%,
    rgba(20,17,32,.30) 68%, transparent 100%);
}
.films-pin[data-auto-rail] .film .cap span{opacity:.92}

/* ---------------------------------------------------------------------------
   38 · The wordmark
        It was set in the display serif, which is not the face the brand
        guideline names. It is Montserrat now — the guideline's own font for
        web — larger, and lit by a band of light that travels across the
        letterforms on its own, with a slow swell behind it so the light reads
        as moving over a surface rather than sliding across a flat fill.
   ------------------------------------------------------------------------- */
.watermark{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(150px,27vw,520px);
  letter-spacing:-.045em;
  bottom:-.12em;
  opacity:1;
  mix-blend-mode:normal;
  background:linear-gradient(105deg,
    #F3EDFB 0%,
    #EADFF8 18%,
    #FFFFFF 30%,
    #DFCCF9 38%,
    #EDE4FA 48%,
    #FFFFFF 58%,
    #E4D7F7 70%,
    #F3EDFB 100%);
  background-size:340% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:wmSheen 11s linear infinite, wmSwell 7s ease-in-out infinite alternate;
}
@keyframes wmSheen{
  from{background-position:0% 50%}
  to  {background-position:-340% 50%}
}
@keyframes wmSwell{
  from{transform:translateX(-50%) scaleY(1)}
  to  {transform:translateX(-50%) scaleY(1.035)}
}
html[dir="rtl"] .watermark{animation-direction:reverse,normal}
@media (prefers-reduced-motion:reduce){
  .watermark{animation:none;background-position:40% 50%}
}

/* Sized to the viewport rather than to a cap: "BiSSMiXi" in Montserrat 700
   measures about 4.6em wide, so ~21vw fills the width edge to edge without
   losing its last letter. Maximum, but whole. */
.watermark{font-size:clamp(96px,21vw,330px)}

/* the sculpture lifts into the empty field beside the navigation */
.hero2 .glass2{top:2%;bottom:auto;width:min(38vw,540px);inset-inline-end:-4%}
@media (max-width:1200px){.hero2 .glass2{width:42vw;inset-inline-end:-9%;top:4%;bottom:auto}}
@media (max-width:900px){.hero2 .glass2{width:74vw;inset-inline-end:-20%;top:-2%;opacity:.75}}

/* ---------------------------------------------------------------------------
   39 · Packages, told apart
        One rail of five cards could not say which product it priced. There are
        three families of work, each is now named and numbered with its own
        rail, and the two products still being built sit apart with no figure
        anywhere near them.
   ------------------------------------------------------------------------- */
.pk-group{margin-top:clamp(38px,5vw,64px)}
.pk-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,26px);
  align-items:baseline;padding-bottom:16px;margin-bottom:clamp(18px,2vw,26px);
  border-bottom:1px solid var(--rule);
}
.pk-n{font-family:var(--serif);font-size:14px;letter-spacing:.18em;color:var(--violet-ink)}
.pk-head h3{font-size:clamp(21px,2.2vw,30px);line-height:1.1}
.pk-head p{margin:6px 0 0;color:var(--muted);font-size:14.5px;max-width:56ch}
.pk-all{
  font-size:13px;font-weight:600;color:var(--violet-ink);white-space:nowrap;
  display:inline-flex;gap:6px;align-items:center;
}
.pk-all span{transition:transform .4s var(--e-out)}
.pk-all:hover span{transform:translateX(4px)}
html[dir="rtl"] .pk-all:hover span{transform:translateX(-4px)}
@media (max-width:760px){
  .pk-head{grid-template-columns:auto 1fr;gap:10px 14px}
  .pk-all{grid-column:1/-1}
}
.pk-rail.pk-5{grid-template-columns:repeat(5,1fr)}
.pk-rail.pk-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.pk-rail.pk-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pk-rail.pk-5,.pk-rail.pk-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pk-rail.pk-5,.pk-rail.pk-3{grid-template-columns:1fr}}

/* the two with no price */
.pk-group-soon .pk-head{border-bottom-color:transparent}
.soon-rail{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:760px){.soon-rail{grid-template-columns:1fr}}
.soon-card{
  display:block;padding:clamp(22px,2.2vw,30px);border-radius:var(--r);
  background:var(--pale);border:1px dashed rgba(137,116,192,.42);
  transition:transform .5s var(--e-out),border-color .4s;
}
.soon-card:hover{transform:translateY(-4px);border-color:var(--violet)}
.soon-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-deep);background:var(--lav);
  padding:4px 9px;border-radius:5px;margin-bottom:12px;
}
html[lang="ar"] .soon-tag{letter-spacing:0;font-size:11.5px}
.soon-card h4{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px);margin:0 0 8px}
.soon-card p{margin:0;color:var(--muted);font-size:14.5px}

/* add-ons */
.pk-addon{
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,40px);align-items:center;
  margin-top:clamp(34px,4vw,52px);padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r);background:#FFFFFF;border:1px solid var(--rule-strong);
}
.pk-addon h4{font-size:16px;margin:0 0 6px}
.pk-addon p{margin:0;color:var(--muted);font-size:14.5px;max-width:78ch}
@media (max-width:760px){.pk-addon{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   40 · Section grounds and breathing room
   ------------------------------------------------------------------------- */
/* the services head sat hard against the rule above it */
main > section#services{padding-top:clamp(112px,13vw,190px)}
/* and it gets a ground of its own so it reads as a distinct chapter */
main > section#services{background:linear-gradient(180deg,#FFFFFF,var(--pale) 38%,var(--pale) 88%,#FFFFFF)}

/* the manifesto now has a head, so it needs the spacing of one */
.mf-head{margin-bottom:clamp(26px,4vw,46px)}
.manifesto{padding-block:clamp(88px,12vw,150px)}

/* the podcast pair: colour moving behind it rather than a flat field */
.card-pod-sec{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:#FFFFFF}
.card-pod-sec::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 16% 24%, rgba(223,204,249,.85), transparent 62%),
    radial-gradient(38% 42% at 86% 30%, rgba(169,149,214,.55), transparent 62%),
    radial-gradient(46% 40% at 52% 92%, rgba(137,116,192,.32), transparent 62%);
  filter:blur(46px);
  animation:podDrift 26s ease-in-out infinite alternate;
}
@keyframes podDrift{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to  {transform:translate3d(2%,2%,0) scale(1.1)}
}
.card-pod-sec > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.card-pod-sec::before{animation:none}}

/* the numbers band: narrower, titled, and no longer full-bleed heavy */
.stat-head{max-width:52ch;margin-bottom:clamp(24px,3vw,38px)}
.stat-head h3{font-size:clamp(20px,2.1vw,28px);line-height:1.2;color:#fff}
.stat-row{gap:clamp(18px,3vw,44px)}
.stat-row .num{font-size:clamp(34px,3.6vw,52px)}
.stat-row .lbl{font-size:12.5px;max-width:16ch}
section.field-violet.on-violet{padding-block:clamp(64px,8vw,104px)}

/* ---------------------------------------------------------------------------
   41 · Film rail controls
   ------------------------------------------------------------------------- */
.films-head{position:relative}
.rail-nav{display:flex;gap:12px;align-items:center;margin-inline-start:auto;margin-top:16px}
.rail-nav button{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--rule-strong);background:#FFFFFF;color:var(--violet-ink);
  font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .35s var(--e-out),color .35s var(--e-out),
             border-color .35s var(--e-out),transform .35s var(--e-out);
}
.rail-nav button:hover{background:var(--violet-ink);color:#fff;border-color:var(--violet-ink);transform:translateY(-2px)}
.rail-nav button:active{transform:translateY(0)}

/* the frame nearest the middle is lifted, so the eye has somewhere to rest */
.films-pin[data-auto-rail] .film{opacity:.86;transform:scale(.96);transform-origin:center;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.films-pin[data-auto-rail] .film.mid{opacity:1;transform:scale(1);
  box-shadow:0 34px 64px -34px rgba(34,30,51,.6)}
.films-pin[data-auto-rail] .film.mid .cap b{color:#fff}
@media (prefers-reduced-motion:reduce){
  .films-pin[data-auto-rail] .film{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------------
   42 · Package tables
        Each family now sits under the work it prices, as its own section. The
        ground goes dark so the columns can come forward in light — which is
        how the company profile reads a price table, and it is the right way
        round: the reader's eye lands on the tiers, not on the frame.
   ------------------------------------------------------------------------- */
.pkg-sec{
  position:relative;isolation:isolate;
  background:
    radial-gradient(70% 60% at 18% 8%, rgba(137,116,192,.30), transparent 60%),
    radial-gradient(60% 55% at 88% 82%, rgba(77,58,127,.42), transparent 62%),
    #221E33;
  color:#fff;
  padding-block:clamp(80px,10vw,140px);
}
.pkg-sec .eyebrow{color:var(--lav)}
.pkg-sec .eyebrow::after{background:var(--lav);opacity:.8}
.pkg-sec h2{color:#fff}
.pkg-sec .acc{
  background:linear-gradient(90deg,#DFCCF9,#FFFFFF 60%,#DFCCF9);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.pkg-sec .lede{color:rgba(255,255,255,.74)}

.pkg-table-wrap{
  margin-top:clamp(34px,4vw,54px);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.pkg-table{
  width:100%;border-collapse:separate;border-spacing:clamp(8px,.9vw,14px) 0;
  min-width:720px;
}
.pkg-table th,.pkg-table td{text-align:center;vertical-align:middle}

/* the column heads are the light cards */
.pkg-table thead th{
  background:#FFFFFF;color:var(--ink);
  border-radius:16px 16px 0 0;
  padding:clamp(18px,2vw,26px) clamp(10px,1.2vw,18px) clamp(14px,1.6vw,20px);
  position:relative;
}
.pkg-table thead th.corner{background:transparent}
.pkg-table thead th.lead{box-shadow:inset 0 3px 0 var(--violet)}
.tn{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--violet-ink);margin-bottom:8px}
html[lang="ar"] .tn{letter-spacing:0;font-size:13px}
.tp{display:block;font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);line-height:1;color:var(--ink)}
.tp small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
          letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
.ts{display:block;font-size:12px;color:var(--faint);margin-top:8px}
.tbadge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--violet-ink);padding:4px 10px;border-radius:999px;white-space:nowrap;
}
html[lang="ar"] .tbadge{letter-spacing:0;font-size:11px}

/* the body cells continue the light column */
.pkg-table tbody td{
  background:#FFFFFF;color:var(--ink);
  padding:clamp(11px,1.2vw,15px) 10px;
  border-top:1px solid rgba(34,30,51,.07);
}
.pkg-table tbody tr:last-child td{border-radius:0 0 16px 16px;padding-bottom:20px}
.pkg-table tbody th{
  text-align:start;font-weight:500;font-size:14px;
  color:rgba(255,255,255,.82);padding:clamp(11px,1.2vw,15px) 18px clamp(11px,1.2vw,15px) 0;
  white-space:normal;min-width:190px;
}
html[dir="rtl"] .pkg-table tbody th{padding:clamp(11px,1.2vw,15px) 0 clamp(11px,1.2vw,15px) 18px}

/* included, and not included */
.tk{font-style:normal;font-size:14px;color:var(--violet-ink);line-height:1}
/* a "not included" mark carries meaning, so it has to be readable, not faded */
.tk-no{color:#8A5A2B;font-size:13px;font-weight:700}
.tv{font-size:13.5px;font-weight:600;color:var(--ink)}

.pkg-foot{
  display:flex;gap:clamp(16px,3vw,36px);align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:clamp(26px,3vw,38px);
}
.pkg-foot .note{color:rgba(255,255,255,.62);margin:0;max-width:70ch}
.pkg-sec .btn-primary{background:#FFFFFF;color:var(--ink)}
.pkg-sec .btn-primary:hover{background:var(--lav)}

/* a dark section needs no drawn boundary above it */
main > section.pkg-sec::before{display:none}
main > section.pkg-sec + section::before{display:none}

@media (max-width:760px){
  .pkg-table{min-width:620px}
  .pkg-table tbody th{min-width:150px;font-size:13px}
  .pkg-foot{justify-content:flex-start}
}

/* ---------------------------------------------------------------------------
   43 · The question
        The section asks something, so the title is the question — and the mark
        carries the accent instead of a word.
   ------------------------------------------------------------------------- */
.mf-title .qm{
  background:var(--grad-deep);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-style:italic;padding-inline-start:.04em;
}

/* the badge sits above the column, so the scroll wrapper needs room or it clips */
.pkg-table-wrap{padding-top:18px}
/* "not included" must still be legible, not merely absent */
.tk-no{color:rgba(34,30,51,.42);font-size:14px}

/* The tick is not decoration — it states whether a tier includes something —
   so it has to meet text contrast. The brand violet reads 3.95:1 at this size;
   the darker step of the same hue reads 6.04:1. */
.tk{color:var(--violet-ink)}

/* ---------------------------------------------------------------------------
   44 · The seam under the navigation, and the wordmark's feet
        The bar is sticky, so it holds its layout space. Anything that moves it
        vertically uncovers the page ground behind it — which is white now, so
        a 20px white band appeared between the bar and the hero. The animation
        no longer moves it; this belt-and-braces makes a seam invisible even if
        something else shifts it later.
   ------------------------------------------------------------------------- */
.nav{background-clip:padding-box}
.hero2{margin-top:-1px;padding-top:1px}

/* The wordmark sat at bottom:-.12em and the hero clips its overflow, so the
   bottom of every letter was cut — measured at 37px on every screen height.
   It now sits fully inside, and its size is capped by the viewport's SHORTER
   dimension as well as its width, so it stays whole on a laptop, a tall phone
   and a wide monitor alike. */
.watermark{
  bottom:clamp(6px,1.6vh,26px);
  font-size:min(clamp(72px,21vw,330px), 34vh);
  line-height:.82;
}
html[lang="ar"] .watermark{font-size:min(clamp(64px,19vw,300px), 30vh)}
@media (max-width:900px){
  .watermark{font-size:min(26vw, 22vh);bottom:clamp(4px,1.2vh,16px)}
}

/* ---------------------------------------------------------------------------
   45 · Plan buttons were clipping their own labels
        "Choose Prestige" and its siblings were wider than the button box, so
        the label was being cut. They now fill the card and shrink their text
        before they shrink the words.
   ------------------------------------------------------------------------- */
.plan .btn{
  width:100%;
  padding-inline:clamp(10px,1.4vw,20px);
  font-size:clamp(13px,1.05vw,15px);
  white-space:nowrap;
  overflow:visible;
}
html[lang="ar"] .plan .btn{font-size:clamp(13.5px,1.1vw,15.5px)}

/* ---------------------------------------------------------------------------
   46 · Package teasers on the home page
        The full tables moved to the pages that own them. What stays here is
        the least a reader needs to decide whether to look: what it is, where
        the price starts, and how many tiers there are. Enough to pull, not
        enough to browse.
   ------------------------------------------------------------------------- */
.pkg-teaser{padding-block:clamp(26px,3.4vw,44px);background:#FFFFFF}
.pkg-teaser + .pkg-teaser{padding-top:0}
.teaser{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(24px,3vw,38px) clamp(22px,2.8vw,36px);
  border-radius:var(--r);
  background:var(--pale);
  border:1px solid rgba(137,116,192,.16);
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s;
}
.teaser:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 64px -44px rgba(77,58,127,.55);
  border-color:var(--violet);
}
.t-copy .eyebrow{margin-bottom:10px}
.t-blurb{margin:0;color:var(--muted);font-size:15.5px;max-width:62ch}
.t-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:14px;font-weight:600;color:var(--violet-ink);
}
.t-go span{transition:transform .4s var(--e-out)}
.teaser:hover .t-go span{transform:translateX(5px)}
html[dir="rtl"] .teaser:hover .t-go span{transform:translateX(-5px)}
.t-fig{text-align:end;white-space:nowrap}
.t-price{
  display:block;font-family:var(--serif);
  font-size:clamp(24px,2.6vw,36px);line-height:1;color:var(--ink);
}
.t-meta{display:block;margin-top:8px;font-size:12.5px;color:var(--faint)}
@media (max-width:760px){
  .teaser{grid-template-columns:1fr;gap:18px}
  .t-fig{text-align:start}
}

/* ---------------------------------------------------------------------------
   47 · Tightening, and the last clipped mark
   ------------------------------------------------------------------------- */
/* The question mark rides above the cap height, so the line box clipped its
   top exactly as the descenders were clipped at the bottom. */
.split-lines .line{padding-top:.16em;margin-top:-.16em}
.mf-title .qm{line-height:1}

/* The page was scrolling far longer than it reads. Sections keep their
   separation but stop being cavernous. */
main > section{padding-block:clamp(58px,6.5vw,104px)}
main > section#services{padding-top:clamp(64px,7.5vw,120px)}
.manifesto{padding-block:clamp(56px,7vw,100px)}
.journey{margin-top:clamp(28px,3.4vw,48px)}
.pkg-sec{padding-block:clamp(56px,7vw,104px)}
section.field-violet.on-violet{padding-block:clamp(48px,6vw,80px)}
.films-pin[data-auto-rail]{padding:clamp(48px,6vw,84px) 0}
.section-head{margin-bottom:clamp(28px,3.4vw,46px)}

/* The journey spine ran past the closing card and out the bottom. It should
   arrive at the invitation and stop there. */
.journey .jspine{bottom:clamp(150px,20vh,240px)}
.jend{margin-top:clamp(22px,3vw,40px)}

/* The navigation sits centred, with a little air above and below that is not
   a white band. */
.nav .wrap{align-items:center}
html.bx-scrolled .nav .wrap{height:64px}
.nav{background:linear-gradient(180deg,rgba(249,240,254,.94),rgba(255,255,255,.9))}
html.bx-scrolled .nav{background:linear-gradient(180deg,rgba(249,240,254,.97),rgba(255,255,255,.94))}

/* ---------------------------------------------------------------------------
   48 · "Not included" must be readable, not faded out
        Excluded lines were set in --faint with a faint dash, which on the
        highlighted dark card left them almost invisible — the reader could not
        tell whether the line was absent or just unreadable. They now sit in a
        legible muted tone with a clear amber dash, so "not in this tier" reads
        as a deliberate statement rather than a rendering fault.
   ------------------------------------------------------------------------- */
.plan li.no{
  color:var(--muted);
  opacity:1;
}
.plan li.no::before{
  content:"–";
  color:#B06A2C;
  font-weight:700;
  font-size:13px;
  margin-top:1px;
}
/* on the highlighted card the ground is dark, so both need lifting */
.plan.hi li.no{color:rgba(255,255,255,.72)}
.plan.hi li.no::before{color:#E8A765}
.plan.hi li{color:#fff}
.plan.hi li::before{color:var(--lav)}

/* the same distinction inside the comparison tables */
.tk-no{color:#B06A2C;font-weight:700}


/* ==========================================================================
   49 · Package finder — the doorway on the home page
   A dark band between the services rail and the film strip. No figures here:
   it is an invitation, not a price table.
   ========================================================================== */
.fi-sec{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.fi-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 8% 0%,rgba(137,116,192,.34),transparent 70%),
             radial-gradient(50% 55% at 95% 30%,rgba(108,82,177,.28),transparent 72%)}
.fi{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:900px){.fi{grid-template-columns:minmax(0,1fr);gap:30px}}
.fi-copy h2{color:#fff}
.fi-copy h2 .acc{color:var(--lav);font-style:italic}
.fi-copy .lede{color:rgba(255,255,255,.74);margin-top:20px;max-width:44ch}
.fi-note{margin-top:20px;padding-inline-start:15px;border-inline-start:2px solid var(--violet-soft);
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);max-width:42ch}
.fi-note b{color:#fff;font-weight:600}

.fi-choices{display:grid;gap:10px}
.fi-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:19px 22px;border-radius:16px;text-decoration:none;color:#fff;
  border:1px solid rgba(223,204,249,.2);background:rgba(255,255,255,.05);
  transition:border-color .24s var(--ease),background .24s var(--ease),transform .24s var(--ease)}
.fi-card:hover{border-color:var(--violet-soft);background:rgba(137,116,192,.22);transform:translateX(4px)}
[dir=rtl] .fi-card:hover{transform:translateX(-4px)}
.fi-card:focus-visible{outline:2px solid var(--lav);outline-offset:3px}
.fi-card .mk{font-size:15px;color:#C9B7EC;line-height:1}
.fi-card .n{font-weight:600;font-size:16px;letter-spacing:-.005em;display:block}
.fi-card .s{font-size:13.5px;color:rgba(255,255,255,.66);display:block;margin-top:3px;line-height:1.5}
.fi-card .go{font-size:19px;color:#C9B7EC;transition:transform .24s var(--ease)}
.fi-card:hover .go{transform:translateX(3px)}
[dir=rtl] .fi-card .go{transform:scaleX(-1)}
[dir=rtl] .fi-card:hover .go{transform:scaleX(-1) translateX(3px)}
.fi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.fi-foot .small{color:rgba(255,255,255,.6);font-size:13px;margin:0}
@media (prefers-reduced-motion:reduce){.fi-card,.fi-card .go{transition:none}}

/* a second heading inside a section — used where one section carries two lists */
.sub-head{margin-top:clamp(46px,5vw,72px);margin-bottom:clamp(22px,2.6vw,32px);max-width:62ch}
.on-violet .sub-head .lede{color:rgba(255,255,255,.74)}
.grid.g4 > div{min-width:0}