/* Alpine scroll chapters. The SCS star is the lens (home), the compass (section index) and the seal (close). */
/* SCS identity: the logo's blue (#17375e) and grey (#7f7f7f) on a cool paper; no gold. */
.scs-design-a { --alp-star:url(assets/brand/scs-star.svg);--alp-brand:#17375e;--alp-grey:#7f7f7f;--alp-mist:#b4c3d6;--primary:#17375e;--accent:#17375e;--accent-text:#17375e;--paper:#f4f5f7;--line:#d8dde4;--muted:#555d66; }
.scs-design-a .ad-reference .ad-eyebrow { color:var(--alp-mist); }
.scs-design-a .ad-reference blockquote { border-left-color:var(--alp-mist); }
.scs-design-a .ad-reference .ad-client-logo { background:#fff; }

/* Fewer labels, no numbering: the headings carry the sections. */
.scs-design-a .ad-home-hero .ad-eyebrow { display:none; }
.scs-design-a .ad-number { font-size:0;gap:0; }
.scs-design-a .ad-number::after { display:none; }
.scs-design-a .ad-number:not(:has(.alp-stamp)) { display:none; }

/* Header: the logo settles to a compact size once reading begins. */
.scs-design-a .ad-header .scs-brand img { transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1); }
.scs-design-a.alpine-scrolled .ad-header .scs-brand img { transform:scale(.84); }

/* Headings arrive word by word from beneath a fine mask. */
.alp-w { display:inline-block;overflow:hidden;vertical-align:top;padding-block:.12em;margin-block:-.12em; }
.alp-w > span { display:inline-block; }

/* The founder portrait is uncovered from the bottom edge. */
.scs-design-a .ad-founder-photo { overflow:hidden; }

/* L'Ouverture. Without JavaScript it is a still composition: a sharp star window over the blurred facade. */
.scs-design-a .ad-home-hero:has(+ .alp-ouverture) { min-height:0; }
.scs-design-a .ad-home-hero:has(+ .alp-ouverture) .ad-hero-photo { display:none; }
.alp-ouverture { position:relative;background:var(--primary); }
.alp-ouv-stage { position:relative;height:min(78vh,760px);overflow:hidden;isolation:isolate;contain:paint; }
.alp-ouv-far, .alp-ouv-aperture { position:absolute;inset:0; }
.alp-ouv-far { inset:-6%;z-index:0; }
.alp-ouv-far img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:blur(14px) saturate(.35) brightness(.92);opacity:.85; }
.alp-ouv-far::after { content:'';position:absolute;inset:0;background:rgba(23,55,94,.42); }
.alp-ouv-aperture { z-index:1;-webkit-mask:var(--alp-star) center / min(52vh,48vw) no-repeat;mask:var(--alp-star) center / min(52vh,48vw) no-repeat; }
.alp-ouv-img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%; }
.alp-ouv-outline { position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none; }
.alp-ouv-outline path { fill:none;stroke:#dbe4ef;stroke-width:1.25; }

/* Scripted: the stage pins beneath the header and the aperture is drawn per frame. */
.alp-scroll .alp-ouverture { height:calc(100vh + var(--alp-ouv-travel,120vh));background:var(--paper); }
.alp-scroll .alp-ouv-stage { position:sticky;top:var(--ad-header-height);height:calc(100vh - var(--ad-header-height));background:var(--primary); }
.alp-scroll .alp-ouv-aperture { -webkit-mask:none;mask:none;clip-path:var(--alp-ouv-clip,none); }
.alp-scroll .alp-ouv-far, .alp-scroll .alp-ouv-img { will-change:transform; }
.alp-scroll.alp-static .alp-ouverture { height:auto; }
.alp-scroll.alp-static .alp-ouv-stage { position:relative;top:0;height:min(78vh,760px); }

/* Near plane in every opening: a fine gold star, moving faster than the photograph behind it. */
/* Large enough that its concave sides bracket the centred statement rather than crossing it. */
.alp-hero-star { position:absolute;z-index:1;left:calc(50% - 670px);top:calc(50% - 670px);width:1340px;height:auto;margin:0;pointer-events:none;overflow:visible;transform:translate3d(0,var(--alp-hero-y,0px),0) rotate(var(--alp-hero-r,0deg)); }
.alp-hero-star path { fill:none;stroke:var(--alp-brand);stroke-width:.12;opacity:.38; }

/* The compass: the mark travels along the chapter index to the chapter being read. */
.ad-section-nav .ad-shell { position:relative; }
.alp-compass { position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;fill:var(--accent);opacity:0;pointer-events:none;transform:translate3d(var(--alp-compass-x,0px),0,0) rotate(var(--alp-compass-r,0deg));transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .3s; }
.alp-compass.is-on { opacity:1; }
.alp-has-compass .ad-section-nav a { padding-left:14px; }
.alp-has-compass .ad-section-nav .ad-shell { gap:12px; }

/* Each engagement and area is stamped with the mark as it is read. */
.alp-stamp { width:11px;height:11px;flex:0 0 auto;fill:var(--accent);transform:scale(0) rotate(-90deg);transition:transform .9s cubic-bezier(.16,1,.3,1) .15s; }
.ad-model.is-alpine-revealed .alp-stamp, .ad-area:has(.is-alpine-revealed) .alp-stamp, .alpine-expertise-enhanced .alp-stamp { transform:none; }
.ad-number:has(.alp-stamp) { gap:10px; }

/* Homepage expertise: a rail beside the four areas, with the mark at the area being read. */
.alp-rail { position:absolute;left:-30px;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none; }
.alp-rail-fill { position:absolute;inset:0;background:var(--accent);transform:scaleY(var(--alp-rail,0));transform-origin:top; }
.alp-rail-mark { position:absolute;left:-6px;top:0;width:13px;height:13px;fill:var(--accent);transform:translate3d(0,var(--alp-rail-y,0px),0) rotate(var(--alp-rail-r,0deg));transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ad-page-home .ad-area-list:has(.alp-rail) { position:relative; }
.ad-page-home .ad-area h3 { transition:color .4s; }
.ad-page-home .ad-area.is-alp-current h3 { color:var(--alp-brand); }

/* The reference opens from a framed panel to the full width of the page. */
.alp-scroll .ad-reference { clip-path:inset(0 var(--alp-ref-inset,0px));will-change:clip-path; }

/* The seal: the mark draws itself behind each closing invitation and then holds. */
.ad-close { position:relative;isolation:isolate;overflow:hidden; }
.alp-seal { position:absolute;z-index:-1;left:calc(50% - 630px);top:calc(50% - 630px);width:1260px;height:auto;margin:0;overflow:visible;pointer-events:none;transform:rotate(var(--alp-seal-r,0deg)); }
.alp-seal path { fill:none;stroke:var(--alp-brand);stroke-width:.14;opacity:.42;stroke-dasharray:1;stroke-dashoffset:var(--alp-seal,0); }

/* Footer: the mark beside the name and a faint watermark. */
.alp-footer { position:relative;overflow:hidden;isolation:isolate; }
.alp-footer-brand { display:inline-flex;align-items:center;gap:12px; }
.alp-footer-mark { width:22px;height:22px;fill:#fff;flex-shrink:0; }
.alp-footer-watermark { position:absolute;z-index:-1;right:-90px;bottom:-140px;width:420px;height:420px;fill:none;stroke:#ffffff;stroke-width:.25;opacity:.12;pointer-events:none; }

@media(max-width:1100px) {
 .alp-rail { left:-20px; }
}
@media(max-width:780px) {
 .scs-design-a .ad-home-hero:has(+ .alp-ouverture) { padding-block:44px 56px; }
 .alp-ouv-stage, .alp-scroll.alp-static .alp-ouv-stage { height:62vh; }
 .alp-ouv-aperture { -webkit-mask-size:70vw;mask-size:70vw; }
 /* On phones the mark sits in the top corner, clear of the text column. */
 .alp-hero-star { left:auto;right:-34vw;top:-57vw;width:64vw; }
 .alp-hero-star path { stroke-width:.3; }
 .alp-rail { display:none; }
 .alp-seal { left:auto;top:-57vw;right:-34vw;width:64vw; }
 .alp-seal path { stroke-width:.3; }
 .alp-footer-watermark { width:300px;height:300px;right:-110px;bottom:-110px; }
}
@media(prefers-reduced-motion:reduce) {
 .alp-compass, .alp-stamp, .alp-rail-mark, .ad-page-home .ad-area h3 { transition:none; }
 .alp-stamp { transform:none; }
}