/* Only Deliveries Web v2.1.1 — original-first presentation repair
   Narrow scope: compact desktop header, larger readable brand lockup,
   controlled motion rails for the user-highlighted Services + Sectors cards.
   Original v1.1.4 styles.css remains untouched. */

/* Header: make the new account/AI actions feel like additions to the original header,
   not oversized feature tiles. */
.site-header .wrap{width:min(calc(100% - 28px),1460px)}
.header-inner{height:92px;gap:16px}
.brand{width:300px;flex:0 0 300px;margin-right:18px}
.desktop-nav{gap:16px;font-size:13px;line-height:1.15;white-space:nowrap;flex:1 1 auto}
.desktop-nav a{white-space:nowrap}
.header-actions{gap:6px;align-items:center;flex:0 0 auto}
.header-actions .btn,
.header-actions a.btn{min-height:39px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.header-actions .btn[data-open-quote],
.header-actions a.btn[href*="enquiry=quote"]{padding-inline:14px}
[data-account-link][hidden]{display:none!important}
.footer-logo{width:270px}

/* The two highlighted card collections become gently moving, controllable rails.
   Cards retain their original visual language and actions. */
#services .service-grid,
#sectors .sector-grid{
  display:flex!important;
  grid-template-columns:none!important;
  gap:15px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:5px 3px 18px;
  margin-inline:-3px;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
}
#services .service-grid::-webkit-scrollbar,
#sectors .sector-grid::-webkit-scrollbar{display:none}
#services .service-card{flex:0 0 clamp(300px,27vw,356px);min-height:318px;display:flex;flex-direction:column}
#services .service-card .btn{margin-top:auto;align-self:flex-start}
#sectors .sector-card{flex:0 0 clamp(318px,28vw,372px);min-height:438px;display:flex;flex-direction:column}
#sectors .sector-card .sector-actions{margin-top:auto}
.motion-clone{pointer-events:none!important;user-select:none!important}
.motion-clone a,.motion-clone button,.motion-clone input{pointer-events:none!important}
.motion-control-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-20px 0 12px}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 10px;border:1px solid rgba(19,214,200,.2);border-radius:999px;background:rgba(8,24,39,.88);color:#bcd0dc;font-size:11.5px;font-weight:800;cursor:pointer}
.motion-toggle:before{content:"";width:22px;height:9px;background:url('/assets/brand/od-arrow-tail.png') right center/44px auto no-repeat;opacity:.78}
.motion-toggle[aria-pressed="true"]{border-color:rgba(19,214,200,.42);color:var(--teal2);background:rgba(19,214,200,.07)}
.motion-toggle:focus-visible{outline:3px solid rgba(111,248,237,.78);outline-offset:3px}
.motion-rail-paused{scroll-behavior:smooth}

/* Give the moving rails a little of the original route/arrow rhythm without adding
   a new visual language. */
#services .wrap,#sectors .wrap{position:relative}
#services .wrap:after,#sectors .wrap:after{content:"";display:block;width:118px;height:17px;margin:2px 0 0 auto;background:url('/assets/brand/od-arrow-tail.png') right center/contain no-repeat;opacity:.28;pointer-events:none}

@media(max-width:1220px){
  .desktop-nav,.header-actions{display:none}
  .menu-btn{display:block;margin-left:auto}
  .brand{width:270px;flex-basis:270px}
}
@media(max-width:760px){
  .site-header .wrap{width:min(calc(100% - 28px),var(--max))}
  .brand{width:205px;flex-basis:205px;margin-left:auto;margin-right:auto}
  #services .service-grid,#sectors .sector-grid{mask-image:none;-webkit-mask-image:none;padding-right:18px;scroll-snap-type:x proximity}
  #services .service-card,#sectors .sector-card{flex-basis:min(84vw,350px);scroll-snap-align:start}
  .motion-control-row{display:none}
  .footer-logo{width:225px}
}
@media(prefers-reduced-motion:reduce){
  #services .service-grid,#sectors .sector-grid{scroll-behavior:auto!important}
  .motion-toggle{display:none!important}
}