/* A permanent first screen in normal page flow, followed by the portfolio. */
.brand-intro { display:flex; flex-direction:column; justify-content:space-between; gap:20px; min-height:calc(100svh - var(--brand-header-height,108px)); padding-top:32px; padding-bottom:27px; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); }
.brand-intro-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-intro-kicker,.brand-intro-index { font-size:10px; line-height:1.6; letter-spacing:.13em; color:var(--muted); }
.brand-intro-center { flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-block:28px; min-height:270px; }
.brand-intro .brand-dieline-mark { display:block; width:min(84vw,880px); height:auto; max-height:45svh; overflow:visible; flex-shrink:1; }
.brand-dieline-letters { transform-box:fill-box; transform-origin:50% 55%; }
.brand-dieline-glyph { fill:none; stroke:#c2c1bc; stroke-width:1.1; opacity:.9; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.brand-dieline-guides { color:#9d9588; transform-box:fill-box; transform-origin:center; opacity:.95; }
.brand-dieline-trace,.brand-dieline-tabs { stroke:currentColor; stroke-width:1.2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.brand-dieline-folds { stroke:currentColor; stroke-width:1; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }
.brand-intro-subtitle { font:400 11px/1.5 var(--sans); color:var(--muted); letter-spacing:.17em; text-align:center; margin-top:clamp(4px,1.4vw,16px); }
.brand-intro-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand-intro-bottom > em { font:italic clamp(16px,1.6vw,22px)/1.5 var(--serif); color:var(--muted); }
.brand-intro-scroll { display:flex; align-items:center; gap:17px; min-height:52px; font-size:12px; color:var(--ink); }
.brand-intro-scroll em { display:block; font:italic 13px/1.4 var(--serif); color:var(--muted); }
.brand-scroll-arrow { font-size:28px; font-weight:400; transition:transform .3s; }
.brand-intro-scroll:hover .brand-scroll-arrow { transform:translateY(5px); }
.brand-intro-replay { justify-self:end; padding:12px 0 12px 12px; min-height:44px; background:transparent; border:0; font:400 10px/1.6 var(--sans); color:var(--muted); }
.brand-intro-replay em { font-family:var(--serif); margin-left:4px; }
.brand-intro-replay:hover { color:var(--ink); }
.brand-intro-actions{justify-self:end;display:flex;align-items:center;gap:16px}
.brand-intro-toggle{min-height:44px;padding:12px 0;background:transparent;border:0;font:400 10px/1.6 var(--sans);color:var(--muted)}
.brand-intro-toggle:hover{color:var(--ink)}
@media(max-width:600px){.brand-intro-actions{gap:4px;flex-direction:column;align-items:flex-end}.brand-intro-toggle{font-size:9px;padding:0;min-height:32px}}
@media print{.brand-intro-actions{display:none!important}}
.brand-intro-replay[hidden] { display:none; }
.brand-intro-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.brand-work-anchor { display:block; height:0; scroll-margin-top:18px; }
@media(max-width:600px) {
 .brand-intro { min-height:calc((100svh - var(--brand-header-height,134px)) * .82); padding-top:20px; padding-bottom:18px; gap:12px; }
 .brand-intro .brand-dieline-mark { width:calc(100vw - 36px); max-height:40svh; }
 .brand-intro-kicker,.brand-intro-index { font-size:9px; letter-spacing:.06em; }
 .brand-intro-subtitle { font-size:10px; letter-spacing:.08em; margin-top:15px; }
 .brand-intro-top { align-items:flex-start; gap:12px; }
 .brand-intro-center { min-height:240px; padding-block:20px; }
 .brand-intro-bottom { gap:10px; }
 .brand-intro-bottom > em { font-size:14px; }
 .brand-intro-scroll { font-size:11px; gap:9px; }
 .brand-intro-scroll em { font-size:12px; }
 .brand-intro-replay { font-size:9px; padding-left:4px; }
 .brand-scroll-arrow { font-size:24px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .brand-intro { min-height:400px; }
 .brand-intro-center { min-height:220px; }
 .brand-intro .brand-dieline-mark { max-height:180px; }
}
@media print { .brand-intro { min-height:0; break-after:page; } .brand-intro-scroll,.brand-intro-replay { display:none!important; } }

/* Diagonal charcoal chalk, clipped to the original vector letterforms. */
.brand-chalk-stroke { fill:none; stroke:#c2c1bc; stroke-width:var(--chalk-width,1.8); stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.brand-intro[data-phase="complete"] .brand-chalk-stroke { stroke-dashoffset:0; }
@media(prefers-reduced-motion:reduce) { .brand-intro .brand-chalk-stroke { stroke-dashoffset:0; } }
@media print { .brand-intro .brand-chalk-stroke { stroke-dashoffset:0!important; } }

.brand-dieline-flaps { fill:currentColor; fill-opacity:.065; stroke:none; }

/* A quiet, dashed readout of the existing six-second particle assembly. */
.brand-intro-center{position:relative}
.brand-intro-progress{position:absolute;top:var(--brand-progress-top,80%);left:50%;width:182px;transform:translateX(-50%);color:#96958f;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility 0s .5s}
.brand-intro-progress[hidden]{display:none}
.brand-intro[data-phase="drawing"] .brand-intro-progress{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.brand-progress-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:8px}
.brand-progress-caption>span:first-child{font:400 10px/1.5 var(--sans);letter-spacing:.14em}
.brand-progress-value{font:400 21px/1.1 var(--serif);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.brand-progress-value small{font:400 10px/1 var(--sans);margin-left:3px}
.brand-progress-track{height:2px;background:repeating-linear-gradient(to right,#dfddd6 0 6px,transparent 6px 10px)}
.brand-progress-fill{display:block;height:100%;width:var(--brand-progress,0%);background:repeating-linear-gradient(to right,#b7b6af 0 6px,transparent 6px 10px)}
@media(max-width:600px){.brand-intro-progress{width:160px}.brand-progress-value{font-size:19px}}
@media(prefers-reduced-motion:reduce){.brand-intro-progress{transition:none!important}}
@media print{.brand-intro-progress{display:none!important}}