/* A small extension of the logo palette, shared by cards and their dialogs. */
:root{--lilac:#b8a1db;--lilac-soft:#eee7f7;--peach:#efb694;--peach-soft:#f9e7dc;--lime:#c8da91;--lime-soft:#eef3db;--ease-out:cubic-bezier(.22,1,.36,1);--service-soft:#e2f2f1;--service-paper:#f3f9f8;--service-accent:#086879}
[data-service=development],[data-service=ai]{--service-soft:#e2f2f1;--service-paper:#f3f9f8;--service-accent:#086879}
[data-service=integrations]{--service-soft:#eee7f7;--service-paper:#f8f5fc;--service-accent:#70518d}
[data-service=support]{--service-soft:#f9e7dc;--service-paper:#fcf6f2;--service-accent:#965339}
[data-service=devops]{--service-soft:#e5eafa;--service-paper:#f5f7fc;--service-accent:#455d91}
[data-service=operations]{--service-soft:#eef3db;--service-paper:#f8faf2;--service-accent:#52672f}

/* An open technical canvas around the original, unmodified company mark. */
.hero-art{isolation:isolate}
.hero-art::before{content:'';position:absolute;inset:9% -2% 14%;z-index:-1;pointer-events:none;background-image:radial-gradient(#bad4d6 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%);opacity:.65}
.hero-symbol{position:absolute;inset:0;pointer-events:none;transform:translate(var(--hero-x,0px),var(--hero-y,0px)) rotate(var(--hero-turn,0deg));transition:transform .7s var(--ease-out)}
.hero-symbol .brand-object{animation:none}
.art-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.art-orbit{stroke:#b9d4d6;stroke-width:1;stroke-dasharray:4 9;opacity:.65}
.art-trace{stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.trace-teal{stroke:var(--brand)}
.trace-lilac{stroke:var(--lilac)}
.trace-peach{stroke:var(--peach)}
.dot-lilac{fill:var(--lilac)}.dot-peach{fill:var(--peach)}.dot-lime{fill:var(--lime)}
.art-node{border-radius:10px;border-color:#c5dfe0;background:#fbfdfc;box-shadow:0 6px 24px #18343b08}
.node-one .icon{color:var(--brand-ink)}
.node-two{background:#f4effa;border-color:#ded2ee}.node-two .icon{color:#70518d}
.node-three{background:#fdf1e9;border-color:#f0d7c6}.node-three .icon{color:#965339}
.art-topline,.art-bottomline{z-index:2}
.hero h1>span{display:inline-block;position:relative;isolation:isolate}
.hero h1>span::after{content:'';position:absolute;left:0;right:0;bottom:-.045em;height:.095em;border-radius:1px;background:linear-gradient(90deg,#a2dfe3 0 48%,#ddcef1 48% 78%,#f4d6be 78%);z-index:-1;transform-origin:left}
.section-heading .eyebrow{display:inline-flex;align-items:center;gap:10px}
.section-heading .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:9px 0 var(--lilac),18px 0 var(--peach);margin-right:18px;flex-shrink:0}

/* Individual service surfaces give the same clean grid a more authored rhythm. */
.services-section{background:#eef4f3}
.services-grid{gap:16px;border:0;background:transparent}
.service-card{border:1px solid #ccdfde;border-radius:14px;overflow:hidden;background:var(--service-paper);transition:border-color .25s,box-shadow .25s}
.service-open{position:relative;isolation:isolate;overflow:hidden;background:var(--service-paper);border-radius:inherit}
.service-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:64% center;opacity:var(--service-photo-opacity,.26);filter:saturate(.72);pointer-events:none;transition:transform .9s var(--ease-out),opacity .6s var(--ease-out)}
.service-open::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--service-paper),color-mix(in srgb,var(--service-paper) 60%,transparent) 40%,color-mix(in srgb,var(--service-paper) 12%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--service-paper) 72%,transparent),transparent 34%,transparent 76%,color-mix(in srgb,var(--service-paper) 46%,transparent))}
.service-card[data-service=devops]{--service-photo-opacity:.20}
.service-card p{color:#3c555d}
.service-card-top{margin-bottom:32px;min-height:46px}
.service-number{color:var(--service-accent);padding-top:10px}
.service-icon{width:48px;height:48px;top:0;background:var(--service-soft);border-radius:12px;color:var(--service-accent);transition:transform .45s var(--ease-out)}
.service-arrow{width:36px;height:36px;color:var(--service-accent);border-color:#18343b28;transition:background .25s,transform .4s var(--ease-out)}
.service-tags{gap:6px;min-block-size:calc(3.4em + 45px);padding-top:18px;margin-top:24px;border-color:#18343b1c}
.service-tags>span{font-size:14px;line-height:1.7;white-space:normal;overflow-wrap:anywhere;border:1px solid #18343b19;border-radius:5px;padding:4px 8px;color:var(--service-accent);background:#ffffff80}
.service-open:focus-visible{outline-offset:-4px}
.service-open:focus-visible .service-arrow{background:var(--service-accent);border-color:var(--service-accent);color:#fff}
.service-dialog-aside{background:var(--service-soft);border-radius:12px}
.service-dialog-intro>.service-dialog-icon{background:var(--service-soft);color:var(--service-accent);border-radius:12px}

/* Keep preview typography stationary while photographs respond to exploration. */
.case-cover{border-radius:14px;isolation:isolate}
.case-preview{transition:none}
.project-image{transition:transform .75s var(--ease-out)}
.case-cover-arrow{width:48px;height:48px;box-shadow:0 4px 20px #18343b0d;transition:opacity .2s,transform .35s var(--ease-out),background .2s}
.case-cover:focus-visible .case-preview{transform:none}
.case-cover:focus-visible .case-cover-arrow{background:var(--lime-soft)}
.case-title-link{transition:color .2s}
.case-filter-bar{border-color:#cddfe0}
.case-filters button{transition:background .2s,color .2s,border-color .2s}
.case-filters button[aria-pressed=true]{background:#e9e1f4;border-color:#c9b7df;color:#543d71}

/* Small colour beats connect the process, partners and final call to action. */
.process-section{background:#f2f0f7}
.process-number>b{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;font-size:14px;font-weight:500;border-radius:50%;background:#e0eeee;color:#086879}
.process-list li:nth-child(2) .process-number>b{background:var(--lilac-soft);color:#70518d}
.process-list li:nth-child(3) .process-number>b{background:var(--peach-soft);color:#965339}
.process-list li:nth-child(4) .process-number>b{background:var(--lime-soft);color:#52672f}
.process-number>i{background:#c9c8d5;transform-origin:left}
.process-number>i::after{background:#a9a2bf}
.partner-mark{border-radius:12px}
.reuse-mark{color:var(--lime)}
.reuse-inner .eyebrow{color:#d1c2e8}
.faq-list details[open] summary>span{background:var(--lilac-soft);color:#70518d}
.faq-list summary>span{transition:background .2s,color .2s}
.contact-form-card{position:relative;border-radius:16px}
.contact-form-card::before{content:'';display:block;width:88px;height:5px;margin-bottom:24px;border-radius:3px;background:linear-gradient(90deg,var(--brand) 0 36%,var(--lilac) 36% 60%,var(--peach) 60% 82%,var(--lime) 82%)}
.field>label{transition:color .18s}
.field:focus-within>label{color:var(--brand-ink)}
.button,.header-cta{transition:background .2s,color .2s,transform .25s var(--ease-out)}
.button>.icon,.header-cta>.icon{transition:transform .35s var(--ease-out)}
.button:active,.header-cta:active{transform:scale(.985)}
.site-header{isolation:isolate}
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .2s}
.reading-progress.is-visible{opacity:1}
.reading-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--brand) 0 60%,var(--lilac) 60% 83%,var(--peach) 83%);transform:scaleX(var(--reading-progress,0));transform-origin:left}

@media(hover:hover) and (pointer:fine){
  .service-card:hover{border-color:var(--service-accent);box-shadow:0 12px 36px #18343b08}
  .service-open:hover{background:var(--service-soft)}
  html:not([data-motion=off]) .service-open:hover .service-photo{opacity:calc(var(--service-photo-opacity,.26) + .03);transform:scale(1.035)}
  .service-open:hover .service-icon{transform:translateY(-3px) rotate(-5deg)}
  .service-open:hover .service-arrow{background:var(--service-accent);border-color:var(--service-accent);color:#fff;transform:rotate(45deg)}
  .button:hover>.icon,.header-cta:hover>.icon{transform:translate(2px,-2px)}
  .case-cover:hover .case-preview{transform:none}
  .case-cover:hover .project-image{transform:scale(1.055) translateX(-.5%)}
  .case-cover:hover .case-cover-arrow{background:var(--lime-soft)}
  .partner-row:hover .partner-mark{transform:rotate(-3deg);transition:transform .3s var(--ease-out)}
}
@media(max-width:1200px){
  .services-grid{gap:12px}
}
@media(max-width:700px){
  .hero-art::before{background-size:22px 22px;inset:3% 0 12%}
  .art-connections{inset:0 0 auto;height:94%;opacity:.75}
  .services-grid{gap:14px}
  .service-card{border-radius:12px}
  .service-card-top{margin-bottom:20px}
  .service-icon{right:56px;top:0;width:44px;height:44px}
  .service-tags{min-block-size:0}
  .process-list li{padding-left:54px}
  .process-number{top:0}
  .process-number>b{width:36px;height:36px}
  .contact-form-card{border-radius:12px}
  .case-cover{border-radius:10px}
  .reading-progress{height:2px}
}
/* Every automated introduction is finite; reduced motion keeps the final frame. */
@media(prefers-reduced-motion:no-preference){
  .art-trace{animation:connection-draw 1.4s var(--ease-out) both}
  .trace-lilac{animation-delay:.16s}.trace-peach{animation-delay:.32s}
  .hero-symbol .brand-object{animation:brand-settle 2.8s var(--ease-out) both}
  .orbit-dot{transform-box:fill-box;transform-origin:center;animation:dot-settle 1s var(--ease-out) both}
  .dot-lilac{animation-delay:.2s}.dot-peach{animation-delay:.35s}.dot-lime{animation-delay:.5s}
  .hero h1>span::after{animation:accent-draw .85s .15s var(--ease-out) both}
  [data-revealed] .process-number>i{animation:accent-draw .65s .1s var(--ease-out) both}
}
@keyframes connection-draw{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:.7}}
@keyframes brand-settle{0%{opacity:0;transform:translateY(18px) rotate(-4deg) scale(.96)}45%{opacity:1;transform:translateY(-6px) rotate(1deg) scale(1)}100%{opacity:1;transform:none}}
@keyframes dot-settle{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes accent-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .hero-symbol{transform:none;transition:none}
  .art-trace,.orbit-dot,.hero-symbol .brand-object,.hero h1>span::after,[data-revealed] .process-number>i{animation:none}
  .service-card,.service-photo,.service-icon,.service-arrow,.project-image,.case-cover-arrow,.partner-mark,.button,.header-cta,.button>.icon,.header-cta>.icon{transition:none!important;transform:none!important}
  .reading-progress{display:none}
}