/* Daellon 1.5 — progressive enhancements: resilient drawer, view transitions,
   scroll timelines, container queries, anchor positioning, and consistent glyphs. */

/* Vector arrows render identically on iOS, Android, and desktop. */
.arrow-icon{display:inline-block;vertical-align:-.22em;width:1.2em;height:1.2em;flex:none;stroke:currentColor;transition:transform .25s cubic-bezier(.2,.75,.2,1)}
.button,.text-link,.header-cta,.pricing-quote,.service-back,.service-related a,.sales-actions a{align-items:center}
.button,.text-link,.pricing-quote,.service-back,.sales-actions a{display:inline-flex;gap:12px}
.header-cta{gap:22px}
.button>.arrow-icon,.header-cta>.arrow-icon{width:19px;height:19px}
.service-related a>.arrow-icon,.pricing-quote>.arrow-icon{width:20px;height:20px}
.service-back>.arrow-icon{width:19px;height:19px}
.hero-bottom a>.arrow-icon{width:19px;height:19px}
a:hover>.arrow-icon--up-right,a:focus-visible>.arrow-icon--up-right{transform:translate(3px,-3px)}
a:hover>.arrow-icon--right,a:focus-visible>.arrow-icon--right{transform:translateX(4px)}
a:hover>.arrow-icon--down,a:focus-visible>.arrow-icon--down{transform:translateY(4px)}
a:hover>.arrow-icon--up,a:focus-visible>.arrow-icon--up{transform:translateY(-4px)}
.service-glyph .arrow-icon{width:44px;height:44px;vertical-align:middle}
.step-symbol .arrow-icon{width:39px;height:39px}
.benefit-flow span:before{content:'';display:inline-block;width:15px;height:15px;background:#b46d49;vertical-align:-2px;margin-right:15px;clip-path:polygon(60% 0,100% 0,100% 42%,85% 42%,85% 24%,25% 84%,16% 75%,76% 15%,60% 15%)}

/* The drawer is a modal dialog promoted to the browser's top layer.
   This avoids z-index battles, overflow clipping, and hidden-behind-hero bugs. */
body.drawer-open{overflow:hidden;overscroll-behavior:contain}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(420px,90vw);max-width:100%;height:100dvh;max-height:100dvh;
  margin:0;border:0;padding:0;
  background:#151515;color:#fff;
  box-shadow:-24px 0 70px rgba(0,0,0,.42);
  opacity:0;transform:translate3d(105%,0,0);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#777 #151515;
  transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .3s ease,
     display .42s allow-discrete,overlay .42s allow-discrete;
}
.mobile-drawer[open]{opacity:1;transform:translate3d(0,0,0)}
@starting-style{.mobile-drawer[open]{opacity:0;transform:translate3d(105%,0,0)}}
.mobile-drawer::backdrop{background:transparent;backdrop-filter:blur(0);
  transition:background .4s,backdrop-filter .4s,display .42s allow-discrete,overlay .42s allow-discrete}
