/* Shared visual system for Ace Distributor service pages */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{cursor:pointer;font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}

:root{
  --background:#ffffff; --foreground:#0a0a0a;
  --brand:#2563c9; --brand-deep:#0f2f63; --brand-light:#5790e6;
  --accent-teal:#0b6e97;
  --surface:#f4f4f4; --surface-card:#ffffff;
  --ink:#0a0a0a; --ink-soft:#717784;
  --ghost:#d7dae1; --hairline:#e6e8ec;
  --on-brand:#ffffff;
  --radius-card:1.5rem; --radius-card-lg:2rem; --radius-pill:62.5rem;
}
html{font-size:16px}
@media (max-width:1920px){html{font-size:0.833333vw}}
@media (max-width:1440px){html{font-size:1.111111vw}}
@media (max-width:1024px){html{font-size:1.5625vw}}
@media (max-width:640px){html{font-size:4.444444vw}}
html.scroll-lock{position:relative;overflow:hidden;height:100%}
body{min-height:100vh;background:var(--background);color:var(--foreground);font-family:"Onest",system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}

main{width:100%;overflow-x:clip;padding:0.5rem}
@media (min-width:640px){main{padding:0.75rem}}

.font-medium{font-weight:500}

/* clip-line reveal primitive (only hidden when JS is running) */
.clip-line{display:block;overflow:hidden;padding-bottom:0.14em}
.clip-line > span{display:inline-block;will-change:transform,opacity}
html.js .clip-line > span{transform:translateY(115%);opacity:0}
html.js .clip-line.in > span{transform:translateY(0);opacity:1;transition:transform var(--cw-dur,900ms) var(--cw-ease,cubic-bezier(0.16,1,0.3,1)) var(--cw-delay,0ms),opacity var(--cw-dur,900ms) var(--cw-ease,cubic-bezier(0.16,1,0.3,1)) var(--cw-delay,0ms)}

/* inview rise (only hidden when JS is running) */
.rise{will-change:transform,opacity}
html.js .rise{opacity:0;transform:translateY(28px)}
html.js .rise.in{opacity:1;transform:translateY(0);transition:opacity 900ms cubic-bezier(0.2,0.8,0.2,1),transform 900ms cubic-bezier(0.2,0.8,0.2,1)}

/* HEADER */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;color:#fff;font-size:0.75rem;padding:1.5rem 1.5rem 0}
@media (min-width:640px){.site-header{padding:2rem 2.5rem 0}}
.site-header.dark{color:var(--ink)}
.site-header .nav-left,.site-header .nav-right,.site-header .brand-center{flex:1}
.site-header .nav-left{display:none;gap:2rem;align-items:center}
@media (min-width:1024px){.site-header .nav-left{display:flex}}
.site-header .nav-left a{opacity:0.9;transition:opacity 200ms}
.site-header .nav-left a:hover{opacity:1}
.brand-center{display:none;align-items:center;justify-content:center;gap:0.5rem;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em}
@media (min-width:1024px){.brand-center{display:flex}}
.brand-center .ball{width:1.25rem;height:1.25rem}
.brand-center a{display:flex;align-items:center;gap:0.5rem;transition:opacity 200ms}
.brand-center a:hover{opacity:0.85}

/* LOGO - image mark, native colours everywhere */
.logo{display:block;height:4rem;width:auto;object-fit:contain}
.brand-center .logo{height:4rem}
.footer-brand .mark .logo,.menu-top .mark .logo{height:4rem}

.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
@media (min-width:640px){.nav-right{gap:1.25rem}}
.book-visit-link{display:none;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:500}
@media (min-width:640px){.book-visit-link{display:inline-block}}
.book-visit-link:hover{text-decoration:underline}
.burger{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background 200ms}
.burger:hover{background:rgba(255,255,255,0.25)}
.site-header.dark .burger{background:var(--surface)}
.site-header.dark .burger:hover{background:var(--hairline)}
.burger .stack{display:flex;flex-direction:column;gap:5px}
.burger .bar{width:1rem;height:1px;background:currentColor}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.22em}
.eyebrow .dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill)}
.eyebrow.dark{color:var(--ink-soft)}
.eyebrow.dark .dot{background:var(--brand)}
.eyebrow.light{color:rgba(255,255,255,0.7)}
.eyebrow.light .dot{background:var(--brand-light)}

