/* PointTech Pros — shared base styles (fall 2026 redesign).
   Generated from the PointTech Pros V3 canvas: the opening rules every page's
   stylesheet shares. Each page's stylesheet (assets/pages/<page>.css) carries
   on from here in the canvas's order. */
:root{ color-scheme:dark; --bg:#1F1F1F; --bg-2:#242424; --bg-3:#2A2A2A; --line:#333333; --line-2:#4D4D4D; --ink:#FFFFFF; --ink-2:#C9C9C9; --ink-3:#B5B5B5; --ink-4:#8A8A8A; --or:#F95C1E; --or-d:#ED5013; --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono:var(--sans); --pad:40px; --max:1240px; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;padding:10px 16px;border-radius:6px;background:var(--or);color:var(--bg);font-weight:600;font-size:14px;text-decoration:none}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
main{display:block}
img{display:block}
.gutters{position:fixed;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(circle,#2E2E2E 1px,transparent 1.2px);background-size:16px 16px}
.page{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
.band{position:relative;background:var(--bg)}
.band>.wrap{border-left:1px solid var(--line);border-right:1px solid var(--line)}
.band+.band{border-top:1px solid var(--line)}
.tick{position:absolute;top:-5px;width:9px;height:9px;z-index:2}
.tick::before,.tick::after{content:"";position:absolute;background:var(--ink-4)}
.tick::before{left:4px;top:0;width:1px;height:9px}
.tick::after{top:4px;left:0;width:9px;height:1px}
.tick.l{left:-5px}
.tick.r{right:-5px}
.grid-bg{background-image:linear-gradient(var(--bg-3) 1px,transparent 1px),linear-gradient(90deg,var(--bg-3) 1px,transparent 1px);background-size:80px 80px;background-position:-1px -1px}
.label{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--or);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.label .n{color:var(--ink-4)}
.label.muted{color:var(--ink-4)}
.k{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.k-xl{font-size:clamp(40px,5.8vw,63px)}
.k-l{font-size:clamp(32px,4vw,56px)}
.k-m{font-size:clamp(28px,3.4vw,48px)}
.k-s{font-size:28px;line-height:1.15;letter-spacing:-.02em}
.or{color:var(--or)}
.lead{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:640px;text-wrap:pretty}
.body{margin:0;font-size:16px;line-height:1.6;color:var(--ink-3);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
/* Current section in the nav (aria-current set by site.js): white label with a
   2px orange line under it, as on shippointcenter.com. Drawer heading goes orange. */
.links .ni-a[aria-current]{position:relative;color:#fff}
.links .ni-a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:-8px;height:2px;border-radius:1px;background:var(--or)}
.dg summary.cur{color:var(--or)}
/* Services dropdown: one column (services in two columns), "All services" below.
   Two-class selectors so they win over the per-page .dd-mega rule. */
.dd-in.dd-mega{grid-template-columns:minmax(0,1fr)}
.dd-mega .dd-all{align-self:flex-start}
/* Services panel sized to its two columns (the width they had beside the old
   side column), left-aligned with the nav instead of spanning it. */
.dd.dd-svc{right:auto;width:min(851px,calc(100% + 2px))}
.btn-p{background:var(--or);color:var(--bg)}
.btn-p:hover{background:var(--or-d)}
.btn-g{color:#fff;border-color:var(--line-2)}
.btn-g:hover{border-color:#fff}
.btn-d{background:#1F1F1F;color:#fff}
.btn-d:hover{background:#000}
.btn-dg{color:#1F1F1F;border-color:rgba(31,31,31,.45)}
.btn-dg:hover{border-color:#1F1F1F}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(31,31,31,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:#fff}
.brand img{height:30px;width:auto}
.links{display:flex;align-items:center;gap:26px}
.nav-r{display:flex;align-items:center;gap:16px}
.nav-r .tel{font-size:14px;font-weight:500;color:#D4D4D4;text-decoration:none}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;background:none;color:#fff;cursor:pointer;place-items:center}
.menu-btn span{display:block;width:16px;height:1.5px;background:#fff;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:#fff;transition:transform .25s}
.menu-btn span::before{top:-5px}
.menu-btn span::after{top:5px}
.nav.open .menu-btn span{background:transparent}
.nav.open .menu-btn span::before{transform:translateY(5px) rotate(45deg)}
.nav.open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg)}
.drawer{display:none}
.hero{padding:120px 0 96px;display:flex;flex-direction:column;gap:36px;overflow:hidden}
.hero .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero .line>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.hero.in .line>span{transform:none}

/* ---- Fixes on top of the canvas CSS ---- */
/* `.nav .wrap` (the 60/68px nav row: fixed height, centered, 12-24px gap)
   also matches the mobile drawer's .wrap. That clipped the open menu to one
   row and shrank each row to its text, centered. Reset it for the drawer. */
.nav .drawer .wrap{height:auto;align-items:stretch;justify-content:flex-start;gap:0}