.mobile-drawer[open]::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
@starting-style{.mobile-drawer[open]::backdrop{background:transparent;backdrop-filter:blur(0)}}
.drawer-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:16px 30px;border-bottom:1px solid #343434;gap:20px}
.drawer-brand{font-size:26px;font-weight:800;letter-spacing:-.09em;line-height:1}
.drawer-close{width:44px;height:44px;display:grid;place-items:center;background:#292929;border:1px solid #666;color:#fff;border-radius:50%;cursor:pointer}
.drawer-close:hover{background:#3b3b3b}
.drawer-close:focus-visible,.menu-toggle:focus-visible,.drawer-nav a:focus-visible,.drawer-lang a:focus-visible{outline:2px solid #d8a58a;outline-offset:4px}
.drawer-nav{display:flex;flex-direction:column;padding:22px 30px 10px;gap:0}
.drawer-nav>a{display:flex;align-items:center;justify-content:space-between;padding:19px 0;border-bottom:1px solid #363636;color:#f6f6f6;font-size:clamp(20px,5.2vw,25px);line-height:1.22;letter-spacing:-.045em;font-weight:650}
.drawer-nav>a:hover{color:#e7b79d}
.drawer-nav>a .arrow-icon{width:23px;height:23px}
.drawer-nav .portal-links--mobile{display:flex;flex-direction:column;gap:9px;border:0;margin:27px 0 0;padding:0;align-items:stretch}
.drawer-nav .portal-links--mobile .portal-link{display:flex;align-items:center;justify-content:center;padding:15px 20px;min-height:52px;border:1px solid #525252;border-radius:12px;font-size:13px;font-weight:700;line-height:1.3;text-align:center}
.drawer-nav .portal-links--mobile .portal-link--signup{color:#111;border-color:#fff;background:#fff}
.drawer-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:25px 30px 36px;padding-top:25px;border-top:1px solid #363636;color:#a8a8a8;font:11px 'DM Mono',monospace;letter-spacing:.06em}
.drawer-lang{display:flex;gap:11px;font-size:13px;font-weight:700}
.drawer-lang a[aria-current]{color:white}
@media(min-width:1201px){.menu-toggle{display:none}}
@media(max-width:1200px){
  .desktop-nav,.portal-links--header,.header-cta{display:none}
  .header-actions{gap:18px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:44px;height:44px;border-radius:10px;border:1px solid #646464;background:transparent;color:#fff;flex:none}
  .menu-toggle span:not(.sr-only){display:block;width:19px;height:1.5px;background:currentColor;transition:transform .2s}
  .menu-toggle[aria-expanded='true'] span:not(.sr-only):nth-last-child(2){transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded='true'] span:not(.sr-only):last-child{transform:translateY(-3.75px) rotate(-45deg)}
}
@media(max-width:480px){.drawer-header{padding:16px 22px;height:72px}.drawer-nav{padding-inline:22px}.drawer-bottom{margin-inline:22px}.site-header .header-inner{gap:12px}.site-header .header-actions{gap:14px}.site-header .brand{font-size:24px}.site-header .brand-mark{width:21px;transform:scale(.9) rotate(-12deg)}}

/* Shared-element page navigation in engines that support cross-document transitions. */
@view-transition{navigation:auto}
.site-header .brand{view-transition-name:daellon-brand}
::view-transition-old(root){animation:.2s ease-in both daellon-page-out}
::view-transition-new(root){animation:.34s ease-out both daellon-page-in}
@keyframes daellon-page-out{to{opacity:0}}
@keyframes daellon-page-in{from{opacity:0}}
::view-transition-old(daellon-brand),::view-transition-new(daellon-brand){animation-duration:.35s}
/* Unique service-heading-[slug] is emitted by PHP on both pages. */
@media(prefers-reduced-motion:reduce){::view-transition-old(*),::view-transition-new(*){animation-duration:0.01ms!important}}

/* Responsive cards react to the space their parent allocates, not only viewport. */
.service-card,.pricing-card{container-type:inline-size}
@container (max-width:315px){
  .service-card h3{font-size:19px;letter-spacing:-.045em}
  .service-card p{font-size:12px;line-height:1.55}
  .service-card .service-glyph{font-size:34px}
  .pricing-card h3{font-size:23px;line-height:1.1}
}
@container (min-width:440px){
  .service-card{padding:34px}
  .service-card h3{font-size:25px}
}

/* Native popover anchored to its info trigger; centered fallback if unsupported. */
.pricing-help{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:6px;border:1px solid #888;border-radius:50%;background:transparent;color:#333;font:700 12px/1 Arial,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;anchor-name:--daellon-pricing-tip}
.pricing-help:focus-visible{outline:2px solid #b46d49;outline-offset:3px}
.pricing-popover{box-sizing:border-box;width:min(330px,calc(100vw - 32px));max-width:calc(100vw - 32px);margin:0;border:1px solid #cececa;border-radius:14px;padding:18px 20px;background:#171717;color:#f1f1ef;line-height:1.55;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;box-shadow:0 14px 50px rgba(0,0,0,.28);top:50%;left:50%;transform:translate(-50%,-50%)}
.pricing-popover:popover-open{animation:daellon-tip-in .22s ease-out}
@keyframes daellon-tip-in{from{opacity:0}}
@supports(position-anchor:--daellon-pricing-tip){
  .pricing-popover{position:fixed;position-anchor:--daellon-pricing-tip;top:calc(anchor(bottom) + 12px);left:anchor(left);right:auto;bottom:auto;transform:none;position-try-fallbacks:flip-block,flip-inline}
}

/* Scroll-driven, subtle motion with JS/IntersectionObserver fallback already in site.js. */
@keyframes daellon-progress-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes daellon-image-enter{from{opacity:.65;transform:translateY(18px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@supports(animation-timeline:scroll()){
  .scroll-progress{animation:daellon-progress-track linear both;animation-timeline:scroll(root block)}
}
@supports(animation-timeline:view()){
  .tools-image img,.featured-image img,.service-story figure img{
    animation:daellon-image-enter linear both;
    animation-timeline:view(block);
    animation-range:entry 0% cover 28%;
  }
}
@media(prefers-reduced-motion:reduce){
  .mobile-drawer,.mobile-drawer::backdrop,.arrow-icon{transition:none!important}
  .tools-image img,.featured-image img,.service-story figure img,.scroll-progress{animation:none!important}
  .drawer-nav>a:hover{color:inherit}
}