/* AQLUMA / a story in four acts. Only loaded by nos-services.html. */
.services-page { --story-ease: cubic-bezier(.22,1,.36,1); }
.services-page [aria-current="page"] { color: var(--copper); }
.services-page .desktop-nav [aria-current="page"]:after { width: 100%; }
.services-page [hidden] { display: none !important; }
.services-page figure { margin: 0; }
.services-intro { padding-block: 34px 0; }
.intro-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.services-motion-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0 10px 12px; min-height: 44px; border: 0; background: none; font: 9px var(--mono); color: var(--graphite); }
.motion-bars { display: flex; align-items: center; gap: 3px; height: 15px; }
.motion-bars i { width: 2px; height: 6px; background: var(--copper); }
.motion-bars i:nth-child(2) { height: 13px; }
.motion-bars i:nth-child(3) { height: 9px; }
.services-motion-toggle[aria-pressed="true"] .motion-bars i { height: 3px; }
.services-intro-layout { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; padding-block: 28px 43px; }
.services-intro h1 { font-size: clamp(58px, 6.8vw, 108px); line-height: 1.03; font-weight: 300; letter-spacing: -.06em; }
.title-line { display: block; overflow: clip; padding-bottom: .13em; margin-bottom: -.13em; }
.title-line > span, .title-line > em { display: inline-block; }
.services-intro h1 em { color: var(--copper); }
.services-intro-note { padding: 0 3% 12px 0; max-width: 340px; }
.intro-cross { font: 36px var(--mono); color: var(--copper); display: block; margin-bottom: 23px; }
.services-intro-note p { font-size: 15px; line-height: 1.7; color: var(--graphite); margin-bottom: 22px; }
.services-intro-note .underlined-link { font-size: 12px; min-height: 44px; }
.intro-bottomline { border-top: 1px solid var(--line); padding-block: 21px; display: flex; justify-content: space-between; gap: 15px; font: 8px/1.6 var(--mono); letter-spacing: .09em; color: var(--graphite); }
.story-chapter-nav { position: sticky; top: 0; z-index: 9; background: rgba(244,242,236,.96); backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.chapter-nav-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.chapter-nav-inner a { position: relative; display: flex; align-items: center; gap: 13px; min-height: 60px; padding-block: 10px; font-size: 12px; color: var(--graphite); transition: color .25s; }
.chapter-nav-inner a > span { font: 9px var(--mono); color: var(--copper); }
.chapter-nav-inner a[aria-current="step"] { color: var(--ink); }
.chapter-nav-inner a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--story-ease); }
.chapter-nav-inner a[aria-current="step"]:after, .chapter-nav-inner a:hover:after { transform: scaleX(1); }
.story-progress-track { position: absolute; inset: auto 0 -1px; height: 1px; overflow: hidden; }
.story-progress-track > span { display: block; width: 100%; height: 100%; background: var(--copper); transform: scaleX(var(--story-progress,0)); transform-origin: left; }
.services-story { padding-top: 0; }
.story-act { scroll-margin-top: 82px; padding-top: 45px; }
.act-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 24px; }
.service-number { font: 10px/1.6 var(--mono); letter-spacing: .08em; color: var(--copper); }
.act-whisper { font: italic 300 19px/1.3 var(--serif); color: var(--graphite); }
.service-feature { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--ink); color: var(--white); }
.vision-scene { --vision: 42%; position: relative; min-height: 550px; overflow: hidden; background: var(--ink); }
.vision-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vision-before { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--vision)); }
.vision-grid { position: absolute; inset: 0; background: linear-gradient(180deg,#0b171954,transparent 40%,#06130eda), repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#f4f2ec13 calc(25% - 1px),#f4f2ec13 25%); pointer-events: none; }
.vision-edge { position: absolute; left: var(--vision); top: 0; bottom: 0; width: 1px; background: #f4f2ecba; pointer-events: none; }
.vision-edge > span { position: absolute; left: 0; top: 48%; transform: translate(-50%,-50%); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #f4f2ecb0; border-radius: 50%; background: #17211f9e; color: var(--white); font-size: 21px; }
.vision-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.vision-scene:focus-within { outline: 2px solid var(--copper); outline-offset: 4px; }
.vision-scene-top { position: absolute; top: 23px; left: 22px; right: 22px; display: flex; justify-content: space-between; gap: 20px; font: 8px/1.5 var(--mono); letter-spacing: .05em; color: #f4f2ec; pointer-events: none; }
.vision-scene-top span:last-child { text-align: right; }
.vision-scene figcaption { position: absolute; bottom: 25px; left: 25px; right: 25px; pointer-events: none; }
.vision-scene figcaption > span { display: flex; justify-content: space-between; font-size: 16px; font-weight: 300; }
.vision-scene figcaption small { display: block; margin-top: 10px; font: 8px/1.6 var(--mono); color: #c6cec3; }
.service-feature-copy { padding: 40px clamp(28px,3.7vw,60px); display: flex; flex-direction: column; align-items: flex-start; }
.act-pivot { font: 10px/1.7 var(--mono); color: var(--copper); }
.story-act h2 { font-size: clamp(36px,4.15vw,64px); line-height: 1.06; letter-spacing: -.045em; font-weight: 300; margin-top: 23px; }
.story-act h2 em { color: var(--copper); }
.service-feature h2 { font-size: clamp(36px,4vw,60px); }
.service-feature .act-pivot, .service-feature h2 em { color: #d5ab93; }
.service-benefit { font-size: 15px; line-height: 1.65; color: var(--graphite); margin-top: 24px; }
.service-feature .service-benefit { color: #c4cac2; }
.expertise-signature { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 30px; width: 100%; }
.expertise-signature .micro-label { font-size: 8px; }
.expertise-signature h3 { font-size: 15px; font-weight: 500; margin-top: 8px; letter-spacing: -.015em; }
.expertise-signature > p { font: 9px/1.7 var(--mono); color: var(--graphite); margin-top: 8px; }
.service-feature .expertise-signature { border-color: #f4f2ec30; }
.service-feature .expertise-signature .micro-label, .service-feature .expertise-signature > p { color: #b5bfb2; }
.service-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; min-height: 44px; border-bottom: 1px solid #f4f2ec60; font-size: 12px; margin-top: 22px; }
.service-text-link span { font-size: 21px; }
.act-layout { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(30px,7vw,110px); padding-block: 32px 65px; border-bottom: 1px solid var(--line); }
.act-copy { padding-block: 20px; }
.story-scene { position: relative; min-width: 0; height: 480px; overflow: hidden; }
.story-scene figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 5px; font: 8px/1.6 var(--mono); letter-spacing: .04em; color: var(--graphite); }
.story-scene figcaption > span { font-size: 7px; opacity: .8; }
/* Act II: the same vision finds a signature, not a generic service icon. */
.brand-scene { background: #e7e2d7; perspective: 1200px; }
.brand-guides { position: absolute; inset: 27px; border: 1px solid #a9624321; }
.brand-guides i { position: absolute; top: 0; bottom: 0; left: 33%; border-left: 1px solid #a9624321; }
.brand-guides i:nth-child(2) { left: 66%; }
.brand-guides i:nth-child(3) { top: 50%; bottom: auto; left: 0; width: 100%; border-top: 1px solid #a9624321; }
.brand-paper { position: absolute; width: 55%; height: 65%; top: 12%; left: 23%; padding: 22px; box-shadow: 10px 19px 35px #17211f12; }
.brand-paper-back { background: var(--copper); color: var(--white); transform: rotate(9deg) translate(11%,-1%); }
.brand-paper-back > span { position: absolute; right: 17px; top: 20px; font: 7px/1.6 var(--mono); text-align: right; }
.brand-paper-back > i { position: absolute; left: 18px; bottom: 15px; font: normal 36px var(--mono); }
.brand-paper-front { background: var(--white); color: var(--ink); transform: rotate(-5deg); display: flex; flex-direction: column; }
.brand-sheet-kicker { font: 7px var(--mono); letter-spacing: .12em; }
.brand-monogram { font: 300 clamp(84px,8vw,134px)/1 var(--serif); margin: auto 0; letter-spacing: -.12em; }
.brand-monogram > span { color: var(--copper); }
.brand-sheet-title { font: 300 21px var(--serif); letter-spacing: -.03em; }
.brand-rule { display: block; height: 1px; background: var(--copper); margin: 13px 0 10px; transform-origin: left; }
.brand-sheet-meta { font: 6px var(--mono); letter-spacing: .07em; }
.brand-palette { position: absolute; right: 24px; bottom: 81px; display: flex; box-shadow: 0 9px 18px #17211f12; transform: rotate(-5deg); }
.brand-palette i { width: 32px; height: 40px; background: var(--ink); border: 3px solid var(--white); }
.brand-palette i:nth-child(2) { background: var(--copper); }
.brand-palette i:nth-child(3) { background: var(--stone); }
.brand-palette i:nth-child(4) { background: var(--teal); }
/* Act III: a real layout, presented explicitly as a non-interactive study. */
.act-web .act-copy { order: 2; }
.act-web .story-scene { order: 1; }
.web-scene { background: #dce1d9; perspective: 1400px; }
.web-orbit { position: absolute; width: 350px; height: 350px; left: 18%; top: 8%; border: 1px solid #2d6e671f; border-radius: 50%; }
.site-mockup { position: absolute; left: 6%; top: 16%; width: 84%; background: var(--white); border: 1px solid #17211f2a; transform: perspective(1200px) rotateY(5deg) rotateZ(-3deg); box-shadow: 0 30px 40px #17211f20; }
.mockup-browser { height: 27px; display: flex; align-items: center; justify-content: space-between; padding-inline: 11px; border-bottom: 1px solid var(--line); }
.mockup-browser > span { font: 14px var(--mono); }
.mockup-browser > i { font: normal 6px var(--mono); color: var(--graphite); }
.mockup-image { position: relative; height: 205px; background: var(--ink); overflow: hidden; }
.mockup-image img { width: 100%; height: 100%; object-fit: cover; opacity: .65; }
.mockup-image > span { position: absolute; bottom: 19px; left: 19px; color: var(--white); font-size: 27px; line-height: 1.05; font-weight: 300; letter-spacing: -.03em; }
.mockup-bottom { padding: 17px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 6px var(--mono); }
.mockup-cta { padding: 9px; background: var(--copper); color: var(--white); }
.phone-mockup { position: absolute; right: 7%; bottom: 19%; width: 108px; height: 200px; background: var(--ink); color: var(--white); border: 5px solid #f4f2ec; border-radius: 14px; overflow: hidden; transform: rotate(6deg); box-shadow: 0 18px 28px #17211f36; }
.phone-speaker { position: absolute; z-index: 1; left: 34%; top: 5px; width: 32%; height: 5px; background: var(--ink); border-radius: 9px; }
.phone-mockup img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.phone-mockup > span:not(.phone-speaker) { position: absolute; bottom: 40px; left: 9px; font-size: 13px; line-height: 1.15; }
.phone-mockup > i { position: absolute; bottom: 12px; left: 9px; right: 9px; padding: 6px 3px; background: var(--copper); font: normal 6px var(--sans); text-align: center; }
/* Act IV: deliberately no invented metrics, graph or testimonial. */
.reach-scene { background: var(--ink); color: var(--white); }
.reach-paths { width: 100%; height: 100%; position: absolute; inset: 0; stroke: #d3a48835; stroke-width: 1; }
.reach-route { stroke: #d3a488a0; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reach-point { fill: #d3a488; stroke: var(--ink); stroke-width: 2; }
.reach-core { position: absolute; left: 50%; top: 46.5%; transform: translate(-50%,-50%); width: 82px; height: 82px; border: 1px solid #cda48c70; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.reach-core > span { font: 300 45px/1 var(--serif); letter-spacing: -.11em; color: #d5ab93; }
.reach-core small { font: 6px var(--mono); color: #b1bfb0; margin-top: 7px; }
.reach-label { position: absolute; color: #aab9aa; font: 7px var(--mono); letter-spacing: .1em; }
.reach-label-one { left: 7%; top: 19%; }
.reach-label-two { right: 7%; top: 25%; }
.reach-message { position: absolute; display: flex; gap: 12px; align-items: center; left: 12%; right: 12%; bottom: 20%; padding: 15px; border: 1px solid #d5ab9370; background: #24362c; box-shadow: 0 15px 25px #07100b44; }
.reach-message > span { font-size: 23px; color: #d5ab93; }
.reach-message p { font: 300 15px var(--serif); }
.reach-message small { display: block; margin-top: 8px; font: 6px/1.5 var(--mono); color: #b2c0b2; }
.reach-scene figcaption { color: #b5c1b3; }
.services-scope { padding-block: 39px 45px; display: flex; justify-content: center; align-items: center; gap: 19px; text-align: left; }
.services-scope > span { font: 35px var(--mono); color: var(--copper); }
.services-scope p { font-size: 13px; color: var(--graphite); }
.services-scope strong { font-weight: 500; color: var(--ink); }
.services-contact { background: var(--ink); color: var(--white); padding-block: 75px; position: relative; overflow: hidden; scroll-margin-top: 60px; }
.contact-datum { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--copper); transform-origin: left; }
.services-contact-layout { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; }
.services-contact .eyebrow { color: #cda58e; }
.services-contact h2 { font-size: clamp(38px,4.3vw,64px); margin-top: 23px; font-weight: 300; }
.services-contact h2 em { color: #d5ab93; }
.services-contact-action { padding-bottom: 5px; }
.services-contact-action p { text-align: center; margin-top: 15px; font: 8px/1.8 var(--mono); color: #bac3b9; }
.services-footer { display: flex; align-items: center; gap: 30px; min-height: 118px; padding-block: 28px; }
.services-footer p { font: 9px var(--mono); color: var(--graphite); }
.services-footer > a:last-child { margin-left: auto; font-size: 13px; padding-block: 12px; }
.services-footer > a:last-child span { margin-left: 18px; }
/* Motion is progressive: no content is hidden waiting for JavaScript. */
.services-page .button, .services-page .service-text-link, .services-page .underlined-link { position: relative; }
.services-page .button { overflow: hidden; }
.services-page .button:after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 25%,#f4f2ec20 50%,transparent 75%); transform: translateX(-115%); transition: transform .7s var(--story-ease); pointer-events: none; }
.services-page .button:hover:after, .services-page .button:focus-visible:after { transform: translateX(115%); }
.services-page .button > span, .service-text-link > span, .services-intro-note .underlined-link > span { transition: transform .35s var(--story-ease); }
.services-page .button:hover > span, .service-text-link:hover > span { transform: translate(3px,-3px); }
.services-intro-note .underlined-link:hover > span { transform: translateY(4px); }
.services-page .button:active { transform: scale(.98); }
.services-page[data-story-motion="paused"] *, .services-page[data-story-motion="paused"] *:before, .services-page[data-story-motion="paused"] *:after { animation: none !important; transition: none !important; }
html:has(.services-page[data-story-motion="paused"]) { scroll-behavior: auto; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .story-scene { transition: box-shadow .6s var(--story-ease); }
  .story-scene:hover { box-shadow: 0 18px 30px #17211f13; }
}
@media (max-width: 1000px) {
  .services-intro-note { padding-right: 0; }
  .services-intro h1 { font-size: 7.8vw; }
  .service-feature-copy { padding-inline: 27px; }
  .story-act h2 { font-size: 40px; }
  .act-layout { gap: 30px; }
  .story-scene { height: 420px; }
  .brand-paper { padding: 18px; }
  .brand-sheet-title { font-size: 18px; }
  .services-contact-layout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 800px) {
  .services-intro-layout { align-items: flex-start; }
  .services-intro-note { padding-top: 15px; max-width: 240px; }
  .intro-cross { margin-bottom: 10px; }
  .services-intro-note p { font-size: 13px; }
  .service-feature { grid-template-columns: 1fr; }
  .vision-scene { min-height: 380px; }
  .service-feature-copy { padding: 32px; }
  .service-feature h2 br:nth-of-type(1) { display: none; }
  .act-layout { grid-template-columns: 1fr; padding-top: 6px; padding-bottom: 40px; gap: 28px; }
  .act-copy { padding-block: 8px 0; }
  .act-web .act-copy, .act-web .story-scene { order: initial; }
  .story-scene { height: 440px; }
  .act-heading { gap: 15px; }
  .act-whisper { font-size: 17px; }
  .story-act h2 { font-size: 44px; }
  .brand-paper { width: 48%; left: 26%; }
  .brand-monogram { font-size: 110px; }
  .site-mockup { left: 10%; width: 72%; }
  .phone-mockup { right: 12%; }
  .desktop-break { display: none; }
}
@media (max-width: 600px) {
  .services-intro { padding-top: 20px; }
  .intro-topline { flex-wrap: wrap; gap: 3px 10px; }
  .services-intro .eyebrow { font-size: 8px; letter-spacing: .035em; }
  .services-motion-toggle { font-size: 8px; gap: 7px; padding-left: 0; }
  .services-intro-layout { display: block; padding-block: 18px 26px; }
  .services-intro h1 { font-size: clamp(43px,11.65vw,69px); line-height: 1.06; }
  .services-intro-note { position: relative; max-width: none; padding: 26px 0 0; }
  .intro-cross { position: absolute; right: 0; top: 17px; font-size: 30px; }
  .services-intro-note p { font-size: 14px; max-width: calc(100% - 24px); margin-bottom: 11px; }
  .services-intro-note .underlined-link { font-size: 11px; }
  .intro-bottomline { font-size: 6px; letter-spacing: .04em; padding-block: 17px; }
  .chapter-nav-inner { padding-inline: 16px; gap: 6px; }
  .chapter-nav-inner a { min-height: 57px; gap: 5px; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 10px; white-space: nowrap; }
  .chapter-nav-inner a > span { font-size: 8px; }
  .story-act { padding-top: 28px; scroll-margin-top: 76px; }
  .act-heading { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 20px; }
  .service-number { font-size: 9px; }
  .act-whisper { font-size: 17px; }
  .vision-scene { min-height: 300px; }
  .vision-scene-top { top: 17px; left: 16px; right: 16px; font-size: 6px; gap: 35px; }
  .vision-scene figcaption { left: 18px; right: 18px; bottom: 18px; }
  .vision-scene figcaption > span { font-size: 14px; }
  .vision-scene figcaption small { font-size: 7px; }
  .service-feature-copy { padding: 28px 23px; }
  .act-pivot { font-size: 9px; }
  .story-act h2 { font-size: clamp(33px,9.25vw,48px); margin-top: 19px; }
  .service-feature h2 { font-size: clamp(32px,8.65vw,43px); }
  .service-feature h2 br:nth-of-type(1) { display: initial; }
  .service-benefit { font-size: 14px; margin-top: 20px; }
  .service-benefit br { display: none; }
  .expertise-signature { margin-top: 24px; }
  .expertise-signature h3 { font-size: 14px; }
  .expertise-signature > p { font-size: 9px; }
  .service-text-link { font-size: 11px; margin-top: 17px; }
  .act-layout { gap: 25px; padding-bottom: 29px; }
  .story-scene { height: 335px; }
  .story-scene figcaption { bottom: 16px; left: 16px; right: 16px; font-size: 7px; }
  .story-scene figcaption > span { font-size: 6px; }
  .brand-paper { width: 55%; left: 23%; height: 66%; padding: 15px; }
  .brand-sheet-kicker { font-size: 6px; }
  .brand-monogram { font-size: 81px; }
  .brand-sheet-title { font-size: 17px; }
  .brand-sheet-meta { font-size: 5px; }
  .brand-palette { right: 20px; bottom: 59px; }
  .brand-palette i { width: 24px; height: 31px; border-width: 2px; }
  .brand-rule { margin-block: 10px 7px; }
  .site-mockup { top: 14%; width: 85%; left: 5%; }
  .mockup-browser { height: 21px; }
  .mockup-browser > i { font-size: 5px; }
  .mockup-image { height: 156px; }
  .mockup-image > span { font-size: 23px; left: 13px; bottom: 17px; }
  .mockup-bottom { padding: 11px 8px; font-size: 5px; gap: 5px; }
  .mockup-cta { font-size: 5px; padding: 7px 4px; }
  .phone-mockup { width: 82px; height: 151px; right: 6%; bottom: 19%; border-width: 4px; border-radius: 11px; }
  .phone-mockup > span:not(.phone-speaker) { font-size: 11px; left: 7px; bottom: 34px; }
  .phone-mockup > i { font-size: 5px; left: 6px; right: 6px; bottom: 9px; }
  .reach-core { width: 58px; height: 58px; }
  .reach-core > span { font-size: 32px; }
  .reach-core small { font-size: 4px; margin-top: 4px; }
  .reach-label { font-size: 5px; }
  .reach-label-one { top: 21%; left: 7%; }
  .reach-label-two { top: 28%; }
  .reach-message { left: 8%; right: 8%; bottom: 19%; padding: 12px; gap: 10px; }
  .reach-message p { font-size: 13px; }
  .reach-message small { font-size: 5px; }
  .services-scope { padding-block: 28px 32px; gap: 13px; }
  .services-scope > span { font-size: 25px; }
  .services-scope p { font-size: 12px; }
  .services-contact { padding-block: 43px; }
  .services-contact h2 { font-size: 34px; }
  .services-contact-layout { gap: 27px; }
  .services-contact-action { width: 100%; }
  .services-contact-action .button { width: 100%; min-height: 54px; padding-inline: 18px; font-size: 12px; }
  .services-footer { flex-wrap: wrap; gap: 16px; padding-block: 25px; }
  .services-footer p { margin-left: auto; font-size: 8px; }
  .services-footer > a:last-child { margin-left: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-page *, .services-page *:before, .services-page *:after { animation: none !important; transition: none !important; }
  .story-chapter-nav { backdrop-filter: none; background: var(--white); }
}
@media print {
  .story-chapter-nav { position: static; }
  .services-motion-toggle, .vision-range { display: none; }
  .story-act { break-inside: avoid; }
}