/* RAYA · brand guide page styles (br / bn prefixes) */
body.brand{background:var(--paper)}
.bn-top{position:sticky;inset-block-start:0;z-index:150;height:66px;display:flex;align-items:center;gap:20px;padding-inline:clamp(14px,3vw,40px);background:rgba(14,10,7,.88);backdrop-filter:blur(14px);color:#F5EEE2}
.bn-nav{display:flex;gap:4px}.bn-nav a{padding:.4rem .9rem;border-radius:var(--r-pill);font:600 13.5px var(--f-display);color:#D8C9B0;transition:all var(--t-fast)}.bn-nav a:hover{background:var(--amber);color:var(--ink)}
@media (max-width:900px){.bn-nav{display:none}}
.bn-hero{position:relative;padding-block:clamp(4rem,8vw,8rem);overflow:hidden;isolation:isolate}
.bn-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 10% 100%,rgba(242,163,58,.35),transparent 65%),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 28px)}
.bn-hero .display{max-width:12ch;font-size:clamp(2.8rem,1rem + 7vw,7.4rem)}
.bn-mark-big{position:absolute;inset-inline-start:6%;inset-block-end:-8%;width:clamp(180px,28vw,420px);opacity:.95;filter:drop-shadow(0 0 60px rgba(242,163,58,.45));transform:rotate(-4deg)}
@media (max-width:760px){.bn-mark-big{inset-block-end:auto;inset-block-start:2rem;opacity:.22}}
/* creative core */
.core-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.core{padding:1.4rem;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:.6rem;position:relative;background:var(--card);box-shadow:var(--sh-1);transition:transform var(--t-base) var(--ease-spring),box-shadow var(--t-base)}
.core:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-3)}
.core .n{font-family:var(--f-num);font-weight:900;font-size:2.8rem;line-height:1;color:var(--amber);-webkit-text-stroke:1.5px var(--ink);direction:ltr;text-align:start}
.core h3{font-size:var(--fs-18)}
.core .giant-q{font:800 1.45rem/1.45 var(--f-display);text-wrap:balance}
.core .giant-q b{background:var(--amber);padding:0 .25em;border-radius:.3em;font-weight:800}
.c-q{grid-column:span 2;background:var(--amber)}.c-q .giant-q{font-size:2.2rem}.c-q .giant-q b{background:var(--ink);color:var(--amber)}
.c-r{background:var(--rust);color:#fff}.c-r .n{color:var(--amber-lt)}.c-r .giant-q b{background:var(--ink);color:#fff}
.c-m{background:var(--dusk);color:#fff}.c-m .giant-q b{background:var(--amber);color:var(--ink)}.c-m .n{color:var(--amber-lt)}
.c-w{background:var(--ink);color:#F5EEE2}
.c-h{grid-column:1/-1;background:var(--sage);color:#fff;flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem 2rem}.c-h .giant-q b{background:var(--ink)}.c-h .n{color:var(--amber-lt)}.c-w .giant-q b{background:var(--amber);color:var(--ink)}
@media (max-width:1100px){.core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:620px){.core-grid{grid-template-columns:1fr}.c-q{grid-column:auto}.c-h{flex-direction:column;align-items:flex-start}}
.posmap{position:relative;aspect-ratio:16/8;min-height:300px;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);background:var(--card);margin-top:1rem;background-image:linear-gradient(var(--hair) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--hair) 1.5px,transparent 1.5px);background-size:50% 50%;background-position:center}
.posmap .ax{position:absolute;font:700 11.5px var(--f-display);color:var(--text-2);padding:4px 10px}
.ax-t{inset-block-start:4px;inset-inline-start:50%;transform:translateX(50%)}.ax-b{inset-block-end:4px;inset-inline-start:50%;transform:translateX(50%)}.ax-l{inset-inline-start:6px;top:50%}.ax-r{inset-inline-end:6px;top:50%}
.posmap .dotp{position:absolute;inset-inline-start:var(--x);top:var(--y);transform:translate(50%,-50%);padding:.35rem .8rem;border-radius:var(--r-pill);background:var(--tint);border:var(--bw-h) solid var(--ink);font:600 12px var(--f-display);font-style:normal;white-space:nowrap}
.posmap .dotp.me{background:var(--amber);border:var(--bw) solid var(--ink);box-shadow:var(--sh-2);font-weight:800;font-size:14px;animation:float-y 4s ease-in-out infinite}
.posmap .dotp:empty{width:100px;height:56px;border:2px dashed var(--amber-dp);background:transparent;border-radius:16px}
/* name */
.name-viz{aspect-ratio:1.1;border-radius:var(--r-xl);background:var(--night);border:var(--bw) solid var(--ink);position:relative;display:grid;place-items:center;overflow:hidden;color:#F5EEE2;padding:1rem}
.name-viz::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 26px)}
.nv-ray{position:absolute;inset-block:0;inset-inline-start:30%;width:46%;background:conic-gradient(from 160deg at 0% 0%,rgba(242,163,58,.55),transparent 40%);filter:blur(6px);transform-origin:top;animation:float-y 6s ease-in-out infinite}
.nv-word{position:relative;font:900 clamp(2.4rem,6vw,4.6rem)/1 var(--f-display);text-align:center;direction:ltr}
.nv-word span:first-child{color:var(--amber);text-shadow:0 0 30px rgba(242,163,58,.7)}.nv-word b{opacity:.6}
/* logo */
.logo-stage{position:relative;min-height:360px;border:var(--bw) solid var(--ink);border-radius:var(--r-xl);background:var(--card);display:grid;place-items:center;overflow:hidden;box-shadow:var(--sh-3)}
.logo-stage .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:24px 24px;opacity:.7}
.lm-big{position:relative;width:min(70%,260px);filter:drop-shadow(0 20px 30px rgba(23,17,12,.25))}
.logo-stage .an{position:absolute;font:700 12px var(--f-display);background:var(--ink);color:var(--amber);padding:.25rem .8rem;border-radius:var(--r-pill)}
.an.a1{inset-block-start:16%;inset-inline-start:8%}.an.a2{inset-block-end:18%;inset-inline-end:6%;background:var(--amber);color:var(--ink)}.an.a3{inset-block-end:8%;inset-inline-start:8%}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lg-c{aspect-ratio:1.3;border-radius:var(--r-md);border:var(--bw) solid var(--ink);display:grid;place-items:center;position:relative}
.lg-c .cap{position:absolute;inset-block-end:8px;font:600 11px var(--f-display);opacity:.8}
.clear-demo{display:grid;place-items:center;margin-top:12px;background:repeating-linear-gradient(45deg,var(--tint) 0 8px,transparent 8px 16px);padding:14px;border-radius:var(--r-sm)}
.cd-box{background:var(--paper);padding:20px;outline:2px dashed var(--amber-dp);outline-offset:-2px}
/* colours */
.clr-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.clr{aspect-ratio:.82;background:var(--c);color:var(--t);border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:1rem;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:12.5px;line-height:1.5;transition:transform var(--t-base) var(--ease-spring)}
.clr:hover{transform:translateY(-6px) rotate(-1deg)}
.clr b{font:800 15px var(--f-display)}.clr code{font:700 12px var(--f-num);opacity:.85;direction:ltr;text-align:start}
.clr.big{grid-column:span 2;aspect-ratio:auto;box-shadow:var(--sh-3)}
@media (max-width:560px){.clr.big{grid-column:auto}}
/* imagery */
.img-mosaic{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:240px 240px;grid-template-areas:"a b c" "a d d";gap:14px}
.img-mosaic figure{margin:0;height:100%}.img-mosaic img{height:100%}
@media (max-width:760px){.img-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:200px 200px 200px;grid-template-areas:"a a" "b c" "d d"}}
/* applications */
.soc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.post{aspect-ratio:4/5;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:1.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.post h4{font:800 clamp(1.3rem,2vw,1.75rem)/1.4 var(--f-display)}
.post .p-cta{align-self:flex-start;background:var(--ink);color:var(--amber);padding:.45rem 1.1rem;border-radius:var(--r-pill);font:700 13px var(--f-display)}
.post .p-cta.amber{background:var(--amber);color:var(--ink)}
.p1{background:var(--amber)}.p2{background:var(--rust);color:#fff}.p3{background:var(--ink);color:#F5EEE2}.p4{background:var(--dusk);color:#fff}
.p3 .k-chip{font:900 3.4rem/1 var(--f-num);color:var(--amber);text-shadow:0 0 30px rgba(242,163,58,.6);direction:ltr}
.p2 .bub{align-self:flex-start;background:#fff;color:var(--ink);padding:.4rem .9rem;border-radius:16px 16px 16px 4px;font-size:13px;font-weight:600;border:var(--bw-h) solid var(--ink)}.p2 .b2{align-self:flex-end;background:var(--amber);border-radius:16px 16px 4px 16px}
.story-mock{aspect-ratio:9/16;max-width:260px;border-radius:26px;border:var(--bw) solid var(--ink);overflow:hidden;position:relative;color:#fff;box-shadow:var(--sh-3)}
.story-mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story-mock::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,10,7,.92),transparent 60%)}
.story-mock .sb{position:absolute;top:12px;inset-inline:12px;display:flex;gap:4px;z-index:2}.story-mock .sb i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}.story-mock .sb i.on{background:#fff}
.sm-t{position:absolute;inset-inline:16px;inset-block-end:16px;z-index:2;display:grid;gap:4px}.sm-t .bigs{font-size:3.6rem;color:var(--amber);line-height:1;direction:ltr;text-align:start}
.bcard{aspect-ratio:1.75;border:var(--bw) solid var(--ink);border-radius:14px;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--sh-2);max-width:340px}
.bcard.front{background:var(--ink);color:#F5EEE2;align-items:flex-start}.bcard.back{background:var(--card);font-size:12.5px;gap:3px;justify-content:flex-start}.bcard.back ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:3px}.bcard.back li{display:flex;gap:6px;align-items:center}
.quote-mock{background:#FFFCF6;border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:1rem;position:relative;overflow:hidden;box-shadow:var(--sh-2);max-width:340px}
.quote-mock .qh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-block-end:.7rem;border-block-end:var(--bw) solid var(--ink);margin-block-end:.4rem}.quote-mock .qh small{display:block;color:var(--muted)}
.quote-mock .qrow{display:flex;justify-content:space-between;padding:.45rem 0;border-block-end:1.5px dashed var(--hair);font-size:13px}.quote-mock .qf{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;font-size:12px;color:var(--muted)}
.quote-mock .stamp{position:absolute;inset-block-end:40px;inset-inline-start:14px;transform:rotate(-12deg);border:3px solid var(--rust);color:var(--rust);font:900 1rem var(--f-display);padding:.1rem .7rem;border-radius:8px;opacity:.8}
.wa-mock{background:#E7DECF;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);padding:.8rem;display:grid;gap:8px;max-width:340px;box-shadow:var(--sh-2);background-image:radial-gradient(rgba(23,17,12,.07) 1px,transparent 1px);background-size:14px 14px}
.wa-h{display:flex;gap:8px;align-items:center;background:#075E54;color:#fff;margin:-.8rem -.8rem .2rem;padding:.7rem 1rem;border-radius:var(--r-lg) var(--r-lg) 0 0;font:700 14px var(--f-display)}
.wb{max-width:86%;padding:.5rem .8rem;border-radius:12px;font-size:13px;line-height:1.7;position:relative}.wb small{display:block;text-align:end;font-size:10px;color:#6b6b6b;margin-top:2px}
.wb.in{background:#fff;justify-self:start;border-end-start-radius:2px}.wb.out{background:#D9FDD3;justify-self:end;border-end-end-radius:2px}
.plate{background:linear-gradient(135deg,#b08a3e,#e6c27a 40%,#a97a2a);padding:10px;border-radius:12px;max-width:320px;box-shadow:var(--sh-2);border:var(--bw) solid var(--ink)}.pl-in{background:var(--ink);color:var(--amber);border-radius:6px;padding:1.2rem;display:grid;gap:6px;place-items:center;text-align:center}.pl-in b{letter-spacing:.3em;font-size:1.1rem}.pl-in small{color:#D8C9B0}
.sticker-mock{display:flex;gap:12px;align-items:center;background:var(--amber);border:var(--bw) solid var(--ink);border-radius:var(--r-md);padding:.8rem 1rem;max-width:320px;box-shadow:var(--sh-2);transform:rotate(-2deg)}.sticker-mock small{display:block;font-size:11.5px}
.qr{width:64px;height:64px;flex:none;background:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/16px 16px,var(--paper);border:3px solid var(--ink);border-radius:6px}
.sig{border-inline-start:4px solid var(--amber);padding-inline-start:12px;display:grid;gap:3px;max-width:340px}

@media (max-width:700px){.posmap{aspect-ratio:auto;height:380px}.posmap .dotp{white-space:normal;max-width:120px;text-align:center}.posmap .ax{font-size:10.5px}}