/* v28.4 — section colors are saved with the editable content, never inferred from its type. */
.ap-surface{
 --ap-surface-bg:transparent;--ap-surface-fg:#101515;--ap-surface-muted:#4f625b;
 --ap-surface-line:#a8bdbb;--ap-surface-link:#a72f0a;--ap-surface-icon:#bd370c;--ap-surface-decoration:#d8e3df;--ap-surface-focus:#a72f0a;
 --ap-panel-bg:#f8faf9;--ap-panel-fg:#101515;--ap-panel-muted:#4f625b;--ap-panel-line:#9eb4b1;--ap-panel-strong-line:#627f79;
 --ap-panel-link:#a72f0a;--ap-panel-icon:#bd370c;--ap-panel-hover:#101515;--ap-panel-hover-fg:#fff;--ap-panel-hover-icon:#ff4b12;--ap-panel-focus:#a72f0a;
 --ap-action-bg:#101515;--ap-action-fg:#fff;--ap-action-icon:#ff4b12;--ap-action-hover:#ff4b12;--ap-action-hover-fg:#101515;--ap-action-hover-icon:#101515;
 --ap-quiet-bg:#f7faf9;--ap-quiet-fg:#101515;--ap-quiet-line:#7a9290;--ap-quiet-hover:#101515;--ap-quiet-hover-fg:#fff;
 background:var(--ap-surface-bg);color:var(--ap-surface-fg)
}
.ap-surface--black{
 --ap-surface-grid:rgba(255,255,255,.055);--ap-surface-shade:linear-gradient(135deg,#202827 0%,#151d1b 52%,#101515 100%);
 --ap-surface-bg:#101515;--ap-surface-fg:#fff;--ap-surface-muted:#c6d3ce;
 --ap-surface-line:#60796f;--ap-surface-link:#ffb397;--ap-surface-icon:#ff8a5c;--ap-surface-decoration:#293e35;--ap-surface-focus:#ffb397;
 --ap-panel-bg:#1c2823;--ap-panel-fg:#fff;--ap-panel-muted:#c6d3ce;--ap-panel-line:#60796f;--ap-panel-strong-line:#9bb6aa;
 --ap-panel-link:#ffb397;--ap-panel-icon:#ff8a5c;--ap-panel-hover:#fff;--ap-panel-hover-fg:#101515;--ap-panel-hover-icon:#a72f0a;--ap-panel-focus:#ffb397;
 --ap-action-bg:#ff4b12;--ap-action-fg:#101515;--ap-action-icon:#101515;--ap-action-hover:#fff;--ap-action-hover-fg:#101515;--ap-action-hover-icon:#a72f0a;
 --ap-quiet-bg:transparent;--ap-quiet-fg:#fff;--ap-quiet-line:#9bb6aa;--ap-quiet-hover:#fff;--ap-quiet-hover-fg:#101515
}
.ap-surface--orange{
 --ap-surface-grid:rgba(109,34,9,.045);--ap-surface-shade:linear-gradient(135deg,#ff6029 0%,#ff4b12 58%,#f94913 100%);
 --ap-surface-bg:#ff4b12;--ap-surface-fg:#101515;--ap-surface-muted:#101515;
 --ap-surface-line:#923414;--ap-surface-link:#101515;--ap-surface-icon:#101515;--ap-surface-decoration:#ad300c;--ap-surface-focus:#101515;
 --ap-panel-bg:#fff3ed;--ap-panel-line:#b56c4b;--ap-panel-strong-line:#803b1e;
 --ap-action-hover:#fff;--ap-action-hover-fg:#101515;--ap-action-hover-icon:#a72f0a;
 --ap-quiet-bg:transparent;--ap-quiet-fg:#101515;--ap-quiet-line:#101515;--ap-quiet-hover:#101515;--ap-quiet-hover-fg:#fff
}
/* v28.4.1 — the reel's 42 px drawing grid over a quiet, static tonal gradient. */
.ap-surface--black,.ap-surface--orange{
 background-image:linear-gradient(var(--ap-surface-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ap-surface-grid) 1px,transparent 1px),var(--ap-surface-shade);
 background-size:42px 42px,42px 42px,100% 100%;
 background-repeat:repeat,repeat,no-repeat
}
/* The wrapper fills the viewport; the existing inner content width stays readable. */
.ap-surface>section{background:transparent;color:var(--ap-surface-fg)}
.ap-surface :is(h1,h2){color:var(--ap-surface-fg)}
.ap-surface :is(.ap-eyebrow,.ap-lead,.ap-intro,.ap-richtext,.ap-breadcrumb,.ap-step-number,.ap-steps p,.ap-work-card p,.ap-reel-caption){color:var(--ap-surface-muted)}
.ap-surface :is(.ap-breadcrumb li:not(:last-child):after,.ap-breadcrumb a){color:var(--ap-surface-muted)}
.ap-surface :is(.ap-richtext a,.ap-contact-details a){color:var(--ap-surface-fg);text-underline-offset:4px}
.ap-surface :is(.ap-richtext a,.ap-contact-details a,.ap-breadcrumb a):is(:hover,:focus-visible){color:var(--ap-surface-link)}
.ap-surface :is(.ap-text,.ap-steps li,.ap-cards){border-color:var(--ap-surface-line)}


.ap-surface .ap-manifesto .ap-eyebrow{color:var(--ap-surface-muted)}
.ap-surface .ap-manifesto p>span{color:var(--ap-surface-icon)}
.ap-surface .ap-cta-sketch{color:var(--ap-surface-muted)}
.ap-surface :focus-visible{outline-color:var(--ap-surface-focus)}

.ap-surface .ap-button{background:var(--ap-action-bg);border-color:var(--ap-action-bg);color:var(--ap-action-fg)}
.ap-surface .ap-button>span{color:var(--ap-action-icon)}
.ap-surface .ap-button:is(:hover,:focus-visible){background:var(--ap-action-hover);border-color:var(--ap-action-hover);color:var(--ap-action-hover-fg);outline-color:var(--ap-surface-focus)}
.ap-surface .ap-button:is(:hover,:focus-visible)>span{color:var(--ap-action-hover-icon)}
.ap-surface .ap-button--quiet{background:var(--ap-quiet-bg);color:var(--ap-quiet-fg);border-color:var(--ap-quiet-line)}
.ap-surface .ap-button--quiet>span{color:var(--ap-quiet-fg)}
.ap-surface .ap-button--quiet:is(:hover,:focus-visible){background:var(--ap-quiet-hover);border-color:var(--ap-quiet-hover);color:var(--ap-quiet-hover-fg)}
.ap-surface .ap-button--quiet:is(:hover,:focus-visible)>span{color:var(--ap-quiet-hover-fg)}
.ap-surface .ap-text-link{color:var(--ap-surface-fg);border-color:var(--ap-surface-line)}
.ap-surface .ap-text-link>span{color:var(--ap-surface-icon)}
.ap-surface .ap-text-link:is(:hover,:focus-visible){background:var(--ap-quiet-hover);border-color:var(--ap-quiet-hover);color:var(--ap-quiet-hover-fg)}
.ap-surface .ap-text-link:is(:hover,:focus-visible)>span{color:var(--ap-quiet-hover-fg)}

/* Cards have their own readable surface within each palette. */
.ap-surface .ap-cards .ap-card{background:var(--ap-panel-bg);color:var(--ap-panel-fg);border-color:var(--ap-panel-line)}
.ap-surface .ap-cards .ap-card:is(:hover,:focus-within){background:var(--ap-panel-bg);border-color:var(--ap-panel-strong-line)}
.ap-surface .ap-cards .ap-card h3,.ap-surface .ap-cards .ap-card h3 a{color:var(--ap-panel-fg)}
.ap-surface .ap-cards .ap-card h3 a:is(:hover,:focus-visible){color:var(--ap-panel-link);outline-color:var(--ap-panel-focus)}
.ap-surface .ap-cards .ap-card>p,.ap-surface .ap-cards .ap-card-number{color:var(--ap-panel-muted)}
.ap-surface .ap-cards .ap-card-number b,.ap-surface .ap-cards .ap-card-end{color:var(--ap-panel-icon)}
.ap-surface .ap-cards:has(.ap-card-subitems) .ap-card-number b{background:var(--ap-panel-icon)}
.ap-surface .ap-cards .ap-card-subitems li{border-color:var(--ap-panel-line)}
.ap-surface .ap-cards .ap-card-subitems a{background:transparent;color:var(--ap-panel-fg);border-color:var(--ap-panel-line)}
.ap-surface .ap-cards .ap-card-subitems a:after{background:var(--ap-panel-icon)}
.ap-surface .ap-cards .ap-card-subitems a:is(:hover,:focus-visible){background:var(--ap-panel-hover);color:var(--ap-panel-hover-fg);border-color:var(--ap-panel-hover);outline-color:var(--ap-panel-focus)}
.ap-surface .ap-cards .ap-card-subitems a:is(:hover,:focus-visible):after{background:var(--ap-panel-hover-icon)}

/* Inputs and pop-up options retain their own white surface in every palette. */
.ap-surface .ap-form-wrap{background:var(--ap-panel-bg);color:var(--ap-panel-fg);border-color:var(--ap-panel-line)}
.ap-surface .ap-form :is(.ap-consent,.ap-form-note){color:var(--ap-panel-muted)}
.ap-surface .ap-form input[type=checkbox]{accent-color:#bd370c}
.ap-surface .ap-form :is(input,textarea,select):focus-visible,.ap-surface .ap-select-trigger:focus-visible{outline-color:var(--ap-panel-focus)}
.ap-surface .ap-form-status{background:#e8efdf;color:#101515;border-color:#58785d}
.ap-surface .ap-form-status p{color:#101515}
.ap-surface .ap-select-options{color:#101515}
/* Preview artwork, photos, video and the dark demoreel holder keep their own colors. */
.ap-surface .ap-reel-caption>strong{color:var(--ap-surface-muted)}

/* A drawn gesture sits above the call to action, with clear space around it. */
.ap-cta .ap-container>.ap-cta-action{display:grid;justify-items:center;gap:8px;flex:none;min-width:210px;max-width:280px}
.ap-cta-sketch{display:block;width:156px;height:100px;overflow:visible;opacity:.65;pointer-events:none}
.ap-cta-sketch path{stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.ap-cta-action .ap-button{margin:0;max-width:100%;white-space:normal}
@media(max-width:760px){.ap-cta .ap-container>.ap-cta-action{width:fit-content;min-width:0;max-width:100%;margin-top:20px}.ap-cta-sketch{width:125px;height:80px}}

/* v28.5 — one viewport per section, with room to grow for longer content. */
html:has(body.ap-studio){--ap-header-height:79px;--ap-header-top:0px;--ap-section-top:calc(var(--ap-header-height) + var(--ap-header-top));--ap-section-bottom-clearance:0px;scroll-padding-top:var(--ap-section-top)}
html:has(body.ap-studio.admin-bar){--ap-header-top:32px}
.ap-surface{min-height:calc(100vh - var(--ap-section-top,79px));display:grid;grid-template-rows:minmax(min-content,1fr) auto}
@supports(height:100dvh){.ap-surface{min-height:calc(100dvh - var(--ap-section-top,79px))}}
.ap-surface>section{align-self:center;min-height:0;margin-block:0;padding-block:clamp(32px,5vh,64px) clamp(24px,3vh,40px)}
.ap-surface:focus,.ap-footer:focus{outline:none}
.ap-section-nav{display:flex;align-items:center;justify-content:center;padding:8px 20px calc(16px + var(--ap-section-bottom-clearance,0px))}
.ap-section-next{display:grid;place-items:center;width:60px;min-height:48px;flex:none;padding:12px;border:1px solid transparent;border-radius:12px;color:var(--ap-surface-icon);text-decoration:none;background:transparent;transition:background-color .18s,color .18s,border-color .18s}
.ap-section-next>span{display:block;width:26px;height:20px;background:currentColor;mask:url('../Icons/arrow-down.svg') center/contain no-repeat;-webkit-mask:url('../Icons/arrow-down.svg') center/contain no-repeat;transition:transform .18s}
.ap-section-next:is(:hover,:focus-visible){background:var(--ap-quiet-hover);border-color:var(--ap-quiet-hover);color:var(--ap-quiet-hover-fg)}
.ap-section-next:is(:hover,:focus-visible)>span{transform:translateY(3px)}
.ap-section-next:focus-visible{outline:2px solid var(--ap-surface-focus);outline-offset:4px}
@media(max-width:1200px){html:has(body.ap-studio){--ap-header-height:75px}}
@media(max-width:782px){html:has(body.ap-studio.admin-bar){--ap-header-top:46px}}
@media(max-width:760px){html:has(body.ap-studio .ap-mobile-contact){--ap-section-bottom-clearance:76px}}
/* An expanded no-script menu scrolls away so native section links remain usable. */
@media(max-width:1200px){
 html:has(body.ap-studio .ap-nav:not(.js-ready):not(.ap-header-measure)){--ap-header-height:0px;--ap-header-top:0px}
 body.ap-studio:has(.ap-nav:not(.js-ready):not(.ap-header-measure)) .ap-header{position:relative;top:auto}
}
@media(prefers-reduced-motion:reduce){.ap-section-next,.ap-section-next>span{transition:none}.ap-section-next:is(:hover,:focus-visible)>span{transform:none}}
@media print{.ap-surface{display:block;min-height:0}.ap-surface>section{padding-block:25px}.ap-section-nav{display:none}}

/* v28.6 — decoration has its own clipped layer; content and form popovers stay free. */
body.ap-studio:has(.ap-surface){background-image:none}
main:has(.ap-surface){isolation:isolate}
.ap-surface{position:relative;background:none;--ap-grid-size:45px;--ap-grid-color:#edf2f1;--ap-image-tint:#fff}
.ap-surface--black{--ap-grid-size:42px;--ap-grid-color:rgba(255,255,255,.055);--ap-image-tint:#101515}
.ap-surface--orange{--ap-grid-size:42px;--ap-grid-color:rgba(109,34,9,.045);--ap-image-tint:#ff4b12}
.ap-surface-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background-color:var(--ap-surface-bg);background-image:var(--ap-surface-shade,none)}
.ap-surface-grid{position:absolute;inset:-45px 0;background-image:linear-gradient(var(--ap-grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--ap-grid-color) 1px,transparent 1px);background-size:var(--ap-grid-size) var(--ap-grid-size);transform:translate3d(0,var(--ap-grid-shift,0px),0)}
.ap-surface-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--ap-focal-x,50%) var(--ap-focal-y,50%)}
.ap-surface-tint{position:absolute;inset:0;background:var(--ap-image-tint);opacity:var(--ap-image-overlay,.88)}
.ap-surface--image .ap-surface-grid{display:none}
.ap-surface:not(.ap-surface--image) .ap-surface-tint{display:none}
@media(prefers-reduced-motion:reduce){.ap-surface-grid{transform:none!important}}
@media print{.ap-surface-backdrop{print-color-adjust:exact}.ap-surface-grid{transform:none!important}}

/* v28.7 — each service card can supply its own monochrome SVG silhouette. */
.ap-surface .ap-cards .ap-card-number .ap-card-icon{display:block;flex:none;width:16px;height:16px;font-size:0;background:var(--ap-panel-icon);mask:var(--ap-card-icon,url('../Icons/plus_icon.svg')) center/contain no-repeat;-webkit-mask:var(--ap-card-icon,url('../Icons/plus_icon.svg')) center/contain no-repeat;mask-mode:alpha}
.ap-surface .ap-cards .ap-card-number .ap-card-icon--custom{width:32px;height:32px}