/* Light Eqvola (direction C "Bento" with stickers, handwritten notes and big buttons from B).
   Loaded after styles.css, so far only by the UA home (phase 1 of the move from the dark design).
   Every discipline keeps one colour: marketing coral, development violet, automation green. */

:root{
  --bg:#f3f3f5;--panel:#fff;--panel-2:#f8f8fa;--ink:#16141a;--muted:#55515c;--faint:#6e6975;
  --line:#e2e0e6;--line-light:#d6d3dc;--accent:#6a4cf0;
  --rose:var(--accent);--lilac:var(--accent);--cream:var(--ink);--plum:#16141a;
  --mkt:#a93d18;--mkt-tint:#ffe2d3;--dev:#5a3ce0;--dev-tint:#e7e1ff;--aut:#0d6b45;--aut-tint:#d6f3e4;
  --dir:var(--accent);--dir-tint:var(--dev-tint);
  /* Brighter shades for big type only (24px and up), where 3:1 contrast is enough */
  --mkt-hi:#e0552b;--dev-hi:#6a4cf0;--aut-hi:#16935f;--dir-hi:var(--accent);
  --tile:32px;--fh:Onest,Arial,sans-serif;--hand:Caveat,cursive
}
:root{color-scheme:light}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--fh)}
body::before{display:none}
.site-frame{background:transparent;border:0;box-shadow:none}
.section{border-top:0}
h1,h2,h3,h4,.nav-button,.nav-link{font-family:var(--fh)}
h2{font-weight:800;font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
h2 .text-gradient{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
/* The accented part of a title (it was transparent so the old gradient showed through) */
.text-gradient .accent,.text-gradient .accent-lilac{-webkit-text-fill-color:var(--dir-hi);color:var(--dir-hi)}
h3{color:var(--ink)}
.eyebrow,.section-heading p.eyebrow,.intro p.eyebrow{color:var(--dir);font-weight:700;letter-spacing:.14em}
.project-path h3,.numbered-list h3,.capability h3,.principle-grid h3,.contact-step h3,.faq summary{font-weight:700}
.section-heading>p,.task-layout .intro p{color:var(--muted)}
.text-link{color:var(--accent);font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* «ії» in bold display type: site.js wraps the first letter so its dot clears the two dots of «ї» */
.dot-gap{letter-spacing:.04em}

/* Buttons: big pills */
.btn{border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;padding:17px 30px;font-family:var(--fh)}
.btn:hover{background:#5638e0}
.btn-big{font-size:16px;padding:20px 34px;min-height:0}
.btn-soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-soft:hover{background:var(--ink);color:#fff}

/* Discipline pages: their colour for labels, numbers and the first screen */
.page-marketing,.theme-marketing{--dir:var(--mkt);--dir-hi:var(--mkt-hi);--dir-tint:var(--mkt-tint)}
.page-development,.theme-development{--dir:var(--dev);--dir-hi:var(--dev-hi);--dir-tint:var(--dev-tint)}
.page-automation-hub,.theme-automation{--dir:var(--aut);--dir-hi:var(--aut-hi);--dir-tint:var(--aut-tint)}

/* Header */
.site-header{background:#f3f3f5e8;border-bottom:0}
.logo img{filter:brightness(0) saturate(0)}
.nav-button,.nav-link,.language a{color:var(--ink);font-weight:500}
.language{color:var(--faint)}
.header-tools>.btn{background:var(--ink);color:#fff}
.dropdown{background:#fff;border:0;border-radius:22px;box-shadow:0 24px 60px -24px #16141a40}
.dropdown a{color:var(--ink);border-bottom-color:var(--line)}
.dropdown a:hover,.dropdown a[aria-current=page]{background:var(--panel-2);color:var(--accent)}
.dropdown .dropdown-hub{color:var(--accent)}
.menu-toggle{border-color:var(--line-light);color:var(--ink);border-radius:12px}
/* The menu has one more item (Команда / Team) than the original header was sized for */
.header-tools>.btn{flex-shrink:0;white-space:nowrap;padding-block:12px}
@media(min-width:1101px) and (max-width:1279px){.main-nav{gap:13px;margin-right:0}.header-tools{gap:16px}.site-header .logo{width:130px}}
@media(min-width:881px) and (max-width:1100px){.main-nav{gap:10px;margin-right:0}.header-tools{gap:10px}.header-tools>.btn{padding-inline:12px}.site-header .logo{width:118px}}
@media(max-width:880px){
  .main-nav{background:#fff;border:0;border-radius:0 0 24px 24px;box-shadow:0 24px 50px -30px #16141a55}
}

/* Hero: bento tiles */
.hero.hero-bento{display:block;min-height:0;padding:22px var(--gutter) 30px;overflow:visible}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{position:relative;min-width:0;border-radius:var(--tile);background:#fff;padding:30px}
.tile-main{grid-column:span 4;padding:46px 48px}
.hello{display:inline-block;font-family:var(--hand);font-weight:700;font-size:34px;line-height:1;color:var(--accent);transform:rotate(-3deg);margin-bottom:10px}
.hero-bento h1{font-size:clamp(38px,4.4vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.04em;color:var(--ink);max-width:16ch}
.hero-bento h1 .accent{color:var(--accent)}
.hero-bento .lead{margin-top:22px;max-width:560px;font-size:19px;line-height:1.55;color:var(--muted)}
.hero-bento .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-bento .actions .btn{margin:0}
.tile-photo{grid-column:span 2;min-height:430px;overflow:visible;background:radial-gradient(80% 60% at 75% 20%,#ffd9c7,transparent 65%),radial-gradient(70% 60% at 20% 85%,#d9cffd,transparent 65%),linear-gradient(150deg,#ffe8dc,#ece6ff);display:flex;align-items:center;justify-content:center;text-align:center}
.photo-note{max-width:16ch;font-size:15px;line-height:1.4;color:#6b5f73}
.tile-photo .hand{position:absolute;top:22px;right:24px;font-family:var(--hand);font-weight:700;font-size:30px;color:var(--mkt);transform:rotate(6deg)}
.sticker{position:absolute;margin:0;border-radius:22px;padding:14px 18px;background:#fff;font-size:14px;line-height:1.3;color:#3f3a46;box-shadow:0 20px 40px -22px #16141a66}
.sticker b{display:block;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--ink);margin-bottom:4px}
.sticker-a{left:-18px;top:34%;background:var(--dev-tint);transform:rotate(-5deg)}
.sticker-b{right:-12px;bottom:36px;background:var(--mkt-tint);transform:rotate(3deg)}
.sticker-b b{font-size:22px}
/* Years per discipline beside the 15+ of development, in the discipline tints; the two at the bottom are staggered so they fit a narrow tile */
.sticker-mkt{left:-14px;bottom:26px;background:var(--mkt-tint);transform:rotate(-3deg)}
.sticker-aut{right:-12px;bottom:58px;background:var(--aut-tint);transform:rotate(3deg)}
/* Team photo: a drawing on white, multiply lets the tile colour show through the paper. The whole drawing always shows:
   across the tall tile on desktop with the stickers above and below, centred in the 861–1100 strip with the stickers at its sides,
   below 860 in flow with room above and below for the stickers.
   The drawing's weight sits right of its middle (ink centre at 54%, the top row runs to the right edge), so it gets more room
   on the right than on the left, and sits a little high to balance the two stickers under it */
.tile-photo.has-photo{padding:0}
.tile-photo.has-photo picture{position:absolute;inset:0 8.5% 0 1.5%;border-radius:inherit;overflow:hidden}
.tile-photo.has-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 46%;mix-blend-mode:multiply}
.tile-photo.has-photo .sticker-a{top:24px}

/* Disciplines as colour tiles (they replace the long directions block) */
.bento-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;scroll-margin-top:100px}
.dir{display:flex;flex-direction:column;padding:32px}
.dir-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dir-title{margin-top:10px;font-size:clamp(24px,2.1vw,30px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.dir>p:not(.dir-label){margin-top:10px;font-size:15px;line-height:1.55;color:#3f3a46}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 0;padding:0;list-style:none}
.chips a{display:inline-block;padding:8px 13px;border-radius:999px;background:#ffffffb8;font-size:14px;line-height:1.25;color:var(--ink);transition:background .2s}
.chips a:hover{background:#fff}
.dir-more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:22px;font-size:15px;font-weight:700}
.dir-more svg{width:18px;height:18px}
.dir-marketing{background:var(--mkt-tint)}.dir-marketing .dir-label,.dir-marketing .dir-more{color:var(--mkt)}
.dir-development{background:var(--dev-tint)}.dir-development .dir-label,.dir-development .dir-more{color:var(--dev)}
.dir-automation{background:var(--aut-tint)}.dir-automation .dir-label,.dir-automation .dir-more{color:var(--aut)}

/* Situations */
.task-link{background:#fff;border:0;border-radius:28px}
.task-link:hover{background:#fff;box-shadow:0 20px 44px -28px #16141a55}
.task-link .task-index{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;font-weight:700;background:var(--mkt-tint);color:var(--mkt)}
.task-list .task-link:nth-child(5) .task-index{background:var(--dev-tint);color:var(--dev)}
.task-list .task-link:nth-child(6) .task-index{background:var(--aut-tint);color:var(--aut)}
.task-link h3{font-weight:700}
.task-link .task-action{color:var(--accent);font-weight:700}
.task-link .round-arrow{border-color:var(--line-light);color:var(--ink)}

/* Cases on the home pages: text under the title, the "being prepared" note as a tile with its button */
.cases-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding:30px 34px;border-radius:var(--tile);background:#fff}
.cases-note p{max-width:62ch;font-size:16px;line-height:1.65;color:var(--muted)}
.cases-note .hand{display:block;margin-bottom:6px;font-family:var(--hand);font-size:26px;line-height:1;color:var(--accent);transform:rotate(-2deg);transform-origin:left}
.cases-note .btn{margin:0}

/* Team pages: people cards in their discipline colour, square portraits (initials until a portrait arrives) */
.theme-company{--dir:var(--ink);--dir-hi:var(--ink);--dir-tint:#e8e6ec}
.team-hero{align-items:stretch}
.team-joke{margin-top:14px;font-family:var(--hand);font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.15;color:var(--dir-hi);transform:rotate(-1.5deg);transform-origin:left}
.team-meet{grid-column:1/-1;margin:6px 0 0;text-align:center;font-size:clamp(24px,2.1vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.team-hero.hero:not(.hero-bento){grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
/* Group portrait: square on computers and phones, a wide band on tablets; the stickers sit on its corners */
.team-hero-photo{position:relative;margin:0;aspect-ratio:1/1;align-self:center}
.team-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%;border-radius:24px;box-shadow:0 30px 60px -36px #16141a66}
.team-hero-photo .sticker{position:absolute;z-index:1;padding:10px 16px;border-radius:16px;background:#fff;color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.01em;box-shadow:0 18px 36px -22px #16141a66}
.team-hero-photo .sticker-1{top:-12px;left:-14px;transform:rotate(-4deg);color:var(--mkt-hi)}
.team-hero-photo .sticker-2{top:-10px;right:-12px;transform:rotate(3deg);color:var(--dev-hi)}
.team-hero-photo .sticker-3{bottom:-12px;left:-12px;transform:rotate(-2deg);color:var(--aut-hi)}
.team-hero-photo .sticker-4{bottom:-14px;right:-10px;transform:rotate(2deg);background:var(--ink);color:#fff}
.people{display:grid;gap:14px}
.people-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.people-1{grid-template-columns:minmax(0,1fr)}
/* The only person in a group: one wide card, portrait left, text beside it */
.person.person-wide{flex-direction:row;align-items:center;gap:44px;padding:16px 48px 16px 16px}
.person-wide>.person-photo{flex:0 0 34%;margin:0}
.person.person-wide>.person-body{flex:1;min-width:0;margin:0}
.person-wide .person-traits{grid-template-columns:1fr 1fr}
.person,.product-card{min-width:0;display:flex;flex-direction:column;padding:16px 16px 28px;border-radius:28px;background:#fff}
.person>:not(.person-photo){margin-left:14px;margin-right:14px}
.person-photo{aspect-ratio:1/1;margin-bottom:22px;border-radius:20px;background:var(--dir-tint);display:grid;place-items:center;overflow:hidden}
.person-photo span{font-size:clamp(48px,5vw,72px);font-weight:800;letter-spacing:-.04em;color:var(--dir-hi);opacity:.85}
.person-photo img{width:100%;height:100%;object-fit:cover}
/* The portraits are drawings on white: multiply lets the card colour show through the paper */
.person-photo.has-photo img{mix-blend-mode:multiply}
.person h3,.person-name,.person-name strong{font-size:clamp(22px,2vw,28px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.person-role{margin-top:6px;font-size:14px;font-weight:700;color:var(--dir)}
.person>p:not(.person-role):not(.person-name),.person-body>p:not(.person-role):not(.person-name),.product-card>p:not(.person-role){margin-top:14px;font-size:15px;line-height:1.65;color:var(--muted)}
.person-traits{display:grid;gap:8px;margin-top:18px;margin-bottom:0}
.person-traits div{padding:12px 14px;border-radius:16px;background:var(--panel-2)}
.person-traits dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dir)}
.person-traits dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.person-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.person-links .text-link{color:var(--dir)}
.people-group{margin-top:44px}
.people-group:first-of-type{margin-top:6px}
.people-group-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:18px}
.people-group-head h3{font-size:clamp(24px,2.2vw,30px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--dir-hi)}
.people-group-head p{max-width:62ch;margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted)}
.people-group-head .person-links{margin-top:0}
.speaking-band{padding:48px;border-radius:var(--tile);background:var(--dir-tint)}
.speaking-band p{max-width:68ch;margin-top:16px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#3f3a46}
.speaking-band .text-link{margin-top:22px;color:var(--dir)}
/* Speaking block: what the lessons cover beside the two teachers */
.speaking-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px 24px;margin-top:30px}
.speaking-points{padding:26px 28px;border-radius:24px;background:#ffffffb8}
.speaking-band .speaking-points-h{margin:0 0 14px;max-width:none;font-size:18px;font-weight:800;color:var(--ink)}
.speaking-points ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.speaking-points li{position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:#3f3a46}
.speaking-points li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--dir-hi)}
.speaking-points li b{color:var(--ink)}
.speaking-band .speaking-formats{max-width:none;margin-top:16px;font-size:15px;line-height:1.6}
.speaking-band .speaking-points .text-link{margin-top:16px}
.teachers{display:grid;gap:12px;align-content:start}
.teacher{display:flex;align-items:center;gap:18px;padding:16px 20px 16px 16px;border-radius:24px;background:#fff}
.teacher img{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--dir-tint)}
.teachers .teacher p{max-width:none;margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.teachers .teacher .teacher-name{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.teachers .teacher .teacher-role{margin-top:2px;font-weight:700;color:var(--dir)}
.teachers .teacher .text-link{margin-top:8px;font-size:14px;color:var(--dir)}
/* The same cards on the speaking service page, two side by side under the text */
.column-body .teachers{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}
@media(max-width:700px){.column-body .teachers{grid-template-columns:minmax(0,1fr)}}
.work-lead{margin:4px 0 16px;font-size:18px;font-weight:700;color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.work-card{min-width:0;padding:26px;border-radius:24px;background:#fff}
.work-title{font-size:18px;line-height:1.3;color:var(--ink)}
.work-card p:not(.work-title){margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted)}
.product-card{padding:30px}
.product-card h3{font-size:clamp(24px,2.2vw,30px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.faq summary h3{margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.team-cta{padding:56px 48px;border-radius:var(--tile);background:var(--dir-tint)}
.team-cta h2{margin-top:10px}
.team-cta>p:not(.team-joke){max-width:60ch;margin-top:16px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:#3f3a46}
.team-cta .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.team-cta .btn{margin:0}

/* Team pages: decor in the ink style of the portraits — dotted ground, colour clouds, sparks by the titles (no underlines:
   Ruslana had them all removed), a running ribbon, tape on the portraits, flags, small drawings. Markup comes from team.py. */
body:has(.page-team){background-image:radial-gradient(#d4d0da 1.1px,transparent 1.3px);background-size:22px 22px}
.page-team main{overflow-x:clip}
.page-team main>.section{position:relative;isolation:isolate}
.page-team #leaders::before,.page-team #how-we-work::before,.page-team #team-products::before{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.75;pointer-events:none}
.page-team #leaders::before{width:520px;height:420px;right:4%;top:40px;background:var(--mkt-tint)}
.page-team #how-we-work::before{width:560px;height:440px;left:2%;top:120px;background:var(--dev-tint)}
.page-team #team-products::before{width:460px;height:360px;right:10%;top:30px;background:var(--aut-tint)}
.page-team main>.section:not(#discuss) h2{position:relative;display:inline-block;max-width:calc(100% - 40px)}
.page-team main>.section:not(#discuss) h2::after{content:"";position:absolute;right:-60px;top:-18px;width:52px;height:40px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2044%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2316141a%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2034L20%2027%22/%3E%3Cpath%20d%3D%22M12%2010L24%2021%22/%3E%3Cpath%20d%3D%22M33%203L34%2017%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
/* In the narrow column of the questions block the spark ends up far from the words, so it goes too */
.page-team main>.section#team-faq h2::after{content:none}
.team-ticker{position:relative;z-index:2;margin:34px -2px 10px;padding:16px 0;overflow:hidden;background:var(--ink);color:#fff;transform:rotate(-1.6deg)}
.team-ticker .track{display:flex;gap:34px;width:max-content;font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;animation:team-tick 38s linear infinite}
.team-ticker span{display:inline-flex;align-items:center;gap:34px}
.team-ticker svg{width:26px;height:26px}
@keyframes team-tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.team-ticker .track{animation:none}}
/* The loop slides by exactly one run: the gap after the last word belongs to the run */
.team-ticker .track{padding-right:34px}
/* Home, hub and team ribbons: every word is a link; it pauses under the pointer, while a finger is on it, and on keyboard focus */
.home-ticker a,.hub-ticker a,.link-ticker a{color:inherit;border-radius:10px;padding:4px 10px;margin:-4px -10px;transition:background .2s,color .2s}
.home-ticker a:hover,.home-ticker a:focus-visible,.hub-ticker a:hover,.hub-ticker a:focus-visible,.link-ticker a:hover,.link-ticker a:focus-visible{background:#fff;color:var(--ink);outline:none}
.home-ticker:hover .track,.home-ticker:active .track,.home-ticker:focus-within .track,
.hub-ticker:hover .track,.hub-ticker:active .track,.hub-ticker:focus-within .track,
.link-ticker:hover .track,.link-ticker:active .track,.link-ticker:focus-within .track{animation-play-state:paused}
/* Without motion the ribbon stands still, so its words scroll by hand instead */
@media(prefers-reduced-motion:reduce){.home-ticker,.hub-ticker,.link-ticker{overflow-x:auto;scrollbar-width:none}.home-ticker .track>[aria-hidden],.hub-ticker .track>[aria-hidden],.link-ticker .track>[aria-hidden]{display:none}}
.page-team .person{position:relative}
.page-team .person::before{content:"";position:absolute;z-index:2;top:-12px;left:50%;width:104px;height:28px;border-radius:2px;transform:translateX(-50%) rotate(-3deg);
  background:repeating-linear-gradient(45deg,#fff7d6cc 0 8px,#ffeeb0cc 8px 16px);box-shadow:0 2px 6px #16141a22}
.page-team .people .person:nth-child(3n+2)::before{transform:translateX(-50%) rotate(4deg);background:repeating-linear-gradient(45deg,#ffe2d3dd 0 8px,#ffd0bddd 8px 16px)}
.page-team .person-wide::before{left:calc(16px + 17%)}
.page-team .people .person:nth-child(3n)::before{transform:translateX(-50%) rotate(-6deg);background:repeating-linear-gradient(45deg,#e7e1ffdd 0 8px,#d9cffddd 8px 16px)}
.team-meet{position:relative}
.doodle-arrow{position:absolute;left:calc(50% + 150px);top:-6px;width:62px;height:76px}
.bunting{display:block;width:100%;height:auto;margin:0 0 22px}
.bunting-narrow{display:none}
.work-card .doodle{display:block;width:40px;height:40px;margin-bottom:14px;border-radius:50%}
.work-card .doodle *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.work-card:nth-child(3n+1) .doodle{background:radial-gradient(circle at 60% 60%,var(--mkt-tint) 0 55%,transparent 56%)}
.work-card:nth-child(3n+2) .doodle{background:radial-gradient(circle at 60% 60%,var(--dev-tint) 0 55%,transparent 56%)}
.work-card:nth-child(3n) .doodle{background:radial-gradient(circle at 60% 60%,var(--aut-tint) 0 55%,transparent 56%)}
.speaking-band{position:relative;overflow:hidden}
.speaking-band .doodle-mic{position:absolute;right:56px;top:40px;width:110px;height:138px;transform:rotate(8deg)}
.speaking-band h2,.speaking-band>p,.speaking-band .text-link{position:relative;z-index:1}
@media(min-width:1101px){.speaking-band>p,.speaking-band h2{max-width:calc(100% - 200px)}}
/* Keep the title clear of the microphone (the team decor otherwise lets titles run almost full width) */
@media(min-width:1101px){.page-team main>.section#speaking h2{max-width:calc(100% - 210px)}}
.team-cta{position:relative;overflow:hidden}
/* The brief form follows the tile directly, so the gap between them stays small */
.page-team #discuss{padding-bottom:8px}
.team-cta .stars{position:absolute;right:48px;top:40px;display:flex;gap:10px;transform:rotate(8deg)}
.team-cta .stars svg{width:46px;height:46px}
.team-cta .stars svg:nth-child(2){width:30px;height:30px;margin-top:30px}
@media(max-width:1100px){.speaking-band .doodle-mic{display:none}.speaking-grid{grid-template-columns:minmax(0,1fr)}.teachers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.teachers{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.speaking-points{padding:20px}.teacher img{width:72px;height:72px}.teacher{gap:14px;padding:14px}}
@media(max-width:620px){
  .page-team main>.section:not(#discuss) h2{line-height:1.22!important}
  .page-team main>.section:not(#discuss) h2::after{right:-34px;top:-24px;width:36px;height:28px}
  .doodle-arrow{left:calc(50% + 104px);width:44px;height:56px}
  .team-ticker .track{font-size:20px;gap:24px;padding-right:24px}.team-ticker span{gap:24px}.team-ticker svg{width:20px;height:20px}
  .bunting-wide{display:none}.bunting-narrow{display:block;margin-bottom:16px}
  .team-cta .stars{right:14px;top:16px;transform:scale(.7) rotate(8deg);transform-origin:top right}
}

/* Own products on a dark panel for contrast */
#products{--ink:#f6f5f8;--muted:#c9c4cf;--faint:#a39daa;--line:#2e2a33;--line-light:#3b3641;--accent:#b8a6ff;--rose:#b8a6ff;--lilac:#b8a6ff;--cream:#f6f5f8;--dir:#b8a6ff;--dir-hi:#b8a6ff;
  background:#16141a;color:var(--ink);border-radius:44px;margin:20px 10px}
#products .capability{background:#211e26;border:0;border-radius:28px}
#products h2,#products h3{color:var(--ink)}

/* Project path: disciplines in their colours */
.project-path [data-direction=marketing]{--c:var(--mkt)}
.project-path [data-direction=development]{--c:var(--dev)}
.project-path [data-direction=automation]{--c:var(--aut)}
.path-step{background:var(--bg);font-weight:700}
.path-tag.marketing{color:var(--mkt);border-color:#d9552f55;background:var(--mkt-tint)}
.path-tag.development{color:var(--dev);border-color:#6a4cf055;background:var(--dev-tint)}
.path-tag.automation{color:var(--aut);border-color:#178a5c55;background:var(--aut-tint)}

/* About: fact and roles */
.team-num .text-gradient{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
.team-num{font-weight:800}
.team-cell{border-top-color:var(--line-light)}
.team-cell h3{font-weight:700}
/* Roles read like the 15+ fact: big two-line names in the discipline colours */
.team-strip .team-cell h3{width:min-content;margin-bottom:14px;font-size:clamp(28px,2.6vw,36px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.team-strip .team-cell:nth-child(2) h3{color:var(--mkt-hi)}
.team-strip .team-cell:nth-child(3) h3{color:var(--dev-hi)}
.team-strip .team-cell:nth-child(4) h3{color:var(--aut-hi)}
.team-strip .team-num{min-height:72px;display:flex;align-items:flex-end}

/* Formats of work, process, questions */
.principle-grid{gap:14px}
.principle-grid article{min-width:0;background:#fff;border:0;border-radius:28px;padding:30px}
.micro-number{color:var(--accent);font-weight:700}
.faq{border-top:0}
.faq details{background:#fff;border:0;border-radius:22px;margin-bottom:10px;padding:4px 26px}
.faq summary{color:var(--ink)}
.numbered-list .num{color:var(--accent)}

/* Brief */
.brief-heading{background:none;border:0}
/* Steps beside the brief form: equal padding on every card, numbers in one column, level with the titles */
.contact-sidebar .contact-step,.contact-sidebar .contact-step:first-of-type{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;align-content:start;margin:0 0 10px;padding:22px 24px;border:0;border-radius:22px;background:#fff}
.contact-sidebar .contact-step .num{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;background:var(--dir-tint);color:var(--dir);font-size:13px;font-weight:700}
.contact-sidebar .contact-step h3{margin:5px 0 0;font-size:19px;line-height:1.25}
.contact-sidebar .contact-step p{margin-top:8px;font-size:15px;line-height:1.6}
.contact-sidebar .sidebar-note{margin-top:16px;padding:18px 22px;border-radius:22px;background:#fff;color:var(--muted);font-size:14px;line-height:1.6}
.contact-sidebar .sidebar-note b{color:var(--ink);font-weight:700}
/* Free marketing review offer under the steps */
.offer{grid-column:1/-1;position:relative;margin-top:16px;padding:28px 26px 24px;border-radius:var(--tile);background:var(--mkt-tint)}
.offer-tag{position:absolute;top:-12px;right:20px;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;transform:rotate(4deg)}
.offer h3{max-width:14ch;font-size:24px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.offer>p:not(.offer-small){margin-top:12px;font-size:15px;line-height:1.55;color:#3f3a46}
.offer ul{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.offer li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--ink)}
.offer li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--mkt-hi);box-shadow:inset 0 0 0 4px var(--mkt-tint)}
.offer .offer-btn{width:100%;margin-top:20px;background:var(--ink);color:#fff}
.offer .offer-btn:hover{background:#000}
.offer-small{margin-top:10px;font-size:13px;line-height:1.5;color:#5a5260;text-align:center}
@media(min-width:621px) and (max-width:880px){.contact-sidebar .contact-step,.contact-sidebar .contact-step:first-of-type{grid-template-columns:minmax(0,1fr);gap:12px;margin:0}.contact-sidebar .contact-step h3{margin-top:0}.offer h3{max-width:none}}
.preview-notice{background:var(--dev-tint);color:var(--ink);border:0;border-radius:16px}
.brief-form{background:#fff;border-radius:var(--tile);padding:36px}
.brief-form label,.brief-form legend,.brief-form .field>span:first-child{color:var(--ink)}
.field input,.field textarea,.field select{background:#fff;border-color:var(--line-light);border-radius:14px;color:var(--ink)}
.field input:hover,.field textarea:hover{border-color:var(--faint)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.service-option span{border-color:var(--line-light);border-radius:999px;color:var(--ink);font-size:13px}
.service-option input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.field .check-option input{accent-color:var(--accent)}
.form-status.error,.field-error{color:#c43d5c}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#c43d5c}

/* Footer on a dark panel */
.site-footer{--ink:#f6f5f8;--muted:#c9c4cf;--faint:#a39daa;--line:#2e2a33;--accent:#b8a6ff;--rose:#b8a6ff;--cream:#fff;--dir:#b8a6ff;--dir-hi:#b8a6ff;
  background:#16141a;color:var(--ink);border-radius:44px 44px 0 0;margin:30px 10px 0}
.site-footer .logo img{filter:none}

/* Inner pages (discipline and service pages): breadcrumb and the first screen as a tile in the page colour;
   the hero words become stickers */
.breadcrumb{color:var(--faint)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span:last-child{color:var(--ink)}
.hero:not(.hero-bento){min-height:0;margin:14px var(--gutter) 0;padding:52px 48px;border-radius:var(--tile);background:var(--dir-tint);grid-template-columns:1.25fr .75fr;gap:30px;overflow:hidden}
.hero:not(.hero-bento) .hello{color:var(--dir-hi)}
.hero:not(.hero-bento) h1{font-size:clamp(38px,4.6vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.hero:not(.hero-bento) h1 .text-gradient{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.hero:not(.hero-bento) h1 br+.text-gradient{-webkit-text-fill-color:var(--dir-hi);color:var(--dir-hi)}
.hero-tags{gap:8px;margin-top:26px}
.hero-tag{padding:8px 14px;border:0;border-radius:999px;background:#ffffffb8;color:var(--ink);font-size:13px;letter-spacing:0;text-transform:none}
.page-outline{margin:14px var(--gutter) 0;padding:0 28px;border:0;border-radius:999px;background:#fff}
.page-outline a{color:var(--ink);font-weight:500}
.page-outline a:hover{color:var(--accent)}
.page-outline a:last-child{color:var(--accent);font-weight:700}
.hero:not(.hero-bento) .hero-lead{max-width:600px;color:#3f3a46;font-size:18px;line-height:1.6}
.hero:not(.hero-bento) .hero-actions .btn{margin:0}
.ghost-link{color:var(--ink);font-size:15px;font-weight:600}
.ghost-link .round-arrow{border-color:var(--ink);background:#fff}
.hero:not(.hero-bento) .hero-art{height:auto;opacity:1;overflow:visible;align-self:center;margin:0}
.hero:not(.hero-bento) .art-rail,.hero:not(.hero-bento) .micro-index,.hero:not(.hero-bento) .plane:not(.p4){display:none}
.hero:not(.hero-bento) .plane-stack,.hero:not(.hero-bento) .plane.p4,.hero:not(.hero-bento) .plane-words{position:static;inset:auto;transform:none;scale:none;translate:none;rotate:none;animation:none;width:auto;height:auto;background:none;border:0;box-shadow:none;opacity:1;filter:none}
.hero:not(.hero-bento) .plane-stack::after{content:none}
.hero:not(.hero-bento) .plane-words{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-left:10%}
.hero:not(.hero-bento) .plane-words span{display:inline-block;padding:14px 22px;border-radius:20px;background:#fff;color:var(--ink);font-size:clamp(18px,1.7vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-transform:none;opacity:1;transform:rotate(-3deg);box-shadow:0 20px 40px -24px #16141a66;animation:none}
.hero:not(.hero-bento) .plane-words span:nth-child(2){margin-left:22%;transform:rotate(2deg);color:var(--dir)}
.hero:not(.hero-bento) .plane-words span:nth-child(3){margin-left:6%;transform:rotate(-1deg)}
.hero:not(.hero-bento) .plane-words span:nth-child(4){margin-left:30%;transform:rotate(4deg);background:var(--ink);color:#fff}

/* Cards of inner pages */
.capability{background:#fff;border:0;border-radius:28px}
.capability .number,.micro-number,.numbered-list .num,.task-index{color:var(--dir)}
.related-card,.service-card{background:#fff;border:0;border-radius:28px}
.service-card:hover{border-color:transparent;box-shadow:0 20px 44px -28px #16141a55}
.related-card:hover{box-shadow:0 20px 44px -28px #16141a55}
.related-card .related-action{color:var(--accent);font-weight:700}
.collaboration-grid{border:0;gap:14px}
.collaboration-grid article,.collaboration-grid article+article{background:#fff;border:0;border-radius:28px}
.pricing{border:0;border-radius:var(--tile);background:#fff;overflow:hidden}
.pricing-intro{background:var(--dir-tint);border:0}
.quote-scope span{border:1px solid var(--line-light);border-radius:999px;color:var(--ink);background:#fff}
.column-body h3,.check-list h3,.related-card h3,.collaboration-grid h3{font-weight:700}
.signal-block{border:0;border-radius:var(--tile);background:#fff}
/* About, team, cases, FAQ: the old hero labels become stickers too */
.hero:not(.hero-bento) .home-art{display:flex;flex-direction:column;align-items:flex-start;gap:14px;height:auto;padding-left:10%}
.hero:not(.hero-bento) .home-art>svg,.hero:not(.hero-bento) .home-art .art-glow{display:none}
.hero:not(.hero-bento) .home-art .art-label{position:static;inset:auto;transform:rotate(-3deg);display:inline-block;padding:14px 22px;border-radius:20px;background:#fff;color:var(--ink);font-size:clamp(18px,1.7vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-transform:lowercase;opacity:1;animation:none;box-shadow:0 20px 40px -24px #16141a66}
.hero:not(.hero-bento) .home-art .art-label::first-letter{text-transform:uppercase}
.hero:not(.hero-bento) .home-art .label-b{margin-left:18%;transform:rotate(2deg);color:var(--dir-hi)}
.hero:not(.hero-bento) .home-art .label-bottom{margin-left:6%;transform:rotate(-1deg);background:var(--ink);color:#fff}
/* Not-found page */
.empty-state h1{font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.empty-state .btn{margin-top:28px}

/* Contact page first screen, as a tile like the other inner pages */
.contact-hero{margin:14px var(--gutter) 0;padding:52px 48px;border:0;border-radius:var(--tile);background:var(--dir-tint)}
.contact-hero h1{font-size:clamp(38px,4.6vw,66px);line-height:1.04;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.contact-hero h1 .text-gradient{background:none;-webkit-text-fill-color:var(--dir-hi);color:var(--dir-hi)}
.contact-hero p:not(.eyebrow){color:#3f3a46}
.contact-hero .hero-actions .btn{margin:0}
/* Roles on the about and team pages read like the home page roles */
#roles .capability h3,#responsibilities .capability h3{font-size:clamp(26px,2.4vw,34px);line-height:1.05;font-weight:800;letter-spacing:-.035em}
#roles .capability:nth-child(1) h3,#responsibilities .capability:nth-child(1) h3{color:var(--mkt-hi)}
#roles .capability:nth-child(2) h3,#responsibilities .capability:nth-child(2) h3{color:var(--dev-hi)}
#roles .capability:nth-child(3) h3,#responsibilities .capability:nth-child(3) h3{color:var(--aut-hi)}
.principle-band,.cta-band{margin:14px var(--gutter);border:0;border-radius:var(--tile);background:var(--dir-tint);padding-inline:48px}
.cta-band::after{content:none}
.cta-band .btn{margin:0}

@media(max-width:1100px){
  .people-3,.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .person.person-wide{gap:32px;padding-right:32px}.person-wide>.person-photo{flex-basis:40%}.person-wide .person-traits{grid-template-columns:1fr}
  .team-hero.hero:not(.hero-bento){grid-template-columns:1fr;gap:34px}
  .team-hero-photo{aspect-ratio:16/10;margin:4px 6px 10px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-main{grid-column:1/-1}
  .tile-photo{grid-column:1/-1;min-height:340px}
  .sticker-a{left:16px;top:20px}
  .sticker-mkt{left:16px;bottom:24px}.sticker-aut{bottom:36px}
  .tile-photo.has-photo picture{inset:0}.tile-photo.has-photo img{object-position:46% 50%}
  .bento-dirs{grid-template-columns:1fr}
  .hero:not(.hero-bento){grid-template-columns:1fr;padding:42px 36px}
  .hero:not(.hero-bento) .plane-words{flex-direction:row;flex-wrap:wrap;padding:0;gap:10px}
  .hero:not(.hero-bento) .plane-words span,.hero:not(.hero-bento) .plane-words span:nth-child(n){margin-left:0}
}
@media(max-width:860px){
  .tile-photo.has-photo{display:block;min-height:0;padding:96px 0 100px}
  .tile-photo.has-photo picture{position:static;display:block;padding:0 8.5% 0 1.5%;border-radius:0;overflow:visible}
  .tile-photo.has-photo img{height:auto}
  .tile-photo.has-photo .sticker-b,.tile-photo.has-photo .sticker-mkt,.tile-photo.has-photo .sticker-aut{bottom:16px}
}
@media(max-width:620px){
  .hero.hero-bento{padding-top:12px}
  .hero:not(.hero-bento){margin:10px 12px 0;padding:32px 22px}
  .principle-grid{grid-template-columns:minmax(0,1fr)}
  .page-outline{margin:10px 12px 0;padding:4px 20px;border-radius:22px}
  .principle-band,.cta-band{margin:10px 12px;padding-inline:22px}
  .cases-note{padding:24px}
  .people-3,.work-grid{grid-template-columns:minmax(0,1fr)}
  .page-team .person-wide::before{left:50%}
  .person.person-wide{flex-direction:column;align-items:stretch;gap:0;padding:16px 16px 28px}.person-wide>.person-photo{flex-basis:auto;margin-bottom:22px}.person.person-wide>.person-body{margin:0 14px}
  .speaking-band,.team-cta{padding:30px 22px}
  .team-hero-photo{aspect-ratio:1/1;margin:6px 4px 12px}
  .team-hero-photo .sticker{padding:7px 11px;font-size:13px;border-radius:12px}
  .team-hero-photo .sticker-1{left:-8px}.team-hero-photo .sticker-2{right:-6px}.team-hero-photo .sticker-3{left:-6px}.team-hero-photo .sticker-4{right:-6px}
  .cases-note .btn{width:100%}
  .contact-hero{margin:10px 12px 0;padding:32px 22px}
  .contact-hero h1{font-size:34px}
  .hero:not(.hero-bento):has(.hero-tags) .hero-art{display:none}
  .principle-grid article{padding:24px}
  .hero:not(.hero-bento) h1{font-size:36px}
  .hero:not(.hero-bento) .hero-lead{font-size:16px}
  .hero:not(.hero-bento) .plane-words span{font-size:16px;padding:10px 15px}
  .tile{padding:24px}
  .tile-main{padding:30px 24px}
  .hello{font-size:28px}
  .hero-bento h1{font-size:34px}
  .hero-bento .lead{font-size:17px}
  .hero-bento .actions .btn{width:100%}
  .tile-photo{min-height:300px}
  .sticker{padding:11px 14px}.sticker b{font-size:24px}.sticker-b b{font-size:19px}
  .sticker-a{left:12px;top:14px}.sticker-b{right:10px;bottom:16px}
  .tile-photo .hand{top:auto;bottom:90px;left:20px;right:auto;font-size:26px}
  .tile-photo.has-photo{padding:84px 0 106px}
  .tile-photo.has-photo .sticker-a{top:14px}
  .sticker-mkt{left:12px}.sticker-aut{right:10px}
  .sticker-mkt,.sticker-aut{max-width:calc(50% - 18px)}
  .tile-photo.has-photo .hand{top:18px;right:18px;bottom:auto;left:auto}
  #products,.site-footer{margin-inline:6px;border-radius:30px}
  .site-footer{border-radius:30px 30px 0 0}
}

/* UA home: decor below the products (ideas 1–7 and 9 of the 28.10.2026 prototype), in the ink style of the team pages.
   Markup comes from home_decor.py; the dotted ground, the road under the path, the clouds and the panels are CSS only. */
body:has(.home-decor){background-image:radial-gradient(#d4d0da 1.1px,transparent 1.3px);background-size:22px 22px}
.home-decor main{overflow-x:clip}
.home-ticker{margin:40px -2px 0}
/* Project path: a road in the step colours that blends into the next step, a finish flag, a handwritten hint */
.home-decor .project-path{isolation:isolate}
.home-decor .project-path li{--t:var(--mkt-tint);--tn:var(--t)}
.home-decor .project-path [data-direction=development]{--t:var(--dev-tint)}
.home-decor .project-path [data-direction=automation]{--t:var(--aut-tint)}
.home-decor .project-path li:has(+[data-direction=marketing]){--tn:var(--mkt-tint)}
.home-decor .project-path li:has(+[data-direction=development]){--tn:var(--dev-tint)}
.home-decor .project-path li:has(+[data-direction=automation]){--tn:var(--aut-tint)}
.home-decor .project-path li::after{content:"";position:absolute;z-index:-1;top:-16px;left:0;right:-24px;height:75px;background:linear-gradient(90deg,var(--t) 15%,var(--tn))}
.home-decor .project-path li:first-child::after{left:-26px;border-radius:38px 0 0 38px}
.home-decor .project-path li:last-child::after{right:-26px;border-radius:0 38px 38px 0;background:var(--t)}
.home-decor .path-step{background:#fff}
.path-flag{position:absolute;top:-28px;right:-14px;width:40px;height:52px}
.home-decor #connections .section-heading{position:relative}
.path-hint{position:absolute;top:24px;right:150px;font-family:var(--hand);font-weight:700;font-size:30px;line-height:1.05;color:var(--dev-hi);transform:rotate(-4deg);white-space:nowrap}
.path-hint svg{position:absolute;right:-16px;top:62px;width:56px;height:68px;transform:rotate(18deg)}
/* About: colour clouds behind the three roles and a spark by 15+ */
.home-decor .team-strip{position:relative;isolation:isolate}
.home-decor .team-strip::before{content:"";position:absolute;z-index:-1;inset:-70px -40px;pointer-events:none;filter:blur(40px);
  background:radial-gradient(ellipse 15% 44% at 38% 52%,var(--mkt-tint) 45%,transparent),radial-gradient(ellipse 15% 44% at 62% 52%,var(--dev-tint) 45%,transparent),radial-gradient(ellipse 15% 44% at 87% 52%,var(--aut-tint) 45%,transparent)}
.home-decor .team-fact .team-num::after{content:"";flex:none;width:48px;height:36px;margin:0 0 46px 4px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2044%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2316141a%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2034L20%2027%22/%3E%3Cpath%20d%3D%22M12%2010L24%2021%22/%3E%3Cpath%20d%3D%22M33%203L34%2017%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
/* Formats of work on a lilac panel, questions on a mint one, like the dark products panel */
.home-decor #collaboration,.home-decor #faq{margin:20px 10px;border-radius:44px}
.home-decor #collaboration{background:var(--dev-tint)}
.home-decor #faq{background:var(--aut-tint)}
/* The EN home puts the dark products right after the FAQ: keep air between the two panels */
.home-decor #faq+#products{margin-top:72px}
.home-decor .principle-grid article{position:relative}
.home-decor .principle-grid article::before{content:"";position:absolute;top:-12px;left:50%;width:104px;height:28px;border-radius:2px;transform:translateX(-50%) rotate(-3deg);
  background:repeating-linear-gradient(45deg,#fff7d6ee 0 8px,#ffeeb0ee 8px 16px);box-shadow:0 2px 6px #16141a22}
.home-decor .principle-grid article:nth-child(2)::before{transform:translateX(-50%) rotate(4deg);background:repeating-linear-gradient(45deg,#ffe2d3ee 0 8px,#ffd0bdee 8px 16px)}
.home-decor .principle-grid article:nth-child(3)::before{transform:translateX(-50%) rotate(-5deg);background:repeating-linear-gradient(45deg,#d6f3e4ee 0 8px,#bfead3ee 8px 16px)}
.card-doodle{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 60% 60%,var(--mkt-tint) 0 55%,transparent 56%)}
.principle-grid article:nth-child(2) .card-doodle{background:radial-gradient(circle at 60% 60%,var(--dev-tint) 0 55%,transparent 56%)}
.principle-grid article:nth-child(3) .card-doodle{background:radial-gradient(circle at 60% 60%,var(--aut-tint) 0 55%,transparent 56%)}
.card-doodle *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card-doodle .dot{fill:var(--ink)}
/* Process: a dotted route with a flag in the empty column under the title */
.route{display:block;width:100%;max-width:320px;height:auto;margin-top:34px;overflow:visible}
.route text{font-family:var(--fh);font-size:12px;font-weight:700;fill:var(--ink)}
.route .lbl{font-family:var(--hand);font-size:30px;fill:var(--aut-hi)}
/* FAQ: a sticky note that leads to the form, and two question marks */
.faq-note{position:relative;max-width:280px;margin-top:44px;padding:30px 26px 24px;border-radius:4px;background:#fff1a8;transform:rotate(-3deg);box-shadow:0 10px 24px #16141a1f}
.faq-note::before{content:"";position:absolute;top:-13px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(4deg);background:repeating-linear-gradient(45deg,#ffffffcc 0 8px,#f1eefacc 8px 16px);box-shadow:0 2px 6px #16141a22}
.faq-note b{display:block;font-family:var(--hand);font-size:32px;line-height:1;color:var(--ink)}
.home-decor .faq-note p{max-width:none;margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.home-decor .faq-note .text-link{margin-top:12px}
.qmark{position:absolute;font-family:var(--hand);font-weight:700;line-height:1;pointer-events:none}
.qm-1{right:30px;top:330px;font-size:120px;color:var(--mkt-hi);transform:rotate(12deg)}
.qm-2{right:96px;top:420px;font-size:70px;color:var(--dev-hi);transform:rotate(-14deg)}
/* Brief: flags over the title, an arrow down to the form beside the two short paragraphs (they stop at 690px) */
.home-decor .brief-heading{position:relative}
.home-decor .brief-heading .bunting{margin-bottom:30px}
.brief-doodle{position:absolute;bottom:16px;right:calc(var(--gutter) + 100px);width:160px;height:130px;pointer-events:none}
.brief-doodle>svg{position:absolute;left:0;top:40px;width:70px;height:86px}
.brief-stars{position:absolute;left:80px;top:0;display:flex;gap:10px;transform:rotate(8deg)}
.brief-stars svg{width:44px;height:44px}
.brief-stars svg:nth-child(2){width:28px;height:28px;margin-top:28px}
@media(max-width:1279px){
  .path-hint{display:none}
  .home-decor .project-path li:nth-child(3n+1)::after{left:-26px;border-radius:38px 0 0 38px}
  .home-decor .project-path li:nth-child(3n)::after{right:-26px;border-radius:0 38px 38px 0;background:var(--t)}
}
@media(max-width:1100px){
  .home-decor .team-strip::before{background:radial-gradient(ellipse 30% 22% at 75% 25%,var(--mkt-tint) 45%,transparent),radial-gradient(ellipse 30% 22% at 25% 75%,var(--dev-tint) 45%,transparent),radial-gradient(ellipse 30% 22% at 75% 75%,var(--aut-tint) 45%,transparent)}
  .qmark,.brief-doodle{display:none}
}
@media(max-width:880px){
  .faq-note{margin-top:30px;transform:rotate(-2deg)}
}
@media(max-width:620px){
  .home-decor #collaboration,.home-decor #faq{margin-inline:6px;border-radius:30px}
  .home-decor #faq+#products{margin-top:44px}
  .home-decor .project-path li::after,.home-decor .project-path li:nth-child(n)::after{top:0;bottom:0;left:-8px;right:auto;width:59px;height:auto;border-radius:0;background:linear-gradient(180deg,var(--t) 15%,var(--tn))}
  .home-decor .project-path li:first-child::after{top:-8px;border-radius:30px 30px 0 0}
  .home-decor .project-path li:last-child::after{border-radius:0 0 30px 30px;background:var(--t)}
  .path-flag,.route{display:none}
  .home-decor .team-strip::before{inset:-40px -20px;background:radial-gradient(ellipse 50% 12% at 50% 38%,var(--mkt-tint) 45%,transparent),radial-gradient(ellipse 50% 12% at 50% 63%,var(--dev-tint) 45%,transparent),radial-gradient(ellipse 50% 12% at 50% 88%,var(--aut-tint) 45%,transparent)}
  .home-ticker{margin-top:30px}
}

/* Other pages (site_decor.py, 28.10.2026): the home style in a quieter form, structure only. A dotted ground, tinted
   panels for the FAQ and "how we work", a step rail, a small card that leads to the form, a ribbon on the three hubs.
   No flags, tape, sparks, underlines or sticky notes here: those stay on the home and team pages. */
body:has(.site-decor){background-image:radial-gradient(#d4d0da 1.1px,transparent 1.3px);background-size:22px 22px}
.site-decor main{overflow-x:clip}
.hub-ticker{margin-bottom:0}
.decor-panel{margin:20px 10px;border-radius:44px;background:var(--dir-tint)}
.faq-section.decor-panel{background:var(--aut-tint)}
.theme-automation .faq-section.decor-panel,.page-automation-hub .faq-section.decor-panel{background:var(--dev-tint)}
/* Steps: numbers in white circles on a thin line in the discipline colour, as on the home project path */
.decor-steps .numbered-list{border-top:0}
.decor-steps .numbered-list li{position:relative;grid-template-columns:44px minmax(0,1fr);gap:24px;padding:0 0 34px;border-bottom:0}
.decor-steps .numbered-list li:last-child{padding-bottom:0}
.decor-steps .numbered-list li::before{content:"";position:absolute;left:22px;top:44px;bottom:0;width:1px;background:var(--dir);opacity:.4}
.decor-steps .numbered-list li:last-child::before{content:none}
.decor-steps .numbered-list .num{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--dir);border-radius:50%;background:#fff;color:var(--dir);font-size:12px;font-weight:700}
.decor-steps .numbered-list li>div{padding-top:9px}
/* FAQ: a small card under the title that leads to the form */
.faq-card{max-width:300px;margin-top:34px;padding:22px 24px 20px;border-radius:22px;background:#fff}
.faq-card b{display:block;font-family:var(--hand);font-size:28px;font-weight:700;line-height:1.05;color:var(--ink)}
.site-decor .faq-card p{max-width:none;margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}
.site-decor .faq-card .text-link{margin-top:12px}
@media(max-width:620px){
  .decor-panel{margin-inline:6px;border-radius:30px}
  .decor-steps .numbered-list li{grid-template-columns:36px minmax(0,1fr);gap:16px}
  .decor-steps .numbered-list li::before{left:18px;top:36px}
  .decor-steps .numbered-list .num{width:36px;height:36px}
  .decor-steps .numbered-list li>div{padding-top:5px}
  .faq-card{max-width:none;margin-top:26px}
}

/* Marketing hub (marketing_hub.py, 28.10.2026): popular services in the first screen, the section menu kept in view,
   the catalog as group tiles with service chips (tinted with an arrow: a page; outlined: the brief, with the service
   named), the content and speaking cards as one panel. Tiles and chips are not tied to marketing, so other hubs can
   use them; their colour comes from --dir. */
/* Jumps land under the header and the sticky menu ([id] already keeps 100px, 82px on phones, in styles.css) */
html:has(.hub-outline) [id]{scroll-margin-top:150px}
.hub-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.hub-quick span{margin-right:4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dir)}
.hub-quick a{padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;transition:background .2s,color .2s}
.hub-quick a:hover{background:var(--ink);color:#fff}
.hub-outline{position:sticky;top:87px;z-index:20;margin-top:30px;box-shadow:0 6px 24px #16141a12}
.service-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-8px 0 26px;font-size:14px;color:var(--muted)}
.service-legend span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;vertical-align:-1px}
.service-legend .lg-page::before{background:var(--dir-tint);box-shadow:inset 0 0 0 1px var(--dir)}
.service-legend .lg-ask::before{box-shadow:inset 0 0 0 1px var(--faint)}
.service-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.service-tile{min-width:0;padding:28px;border-radius:28px;background:#fff}
.tile-top{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:700;color:var(--dir)}
.tile-top span+span{color:var(--faint);font-weight:600}
.service-tile h3{margin:14px 0 8px;font-size:21px;line-height:1.2;font-weight:700;color:var(--ink)}
.service-tile>p:not(.tile-top){font-size:15px;line-height:1.55;color:var(--muted)}
.service-chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.service-chips a{display:inline-block;max-width:100%;padding:8px 13px;border-radius:999px;font-size:14px;line-height:1.25;transition:background .2s,color .2s,box-shadow .2s}
.chip-page{background:var(--dir-tint);color:var(--dir);font-weight:600}
.chip-page svg{display:inline-block;width:14px;height:14px;margin-left:5px;vertical-align:-2px}
.chip-page:hover{background:var(--dir);color:#fff}
.chip-page .nw{white-space:nowrap}
.chip-ask{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-light)}
.chip-ask:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.service-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:14px;padding:22px 28px;border-radius:28px;background:var(--aut-tint)}
.service-more p{max-width:58ch;font-size:15px;line-height:1.55;color:var(--ink)}
.service-more div{display:flex;flex-wrap:wrap;gap:8px 24px}
.service-more .text-link{margin:0;color:var(--aut)}
.hub-band .principle-grid{gap:0;padding:6px;border-radius:32px;background:#fff}
.hub-band .principle-grid article{border-radius:0;background:none}
.hub-band .principle-grid article+article{border-left:1px solid var(--line)}
@media(max-width:1100px){
  .service-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-band .principle-grid{grid-template-columns:minmax(0,1fr)}
  .hub-band .principle-grid article+article{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:880px){
  .hub-outline{top:75px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hub-outline::-webkit-scrollbar{display:none}
  .hub-outline a{flex:none;white-space:nowrap}
  .hub-outline a:last-child{margin-left:0}
}
@media(max-width:620px){
  html:has(.hub-outline) [id]{scroll-margin-top:124px}
  .hub-outline{top:70px;margin-top:22px}
  .service-tiles{grid-template-columns:minmax(0,1fr)}
  .service-tile,.service-more{padding:24px}
  .service-chips a{font-size:13.5px}
}

/* Marketing hub, EN (marketing_hub.py en): four group tiles in two columns, the two content cards as one panel */
.service-tiles.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-band .collaboration-grid{gap:0;padding:6px;border-radius:32px;background:#fff}
.hub-band .collaboration-grid article,.hub-band .collaboration-grid article+article{border-radius:0;background:none}
.hub-band .collaboration-grid article+article{border-left:1px solid var(--line)}
@media(max-width:620px){
  .service-tiles.cols-2{grid-template-columns:minmax(0,1fr)}
  .hub-band .collaboration-grid article+article{border-left:0;border-top:1px solid var(--line)}
}

/* Site tree menus (nav.py, 28.10.2026, UA). The three service menus look alike (Ruslana's wish): marketing lists its ten
   groups and the ↗ automation group as rows like the services of development and automation, and a group opens its
   services in a card of the same kind beside the list (the row under the mouse after a short pause, in focus or clicked;
   site.js); on phones below its row. */
.dropdown-list{min-width:330px}
.mega-dirs .md-head{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.mega-dirs .md-head svg{flex:none;width:14px;height:14px;transition:transform .2s}
.mega-dirs .md-group:last-child>.md-head{border-bottom:0}
.mega-dirs .md-head:hover,.mega-dirs .md-group.is-active>.md-head{background:var(--panel-2);color:var(--accent)}
.md-panel{display:none;position:absolute;top:0;left:calc(100% + 8px);min-width:330px;padding:10px;border-radius:22px;background:#fff;box-shadow:0 24px 60px -24px #16141a40}
.mega-dirs.md-flip .md-panel{left:auto;right:calc(100% + 8px)}
.md-group.is-active>.md-panel{display:block}
@media(max-width:880px){
  .dropdown-list{min-width:0}
  .mega-dirs .md-head{padding:12px 0;font-size:15px}
  .mega-dirs .md-group.is-open>.md-head svg{transform:rotate(90deg)}
  .mega-dirs .md-group:last-child.is-open>.md-head{border-bottom:1px solid var(--line)}
  .md-group.is-active>.md-panel{display:none}
  .md-group.is-open>.md-panel{display:block}
  .md-panel{position:static;min-width:0;padding:0 0 0 16px;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
  .md-group:last-child>.md-panel{border-bottom:0}
  .md-panel .dropdown-hub{display:none}
}

/* The other services of the group, before the brief on every service page (nav.py): the current one filled */
.group-nav-box{padding:28px;border-radius:28px;background:#fff}
.group-nav .eyebrow{color:var(--dir)}
.group-nav-title{margin-top:8px;font-size:24px;line-height:1.2;font-weight:700}
.group-nav-title a{color:var(--ink);transition:color .2s}
.group-nav-title a:hover{color:var(--dir)}
.chip-current{display:inline-block;max-width:100%;padding:8px 13px;border-radius:999px;font-size:14px;line-height:1.25;font-weight:600;background:var(--dir);color:#fff}
.group-nav .text-link{margin-top:20px}
/* Privacy and cookies links sit together in the footer's bottom row */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 18px}
/* Draft legal pages (service_pages.py): what is still missing is marked, not invented */
.draft-note{max-width:860px;padding:18px 22px;border-radius:18px;background:#fff1c9;font-size:15px;line-height:1.55;color:var(--ink)}
.todo{padding:0 5px;border-radius:5px;background:#fff1c9;color:#7a4b00;font-weight:600}
@media(max-width:620px){
  .group-nav-box{padding:24px}
  .group-nav-title{font-size:21px}
  .chip-current{font-size:13.5px}
}

/* Marketing catalog as an accordion (catalog_accordion.py, 28.10.2026): one row per group with a line icon, opening a
   list of equal service rows ("→" a page, "+" the brief). Colours come from --dir. */
.service-acc{display:grid;gap:10px}
.acc-group{border-radius:24px;background:#fff}
.acc-group>summary{display:grid;grid-template-columns:48px minmax(0,1fr) auto 24px;grid-template-areas:"icon title count toggle" "icon desc count toggle";column-gap:18px;align-items:center;padding:18px 24px;border-radius:24px;list-style:none;cursor:pointer}
.acc-group>summary::-webkit-details-marker{display:none}
.acc-group>summary:focus-visible{outline:2px solid var(--dir);outline-offset:2px}
.acc-icon{grid-area:icon;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--dir-tint)}
.acc-icon svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acc-group h3{grid-area:title;margin:0;font-size:19px;line-height:1.25;font-weight:700;color:var(--ink)}
.acc-desc{grid-area:desc;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)}
.acc-count{grid-area:count;font-size:13px;font-weight:600;color:var(--faint);white-space:nowrap}
.acc-toggle{grid-area:toggle;position:relative;width:22px;height:22px;justify-self:end}
.acc-toggle::before,.acc-toggle::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s}
.acc-toggle::after{transform:rotate(90deg)}
.acc-group[open] .acc-toggle::after{transform:rotate(0)}
.acc-group>summary:hover h3{color:var(--dir)}
/* Services drop down as one column of rows under the group title (Ruslana, 28.10.2026), not spread across */
.acc-list{display:grid;grid-template-columns:minmax(0,1fr);max-width:820px;margin:0;padding:0 24px 18px 90px;list-style:none}
.acc-row{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:12px;align-items:center;height:100%;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.35;color:var(--ink);transition:color .2s}
.acc-row i{font-style:normal;text-align:right;font-weight:700;color:var(--dir)}
.acc-row.ask i{font-weight:400;color:var(--faint)}
.acc-row:hover{color:var(--dir)}
@media(prefers-reduced-motion:reduce){.acc-toggle::before,.acc-toggle::after{transition:none}}
@media(max-width:620px){
  .acc-group>summary{grid-template-columns:44px minmax(0,1fr) 22px;grid-template-areas:"icon title toggle" "icon desc toggle";column-gap:14px;padding:16px 18px}
  .acc-count,.acc-group:not([open]) .acc-desc{display:none}
  .acc-group:not([open])>summary{grid-template-areas:"icon title toggle"}
  .acc-icon{width:44px;height:44px;border-radius:14px}
  .acc-list{max-width:none;padding:0 18px 14px}
}

/* Type scale v2 (28.10.2026, Ruslana: one scale on every page, no visual noise). Measured before it: 30 font sizes on
   desktop and 24 on phones across the 104 pages. Every text now takes one of these steps (desktop · phone):
   headings  H1 66→36 (fluid) · H2 52→32 (fluid) · display 36→28 (headings in panels, big names, direction tiles)
             · title 24 · 22 (cards) · subtitle 20 · 19 (steps, small cards, accordion rows)
   text      lead 18 · 17 (first lines, section notes, FAQ questions) · body 16 · card 15 · UI 14 (buttons, links,
             chips, form labels) · small 13 (breadcrumbs, footer, notes, tags, numbers) · label 11 (uppercase eyebrows)
   handwriting (Caveat) note 28 · 26 and line 34 · 28.
   The menus keep their sizes (14 on computers, 17 and 15 in the phone menu). Decor keeps its own: hero stickers and art
   words, running ribbons, stickers on the home photo, the big 15+, question marks; the big offer button stays 16.
   #top (the frame of every page) makes these win over the older, scattered rules without !important. */
:root{--t-h1:clamp(36px,4.6vw,66px);--t-h2:clamp(32px,3.6vw,52px);--t-display:clamp(28px,2.5vw,36px);--t-title:24px;--t-subtitle:20px;--fs-ui:14px;--t-hand:28px;--t-hand-lg:34px}
@media(max-width:620px){:root{--t-title:22px;--t-subtitle:19px;--t-hand:26px;--t-hand-lg:28px}}
#top main h1{font-size:var(--t-h1)}
#top main h2{font-size:var(--t-h2)}
#top main h3,#top .group-nav-title,#top .person-name strong{font-size:var(--t-title)}
#top :is(.signal-block,.pricing-intro) h2,#top :is(.team-cell,.people-group-head,.product-card) h3,#top :is(#roles,#responsibilities) .capability h3,
#top .dir-title,#top .team-meet{font-size:var(--t-display)}
#top :is(.contact-step,.service-card,.project-path,.acc-group,details) h3,#top .teacher-name,#top .speaking-points-h{font-size:var(--t-subtitle)}
#top :is(.hero-lead,.contact-hero>p:not(.eyebrow),.prose>p:first-child,.brief-heading h2+p,.section-heading>p,.task-layout .intro>p,
  .speaking-band>p,.team-cta>p,.tile-main .lead,.work-lead,.work-title strong),#top .faq summary{font-size:var(--fs-lead)}
#top .capability-tagline{font-size:var(--fs-lead)!important}
#top .acc-desc{font-size:var(--fs-card)}
#top :is(.btn:not(.btn-big),.text-link,.ghost-link,.page-outline a,.hub-quick a,.service-chips a,.chip-current,.field label,.field legend,.form-status){font-size:var(--fs-ui)}
#top .btn>span{font-size:inherit}
#top :is(.breadcrumb,.breadcrumb a,.breadcrumb span,.hero-tag,.footer-column a,.footer-text,.footer-bottom,.footer-bottom a,.footer-bottom span,
  .language a,.language span,.form-note,.preview-notice,.offer-small,.offer-tag,.sidebar-note,.sidebar-note b,.service-option span,
  .check-option span,.field label span,.field legend span,.field-error,.capability .number,.micro-number,.numbered-list .num,.contact-step .num,
  .tile-top,.acc-count,.related-action,.task-action,.task-index,.path-step,.quote-scope span){font-size:var(--fs-small)}
#top :is(.eyebrow,.footer-column h3,.hub-quick span,.path-tag,.dropdown-heading,.proof-label,.person-traits dt){font-size:var(--fs-label)}
#top :is(.faq-card b,.faq-note b,.hand,.path-hint){font-size:var(--t-hand)}
#top :is(.hello,.team-joke){font-size:var(--t-hand-lg)}
/* The hero stickers of about, FAQ, cases and contact still had the original design's Arial: one family for the site */
#top .art-label{font-family:var(--fh)}