@font-face{font-family:ABNES;src:url('assets/fonts/abnes.otf') format('opentype'),url('assets/fonts/abnes.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.services-brand{--draft:#c4b5fd;--draft-light:#eee5ff;--brand-gap:clamp(28px,4vw,80px);--brand-padding:clamp(40px,5vw,100px);position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--brand-gap);direction:ltr;width:min(100%,1600px);padding:max(var(--brand-padding),calc(var(--brand-controls-span)/2 + 12px)) clamp(32px,8vw,160px);margin:0 auto;text-align:left;background:transparent;transform:translateY(var(--brand-group-shift,0px))}
/* Grid and foreground share the measured section-start-to-card-top interval.
   Continuous guides remain below the transparent foreground. No box masks,
   opaque panels or extra isolation interrupt the photo-backed negative treatment. */
.services-brand-region{--brand-controls-span:calc(44px + max(clamp(20px,2vw,40px),calc(var(--service-hover-pad-y,0px) + 12px)));position:relative;width:min(100%,2560px);margin:0 auto}
.services-brand-grid{--grid-ink:#232323;position:absolute;top:var(--brand-grid-top,0px);left:0;width:100%;height:var(--brand-grid-height,100%);z-index:0;pointer-events:none;user-select:none;visibility:hidden;background-image:linear-gradient(var(--grid-ink),var(--grid-ink)),linear-gradient(var(--grid-ink),var(--grid-ink)),linear-gradient(var(--grid-ink),var(--grid-ink)),linear-gradient(var(--grid-ink),var(--grid-ink));background-size:1px 100%,1px 100%,1px 100%,100% 1px;background-position:25% 0,50% 0,75% 0,0 50%;background-repeat:no-repeat}
.services-brand-grid.is-grid-ready{visibility:visible}
.services-brand-grid>span{position:absolute;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);background:rgba(255,255,255,.45)}
.services-brand-grid>span:nth-child(1){left:25%}
.services-brand-grid>span:nth-child(2){left:50%}
.services-brand-grid>span:nth-child(3){left:75%}
.brand-wordmark{--draft-light:#eee5ff;display:block;line-height:1;pointer-events:none}
.hero-wordmark{position:relative;width:clamp(220px,22.53vw,460px);max-width:100%;margin-left:auto}
.hero-wordmark[data-wordmark-variant="van"]{width:clamp(383.950px,39.320vw,802.805px)}
.hero-wordmark[data-wordmark-variant="id"]{width:clamp(298.557px,30.575vw,624.256px)}
.hero-copy .hero-brand-title{line-height:1}
.services-intro{grid-column:2;grid-row:1;justify-self:start;max-width:100%;min-width:0;text-align:right;transform:translateX(var(--brand-copy-shift,0px))}
.services-intro h2{margin:0;font-size:clamp(26px,2.25vw,48px);font-weight:700;line-height:1.6}
.services-intro p{margin:clamp(12px,1.1vw,24px) 0 0;font-size:clamp(14px,1.05vw,22px);line-height:2.05;color:rgba(255,255,255,.78)}
.brand-copy-line{display:block}
/* Independent, invisible reference retains the previous natural-wrap column. */
.services-brand-measure{grid-column:auto;grid-row:auto;position:absolute;left:0;top:0;width:calc((100% - 2 * clamp(24px,6vw,120px) - clamp(32px,6vw,120px))/2);visibility:hidden;pointer-events:none;contain:layout style;transform:none}
.brand-artwork{grid-column:1;grid-row:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
.brand-wordmark svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:none}
.brand-wordmark-native{font-family:ABNES,Montserrat,sans-serif;font-size:1852.48px;font-weight:400;font-synthesis:none;letter-spacing:0;word-spacing:normal;font-kerning:normal;fill:#fff;stroke:none}
[data-wordmark-variant="van"]{--draft:#a8f0ff;--draft-light:#a8f0ff}
[data-wordmark-variant="van"] .brand-wordmark-native [data-wordmark-part="van"]{fill:#a8f0ff}
.brand-wordmark-trace{fill:none;stroke:var(--draft-light);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:0}
/* This wrapper follows the original visible alpha bounds (512 × 224).
   Only transparent canvas framing changes; the image, SVG paths and animation stay intact. */
.brand-symbol{position:relative;display:block;flex:none;width:min(100%,var(--brand-symbol-width,504px));aspect-ratio:16/7;transform:translateX(var(--brand-symbol-shift,0px)) scaleX(var(--brand-symbol-scale-x,1));transform-origin:left center;pointer-events:none}
.brand-symbol svg{position:absolute;top:-7.142857%;left:-3.125%;width:106.25%;height:114.285714%;overflow:visible;fill:none;stroke:none}
.brand-symbol-final{opacity:1;filter:brightness(.706);clip-path:inset(0)}
.blueprint-construction{visibility:hidden;opacity:0}
.blueprint-frame{stroke:var(--draft-light);stroke-width:.8;opacity:.75;stroke-dasharray:1;stroke-dashoffset:0}
.blueprint-corners{stroke:var(--draft);stroke-width:.65;opacity:0}
.blueprint-measures{stroke:var(--draft);stroke-width:.5;opacity:0}
.blueprint-guides{stroke:var(--draft);stroke-width:.5;stroke-dasharray:3 6;opacity:0}
.blueprint-bar-lines{stroke:var(--draft-light);stroke-width:.8;opacity:.65;stroke-dasharray:1;stroke-dashoffset:0}
.blueprint-points{stroke:var(--draft);stroke-width:.75;fill:#050505;opacity:0}
.blueprint-profile{opacity:0}
/* Timings and temporary geometry match the inspected sobati.one implementation.
   The original filled mark stays at opacity1 through drawing; only the final step darkens it while retaining full opacity. */
.is-drawing .brand-wordmark-trace{animation:sobati-wordmark-draw 2.3s linear both,sobati-wordmark-clear 220ms ease-out 2.3s both;opacity:1;stroke-dashoffset:1}
.is-drawing .brand-wordmark-native{opacity:0;animation:sobati-wordmark-fill 220ms ease-out 2.3s both}
.is-drawing .blueprint-construction{visibility:visible;animation:sobati-blueprint-clear 4s ease-out both}
.is-drawing .blueprint-frame{stroke-dashoffset:1;animation:sobati-blueprint-draw 900ms linear both}
.is-drawing .blueprint-corners{animation:sobati-blueprint-detail 420ms ease-out 180ms both}
.is-drawing .blueprint-measures{animation:sobati-blueprint-detail 600ms ease-out 700ms both}
.is-drawing .blueprint-guides{animation:sobati-blueprint-detail 650ms ease-out 800ms both}
.is-drawing .blueprint-bar-lines{stroke-dashoffset:1;animation:sobati-blueprint-draw 900ms ease-out 1.05s both}
.is-drawing .blueprint-points{animation:sobati-blueprint-detail 400ms ease-out 1.25s both}
.is-drawing .blueprint-profile{animation:sobati-blueprint-profile 2.1s ease-out 1.05s both}
.is-drawing .brand-symbol-final{opacity:1;filter:brightness(1);animation:sobati-blueprint-reveal 1.4s cubic-bezier(.3,0,.2,1) 1.75s both}
.is-settling .brand-symbol-final{animation:sobati-symbol-settle 400ms ease-out both}
@keyframes sobati-wordmark-draw{to{stroke-dashoffset:0}}
@keyframes sobati-wordmark-fill{to{opacity:1}}
@keyframes sobati-wordmark-clear{to{opacity:0}}
@keyframes sobati-blueprint-detail{to{opacity:.5}}
@keyframes sobati-blueprint-draw{to{stroke-dashoffset:0}}
@keyframes sobati-blueprint-profile{0%{opacity:0}25%,65%{opacity:.7}100%{opacity:0}}
@keyframes sobati-blueprint-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes sobati-symbol-settle{from{filter:brightness(1)}to{filter:brightness(.706)}}
@keyframes sobati-blueprint-clear{0%,78%{opacity:1}100%{opacity:0;visibility:hidden}}
/* The balanced branding row stays above the unchanged cards with its own spacing. */
.services-rail,.services-controls{position:relative;z-index:2}
@media(max-width:1100px) and (min-width:768px){.services-intro h2{font-size:28px}.services-intro p{font-size:14px;line-height:1.85;margin-top:12px}}
@media(max-width:767px){.services-brand{grid-template-columns:minmax(0,1fr);gap:28px;--brand-padding:36px;padding:max(var(--brand-padding),calc(var(--brand-controls-span)/2 + 12px)) max(24px,8vw)}.services-intro{grid-column:1;grid-row:1;justify-self:stretch;max-width:none}.services-intro h2{font-size:28px;line-height:1.6}.services-intro p{font-size:14px;line-height:2;margin-top:12px}.brand-artwork{grid-column:1;grid-row:2;justify-content:center}.brand-copy-line{display:inline}.services-brand-measure{grid-column:auto;grid-row:auto;width:calc(100% - 2 * max(var(--gutter),6vw))}.hero-wordmark{width:min(52vw,280px)}.hero-wordmark[data-wordmark-variant="van"]{width:min(90.752vw,488.664px)}.hero-wordmark[data-wordmark-variant="id"]{width:min(70.568vw,379.982px)}}
@media(prefers-reduced-motion:reduce){[data-brand-animation] .brand-wordmark-native{opacity:1!important;animation:none!important}[data-brand-animation] .brand-symbol-final{opacity:1!important;filter:brightness(.706)!important;clip-path:none!important;animation:none!important}[data-brand-animation] .brand-wordmark-trace,[data-brand-animation] .blueprint-construction{opacity:0!important;visibility:hidden!important;animation:none!important}}

/* Bound blueprint layout/style work; promote only its active scroll-time drawing.
   Paint containment is deliberately omitted because blueprint guides overflow. */
.services-brand .brand-symbol{contain:layout style}
.services-brand .brand-symbol.is-drawing,.services-brand .brand-symbol.is-settling{will-change:transform}
@media(prefers-reduced-motion:reduce){.services-brand .brand-symbol{will-change:auto}}