/* Pill button */
.pill-btn{display:inline-flex;align-items:center;gap:0.5rem;border-radius:var(--radius-pill);padding:0.875rem 1.75rem;font-size:0.875rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;transition:background 200ms,color 200ms,border-color 200ms}
.pill-btn svg{width:1rem;height:1rem;transition:transform 200ms}
@media(min-width:769px){.pill-btn:hover svg{transform:translateX(5px)}}
.pill-btn.light{background:#fff;color:var(--brand-deep)}
.pill-btn.light:hover{background:var(--brand-light);color:#fff}
.pill-btn.solid{background:var(--ink);color:#fff}
.pill-btn.solid:hover{background:var(--brand-deep)}
.pill-btn.outline{border:1px solid currentColor;color:var(--ink)}
.pill-btn.outline:hover{background:var(--ink);color:#fff}
.pill-btn.ghost-light{border:1px solid rgba(255,255,255,0.4);color:#fff}
.pill-btn.ghost-light:hover{background:#fff;color:var(--brand-deep);border-color:#fff}

/* SERVICE PAGE HERO */
.service-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);min-height:calc(100svh - 1rem);display:flex;flex-direction:column;padding-top:0}
@media (min-width:640px){.service-hero{min-height:calc(100svh - 1.5rem)}}
.service-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 0%,rgba(87,144,230,0.35),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(11,110,151,0.5),transparent 55%);pointer-events:none;z-index:0}
.service-hero-inner{position:relative;z-index:1;padding:8rem 1.5rem 3rem;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:3rem}
@media (min-width:640px){.service-hero-inner{padding:9rem 2.5rem 3rem}}
.service-hero .crumb{color:rgba(255,255,255,0.65);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.22em}
.service-hero .crumb a:hover{color:#fff}
.service-hero .crumb .sep{margin:0 0.5rem;opacity:0.5}
.service-title{font-size:clamp(2.75rem,7vw,6rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1.5rem;max-width:24ch}
.service-lede{color:rgba(255,255,255,0.8);font-size:1.125rem;line-height:1.6;max-width:34rem;margin-top:1.75rem}
.service-hero-bottom{display:flex;flex-direction:column;gap:2rem;align-items:flex-start}
@media (min-width:768px){.service-hero-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:3rem}}
.service-cta{display:flex;gap:0.75rem;flex-wrap:wrap}
.service-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:36rem;width:100%}
.service-facts .f .k{font-size:1.5rem;font-weight:500;line-height:1;letter-spacing:-0.02em}
.service-facts .f .v{font-size:0.7rem;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.18em;margin-top:0.5rem}

/* SUPPLY GRID SECTION */
.supply{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){.supply{padding:6rem 2.5rem}}
.supply-head{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:3rem}
@media (min-width:768px){.supply-head{grid-template-columns:1fr 1fr;gap:4rem;align-items:end}}
.supply-title{font-size:3rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.supply-lede{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:32rem}
.supply-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){.supply-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.supply-grid{grid-template-columns:repeat(4,1fr)}}
.supply-item{padding:1.5rem;border-radius:var(--radius-card);background:var(--surface);display:flex;flex-direction:column;gap:0.75rem;min-height:8rem;transition:background 200ms,transform 300ms cubic-bezier(0.2,0.8,0.2,1)}
@media(min-width:769px){.supply-item:hover{background:var(--background);transform:translateY(-4px);box-shadow:0 8px 24px rgba(15,47,99,0.08)}}
.supply-item .idx{font-size:0.7rem;color:var(--brand);font-weight:500;letter-spacing:0.22em;text-transform:uppercase}
.supply-item .n{font-size:1rem;font-weight:500;color:var(--ink);line-height:1.3;margin-top:auto}

/* WHY / VALUE PROP STRIP */
.value-strip{background:var(--surface);padding:5rem 1.5rem}
@media (min-width:640px){.value-strip{padding:6rem 2.5rem}}
.value-title{font-size:2.5rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem;max-width:28ch}
.value-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:3rem}
@media (min-width:768px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{padding:1.75rem;border-radius:var(--radius-card);background:var(--background);display:flex;flex-direction:column;gap:0.75rem}
.value-card .num{font-size:0.7rem;color:var(--brand);font-weight:500;letter-spacing:0.22em;text-transform:uppercase}
.value-card h3{font-size:1.375rem;font-weight:500;letter-spacing:-0.01em}
.value-card p{font-size:0.875rem;color:var(--ink-soft);line-height:1.6}

/* RELATED SERVICES */
.related{background:var(--background);padding:5rem 1.5rem}
@media (min-width:640px){.related{padding:6rem 2.5rem}}
.related-title{font-size:2.5rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.related-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:3rem}
@media (min-width:768px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-card{padding:1.75rem;border-radius:var(--radius-card);background:var(--surface);display:flex;flex-direction:column;gap:1rem;min-height:12rem;transition:background 200ms,transform 300ms cubic-bezier(0.2,0.8,0.2,1)}
@media(min-width:769px){.related-card:hover{background:var(--ink);color:#fff;transform:translateY(-4px)}
.related-card:hover .idx{color:var(--brand-light)}
.related-card:hover .arrow{background:#fff;color:var(--ink)}}
.related-card .idx{font-size:0.7rem;color:var(--brand);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;transition:color 200ms}
.related-card h3{font-size:1.375rem;font-weight:500;letter-spacing:-0.01em;line-height:1.2}
.related-card .foot{margin-top:auto;display:flex;justify-content:flex-end}
.related-card .arrow{width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);border:1px solid currentColor;display:grid;place-items:center;transition:background 200ms,color 200ms}
.related-card .arrow svg{width:1rem;height:1rem}

/* CONTACT CTA BAND */
.contact-band{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:5rem 1.5rem}
@media (min-width:640px){.contact-band{padding:5rem 2.5rem}}
.contact-band-inner{display:flex;flex-direction:column;gap:2rem;justify-content:space-between;align-items:flex-start}
@media (min-width:768px){.contact-band-inner{flex-direction:row;align-items:flex-end}}
.contact-band-title{font-size:3.5rem;font-weight:500;line-height:0.92;letter-spacing:-0.02em;margin-top:1rem;max-width:20ch}
.contact-band .cta-row{display:flex;gap:0.75rem;flex-wrap:wrap}

/* FOOTER (shared with index) */
.site-footer{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:3.5rem 1.5rem}
@media (min-width:640px){.site-footer{padding:4rem 2.5rem}}
.footer-cols{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:3.5rem}
@media (min-width:768px){.footer-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-brand{max-width:20rem}
.footer-brand .mark{display:flex;align-items:center;gap:0.5rem;font-size:1.125rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em}
.footer-brand .mark .ball{width:1.25rem;height:1.25rem}
.footer-brand p.blurb{font-size:0.875rem;color:rgba(255,255,255,0.65);margin-top:1rem;line-height:1.6}
.footer-brand address{font-style:normal;margin-top:1.5rem;color:rgba(255,255,255,0.8);font-size:0.875rem;display:flex;flex-direction:column;gap:0.35rem}
.footer-brand address a:hover{text-decoration:underline}
.footer-brand address .muted{color:rgba(255,255,255,0.55)}
.footer-col h4{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.5)}
.footer-col ul{font-size:0.875rem;color:rgba(255,255,255,0.8);margin-top:1rem;display:flex;flex-direction:column;gap:0.75rem}
.footer-col ul a:hover{color:#fff}
.footer-bar{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;font-size:0.875rem;color:rgba(255,255,255,0.6);display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start;justify-content:space-between}
@media (min-width:640px){.footer-bar{flex-direction:row;align-items:center}}
.footer-bar nav{display:flex;gap:1.25rem}
.footer-bar nav a:hover{color:#fff}

/* MENU OVERLAY */
.menu-overlay{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none}
.menu-overlay.open{pointer-events:auto}
.menu-backdrop{position:absolute;inset:0;background:var(--brand-deep);opacity:0;transition:opacity 500ms cubic-bezier(0.2,0.8,0.2,1)}
.menu-overlay.open .menu-backdrop{opacity:1}
.menu-panel{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;color:#fff;padding:2rem 1.5rem;opacity:0;transform:translateY(-24px);transition:opacity 500ms cubic-bezier(0.2,0.8,0.2,1),transform 500ms cubic-bezier(0.2,0.8,0.2,1)}
@media (min-width:640px){.menu-panel{padding:2.75rem 2.5rem}}
.menu-overlay.open .menu-panel{opacity:1;transform:translateY(0)}
.menu-top{display:flex;align-items:center;justify-content:space-between}
.menu-top .mark{display:flex;align-items:center;gap:0.5rem;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em}
.menu-top .mark .ball{width:1.25rem;height:1.25rem}
.menu-close{width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);display:grid;place-items:center;background:rgba(255,255,255,0.15);transition:background 200ms}
.menu-close:hover{background:rgba(255,255,255,0.25)}
.menu-close svg,.modal-close svg{width:1rem;height:1rem;transition:transform 250ms cubic-bezier(0.2,0.8,0.2,1)}
@media(min-width:769px){.menu-close:hover svg,.modal-close:hover svg{transform:rotate(90deg)}}
.menu-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.5rem;padding:2rem 0}
.menu-link{opacity:0;transform:translateY(28px);font-size:3rem;font-weight:500;letter-spacing:-0.02em;line-height:1;transition:opacity 500ms cubic-bezier(0.2,0.8,0.2,1),transform 500ms cubic-bezier(0.2,0.8,0.2,1),color 200ms}
@media (min-width:640px){.menu-link{font-size:4.5rem}}
.menu-overlay.open .menu-link{opacity:1;transform:translateY(0)}
.menu-link:hover{color:var(--brand-light)}
.menu-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;display:flex;flex-direction:column;gap:1.5rem;justify-content:space-between;align-items:flex-start}
@media (min-width:640px){.menu-bottom{flex-direction:row;align-items:center}}
.menu-social{display:flex;gap:1.25rem;color:rgba(255,255,255,0.7);font-size:0.875rem}
.menu-social a:hover{color:#fff}

/* MODAL */
.modal{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-end;padding:0.75rem;pointer-events:none}
@media (min-width:640px){.modal{align-items:center;padding:1.5rem}}
.modal.open{pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,47,99,0.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 500ms cubic-bezier(0.2,0.8,0.2,1)}
.modal.open .modal-backdrop{opacity:1}
.modal-panel{position:relative;width:100%;max-height:92svh;overflow-y:auto;border-radius:var(--radius-card-lg);background:var(--surface-card);padding:1.5rem;color:var(--ink);box-shadow:0 30px 80px rgba(15,47,99,0.35);opacity:0;transform:translateY(28px) scale(0.96);transition:opacity 500ms cubic-bezier(0.2,0.8,0.2,1),transform 500ms cubic-bezier(0.2,0.8,0.2,1)}
@media (min-width:640px){.modal-panel{padding:2rem;max-width:32rem}}
.modal.open .modal-panel{opacity:1;transform:translateY(0) scale(1)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.modal-head .title{font-size:2.25rem;font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:0.75rem}
@media (min-width:640px){.modal-head .title{font-size:3rem}}
.modal-close{width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);background:var(--surface);display:grid;place-items:center;flex-shrink:0;transition:background 200ms}
.modal-close:hover{background:var(--hairline)}
.modal-form{margin-top:1.75rem;display:flex;flex-direction:column;gap:1rem}
.field label{display:block;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft);margin-bottom:0.5rem}
.field input,.field textarea{width:100%;border-radius:0.75rem;border:1px solid var(--hairline);background:var(--background);padding:0.75rem 1rem;font-size:0.875rem;font-family:inherit;color:var(--ink);resize:vertical;transition:border 200ms,box-shadow 200ms}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px rgba(87,144,230,0.2)}
.modal-submit{border-radius:var(--radius-pill);background:var(--ink);color:#fff;padding:0.875rem 1.75rem;font-size:0.875rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;transition:background 200ms;align-self:flex-start}
.modal-submit:hover{background:var(--brand-deep)}
.modal-submit[disabled]{opacity:0.6;cursor:not-allowed}
.success{margin-top:2rem;border-radius:var(--radius-card);background:var(--surface);padding:1.5rem;text-align:center;display:none;flex-direction:column;align-items:center;gap:0.75rem}
.success.show{display:flex}
.success .check{width:3rem;height:3rem;border-radius:var(--radius-pill);background:var(--brand);display:grid;place-items:center;color:#fff}
.success .t{font-size:1.125rem;font-weight:500}
.success .s{font-size:0.875rem;color:var(--ink-soft)}
.success .done{margin-top:0.5rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}