/* /service-palette.css */
/* Generated from service-palette.mjs by build-site.mjs. */
:root {
  --cf-service-build: #67DDFF;
  --cf-service-build-ink: #006F99;
  --cf-service-improve: #A7ABFF;
  --cf-service-improve-ink: #535B9C;
  --cf-service-connect: #54DCC8;
  --cf-service-connect-ink: #146D66;
  --cf-service-website: #C5E77A;
  --cf-service-website-ink: #526B1D;
  --cf-service-visibility: #FFAB99;
  --cf-service-visibility-ink: #934838;
  --cf-service-brand: #DCA3EF;
  --cf-service-brand-ink: #82508F;
  --cf-service-reliability: #F1C27D;
  --cf-service-reliability-ink: #805D23;
  --cf-service-software: #8AB8FF;
  --cf-service-software-ink: #355D98;
  --service-accent: var(--cf-service-build);
  --service-ink: var(--cf-service-build-ink);
}
[data-service="build"] { --service-accent: var(--cf-service-build); --service-ink: var(--cf-service-build-ink); }
[data-service="improve"] { --service-accent: var(--cf-service-improve); --service-ink: var(--cf-service-improve-ink); }
[data-service="connect"] { --service-accent: var(--cf-service-connect); --service-ink: var(--cf-service-connect-ink); }
[data-service="website"] { --service-accent: var(--cf-service-website); --service-ink: var(--cf-service-website-ink); }
[data-service="visibility"] { --service-accent: var(--cf-service-visibility); --service-ink: var(--cf-service-visibility-ink); }
[data-service="brand"] { --service-accent: var(--cf-service-brand); --service-ink: var(--cf-service-brand-ink); }
[data-service="reliability"] { --service-accent: var(--cf-service-reliability); --service-ink: var(--cf-service-reliability-ink); }
[data-service="software"] { --service-accent: var(--cf-service-software); --service-ink: var(--cf-service-software-ink); }
:root, [data-service] {
  --service-line: color-mix(in srgb, var(--service-accent) 38%, var(--cf-line));
  --service-wash: color-mix(in srgb, var(--service-accent) 8%, var(--cf-surface));
  --service-soft: color-mix(in srgb, var(--service-accent) 17%, var(--cf-night));
}

/* /service-theme.css */
/* Service colour is a wayfinding cue. Neutral type, graphite surfaces and the
   official blue identity stay shared. No filters or overlays on client artwork. */
[data-service] :is(a,button,input,textarea,select,summary):focus-visible {outline-color:var(--service-accent)}

