/* Six Cube Technologies — site.css
   Brand: isometric hex-cube mark with a cyan → blue → violet → pink → coral gradient,
   thin monospace wordmark. Display type: Azeret Mono (light). Text: Instrument Sans. */

@font-face{font-family:"Azeret Mono";src:url(../fonts/azeret-mono.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Azeret Mono";src:url(../fonts/azeret-mono-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  /* brand spectrum, sampled from the logo */
  --cyan:#1FC8FF; --blue:#3B7BFF; --violet:#8A5CF6; --pink:#F062B0; --coral:#FF8A5B;
  --grad:linear-gradient(115deg,var(--cyan) 0%,var(--blue) 24%,var(--violet) 50%,var(--pink) 76%,var(--coral) 100%);
  /* the three practices take their colour from the mark */
  --build:#3B7BFF; --grow:#8A5CF6; --run:#F2667E;

  --paper:#F7F7FB;      /* page */
  --surface:#FFFFFF;    /* cards, panels, alt sections */
  --white:#FFFFFF;
  --ink:#15132B;        /* text */
  --ink-2:#5A5772;      /* secondary text */
  --line:#E4E2EE;
  --field-line:#C9C6DA;
  --mark:#9A97AE;       /* separators, "not included" */
  --deep:#120F28;       /* always-dark bands, footer, table heads */
  --accent-bg:#EFEBFF; --on-accent:#15132B;
  --action:#5B3FE0; --action-hover:#3F25B8;   /* links */
  --btn-bg:#15132B; --btn-ink:#FFFFFF;        /* primary buttons */
  --on-action:#FFFFFF;
  --head-bg:rgba(247,247,251,.88);
  --shadow:rgba(21,19,43,.18);
  --grid:rgba(21,19,43,.07);
  --glow:.32;
  --danger:#B42318; --danger-bg:#FFF6F5; --danger-box:#FFF1F0; --danger-line:#F4C7C3; --danger-text:#7A271A;

  --display:"Azeret Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:clamp(1.8rem,1.4rem + 1.4vw,2.4rem); --step-4:clamp(2.3rem,1.4rem + 3.4vw,4rem);
  --gutter:clamp(1rem,.5rem + 2.5vw,2.5rem);
  --max:76rem;
  --radius:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#0B0A16; --surface:#14122A; --white:#14122A;
  --ink:#EEEDF7; --ink-2:#ABA8C4; --line:#282545; --field-line:#3B3760; --mark:#6E6A8E;
  --deep:#06050E; --accent-bg:#221C48; --on-accent:#EEEDF7;
  --action:#B3A4FF; --action-hover:#D4CBFF;
  --btn-bg:#FFFFFF; --btn-ink:#15132B; --on-action:#15132B;
  --head-bg:rgba(11,10,22,.86); --shadow:rgba(0,0,0,.6);
  --grid:rgba(238,237,247,.06); --glow:.5;
  --danger:#FF8A80; --danger-bg:#2A1518; --danger-box:#2A1518; --danger-line:#6B2B2B; --danger-text:#FFB4AB;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.62 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:var(--action);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--action-hover)}
::selection{background:var(--violet);color:#fff}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;letter-spacing:-.04em;margin:0 0 .5em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:500;line-height:1.25;letter-spacing:-.03em}
p{margin:0 0 1em;max-width:66ch}
ul{padding-left:1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lede{font-size:var(--step-1);line-height:1.55;color:var(--ink-2);max-width:56ch}
.muted{color:var(--ink-2)}
.on-dark{display:none}
:root[data-theme=dark] .on-light{display:none}
:root[data-theme=dark] .on-dark{display:block}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.9em 1.45em;border-radius:8px;font-weight:600;text-decoration:none;line-height:1.1;
  color:var(--btn-ink);border:1.5px solid transparent;
  background:linear-gradient(var(--btn-bg),var(--btn-bg)) padding-box,var(--grad) border-box;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{color:var(--btn-ink);transform:translateY(-1px);box-shadow:0 10px 24px -12px var(--violet)}
.btn--ghost{color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(var(--field-line),var(--field-line)) border-box}
.btn--ghost:hover{color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;box-shadow:none}
/* buttons on always-dark bands */
.btn--light,.band .btn:not(.btn--ghost),.cta-strip .btn{color:#15132B;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.btn--light:hover,.band .btn:not(.btn--ghost):hover,.cta-strip .btn:hover{color:#15132B}
.band .btn--ghost{color:#fff;background:linear-gradient(var(--deep),var(--deep)) padding-box,linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)) border-box}
.band .btn--ghost:hover{color:#fff;background:linear-gradient(var(--deep),var(--deep)) padding-box,var(--grad) border-box}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand-mark img{height:40px;width:auto}
.brand-word img{height:36px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:.15rem}
.nav a,.nav summary{display:block;padding:.55rem .8rem;color:var(--ink);text-decoration:none;font-weight:500;border-radius:8px;cursor:pointer;white-space:nowrap}
.nav a:hover,.nav summary:hover{background:var(--surface);color:var(--ink)}
.nav [aria-current=page]{color:var(--ink);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1px solid transparent;padding:calc(.55rem - 1px) calc(.8rem - 1px)}
.nav details{position:relative}
.nav summary{list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";display:inline-block;width:.38em;height:.38em;margin-left:.45em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-.2em) rotate(45deg);transition:transform .25s var(--ease)}
.nav details[open] summary::after{transform:translateY(0) rotate(-135deg)}
.menu{position:absolute;top:calc(100% + .6rem);left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem;box-shadow:0 24px 48px -24px var(--shadow);min-width:15rem;animation:menu-in .22s var(--ease)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{padding:.42rem .6rem;font-weight:450}
.menu--services{display:grid;grid-template-columns:repeat(3,minmax(12rem,1fr));gap:1rem;left:50%;transform:translateX(-50%);width:max-content;animation:none}
.menu h4{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem .6rem;font:500 var(--step--1)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink-2)}
.menu .all{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.6rem}
.nav .btn{margin-left:.6rem;white-space:nowrap}
.nav .nav-login{display:inline-flex;align-items:center;gap:.45rem;margin-left:.6rem;padding:.55rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:500;white-space:nowrap}
.nav .nav-login svg{width:16px;height:16px;flex:none}
.nav .nav-login:hover{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border-color:transparent}
.nav-toggle{display:none;margin-left:0;background:none;border:1px solid var(--line);border-radius:8px;padding:.55rem .8rem;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.theme-toggle{flex:none;display:grid;place-items:center;width:42px;height:42px;margin-left:.5rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border-color:transparent}
.theme-toggle svg{width:19px;height:19px;grid-area:1/1;transition:transform .45s var(--ease),opacity .3s}
.theme-toggle .moon{transform:rotate(-70deg) scale(.4);opacity:0}
:root[data-theme=dark] .theme-toggle .sun{transform:rotate(70deg) scale(.4);opacity:0}
:root[data-theme=dark] .theme-toggle .moon{transform:none;opacity:1}

/* Homepage: the header logo assembles once, the way the logo animation does */
.is-home .brand-mark{animation:mark-in .9s var(--ease) both}
.is-home .brand-word img{animation:wipe-in 1.1s var(--ease) .35s both}
@keyframes mark-in{from{opacity:0;transform:scale(.7) rotate(-8deg)}}
@keyframes wipe-in{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.is-home .brand-word img{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}

/* ---------- Practice markers (tiny isometric block, coloured per practice) ---------- */
.face{width:18px;height:19px;flex:none;display:inline-block;vertical-align:middle}
.face polygon{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round;opacity:.3}
.face polygon.on{opacity:1;stroke:none}
.face .t.on{fill:var(--run)}.face .l.on{fill:var(--build)}.face .r.on{fill:var(--grow)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,2rem + 5vw,6.5rem) 0 clamp(2.5rem,2rem + 3vw,5rem)}
.hero::before{ /* faint isometric grid: same 30° angles as the cube */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(30deg,var(--grid) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(150deg,var(--grid) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 75% 45%,#000 20%,transparent 75%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.2fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{max-width:16ch;animation:rise .9s var(--ease) .1s both}
.hero .lede{margin-bottom:2rem;animation:rise .9s var(--ease) .22s both}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;animation:rise .9s var(--ease) .34s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* The mark: revealed by a diagonal sweep of light (as in the logo animation), then floats */
.hero-mark{position:relative;width:100%;max-width:400px;margin-inline:auto;aspect-ratio:720/816}
.hero-mark img{position:relative;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(120deg,#000 42%,transparent 58%);mask-image:linear-gradient(120deg,#000 42%,transparent 58%);
  -webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:sweep 1.6s var(--ease) .15s both,float 7s ease-in-out 1.8s infinite}
@keyframes sweep{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-glow{position:absolute;inset:12% 8%;border-radius:50%;background:var(--grad);filter:blur(60px);opacity:var(--glow);animation:glow-in 2s ease .4s both}
@keyframes glow-in{from{opacity:0}}
.hero-mark .sheen{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mark-url) center/contain no-repeat;mask:var(--mark-url) center/contain no-repeat;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:120% 0;
  animation:sheen 1.4s ease 1.7s both}
@keyframes sheen{to{background-position:-20% 0}}
.hero-mark{--mark-url:url(../img/sc-mark-light-720.webp)}
:root[data-theme=dark] .hero-mark{--mark-url:url(../img/sc-mark-dark-720.webp)}

/* ---------- Client strip ---------- */
.clients{border-block:1px solid var(--line);background:var(--surface)}
.clients .wrap{display:flex;align-items:center;gap:1rem 2.5rem;padding-block:1.25rem}
.clients p{margin:0;font-size:var(--step--1);color:var(--ink-2);white-space:nowrap}
.clients ul{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem;list-style:none;margin:0;padding:0}
.clients li{font:400 .92rem/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}

/* ---------- Sections ---------- */
.section{padding-block:clamp(3.5rem,2.5rem + 4vw,6.5rem)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.25rem)}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--ink-2)}
.gradient-rule,.practices,.steps li,.band ol li:first-child{border-image:var(--grad) 1}

/* Services: three practices */
.practices{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid}
.practice{padding:1.75rem 1.75rem 2rem 0}
.practice+.practice{padding-left:1.75rem;border-left:1px solid var(--line)}
.practice h3{display:flex;align-items:center;gap:.65rem;font-size:var(--step-2);font-weight:300}
.practice h3 .face{width:26px;height:27px}
.practice>p{color:var(--ink-2);min-height:5em}
.practice ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.practice li{border-bottom:1px solid var(--line)}
.practice li a{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;color:var(--ink);text-decoration:none;font-weight:500;transition:padding .25s var(--ease),color .2s}
.practice li a span{color:var(--ink-2);font-weight:400;font-size:var(--step--1);text-align:right}
.practice li a:hover{color:var(--action);padding-left:.4rem}

/* monday.com band */
.band{position:relative;background:var(--deep);color:#DCDAEE;overflow:hidden}
.band::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.band h2,.band h3{color:#fff}
.band .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.band .lede{color:#B4B1CC}
.band ol{list-style:none;margin:0;padding:0;counter-reset:step;display:grid}
.band li{counter-increment:step;display:grid;grid-template-columns:3.2rem 1fr;gap:.25rem 1rem;padding:1.15rem 0;border-top:1px solid rgba(255,255,255,.12)}
.band li::before{content:"0" counter(step);grid-row:span 2;font:300 var(--step-2)/1 var(--display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.band li strong{color:#fff;font-weight:600}
.band li span{color:#B4B1CC}
.band .actions{margin-top:2rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* Work */
.work{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1rem,2.5vw,2rem)}
.project{grid-column:span 2;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.project:nth-child(1),.project:nth-child(2){grid-column:span 3}
.project figure{margin:0 0 1rem;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);background:var(--line);position:relative}
.project figure::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.project:hover figure::after{opacity:1}
.project figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.project:hover figure img{transform:scale(1.04)}
.project h3{margin-bottom:.25rem}
.project p{color:var(--ink-2);margin:0}
.project .sector,.post time{font:500 var(--step--1)/1.3 var(--display);letter-spacing:-.02em;color:var(--action);margin-bottom:.4rem;display:block}

/* Sectors */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:0 2.5rem;margin:0;padding:0;list-style:none}
.sectors li{padding:1.15rem 0;border-top:1px solid var(--line)}
.sectors strong{display:block;font:500 var(--step-0)/1.3 var(--display);letter-spacing:-.03em;margin-bottom:.25rem}
.sectors span{color:var(--ink-2);font-size:var(--step--1)}

/* Quotes */
.quotes{display:grid;align-items:start;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.quote{margin:0;padding:2rem;background:var(--surface);border-radius:14px;border:1px solid var(--line)}
.quote:first-child{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.quote blockquote{margin:0 0 1.5rem;font-size:var(--step-1);line-height:1.5}
.quote:first-child blockquote{font:300 var(--step-2)/1.35 var(--display);letter-spacing:-.035em}
.quote figcaption{display:flex;align-items:center;gap:.8rem;font-weight:600}
.quote figcaption small{display:block;font-weight:400;color:var(--ink-2)}

/* Blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);list-style:none;margin:0;padding:0}
.post a{display:block;text-decoration:none;color:var(--ink)}
.post img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:var(--radius);margin-bottom:1rem;background:var(--line);transition:transform .5s var(--ease)}
.post a:hover img{transform:translateY(-3px)}
.post h3{margin-bottom:.4rem}
.post a:hover h3{color:var(--action)}
.post p{color:var(--ink-2);font-size:var(--step--1);margin:0}

/* Contact */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.contact dl{margin:2rem 0 0;display:grid;gap:1.25rem}
.contact dt{font:500 var(--step--1)/1.3 var(--display);letter-spacing:-.02em;color:var(--ink-2)}
.contact dd{margin:.15rem 0 0;font-weight:500}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:.8rem .9rem;border:1px solid var(--field-line);border-radius:8px;background:var(--paper);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 22%,transparent);background:var(--surface)}
.form textarea{min-height:8rem;resize:vertical}
.form .fine{font-size:var(--step--1);color:var(--ink-2);margin:0}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .err{margin:.35rem 0 0;font-size:var(--step--1);color:var(--danger)}
.form .err:empty{display:none}
.form [aria-invalid=true]{border-color:var(--danger);background:var(--danger-bg)}
.form button[disabled]{opacity:.7;cursor:progress;transform:none}
.form-status:empty{display:none}
.form-status.is-error{padding:.85rem 1rem;border-radius:8px;background:var(--danger-box);border:1px solid var(--danger-line);color:var(--danger-text);font-size:var(--step--1)}
.form-done{position:relative;padding:1.75rem;border-radius:14px;background:var(--accent-bg);color:var(--on-accent);outline:none;scroll-margin-top:110px;align-self:start;animation:rise .5s var(--ease)}
.form-done::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:14px 14px 0 0;background:var(--grad)}
.form-done h3{font-size:var(--step-2);font-weight:300;margin-bottom:.5rem}
.form-done p{margin:0 0 .5rem}

/* Footer */
.site-foot{position:relative;background:var(--deep);color:#B4B1CC;padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:var(--step--1)}
.site-foot::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.site-foot a{color:#E7E5F5;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem}
.foot-grid h2{font:500 var(--step-0)/1.3 var(--display);letter-spacing:-.03em;color:#fff;margin-bottom:.9rem;display:flex;gap:.5rem;align-items:center}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-grid .brand{margin-bottom:1.1rem}
.foot-grid .brand-mark img{height:44px}
.foot-grid .brand-word img{height:40px}
.foot-base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding-top:1.5rem}
.foot-base ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}

/* ---------- Inner pages ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(2.5rem,2rem + 3vw,4.5rem) 0 clamp(2rem,1.5rem + 2vw,3rem);border-bottom:1px solid var(--line)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(30deg,var(--grid) 0 1px,transparent 1px 46px),repeating-linear-gradient(150deg,var(--grid) 0 1px,transparent 1px 46px);
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 100%);mask-image:linear-gradient(90deg,transparent 35%,#000 100%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);max-width:22ch;animation:rise .7s var(--ease) both}
.page-hero .lede{margin-bottom:0;animation:rise .7s var(--ease) .1s both}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.crumbs{font-size:var(--step--1);color:var(--ink-2);margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--mark)}
.crumbs a{color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(14rem,.8fr) 2fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
.split>h2{position:sticky;top:100px;font-size:var(--step-2)}
.offer{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;list-style:none;margin:0;padding:0}
.offer li{padding:1.25rem 0;border-top:1px solid var(--line)}
.offer h3{font-size:var(--step-0);margin-bottom:.3rem}
.offer p{margin:0;color:var(--ink-2);font-size:var(--step--1)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.5rem}
.steps li{counter-increment:s;border-top:2px solid;padding-top:1rem}
.steps li::before{content:"0" counter(s);display:block;font:300 var(--step-2)/1 var(--display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.6rem;width:max-content}
.steps strong{display:block;margin-bottom:.25rem}
.steps span{color:var(--ink-2);font-size:var(--step--1)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.tags li{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35rem .85rem;font:400 var(--step--1)/1.4 var(--display);letter-spacing:-.02em}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.75rem;font:300 1.6rem/1 var(--display);color:var(--violet);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);padding-bottom:1.1rem;margin:0}
.links{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.cta-strip{position:relative;background:var(--deep);color:#fff}
.cta-strip::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.cta-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:2.5rem}
.cta-strip h2{margin:0;font-size:var(--step-2);color:#fff}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.25rem;list-style:none;margin:0;padding:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem;transition:transform .3s var(--ease),border-color .3s}
.alt .card{background:var(--paper)}
.card:hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.alt .card:hover{background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box}
.card h3{display:flex;align-items:center;gap:.5rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card p{color:var(--ink-2);font-size:var(--step--1);margin:0}

/* Pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.5rem}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column}
.alt .tier{background:var(--paper)}
.tier--mid{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.alt .tier--mid{background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box}
.tier h3{margin-bottom:.75rem}
.tier .price{font:300 var(--step-3)/1 var(--display);letter-spacing:-.05em;margin:0}
.tier .price small{display:block;font:400 var(--step--1)/1.4 var(--text);letter-spacing:0;color:var(--ink-2);margin-top:.55rem}
.tier .btn{margin-top:auto}
.tier p.note{color:var(--ink-2);font-size:var(--step--1);margin:1rem 0 1.25rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.plans{width:100%;border-collapse:collapse;font-size:var(--step--1);min-width:36rem}
.plans th,.plans td{padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.plans thead th{position:sticky;top:0;background:var(--deep);color:#fff;font:500 var(--step--1)/1.3 var(--display);letter-spacing:-.02em}
.plans td{text-align:center;width:16%}
.plans tbody th{font-weight:450}
.plans .grp th{background:var(--paper);font:500 var(--step--1)/1.3 var(--display);letter-spacing:-.02em;padding-top:1rem}
.yes{color:var(--violet);font-weight:700}
.no{color:var(--mark)}
.fine-print{font-size:var(--step--1);color:var(--ink-2);margin-top:1rem}
.swipe-hint{display:none;font-size:var(--step--1);color:var(--ink-2);margin:0 0 .5rem}
.grp-label{position:sticky;left:1rem}

/* Prose (blog, legal) */
.prose{max-width:68ch}
.prose h2{font-size:var(--step-2);margin:2.2rem 0 .8rem}
.prose h3{font-size:var(--step-1);margin:1.6rem 0 .5rem}
.prose p,.prose li{line-height:1.72}
.prose ul,.prose ol{margin:0 0 1.2em}
.prose li{margin-bottom:.35em}
.prose li::marker{color:var(--violet)}
.prose code{font:.88em var(--display);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:.05em .3em}
.article-head .meta{color:var(--ink-2);font-size:var(--step--1);margin-top:1rem}
.article-hero{margin:2rem 0 0;border-radius:14px;overflow:hidden;aspect-ratio:16/8;background:var(--line)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-grid{display:grid;grid-template-columns:minmax(0,68ch) 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.aside-box{position:sticky;top:100px;border-radius:14px;padding:1.5rem;border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.aside-box h2{font-size:var(--step-1)}
.blog-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 2rem;list-style:none;margin:0;padding:0}
.blog-list h2{font-size:var(--step-1);font-weight:500;line-height:1.25;letter-spacing:-.03em;margin-bottom:.4rem}

/* Team, testimonials, case studies, 404 */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1.5rem;list-style:none;margin:0;padding:0}
.team li{display:flex;align-items:center;gap:1rem}
.mono{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font:400 1rem/1 var(--display);color:#fff;background:var(--grad);flex:none}
.team strong{display:block}
.team span{color:var(--ink-2);font-size:var(--step--1)}
.quote-list{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;list-style:none;margin:0;padding:0}
.quote-list .quote{height:100%}
.quote-list .quote:first-child{border:1px solid var(--line);background:var(--surface)}
.quote-list .quote blockquote,.quote-list .quote:first-child blockquote{font:400 var(--step-0)/1.65 var(--text);letter-spacing:0}
.case{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--line);scroll-margin-top:90px}
.case:nth-child(even) figure{order:2}
.case figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--line)}
.case figure img{width:100%;height:100%;object-fit:cover}
.case .logo{height:40px;width:auto;margin-bottom:1rem}
.case .logo--dark{background:#15132B;padding:6px 10px;border-radius:6px;box-sizing:content-box}
:root[data-theme=dark] .case .logo:not(.logo--dark){background:#fff;padding:6px 10px;border-radius:6px;box-sizing:content-box}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:var(--step--1);margin:1rem 0 0}
.case dt{color:var(--ink-2)}
.case dd{margin:0;font-weight:500}
.notfound{min-height:60vh;display:flex;align-items:center}
.notfound .wrap{width:100%}
.notfound .hero-mark{max-width:150px;margin:0 0 2rem}
:root[data-theme=dark] .article-hero,:root[data-theme=dark] .project figure,:root[data-theme=dark] .case figure{box-shadow:0 0 0 1px var(--line)}

/* ---------- Theme switching ---------- */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,box-shadow .4s ease!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-toggle{display:block}
  .theme-toggle{margin-left:auto;margin-right:.5rem}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:1rem var(--gutter) 1.5rem;flex-direction:column;align-items:stretch;max-height:calc(100vh - 74px);overflow:auto}
  .nav.is-open{display:flex;animation:menu-in .25s var(--ease)}
  .nav>ul{flex-direction:column}
  .menu,.menu--services{position:static;transform:none;box-shadow:none;border:0;padding:.25rem 0 .5rem 1rem;grid-template-columns:1fr;width:auto;background:transparent;animation:none}
  .nav .btn,.nav .nav-login{display:flex;justify-content:center;text-align:center;margin:1rem 0 0;padding:.8rem 1rem}
  .nav .nav-login + .btn{margin-top:.6rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .hero .wrap,.band .wrap,.contact .wrap,.quotes,.section-head{grid-template-columns:1fr}
  .hero .hero-mark{max-width:190px;order:-1;margin:0}
  .clients .wrap{flex-direction:column;align-items:flex-start}
  .clients ul{justify-content:flex-start;gap:.5rem 1.5rem}
  .practices{grid-template-columns:1fr}
  .practice,.practice+.practice{padding:1.5rem 0;border-left:0}
  .practice>p{min-height:0}
  .split,.article-grid,.case,.tiers,.quote-list{grid-template-columns:1fr}
  .split>h2,.aside-box{position:static}
  .case:nth-child(even) figure{order:0}
  .blog-list{grid-template-columns:1fr 1fr}
  .work{grid-template-columns:1fr 1fr}
  .project,.project:nth-child(1),.project:nth-child(2){grid-column:span 1}
  .project:nth-child(1){grid-column:1/-1}
  .posts{grid-template-columns:1fr}
}
@media (max-width:700px){
  .swipe-hint{display:block}
  .plans{min-width:30rem}
  .plans tbody th,.plans thead th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line);max-width:11rem}
  .plans thead th:first-child{background:var(--deep)}
  .plans .grp th{background:var(--paper)}
}
@media (max-width:560px){
  .work,.form,.offer,.blog-list,.foot-grid{grid-template-columns:1fr}
  .brand-word img{height:30px}
  .brand-mark img{height:34px}
}
@media (max-width:380px){.brand-word{display:none}}

/* ---------- Refinements ---------- */
.nav .btn,.nav .btn:hover{color:var(--btn-ink);background:linear-gradient(var(--btn-bg),var(--btn-bg)) padding-box,var(--grad) border-box;border:1.5px solid transparent}
.brand-mark img{height:44px}
.brand-word img{height:42px}
.hero .wrap{grid-template-columns:1.35fr .85fr}
.hero h1{font-size:clamp(2.2rem,1.2rem + 3.2vw,3.7rem);max-width:19ch;text-wrap:balance}
h1,h2,.page-hero h1{text-wrap:balance}
@media (max-width:560px){.brand-word img{height:34px}.brand-mark img{height:36px}}
/* Hero mark: start the sweep only once the image has loaded */
.hero-mark img{animation:none}
.hero-mark .sheen{animation:none}
.js .hero-mark:not(.is-ready) img{opacity:0;animation:appear .01s 2.5s forwards} /* fallback if the script never runs */
@keyframes appear{to{opacity:1}}
.hero-mark.is-ready img{animation:sweep 1.9s cubic-bezier(.45,.05,.35,1) both,float 7s ease-in-out 2.1s infinite}
.hero-mark.is-ready .sheen{animation:sheen 1.5s ease 1.6s both}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .hero-mark{max-width:170px}}
button.btn{font:inherit;font-weight:600;cursor:pointer}

/* Logo lockup: one image per theme, cube | line | name at equal spacing (from the artwork) */
.brand .brand-lockup{height:46px;width:auto}
.foot-grid .brand .brand-lockup{height:52px}
.is-home .site-head .brand-lockup{-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:wipe-in 1.4s cubic-bezier(.45,.05,.35,1) .1s both}
@media (max-width:560px){.brand .brand-lockup{height:38px}}
@media (max-width:360px){.brand .brand-lockup{height:32px}}

/* ---------- Six sides of one cube (core principles) ---------- */
.six-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cube3d{--s:clamp(170px,18vw,230px);position:relative;width:var(--s);height:var(--s);margin:2rem auto 3rem;perspective:1100px}
.cube3d .c{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.1s var(--ease);transform:rotateX(-16deg) rotateY(-24deg)}
.cube3d .fc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:1.1rem;border-radius:6px;
  background:linear-gradient(color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface) 88%,transparent)) padding-box,var(--grad) border-box;border:1.5px solid transparent;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 40px -10px color-mix(in srgb,var(--violet) 35%,transparent)}
.cube3d .fn{font:300 2.6rem/1 var(--display);letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.cube3d .ft{font:500 .95rem/1.25 var(--display);letter-spacing:-.03em;color:var(--ink)}
.fc--front{transform:translateZ(calc(var(--s)/2))}
.fc--right{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.fc--back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.fc--left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.fc--top{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.fc--bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube3d .c[data-face="0"]{transform:rotateX(-16deg) rotateY(-24deg)}
.cube3d .c[data-face="1"]{transform:rotateX(-16deg) rotateY(-114deg)}
.cube3d .c[data-face="2"]{transform:rotateX(-16deg) rotateY(-204deg)}
.cube3d .c[data-face="3"]{transform:rotateX(-16deg) rotateY(66deg)}
.cube3d .c[data-face="4"]{transform:rotateX(-74deg) rotateY(0deg) rotateZ(24deg)}
.cube3d .c[data-face="5"]{transform:rotateX(106deg) rotateY(0deg) rotateZ(-24deg)}
.cube-floor{position:absolute;left:10%;right:10%;bottom:-3.2rem;height:24px;border-radius:50%;background:var(--grad);filter:blur(22px);opacity:calc(var(--glow) * .8)}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.principles li{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .9rem;padding:1.15rem .9rem 1.15rem 0;border-top:1px solid var(--line);cursor:default;outline:none;position:relative;transition:background .3s}
.principles li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--grad);transition:width .6s var(--ease)}
.principles li.is-on::before{width:100%}
.principles li:focus-visible{box-shadow:0 0 0 2px var(--violet);border-radius:4px}
.principles .pn{font:300 1.35rem/1.2 var(--display);letter-spacing:-.04em;color:var(--mark);transition:color .3s}
.principles li.is-on .pn{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.principles h3{font-size:var(--step-0);margin:0 0 .25rem}
.principles p{margin:0;color:var(--ink-2);font-size:var(--step--1)}
@media (max-width:860px){.six-grid{grid-template-columns:1fr}.cube3d{--s:150px;margin:1rem auto 2.5rem}}
@media (max-width:560px){.principles{grid-template-columns:1fr}}

/* =====================================================================
   monday.com consulting page
   ===================================================================== */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{font:400 .78rem/1.3 var(--display);letter-spacing:-.02em;padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-2)}

/* Hero with the connection hub */
.mc-hero{position:relative;overflow:hidden;padding:clamp(2.5rem,2rem + 3vw,4.5rem) 0 clamp(2.5rem,2rem + 3vw,4.5rem);border-bottom:1px solid var(--line)}
.mc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(30deg,var(--grid) 0 1px,transparent 1px 46px),repeating-linear-gradient(150deg,var(--grid) 0 1px,transparent 1px 46px);-webkit-mask-image:radial-gradient(ellipse 60% 80% at 78% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 78% 50%,#000 20%,transparent 75%)}
.mc-hero .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.mc-hero h1{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem);max-width:17ch;animation:rise .8s var(--ease) both}
.mc-hero .lede{animation:rise .8s var(--ease) .1s both}
.mc-hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 1.5rem;animation:rise .8s var(--ease) .2s both}
.mc-proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--step--1);color:var(--ink-2)}
.mc-proof li{display:flex;align-items:center;gap:.5rem}
.mc-proof li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--grad);transform:rotate(45deg)}

.hub{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:520/460}
.hub-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-orbit{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 7;transform-origin:260px 230px;animation:spin 120s linear infinite}
.hub-orbit--inner{animation-direction:reverse;animation-duration:90s;opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}
.hub-line{fill:none;stroke-width:1.4;stroke-dasharray:5 6;stroke-linecap:round;animation:dash 3.5s linear infinite;opacity:.75}
.hub-line--work{stroke:var(--blue)}.hub-line--ai{stroke:var(--violet)}.hub-line--auto{stroke:var(--coral)}.hub-line--app{stroke:var(--cyan)}
@keyframes dash{to{stroke-dashoffset:-44}}
.hub-packet{opacity:0}
.hub-packet--work{fill:var(--blue)}.hub-packet--ai{fill:var(--violet)}.hub-packet--auto{fill:var(--coral)}.hub-packet--app{fill:var(--cyan)}
.hub-core{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 18px 50px -18px var(--violet)}
.hub-core img{width:52%;height:auto;position:relative}
.hub-ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--violet);opacity:0;animation:ring 3.2s ease-out infinite}
.hub-ring--2{animation-delay:1.6s}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.75);opacity:0}}
.hub-pill{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.45rem .8rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 26px -16px var(--shadow);font:500 .82rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);animation:bob 6s ease-in-out infinite}
.hub-pill i{width:8px;height:8px;border-radius:50%;flex:none}
.hub-pill--work i{background:var(--blue)}.hub-pill--ai i{background:var(--violet)}.hub-pill--auto i{background:var(--coral)}.hub-pill--app i{background:var(--cyan)}
.hub-pill--work{border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;font-weight:600}
@keyframes bob{50%{transform:translate(-50%,calc(-50% - 6px))}}