/* The service scenes use identical materials, type and composed bounds. */
body[data-page=home] .cf-story-card[data-service] {
 --story-accent:var(--service-accent);
 border-color:var(--service-line);
 background:radial-gradient(ellipse at 85% 15%,color-mix(in srgb,var(--service-accent) 9%,transparent),transparent 60%),linear-gradient(135deg,#151e2c,#090e18 70%);
 box-shadow:inset 0 1px 0 #a9c8ed35,inset 0 -2px 0 var(--service-line),0 35px 65px -30px #02050dcc;
}
body[data-page=home] .cf-story-card[data-service] .cf-story-card-top>span:last-child {color:var(--service-accent);border-color:var(--service-line)}
body[data-page=home] .cf-story-card[data-service] .cf-story-card-top>span:first-child {color:var(--service-accent)}
body[data-page=home] .cf-story-card[data-service] .cf-story-cta {border-color:var(--service-line)}
body[data-page=home] .cf-story-card[data-service] .cf-card-sheen {background:radial-gradient(ellipse at 65% 35%,color-mix(in srgb,var(--service-accent) 6%,transparent),transparent 65%),linear-gradient(112deg,transparent 25%,color-mix(in srgb,var(--service-accent) 9%,transparent) 45%,#e2ebf10c 49%,transparent 75%)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.micro {color:var(--service-accent)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]:is(:hover,:focus-within) {background:linear-gradient(90deg,var(--service-wash),transparent 75%)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.text-link {color:var(--service-accent);border-color:var(--service-line);background:var(--service-soft)}
body:is([data-page=home],[data-page=about]) .cf-service[data-service]>.text-link:is(:hover,:focus-visible) {background:var(--service-accent);color:var(--cf-night);box-shadow:0 0 20px color-mix(in srgb,var(--service-accent) 12%,transparent)}
body[data-page=home] .cf-care[data-service] :is(.micro,.cf-care-action .text-link span) {color:var(--service-accent)}
.about-services li[data-service]::marker {color:var(--service-accent)}
.about-services li[data-service] {border-inline-start:2px solid var(--service-accent);padding-inline-start:12px}

/* One authored service identity follows a case from card to full page.
   Circle actions own their foreground in filled and forced-colour states. */
:where(.cf-project[data-service]) .project-card-arrow,
#case-content[data-service] :is(.cinema-title a,.finale-link,.proof-focus-mark,.case-close>.eyebrow) {color:var(--service-accent)}
/* Pale filled actions use dark ink; service accents belong on dark surfaces
   or behind dark text. Keep the launch label and arrow readable in every state. */
#case-content[data-service] .project-launch {color:var(--cf-night)}
#case-content[data-service] .project-launch>span {color:inherit}
#case-content[data-service] .project-launch:is(:hover,:focus-visible) {background:var(--service-accent);border-color:var(--service-accent);color:var(--cf-night)}
.cf-project[data-service] .cf-project-link:focus-visible .project-title-mask>span {text-decoration-color:var(--service-accent)}
[data-service] .project-portal-back {stroke:var(--service-line)}
[data-service] .project-portal-light {stroke:var(--service-accent);filter:drop-shadow(0 0 4px var(--service-accent))}
[data-service] .project-portal-accent {stroke:var(--service-accent)}
#case-content[data-service] .portal-back {stroke:var(--service-line)}
#case-content[data-service] .portal-energy {stroke:var(--service-accent);filter:drop-shadow(0 0 4px var(--service-accent)) drop-shadow(0 0 14px color-mix(in srgb,var(--service-accent) 45%,transparent))}
#case-content[data-service] .portal-violet {stroke:var(--service-accent);filter:none;opacity:.4}
body[data-experience=cinematic] #case-content[data-service] :is(.case-brief,.case-delivery,.flow-runway):before {background:linear-gradient(90deg,transparent,var(--service-accent),transparent)}
body[data-experience=cinematic] #case-content[data-service] .case-brief {background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--service-accent) 6%,transparent),transparent 65%),var(--cf-surface)}
#case-content[data-service] :is(.delivery-integrations>span,.stack-list>span) {border-color:var(--service-line)}
#case-content[data-service] .case-next-meter>i {background:var(--service-accent)}
.project-filters button[data-service] {border-color:var(--service-line)}
.project-filters button[data-service] span {color:var(--service-accent)}
.project-filters button[data-service]:hover {border-color:var(--service-accent);background:var(--service-wash)}
.project-filters button[data-service][aria-pressed=true] {background:var(--service-accent);border-color:var(--service-accent);color:var(--cf-night)}
.project-filters button[data-service][aria-pressed=true] span {color:var(--cf-night)}

/* The enquiry carries the selected service through its brief and controls. */
#contact-dialog .enquiry-start[data-service] {border-color:var(--service-line);background:linear-gradient(120deg,var(--service-wash),#0f1c27);box-shadow:inset 2px 0 var(--service-accent)}
#contact-dialog .enquiry-start[data-service]:hover {border-color:var(--service-accent);background:var(--service-soft)}
#contact-dialog .enquiry-start[data-service] :is(.enquiry-choice-number,.enquiry-choice-mark,.enquiry-start-range) {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-intro h2 em,
#contact-dialog[data-service] :is(.enquiry-selection,.enquiry-email-fallback,.enquiry-software-link a,.enquiry-review>button) {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-progress li[aria-current] span:first-child {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-progress li[aria-current]:after {background:var(--service-accent)}
#contact-dialog[data-service] :is(.enquiry-guidance,.enquiry-service-intro,.contact-context,.enquiry-auto-progress) {border-color:var(--service-accent)}
#contact-dialog[data-service] :is(.enquiry-guidance,.enquiry-auto-progress,.enquiry-review) {background:var(--service-wash)}
#contact-dialog[data-service] .enquiry-live-brief {background:var(--cf-frost);border-color:var(--service-ink)}
#contact-dialog[data-service] :is(.enquiry-brief-header .micro,[data-edit-brief],.enquiry-brief-footer>span:last-child) {color:var(--service-ink)}
#contact-dialog[data-service] .enquiry-brief-dot {background:var(--service-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--service-ink) 12%,transparent)}
#contact-dialog[data-service] .enquiry-picks label:hover>span {border-color:var(--service-accent);background:var(--service-wash)}
#contact-dialog[data-service] .enquiry-picks input:checked+span {color:var(--cf-ink);background:var(--service-soft);border-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-picks input:checked+span:before {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-picks input[type=radio]:checked+span:before {background:var(--service-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--service-accent) 12%,transparent)}
#contact-dialog[data-service] .enquiry-extra>summary:after {color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step {background:var(--service-soft);border-color:var(--service-line);border-left-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step[data-state=review] {background:var(--service-soft);border-color:var(--service-accent)}
#contact-dialog[data-service] .enquiry-next-step-kicker {color:var(--service-accent)}

/* Shared utilities stay blue; ongoing service/support cues use amber. */
#site-menu [data-service] :is(a,button),#site-menu a[data-service],#site-footer a[data-service] {text-decoration-color:var(--service-accent)}
#site-menu .menu-client-area {border-color:var(--service-line)}
#site-menu .menu-client-area .menu-eyebrow,#site-menu .menu-client-links a>span:last-child,#site-menu .menu-secondary a[data-service]>span {color:var(--service-accent)}
#client-dialog[data-service] :is(h2 em,.client-routes a strong>span,.client-help a) {color:var(--service-accent)}

/* Colour never replaces focus, selection marks or labels. Quiet views retain
   complete geometry with the same established reduced-motion behaviour. */
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-service] .project-portal-light {filter:none}
@media(hover:none),(pointer:coarse),(max-width:950px),(prefers-reduced-motion:reduce){[data-service] .project-portal-light{filter:none}}
@media(forced-colors:active){
 [data-service] {--service-accent:LinkText;--service-ink:CanvasText;--service-line:ButtonText;--service-wash:Canvas;--service-soft:Canvas}
 #contact-dialog .enquiry-start[data-service] {border-color:ButtonText}
 #contact-dialog[data-service] .enquiry-picks input:checked+span,.project-filters button[data-service][aria-pressed=true] {border-color:Highlight;color:HighlightText;background:Highlight}
}

/* /design-refinements.css */
/* Major statements retain Antonio. Supporting chapters use the existing
   reading family, so their scale and rhythm support the work on display. */
body[data-page="service"] :is(.service-capabilities,.service-process,.service-technology,.service-faq) h2,
body[data-experience="cinematic"] :is(.case-brief,.case-delivery,.case-outcome,.management-section) h2,
body[data-page="about"] :is(.about-story,.about-principles) h2 {
 font-family:var(--cf-body);font-size:clamp(30px,3.2vw,46px);font-weight:500;
 line-height:1.2;letter-spacing:-.035em;text-transform:none;text-wrap:pretty;
 max-width:22ch;
}
body[data-page="service"] :is(.service-capabilities,.service-process,.service-technology,.service-faq) h2 em,
body[data-experience="cinematic"] :is(.case-brief,.case-delivery,.case-outcome,.management-section) h2 em,
body[data-page="about"] :is(.about-story,.about-principles) h2 em {font-style:normal;}

/* Metadata remains secondary, with a usable reading size at every width. */
body:is([data-page="home"],[data-page="about"]) :is(.chapter-bar,.cf-story-card-top,.cf-story-scroll-cue),
body[data-page="service"] :is(.service-eyebrow,.service-breadcrumb,.software-caption>span),
body[data-experience="cinematic"] :is(.eyebrow,.case-screen-index) {
 font-size:12px;line-height:1.6;letter-spacing:.045em;
}
.cf-project-caption>div>p:not(.project-card-outcome):not(.featured-project-kicker) {
 font-size:12px;line-height:1.65;letter-spacing:.015em;text-transform:none;
}
.cf-project-caption .project-card-industries {font-size:13px;line-height:1.5;}
body[data-page="home"] [data-featured-slot] .cf-project-caption p:not(.featured-project-kicker):not(.project-card-outcome) {font-size:12px;line-height:1.65;}
body[data-page="service"] :is(.service-capability small,.service-client-proof>span) {font-size:12px;line-height:1.65;}

/* A frosted editorial chapter gives useful reading its own visual pace.
   Images keep their original colours, and all interactive ink stays dark. */
body[data-page="home"] .home-reading {
 background:var(--cf-frost);color:#163149;border-color:#9db2c0;
 padding-block:clamp(48px,5.2vw,90px);
}
body[data-page="home"] .home-reading-heading h2 {
 font-family:var(--cf-body);font-size:clamp(30px,3vw,44px);line-height:1.2;
 text-transform:none;letter-spacing:-.035em;
}
body[data-page="home"] .home-reading :is(.home-reading-eyebrow,.home-reading-meta,.home-reading-action time) {color:#426077;}
body[data-page="home"] .home-reading :is(.home-reading-all,.home-reading-card,.home-reading-link) {color:inherit;}
body[data-page="home"] .home-reading-meta>span:first-child {color:var(--service-ink,#006f99);}
body[data-page="home"] .home-reading :is(.home-reading-all,.home-reading-card[data-reading-role="support"],.home-reading-action,.home-reading-image) {border-color:#a3b7c3;}
body[data-page="home"] .home-reading :is(.home-reading-all>span,.home-reading-arrow) {color:var(--service-ink,#006f99);}
body[data-page="home"] .home-reading-arrow {border-color:var(--service-ink,#006f99);background:transparent;}
body[data-page="home"] .home-reading-link:is(:hover,:focus-visible) .home-reading-arrow {background:var(--service-ink,#006f99);color:#fff;}
body[data-page="home"] .home-reading-link:is(:hover,:focus-visible) h3 {color:var(--service-ink,#006f99);}
body[data-page="home"] .home-reading a:focus-visible {outline-color:var(--service-ink,#006f99);}
body[data-page="home"] .home-reading-grid {gap:0 clamp(32px,4.5vw,76px);}
body[data-page="home"] .home-reading-card[data-reading-role="lead"] h3 {max-width:30ch;}

/* Short supporting chapters use quieter, denser spacing than the opening
   and project showcase; there is still a clear edge between each section. */
body[data-page="service"] :is(.service-capabilities,.service-process,.service-technology,.service-faq) {padding-block:clamp(56px,6vw,104px);}
body[data-page="service"] :is(.service-capabilities,.service-process,.service-technology) .service-section-head {margin-bottom:clamp(28px,3.3vw,52px);}
body[data-page="service"] .service-process-list li {padding-block:28px;}
body[data-experience="cinematic"] .case-brief {padding:clamp(28px,4.5vw,76px);}
body[data-experience="cinematic"] .opening-copy {padding-block:clamp(44px,5.5vw,92px);}

/* Show the connections behind a project early in its story. This reuses
   authored workflow records and their existing finite progress treatment. */
body[data-experience="cinematic"] .flow-runway .section-heading h2 {
 font:500 clamp(30px,3vw,44px)/1.2 var(--cf-body);letter-spacing:-.035em;text-transform:none;
}
body[data-experience="cinematic"] .flow-track {gap:20px;}
body[data-experience="cinematic"] .flow-step {
 padding:26px 24px;border:1px solid var(--service-line,var(--cf-line));
 background:var(--cf-surface-deep);border-radius:2px 18px 2px 2px;
}
body[data-experience="cinematic"] .flow-step::before {left:24px;}
body[data-experience="cinematic"] .flow-step>span {font-size:12px;line-height:1.5;color:var(--service-accent);}
body[data-experience="cinematic"] .flow-step strong {font-size:clamp(22px,1.8vw,29px);line-height:1.2;}

/* Real portrait screens keep their natural proportions and readable scale;
   they are not presented inside a desktop browser's chrome. */
body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"] .reveal-browser {max-width:min(100%,var(--source-width),390px);margin-inline:auto;}
body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"] .browser-bar {display:none;}

/* Client voices belong beside the actual relationship and delivered work.
   Their text, attribution, date context and source stay in the case record. */
body[data-page="about"] .about-partnership .case-testimonial {
 margin:28px 0 0;padding:26px;background:var(--cf-frost);color:#163149;
 border:1px solid #adc0cb;border-radius:2px 18px 2px 2px;
}
body[data-page="about"] .case-testimonial .testimonial-source {display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:12px/1.5 var(--cf-mono);color:#426077;}
body[data-page="about"] .case-testimonial .testimonial-source .eyebrow {width:100%;font:12px/1.5 var(--cf-mono);}
body[data-page="about"] .case-testimonial .testimonial-rating {display:flex;align-items:center;gap:8px;}
body[data-page="about"] .case-testimonial .testimonial-stars {color:#805d23;font-size:16px;}
body[data-page="about"] .case-testimonial .testimonial-mark {display:none;}
body[data-page="about"] .case-testimonial blockquote {margin:20px 0;font:400 clamp(18px,1.4vw,22px)/1.5 var(--cf-body);letter-spacing:-.02em;}
body[data-page="about"] .about-partnership .case-testimonial blockquote p {margin:0;color:#163149;font:inherit;}
body[data-page="about"] .case-testimonial figcaption {display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:18px;border-top:1px solid #adc0cb;}
body[data-page="about"] .case-testimonial .testimonial-monogram {display:none;}
body[data-page="about"] .case-testimonial .testimonial-person {display:grid;gap:5px;}
body[data-page="about"] .case-testimonial .testimonial-person strong {font-size:16px;font-weight:500;}
body[data-page="about"] .case-testimonial .testimonial-person span {font-size:14px;line-height:1.5;}
body[data-page="about"] .case-testimonial .testimonial-person small {font-size:12px;line-height:1.6;color:#426077;}
body[data-page="about"] .case-testimonial figcaption a {display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#006f99;font-size:13px;line-height:1.5;text-decoration:underline;text-underline-offset:4px;}
body[data-page="about"] .case-testimonial a:focus-visible {outline:2px solid #006f99;outline-offset:4px;}

/* Let the longest card set a shared row height. Actions then align naturally,
   including CMS edits and personalised selections, without measured heights. */
.projects-grid [data-project-card] .cf-project-link {display:flex;flex-direction:column;height:100%;}
.projects-grid [data-project-card] .cf-project-caption {flex:1;}
.projects-grid [data-project-card] .project-card-action {margin-top:auto;}
@media(min-width:1101px) {
 body[data-page="home"] [data-featured-slot]:not([data-featured-slot="0"]) .cf-project-link {display:flex;flex-direction:column;height:100%;}
 body[data-page="home"] [data-featured-slot]:not([data-featured-slot="0"]) .cf-project-caption {flex:1;}
 body[data-page="home"] [data-featured-slot]:not([data-featured-slot="0"]) .featured-project-action {margin-top:auto;}
 body[data-page="about"] .about-partnership .cf-project {display:flex;flex-direction:column;}
 body[data-page="about"] .about-partnership .cf-project-link {display:flex;flex-direction:column;height:100%;}
 body[data-page="about"] .about-partnership .cf-project-caption {flex:1;}
 body[data-page="about"] .about-partnership .project-card-action {margin-top:auto;}
}
@supports(grid-template-rows:subgrid) {
 @media(min-width:1101px) {
  body[data-page="about"] .about-partnership-grid {row-gap:24px;}
  body[data-page="about"] .about-partnership {display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:24px;}
  body[data-page="about"] .about-partnership .about-relationship-copy {margin-top:0;}
  body[data-page="about"] .about-partnership .case-testimonial {margin-top:0;}
 }
}

/* Equal apparent weight needs more width for genuine wordmarks. Original
   paths, proportions, transparent backgrounds and ink treatments are intact. */
.home-technology-link:is([href$="#sage"],[href$="#smtp2go"],[href$="#quickbooks"]) .technology-logo {width:72px;height:40px;object-fit:contain;}
.home-technology-link[href$="#woocommerce"] .technology-logo {width:96px;height:40px;object-fit:contain;}
body[data-page="home"] :is(.home-technology-logos,.google-testimonial) {border-color:var(--cf-line);}
.cf-project-caption :is(.project-card-action,.featured-project-action) {border-top-width:1px;}
@media(min-width:1001px) {
 body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"]:not(.capture-scroll):not(.capture-focus) .reveal-card-inner {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px 8%;
 }
 body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"]:not(.capture-scroll):not(.capture-focus) .reveal-heading {display:block;max-width:38ch;margin:0;}
 body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"]:not(.capture-scroll):not(.capture-focus) .reveal-heading h3 {font-size:clamp(28px,2.5vw,40px);line-height:1.2;margin-top:18px;}
 body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"]:not(.capture-scroll):not(.capture-focus) .reveal-heading p {margin-top:20px;}
 body[data-experience="cinematic"] .reveal-card[data-proof-aspect="portrait"]:not(.capture-scroll):not(.capture-focus) .reveal-art {height:auto;}
}

@media(max-width:700px) {
 body[data-page="service"] :is(.service-capabilities,.service-process,.service-technology,.service-faq) h2,
 body[data-experience="cinematic"] :is(.case-brief,.case-delivery,.case-outcome,.management-section) h2,
 body[data-page="about"] :is(.about-story,.about-principles) h2 {font-size:clamp(28px,7.5vw,36px);line-height:1.23;}
 body:is([data-page="home"],[data-page="about"]) .chapter-bar {font-size:11px;}
 body[data-page="home"] .home-reading-grid {gap:24px;}
 body[data-page="service"] .service-process-list li {padding-block:24px;}
}
@media(max-width:1000px) {body[data-experience="cinematic"] .flow-track {grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px) {
 body[data-experience="cinematic"] .flow-track {grid-template-columns:minmax(0,1fr);}
 body[data-experience="cinematic"] .flow-step {padding:24px;}
}
@media(hover:none) {body[data-page="home"] .home-reading-arrow {background:var(--service-ink,#006f99);color:#fff;}}
@media(forced-colors:active) {
 body[data-page="home"] .home-reading {background:Canvas;color:CanvasText;}
 body[data-page="home"] .home-reading :is(.home-reading-eyebrow,.home-reading-meta,.home-reading-action time) {color:CanvasText;}
 body[data-page="home"] .home-reading :is(.home-reading-meta>span:first-child,.home-reading-all>span,.home-reading-arrow) {color:LinkText;}
 body[data-page="home"] .home-reading :is(.home-reading-all,.home-reading-card[data-reading-role="support"],.home-reading-action,.home-reading-image,.home-reading-arrow) {border-color:CanvasText;}
 body[data-page="home"] .home-reading-arrow {background:Canvas;}
 body[data-page="home"] .home-reading-link:is(:hover,:focus-visible) .home-reading-arrow {background:Highlight;color:HighlightText;}
 body[data-page="home"] .home-reading-link:is(:hover,:focus-visible) h3 {color:LinkText;}
 body[data-experience="cinematic"] .flow-step {background:Canvas;border-color:CanvasText;}
 body[data-page="about"] .case-testimonial {background:Canvas!important;color:CanvasText!important;border-color:CanvasText!important;}
 body[data-page="about"] .case-testimonial :is(.testimonial-source,.testimonial-stars,.testimonial-person small) {color:CanvasText;}
 body[data-page="about"] .case-testimonial figcaption a {color:LinkText;}
 body[data-page="about"] .about-partnership .case-testimonial blockquote p {color:CanvasText;}
}

/* /site-shell/holographic-ui.css */
/* Shared holographic treatment. Existing layout, assets, typography and motion owners remain. */
/* The native CTA glow can extend beyond the viewport. Reserve the menu's
   scroll gutter before it appears, so its finite animation cannot resize rows. */
#site-menu[data-hologram="on"]{--holo-accent:var(--cf-light,#67ddff);scrollbar-gutter:stable}
/* One finite materialisation replaces the old CSS slide arrivals. The native
   glass assembly and pointer parallax keep ownership of their own transforms. */
#site-menu[data-hologram="on"] :is(.menu-bottom,.menu-secondary,.menu-preview-copy,.menu-label,.menu-preview),
#site-menu[data-hologram="on"] .menu-architecture path{animation:none!important}
#site-menu[data-hologram="on"][open]::backdrop{animation:menu-holo-dim .2s ease-out both}
@keyframes menu-holo-dim{from{background:#04070d00}to{background:#04070dec}}
#site-menu[data-hologram="on"] .menu-holo-projector{position:fixed;inset:var(--shell-height,96px) 0 0;z-index:6;overflow:clip;contain:strict;pointer-events:none;opacity:0}
#site-menu[data-hologram="on"] .menu-holo-projection-travel{position:absolute;inset:0;pointer-events:none}
#site-menu[data-hologram="on"] .menu-holo-projection-beam{position:absolute;inset:0 0 auto;height:72px;transform-origin:50% 50%;background:linear-gradient(0deg,transparent,#67ddff0c 30%,#67ddff17 53%,#e3fbff08 70%,transparent),repeating-linear-gradient(0deg,transparent 0 5px,#a7eeff16 5px 6px,transparent 6px 8px);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);pointer-events:none}
#site-menu[data-hologram="on"] .menu-holo-projection-beam::after{content:'';position:absolute;inset:auto var(--shell-gutter,20px) 20px;height:1px;background:linear-gradient(90deg,transparent,#67ddff88 12%,#e3fbffb3 50%,#67ddff88 88%,transparent);box-shadow:0 0 16px #019edb66;pointer-events:none}
#site-menu[data-hologram="on"] .menu-holo-field{position:fixed;inset:var(--shell-height,96px) 0 0;z-index:-1;pointer-events:none;overflow:hidden;contain:paint;background:repeating-linear-gradient(0deg,transparent 0 5px,#80d9fc05 5px 6px,transparent 6px 8px)}
#site-menu[data-hologram="on"] .menu-holo-scan{position:absolute;inset:auto 0 100%;height:128px;pointer-events:none;opacity:.6;background:repeating-linear-gradient(0deg,transparent 0 5px,#8ee6ff18 5px 6px,transparent 6px 8px);mask-image:linear-gradient(transparent,#0005 28%,#000 55%,transparent);animation:menu-holo-scan 22s linear infinite;animation-play-state:paused}
#site-menu[data-hologram="on"][data-hologram-running] .menu-holo-scan{animation-play-state:running}
#site-menu[data-hologram="on"]:not([open]) .menu-holo-scan{animation:none}
@keyframes menu-holo-scan{from{transform:translateY(0)}to{transform:translateY(calc(100dvh + 128px))}}

/* Surface marks are decorative; the native full row remains the hit target. */
#site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link,
#site-menu.shell-dialog[data-hologram="on"] .menu-service-nav .menu-service-link{padding-inline:12px;isolation:isolate;transition:color .24s ease}
#site-menu[data-hologram="on"] .menu-nav .menu-link::before,
#site-menu[data-hologram="on"] .menu-service-nav .menu-service-link::before{content:'';position:absolute;inset:3px 0;height:auto;z-index:-1;transform:none;opacity:0;border:1px solid color-mix(in srgb,var(--holo-accent) 34%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--holo-accent) 10%,#0c1825),#0d203151 75%,transparent);transition:opacity .25s ease}
#site-menu[data-hologram="on"] .menu-nav .menu-link::after,
#site-menu[data-hologram="on"] .menu-service-nav .menu-service-link::after{content:'';position:absolute;inset:3px 0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(var(--holo-accent),var(--holo-accent)) left top/13px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) left top/1px 13px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right top/13px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right top/1px 13px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) left bottom/13px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) left bottom/1px 13px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right bottom/13px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right bottom/1px 13px no-repeat;transition:opacity .25s ease}
#site-menu[data-hologram="on"] .menu-nav .menu-link:is([data-holo-selected],:hover,:focus-visible)::before,
#site-menu[data-hologram="on"] .menu-service-nav .menu-service-link:is([data-menu-selected],:hover,:focus-visible,[aria-current="page"])::before{opacity:1;transform:none}
#site-menu[data-hologram="on"] .menu-nav .menu-link:is([data-holo-selected],:hover,:focus-visible)::after,
#site-menu[data-hologram="on"] .menu-service-nav .menu-service-link:is([data-menu-selected],:hover,:focus-visible,[aria-current="page"])::after{opacity:.9}
#site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link:is([data-holo-selected],:hover,:focus-visible){padding-inline:12px;background:none;color:var(--holo-accent)}
#site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link[data-holo-selected] .menu-link-arrow{opacity:.85;transform:none}
#site-menu[data-hologram="on"] .menu-service-link{--holo-accent:var(--service-accent)}
#site-menu.shell-dialog[data-hologram="on"] .menu-service-nav .menu-service-link:is([data-menu-selected],:hover,:focus-visible,[aria-current="page"]){background:none;color:var(--service-accent)}
#site-menu[data-hologram="on"] .menu-service-link:focus-visible{outline-offset:-2px}
#site-menu[data-hologram="on"] .menu-link:focus-visible{outline:2px solid var(--holo-accent);outline-offset:-2px}

/* Original glass geometry stays intact; the texture lives behind its artwork. */
#site-menu[data-hologram="on"] .menu-glass-front{isolation:isolate}
#site-menu[data-hologram="on"] .menu-glass-front::before{content:'';position:absolute;inset:9px;z-index:-1;pointer-events:none;opacity:.32;background:repeating-linear-gradient(0deg,transparent 0 5px,#8ee6ff19 5px 6px,transparent 6px 8px)}
#site-menu[data-hologram="on"] .menu-glass-front::after{content:'';position:absolute;inset:8px;pointer-events:none;background:linear-gradient(#b6edffb8,#b6edffb8) left top/22px 1px no-repeat,linear-gradient(#b6edffb8,#b6edffb8) left top/1px 22px no-repeat,linear-gradient(#b6edffb8,#b6edffb8) right bottom/22px 1px no-repeat,linear-gradient(#b6edffb8,#b6edffb8) right bottom/1px 22px no-repeat}
#site-menu[data-hologram="on"] .menu-client-area{position:relative;border-color:color-mix(in srgb,var(--service-accent) 30%,#243747)}
#site-menu[data-hologram="on"] .menu-client-area::after{content:'';position:absolute;inset:-1px;pointer-events:none;opacity:.65;background:linear-gradient(var(--service-accent),var(--service-accent)) left top/18px 1px no-repeat,linear-gradient(var(--service-accent),var(--service-accent)) left top/1px 18px no-repeat,linear-gradient(var(--service-accent),var(--service-accent)) right bottom/18px 1px no-repeat,linear-gradient(var(--service-accent),var(--service-accent)) right bottom/1px 18px no-repeat}
#site-menu[data-hologram="on"] .menu-preview-copy{border-top-color:color-mix(in srgb,var(--service-accent) 35%,#203746)}
#site-menu[data-hologram="on"] .menu-preview-copy::before{content:'';position:absolute;left:0;top:-1px;width:38px;height:1px;background:var(--service-accent)}

@media(max-width:800px){
 #site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link,
 #site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link:is([data-holo-selected],:hover,:focus-visible),
 #site-menu.shell-dialog[data-hologram="on"] .menu-service-nav .menu-service-link{padding-inline:10px}
 #site-menu[data-hologram="on"] .menu-holo-field{background:repeating-linear-gradient(0deg,transparent 0 7px,#80d9fc05 7px 8px,transparent 8px 10px)}
}
@media(max-width:360px){
 #site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link,
 #site-menu.shell-dialog[data-hologram="on"] .menu-nav .menu-link:is([data-holo-selected],:hover,:focus-visible),
 #site-menu.shell-dialog[data-hologram="on"] .menu-service-nav .menu-service-link{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){#site-menu[data-hologram="on"] .menu-holo-scan{animation:none;display:none}#site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::before,#site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::after{transition:none}}
html[data-motion="off"] #site-menu[data-hologram="on"] .menu-holo-scan{animation:none;display:none}
#site-menu[data-hologram="on"][data-hologram-motion="off"] .menu-holo-scan{animation:none;display:none}
html[data-motion="off"] #site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::before,html[data-motion="off"] #site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::after{transition:none}
@media(forced-colors:active){#site-menu[data-hologram="on"] .menu-holo-field{display:none}#site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::after{display:none}#site-menu[data-hologram="on"] :is(.menu-link,.menu-service-link)::before{background:none;border-color:Highlight}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){#site-menu[data-hologram="on"] .menu-holo-projector{display:none}#site-menu[data-hologram="on"][open]::backdrop{animation:none}}
html[data-motion="off"] #site-menu[data-hologram="on"] .menu-holo-projector,
#site-menu[data-hologram="on"][data-hologram-motion="off"] .menu-holo-projector{display:none}
html[data-motion="off"] #site-menu[data-hologram="on"][open]::backdrop,
#site-menu[data-hologram="on"][data-hologram-motion="off"][open]::backdrop{animation:none}

/* Shared holographic treatment. Original typography, spacing, artwork and controls remain. */
html[data-hologram-surfaces="on"] [data-holo-surface]{isolation:isolate;--holo-accent:var(--service-accent,#67ddff)}
html[data-hologram-surfaces="on"] [data-holo-position]{position:relative}
.cf-holo-surface-layer{position:absolute;inset:0;z-index:-1;display:block;overflow:clip;contain:strict;border-radius:inherit;pointer-events:none!important;user-select:none;--holo-height:600px;--holo-period:22s;background:repeating-linear-gradient(0deg,transparent 0 6px,color-mix(in srgb,var(--holo-accent,#67ddff) 5%,transparent) 6px 7px,transparent 7px 9px);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cf-holo-surface-layer *{pointer-events:none!important}
.cf-holo-surface-layer::after{content:'';position:absolute;inset:6px;opacity:.38;background:linear-gradient(var(--holo-accent),var(--holo-accent)) left top/16px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) left top/1px 16px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right bottom/16px 1px no-repeat,linear-gradient(var(--holo-accent),var(--holo-accent)) right bottom/1px 16px no-repeat}
.cf-holo-surface-scan{position:absolute;inset:0 0 auto;height:72px;display:block;opacity:0;transform:translateY(-72px);background:linear-gradient(transparent,color-mix(in srgb,var(--holo-accent) 9%,transparent) 60%,transparent),repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--holo-accent) 12%,transparent) 5px 6px,transparent 6px 9px);mask-image:linear-gradient(transparent,#000 40%,#000 70%,transparent)}
.cf-holo-surface-scan::after{content:'';position:absolute;left:8%;right:8%;bottom:22px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--holo-accent) 20%,transparent),transparent)}
.cf-holo-surface-layer[data-holo-running]>.cf-holo-surface-scan{animation:cf-holo-surface-sweep var(--holo-period) linear infinite}
@keyframes cf-holo-surface-sweep{0%{transform:translateY(-72px);opacity:0}8%{opacity:.6}88%{opacity:.6}100%{transform:translateY(calc(var(--holo-height) + 72px));opacity:0}}

/* 1. Enquiry: native question/checked states own meaning and colour. */
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-workspace[data-holo-surface]{--holo-accent:var(--service-accent,#67ddff)}
[data-holo-surface="enquiry"]>.cf-holo-surface-layer{--holo-period:24s}
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-start{position:relative}
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-start::after,
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-picks label>span::after{content:'';position:absolute;inset:3px;pointer-events:none;opacity:0;background:linear-gradient(var(--service-accent,#67ddff),var(--service-accent,#67ddff)) left top/10px 1px no-repeat,linear-gradient(var(--service-accent,#67ddff),var(--service-accent,#67ddff)) left top/1px 10px no-repeat,linear-gradient(var(--service-accent,#67ddff),var(--service-accent,#67ddff)) right bottom/10px 1px no-repeat,linear-gradient(var(--service-accent,#67ddff),var(--service-accent,#67ddff)) right bottom/1px 10px no-repeat;transition:opacity .18s ease}
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-picks label>span{position:relative}
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-start:is(:hover,:focus-visible)::after,
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-picks input:is(:checked,:focus-visible)+span::after{opacity:.9}
html[data-hologram-surfaces="on"] #contact-dialog .enquiry-picks input:checked+span{border-color:var(--service-accent,#67ddff);background:color-mix(in srgb,var(--service-accent,#67ddff) 11%,#10202d)}

/* 2. Services: the original tunnel owns foreground/transform/electricity. */
[data-holo-surface="service"]>.cf-holo-surface-layer{--holo-period:4.6s;background:repeating-linear-gradient(0deg,transparent 0 7px,color-mix(in srgb,var(--holo-accent) 4%,transparent) 7px 8px,transparent 8px 11px)}
[data-holo-surface="service"]>.cf-holo-surface-layer[data-holo-running]>.cf-holo-surface-scan{animation-iteration-count:1}
[data-holo-surface="service"]>.cf-holo-surface-layer::after{inset:10px;opacity:.3}

/* 3. Technology and software: restrained frames around real choices. */
[data-holo-surface="technology"]>.cf-holo-surface-layer{--holo-period:24s}
[data-holo-surface="software"]>.cf-holo-surface-layer{--holo-period:24s;--holo-accent:var(--service-accent,#8ab8ff)}
html[data-hologram-surfaces="on"] .technology-entry:is(:target,:focus-within)>.cf-holo-surface-layer::after,
html[data-hologram-surfaces="on"] .comparison-card:is(:hover,:focus-within)>.cf-holo-surface-layer::after,
html[data-hologram-surfaces="on"] .product-pricing:focus-within>.cf-holo-surface-layer::after{opacity:.9}
html[data-hologram-surfaces="on"] .technology-category-nav a{position:relative}
html[data-hologram-surfaces="on"] .technology-category-nav a:is(:hover,:focus-visible){background:linear-gradient(90deg,#67ddff0a,transparent);box-shadow:inset 0 -1px #67ddff88}
html[data-hologram-surfaces="on"] body[data-service="software"] :is(.compare-check,.compare-choice,.filter-chip,.filter-button,.decision-trigger,.pricing-choice):focus-within{outline-color:var(--service-accent,#8ab8ff)}
html[data-hologram-surfaces="on"] body[data-service="software"] label:has(input[type="checkbox"]:checked){border-color:var(--service-accent,#8ab8ff)}

/* 4. Invitations: a quiet field, with no frame crossing the copy or logos. */
[data-holo-surface="invitation"]>.cf-holo-surface-layer{--holo-period:26s;background:repeating-linear-gradient(0deg,transparent 0 8px,#67ddff06 8px 9px,transparent 9px 12px);mask-image:radial-gradient(ellipse at 40% 50%,#000,transparent 75%)}
[data-holo-surface="invitation"]>.cf-holo-surface-layer::after{display:none}
[data-holo-surface="invitation"]>.cf-holo-surface-layer .cf-holo-surface-scan{opacity:0}

html[data-holo-quiet] .cf-holo-surface-scan{animation:none!important;display:none}
html[data-holo-quiet] #contact-dialog :is(.enquiry-start,.enquiry-picks label>span)::after{transition:none}
@media(prefers-reduced-motion:reduce){.cf-holo-surface-scan{animation:none!important;display:none}html[data-hologram-surfaces="on"] #contact-dialog :is(.enquiry-start,.enquiry-picks label>span)::after{transition:none}}
@media(forced-colors:active){.cf-holo-surface-layer{display:none}html[data-hologram-surfaces="on"] #contact-dialog :is(.enquiry-start,.enquiry-picks label>span)::after{display:none}html[data-hologram-surfaces="on"] #contact-dialog .enquiry-picks input:checked+span{background:Canvas;border-color:Highlight;color:CanvasText}}

/* Shared holographic treatment: the same finite projection as the main menu. */
html body #contact-dialog.shell-dialog[data-hologram-reveal="on"][open]{animation:none!important;transform:none;opacity:1;border-image-source:none}
#contact-dialog[data-hologram-reveal="on"][open]::backdrop{animation:menu-holo-dim .2s ease-out both}
#contact-dialog[data-hologram-reveal="on"] .enquiry-holo-projector{position:absolute;inset:0;z-index:6;overflow:clip;contain:strict;pointer-events:none;opacity:0;border-radius:inherit}
#contact-dialog[data-hologram-reveal="on"] .enquiry-holo-travel{position:absolute;inset:0;pointer-events:none}
#contact-dialog[data-hologram-reveal="on"] .enquiry-holo-beam{position:absolute;inset:0 0 auto;height:72px;transform-origin:50% 50%;background:linear-gradient(0deg,transparent,#67ddff0c 30%,#67ddff17 53%,#e3fbff08 70%,transparent),repeating-linear-gradient(0deg,transparent 0 5px,#a7eeff16 5px 6px,transparent 6px 8px);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);pointer-events:none}
#contact-dialog[data-hologram-reveal="on"] .enquiry-holo-beam::after{content:'';position:absolute;inset:auto 20px 20px;height:1px;background:linear-gradient(90deg,transparent,#67ddff88 12%,#e3fbffb3 50%,#67ddff88 88%,transparent);box-shadow:0 0 16px #019edb66;pointer-events:none}
/* The native header and close control remain above the projection. */
#contact-dialog[data-hologram-reveal="on"] .enquiry-header{z-index:7}
#contact-dialog[data-hologram-reveal="on"][data-hologram-phase="projecting"] :is(.enquiry-step,[data-enquiry-question]){animation:none!important}
#contact-dialog[data-hologram-reveal="on"][data-hologram-motion="off"] .enquiry-holo-projector,
html[data-motion="off"] #contact-dialog[data-hologram-reveal="on"] .enquiry-holo-projector{display:none}
#contact-dialog[data-hologram-reveal="on"][data-hologram-motion="off"][open]::backdrop,
html[data-motion="off"] #contact-dialog[data-hologram-reveal="on"][open]::backdrop{animation:none}
@media(prefers-reduced-motion:reduce),(forced-colors:active){#contact-dialog[data-hologram-reveal="on"] .enquiry-holo-projector{display:none}#contact-dialog[data-hologram-reveal="on"][open]::backdrop{animation:none}}

/* Shared holographic treatment: a small static position display, using the native service hue. */
#contact-dialog .enquiry-step-squares{display:flex;align-items:center;justify-content:center;gap:9px;min-height:16px;margin:0 0 17px;padding:0;pointer-events:none;color:var(--service-accent,#67ddff)}
#contact-dialog .enquiry-step-squares[hidden]{display:none}
#contact-dialog .enquiry-step-squares>span{display:block;box-sizing:border-box;flex:0 0 10px;width:10px;height:10px;border:1px solid color-mix(in srgb,currentColor 48%,transparent);background:transparent;transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
#contact-dialog .enquiry-step-squares>span[data-state="current"]{border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 10%,transparent)}
#contact-dialog .enquiry-step-squares>span[data-state="complete"]{border-color:currentColor;background:currentColor}
#contact-dialog[data-enquiry-journey] [data-question-count].enquiry-square-count-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:600px){#contact-dialog .enquiry-step-squares{gap:8px;margin-bottom:15px}#contact-dialog .enquiry-step-squares>span{flex-basis:9px;width:9px;height:9px}}
@media(prefers-reduced-motion:reduce){#contact-dialog .enquiry-step-squares>span{transition:none}}
html[data-motion="off"] #contact-dialog .enquiry-step-squares>span,html[data-holo-quiet] #contact-dialog .enquiry-step-squares>span{transition:none}
@media(forced-colors:active){#contact-dialog .enquiry-step-squares{color:Highlight}#contact-dialog .enquiry-step-squares>span{border-color:CanvasText;forced-color-adjust:none;background:Canvas}#contact-dialog .enquiry-step-squares>span[data-state="current"]{border-color:Highlight;outline:1px solid Highlight;outline-offset:2px;box-shadow:none}#contact-dialog .enquiry-step-squares>span[data-state="complete"]{border-color:Highlight;background:Highlight}}

/* Holographic service cards keep their scan texture and electricity.
   Remove the separate full-card reflection, including its scroll/hover sheen. */
body[data-page="home"] .cf-story-card>.cf-card-light{display:none!important}

/* The menu's holographic materialisation owns the reveal.
   Remove only the older travelling reflection over its preview graphics. */
#site-menu .menu-reveal-light{display:none!important}

/* The native progress row now belongs to the direct-contact strip. */
#contact-dialog .enquiry-direct{position:relative}
#contact-dialog .enquiry-header .enquiry-direct>.micro{flex:0 1 auto;margin-right:0;font-size:14px}
#contact-dialog .enquiry-header .enquiry-direct>.email-contact{margin-right:auto}
#contact-dialog .enquiry-header .enquiry-direct>.phone-contact{margin-left:auto}
#contact-dialog .enquiry-direct>.enquiry-step-squares{order:3;flex:1 0 100%;margin:3px 0 7px;min-height:18px;align-self:center}
@media(max-width:1000px){
 #contact-dialog .enquiry-header .enquiry-direct{gap:4px 8px}
 #contact-dialog .enquiry-header .enquiry-direct>.micro{flex:0 1 auto;font-size:12px}
 #contact-dialog .enquiry-header .enquiry-direct>.email-contact{flex:0 0 auto;font-size:13px}
 #contact-dialog .enquiry-header .enquiry-direct>.phone-contact{margin-left:auto}
}
@media(min-width:1001px){
 #contact-dialog .enquiry-direct>.enquiry-step-squares{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;margin:0;flex:none;order:0}
}