/* Certification strip */
.mc-certs-strip{border-bottom:1px solid var(--line);background:var(--surface)}
.mc-certs-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding-block:1.1rem}
.mc-certs-strip p{margin:0;font-size:var(--step--1);color:var(--ink-2)}
.mc-certs-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.mc-certs-strip li{font:500 .85rem/1.2 var(--display);letter-spacing:-.02em;padding:.4rem .8rem;border-radius:999px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}

/* Offers */
.mc-offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.mc-offer{position:relative;padding:1.75rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.mc-offer:hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box}
.mc-offer h3{font-size:var(--step-1);margin:1rem 0 .5rem}
.mc-offer p{color:var(--ink-2);font-size:var(--step--1);margin:0 0 1.1rem}
.mc-ico{display:block;width:34px;height:38px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mc-offer--work .mc-ico{background:linear-gradient(135deg,var(--cyan),var(--blue))}
.mc-offer--ai .mc-ico{background:linear-gradient(135deg,var(--blue),var(--violet))}
.mc-offer--auto .mc-ico{background:linear-gradient(135deg,var(--pink),var(--coral))}
.mc-offer--pkg .mc-ico{background:var(--grad)}

/* Method + animated timeline */
.mc-method-wrap{grid-template-columns:.9fr 1.1fr!important;align-items:center!important}
.mc-steps{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:0}
.mc-steps li{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.1);position:relative}
.mc-steps li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--grad);transition:width .7s var(--ease);transition-delay:calc(var(--i) * .45s + .2s)}
.in-view .mc-steps li::after{width:100%}
.mc-steps .ms-n{font:300 1.1rem/1.4 var(--display);color:rgba(255,255,255,.45);transition:color .4s;transition-delay:calc(var(--i) * .45s + .2s)}
.in-view .mc-steps .ms-n{color:#fff}
.mc-steps strong{color:#fff;font-weight:600}
.mc-steps .ms-w{font:400 .78rem/1 var(--display);color:#9E9AC0;margin-left:.4rem}
.mc-steps p{margin:.2rem 0 0;color:#B4B1CC;font-size:var(--step--1)}
.gantt{position:relative;padding:1.5rem 0 2.2rem;--rows:5}
.g-grid{position:absolute;inset:0 0 2.2rem;display:grid;grid-template-columns:repeat(11,1fr)}
.g-grid i{border-left:1px dashed rgba(255,255,255,.08)}
.g-row{position:relative;height:44px;margin-bottom:10px}
.g-bar{position:absolute;top:8px;height:28px;border-radius:7px;background:linear-gradient(90deg,var(--blue),var(--violet));opacity:.95;transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease);transition-delay:calc(var(--i) * .45s + .2s);box-shadow:0 8px 24px -10px var(--violet)}
.g-row:nth-child(3) .g-bar{background:linear-gradient(90deg,var(--violet),var(--pink))}
.g-row:nth-child(4) .g-bar{background:linear-gradient(90deg,var(--pink),var(--coral))}
.g-row:nth-child(5) .g-bar{background:linear-gradient(90deg,var(--violet),var(--pink))}
.g-row:nth-child(6) .g-bar{background:linear-gradient(90deg,var(--coral),rgba(255,138,91,.15))}
.g-bar--ongoing{border-radius:7px 0 0 7px}
.in-view .g-bar{transform:scaleX(1)}
.g-dot{position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;opacity:0}
.in-view .g-dot{animation:run 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * .45s + 1s)}
@keyframes run{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.g-now{position:absolute;top:0;bottom:2.2rem;left:0;width:0;border-left:1.5px solid var(--coral);opacity:0}
.g-now span{position:absolute;top:-.2rem;left:0;transform:translate(-50%,-100%);font:500 .7rem/1 var(--display);color:#fff;background:var(--deep);border:1px solid var(--coral);border-radius:999px;padding:.25rem .45rem}
.in-view .g-now{animation:now 9s linear 2.6s infinite}
@keyframes now{0%{left:0;opacity:0}5%{opacity:1}90%{left:90.9%;opacity:1}100%{left:90.9%;opacity:0}}
.g-cols{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(11,1fr)}
.g-wk{font:400 .7rem/1 var(--display);color:#8E8AB2;padding-left:4px}

/* Connected workspace */
.ws{position:relative}
.ws-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ws-tile{padding:1.15rem 1.2rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;gap:.15rem;position:relative;overflow:hidden}
.ws-tile b{font:500 var(--step-0)/1.25 var(--display);letter-spacing:-.03em}
.ws-tile small{color:var(--ink-2);font-size:var(--step--1)}
.ws-tile em{font:400 .72rem/1 var(--display);font-style:normal;margin-top:.6rem;width:max-content;padding:.28rem .55rem;border-radius:999px;opacity:.35;transition:opacity .4s}
.ws-tile--ai em{color:var(--violet);border:1px solid var(--violet)}
.ws-tile--auto em{color:var(--coral);border:1px solid var(--coral)}
.ws-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0}
.in-view .ws-tile::after{animation:tile-on 9.6s ease-in-out infinite;animation-delay:calc(var(--k) * 1.2s)}
.in-view .ws-tile em{animation:tag-on 9.6s ease-in-out infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes tile-on{0%,16%{opacity:0}4%,10%{opacity:1}}
@keyframes tag-on{0%,16%{opacity:.35}4%,10%{opacity:1}}
.ws-core{display:grid;place-items:center;border-radius:12px;background:var(--deep);position:relative;overflow:hidden;min-height:120px}
.ws-core::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--coral),var(--cyan));animation:spin 8s linear infinite;opacity:.9}
.ws-core::after{content:"";position:absolute;inset:2px;border-radius:10px;background:var(--deep)}
.ws-core-in{position:relative;z-index:1;text-align:center;display:grid;gap:.2rem}
.ws-core b{font:400 1.25rem/1.1 var(--display);letter-spacing:-.04em;color:#fff}
.ws-core small{color:#B4B1CC;font-size:var(--step--1)}
.ws-legend{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:1.25rem;font-size:var(--step--1);color:var(--ink-2)}
.ws-legend li{display:flex;align-items:center;gap:.45rem}
.ws-legend li::before{content:"";width:10px;height:10px;border-radius:3px}
.ws-legend .ai::before{background:var(--violet)}.ws-legend .auto::before{background:var(--coral)}

/* Industries */
.inds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.ind{padding:1.4rem;border-radius:14px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.ind:hover{transform:translateY(-3px);border-color:transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box}
.ind-n{font:300 1.6rem/1 var(--display);letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.ind h3{font-size:var(--step-0);margin:.9rem 0 .35rem}
.ind p{color:var(--ink-2);font-size:var(--step--1);margin:0 0 1rem}
.ind .chips{margin-top:auto;flex-direction:column;align-items:flex-start}

/* Regions */
.rgs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.rg{padding:1.5rem;border-top:2px solid;border-image:var(--grad) 1}
.rg-code{font:500 .8rem/1 var(--display);padding:.35rem .55rem;border-radius:6px;background:var(--deep);color:#fff}
.rg h3{font-size:var(--step-1);margin:1rem 0 .3rem}
.rg p{margin:0 0 .6rem;color:var(--ink-2);font-size:var(--step--1)}
.rg-time time{font:300 1.6rem/1 var(--display);letter-spacing:-.04em;color:var(--ink)}
.rg-time span{font-size:var(--step--1);color:var(--ink-2);margin-left:.35rem}
.rg a{font-weight:600}

/* Certifications */
.certs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cert{display:grid;gap:1rem;padding:1.4rem;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.cert-ico{width:40px;height:44px}
.cert-ico path:first-child{fill:none;stroke:var(--violet);stroke-width:2}
.cert-ico .tick{fill:none;stroke:var(--coral);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cert small{font:400 .75rem/1 var(--display);color:var(--ink-2)}
.cert h3{font-size:var(--step-0);margin:.35rem 0 .35rem}
.cert p{margin:0;color:var(--ink-2);font-size:var(--step--1)}

/* Book a call */
.book{border-top:1px solid var(--line)}
.book-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.book-copy h2{font-size:var(--step-3)}
.book-contact{display:grid;gap:1.1rem;margin:2rem 0}
.book-contact dt{font:500 var(--step--1)/1.3 var(--display);color:var(--ink-2)}
.book-contact dd{margin:.25rem 0 0;font-weight:500}
.book-contact ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.book-contact li span{display:inline-block;min-width:8.5rem;color:var(--ink-2);font-weight:400}
.book-trust{display:flex;align-items:center;gap:.6rem;font-size:var(--step--1);color:var(--ink-2);padding-top:1.2rem;border-top:1px solid var(--line)}
.book-trust::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--grad);transform:rotate(45deg);flex:none}
.book-card{border-radius:18px;padding:1.1rem;border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;box-shadow:0 30px 60px -36px var(--violet)}
.book-head{display:flex;align-items:center;gap:.8rem;padding:.4rem .4rem 1rem;border-bottom:1px solid var(--line)}
.book-head img{width:34px;height:auto}
.book-head strong{display:block;font:500 var(--step-0)/1.3 var(--display);letter-spacing:-.03em}
.book-head span{font-size:var(--step--1);color:var(--ink-2)}
.cal{position:relative;min-height:680px;margin-top:.75rem;border-radius:12px;overflow:hidden;background:var(--paper)}
.cal iframe{display:block;width:100%;height:680px;border:0}
.cal-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;color:var(--ink-2);font-size:var(--step--1)}
.cal-ph p{margin:0}
.cal-spin{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--violet);animation:spin .9s linear infinite}
.cal.is-loaded .cal-ph{display:none}
.book-alt{font-size:var(--step--1);color:var(--ink-2);margin:.8rem .4rem 0}

@media (max-width:1100px){.inds{grid-template-columns:repeat(3,1fr)}.certs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){
  .mc-hero .wrap,.mc-method-wrap,.book-wrap{grid-template-columns:1fr!important}
  .hub{max-width:480px}
}
@media (max-width:760px){
  .mc-offers,.rgs{grid-template-columns:1fr}
  .inds{grid-template-columns:1fr 1fr}
  .ws-grid{grid-template-columns:1fr 1fr}
  .ws-core{grid-column:1/-1;order:-1}
  .hub-pill{font-size:.7rem;padding:.35rem .6rem}
}
@media (max-width:520px){
  .inds,.certs{grid-template-columns:1fr}
  .hub-pill{font-size:.62rem;padding:.3rem .5rem;gap:.3rem}
  .hub-pill i{width:6px;height:6px}
  .gantt .g-wk{font-size:.58rem;padding-left:1px}
}
.mc-steps li::before{content:none}
.band .mc-steps li{grid-template-columns:2.4rem 1fr}
.ind p{min-height:3.4em}
.ind .chips{margin-top:0}
@media (max-width:520px){.hub{width:86%}}

/* monday page v3: platform logos, orbiting apps, live clocks, booking */
.hub{container-type:inline-size}
.hub-pill i.pl{width:18px;height:18px;border-radius:5px;background:none;position:relative;display:grid;place-items:center;overflow:hidden}
.hub-pill i.pl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet)}
.hub-pill--work i.pl::before{background:var(--blue)}.hub-pill--auto i.pl::before{background:var(--coral)}.hub-pill--app i.pl::before{background:var(--cyan)}
.hub-pill i.pl img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface)}
.hub-pill i.pl--icon::before{content:none}
.pl--icon svg{width:18px;height:18px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pl--ai svg{stroke:var(--violet)}.pl--app svg{stroke:var(--cyan)}.pl--icon svg .f{fill:currentColor;stroke:none}
.pl--ai svg .f{fill:var(--violet)}
.hub-pill{z-index:2}.hub-core{z-index:2}
.hub-sats{position:absolute;inset:0;z-index:1;animation:spin 100s linear infinite;transform-origin:50% 50%}
.sat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)))}
.sat-in{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 18px -12px var(--shadow);animation:spinRev 100s linear infinite}
.sat-in b{font:500 .6rem/1 var(--display);letter-spacing:-.02em;color:var(--ink-2)}
.sat-in img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;background:var(--surface)}
@keyframes spinRev{to{transform:rotate(-360deg)}}
@media (max-width:700px){.sat-in{width:26px;height:26px;left:-13px;top:-13px}.sat-in b{font-size:.5rem}.sat-in img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}.hub-pill i.pl{width:14px;height:14px}.pl--icon svg{width:14px;height:14px}}

.mc-certs-strip li{white-space:nowrap}
.certs{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.certs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.certs{grid-template-columns:1fr}}
.h-stack span{display:block}
.h-stack span:nth-child(2){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Live clocks */
.rg-time{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .5rem}
.clock{display:inline-flex;align-items:baseline;font:300 1.7rem/1 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.clock .dg{display:inline-block;position:relative;height:1.05em;width:.62em;overflow:hidden;vertical-align:bottom}
.clock .dg span{position:absolute;left:0;right:0;top:0;text-align:center;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.clock .dg span.in{transform:translateY(100%);opacity:0}
.clock .dg span.out{transform:translateY(-100%);opacity:0}
.clock .col{display:inline-block;width:.35em;text-align:center;animation:blink 1s steps(1) infinite}
.clock .sec{font-size:.55em;color:var(--ink-2);margin-left:.15em}
.clock .sec .col{animation:none}
.clock-s{display:block;flex-basis:100%;height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:.55rem;max-width:11rem}
.clock-s i{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
.rg-tz{font-size:var(--step--1);color:var(--ink-2)}
.clock.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:.55rem;align-self:center;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:pulse 2s infinite}
@keyframes blink{50%{opacity:.25}}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Booking */
.book-loc .sep{display:inline-block;margin:0 .7rem;color:var(--violet)}
.book-copy h2{max-width:14ch}
.book-head span b{font-weight:600;color:var(--ink)}
.rg-time .clock span{margin-left:0;font-size:inherit;color:inherit}
.rg-time .clock .sec{font-size:.55em;color:var(--ink-2);margin-left:.15em}
.clock{display:inline-grid;grid-template-columns:auto auto;align-items:center}
.clock-hm{display:inline-flex;align-items:baseline}
.clock-s{grid-column:1/-1}
.rg-time .clock{font-size:1.75rem;margin-left:0;color:var(--ink)}
.cert{align-content:start}
/* Platform logos sit on white chips in both themes */
.hub-pill i.pl:has(img){background:#fff;box-shadow:0 0 0 1px var(--line)}
.hub-pill i.pl:has(img)::before{content:none}
.hub-pill i.pl img{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);background:none}
.sat-in:has(img){background:#fff}
.sat-in img{background:none}
.sat-in--wide{width:58px;left:-29px;border-radius:17px}
.sat-in--wide img{inset:7px 8px;width:calc(100% - 16px);height:calc(100% - 14px)}
@media (max-width:700px){.sat-in--wide{width:44px;left:-22px}.sat-in--wide img{inset:5px 6px;width:calc(100% - 12px);height:calc(100% - 10px)}}