/* Brand Architecture — Figma 488:387 (1920 x 10277) */
body[data-chapter="architecture"] { --dock-y: 168; --dock-x: 160; --a-blue: #3DADFF; }

/* hero: cubes are pre-blended (50% Linear Dodge on purple), so they read as soft lilac light through the flutes */
body[data-chapter="architecture"] .fh { --strip-blur: 9px; }

/* brand-shape row: Figma light row = purple square, navy diamond, purple sparkle tile, navy pinwheel */
body[data-chapter="architecture"] .ar-icons .shapes { --sa: var(--m-purple); --sb: var(--m-navy); font-size: clamp(18px, calc(31 * var(--fx)), 31px); }
.ar-icons { display: inline-block; }
.js .ar-icons[data-reveal] { transform: none; }
.js .ar-icons[data-reveal] .shape { opacity: 0; transform: scale(.3) rotate(-120deg); }
.ar-icons.is-in .shape { animation: ar-pop .9s var(--ease) both; }
.ar-icons.is-in .shape:nth-child(2) { animation-delay: .12s; }
.ar-icons.is-in .shape:nth-child(3) { animation-delay: .24s; }
.ar-icons.is-in .shape:nth-child(4) { animation-delay: .36s; }
@keyframes ar-pop { from { opacity: 0; transform: scale(.3) rotate(-120deg); } to { opacity: 1; transform: none; } }

.ar-lead { font-size: clamp(18px, calc(32 * var(--fx)), 32px); line-height: 1.5; color: var(--fg); }
.ar-hint { display: flex; align-items: center; gap: .55em; margin-top: var(--s-4); }
.ar-hint__ic { width: 1em; height: 1em; flex: none; color: var(--m-purple); transform: rotate(90deg); }

/* flash: a target reached from a cross-link pulses once */
.is-flash { animation: ar-flash 1.6s var(--ease) both; }
@keyframes ar-flash { 0% { box-shadow: 0 0 0 0 rgba(101,47,234,.0); } 18% { box-shadow: 0 0 0 6px rgba(101,47,234,.55); } 100% { box-shadow: 0 0 0 18px rgba(101,47,234,0); } }

/* ---------- 02 Brand Scale ---------- */
.ar-scale { min-height: min(86svh, 931px); }
.ar-scale__in { display: grid; gap: var(--s-6); align-content: start; padding-top: var(--s-4); }
.ar-scale__in .t-h2 { margin-top: var(--s-5); }
.ar-scale__p { max-width: 1560px; }
.ar-inline { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: .04em; transition: background-size .45s var(--ease), color .3s; }
.ar-inline:hover, .ar-inline:focus-visible { color: var(--m-purple); background-size: 100% 3px; }

/* ---------- 03 Strategic Scale ---------- */
/* desktop: one stage in Figma px (x 120..1800, y 100..930 of the slide) so the arrows land where they do in the file */
.ss { position: relative; aspect-ratio: 1680 / 830; }
.ss__head { position: absolute; left: 0; top: 0; display: grid; gap: calc(110 * var(--fx)); }
.ss__head .t-h2 { max-width: 6.5em; }
.ss__fig { position: absolute; left: 31.131%; top: 1.807%; width: 47.143%; }
.ss__svg { width: 100%; height: auto; overflow: visible; }
.ss__shape { cursor: not-allowed; outline: none; }
.ss__shape-path { fill: rgba(0,0,0,.43); transition: fill .4s var(--ease); }
.ss__stripes { pointer-events: none; }
.ss__stripes path { fill: rgba(0,0,0,.07); }
.ss__safe { cursor: pointer; outline: none; }
.ss__safe-box { fill: #fff; stroke: #000; stroke-width: 6; transition: stroke .3s, fill .3s; }
.ss__safe-label { font: 400 17px var(--font-display); fill: var(--m-navy); }
.ss__icon { color: var(--m-navy); fill: var(--m-navy); transform-box: fill-box; transform-origin: center; opacity: 0; scale: .4; rotate: -60deg; transition: opacity .35s var(--ease), scale .7s var(--ease), rotate .7s var(--ease); }
.ss__icon.is-on { opacity: 1; scale: 1; rotate: 0deg; }
.ss__icon[data-icon="sparkle"] { transform-box: view-box; }
.ss__icon[data-icon="sparkle"] path { transform-box: fill-box; }
/* zone states: a = safe area, b = outer structure */
.ss[data-hot="a"] .ss__safe-box, .ss__safe:focus-visible .ss__safe-box { stroke: var(--m-purple); fill: #F6F3FF; }
.ss[data-hot="b"] .ss__shape-path, .ss__shape:focus-visible .ss__shape-path { fill: rgba(14,19,60,.62); }
.ss__shape:focus-visible .ss__shape-path { stroke: var(--m-purple); stroke-width: 5; }
.ss.is-shake .ss__shape { animation: ss-shake .5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ss-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }

.ss__note { position: absolute; font-size: clamp(13px, calc(18 * var(--fx)), 18px); line-height: 1.45; color: var(--m-navy); transition: opacity .4s var(--ease), color .3s; }
.ss__note--a { left: 1.31%; top: 73.3%; width: 19.2%; }
.ss__note--b { left: 81.6%; top: 2.3%; width: 18.4%; }
.ss[data-hot="a"] .ss__note--b, .ss[data-hot="b"] .ss__note--a { opacity: .3; }
.ss[data-hot="a"] .ss__note--a, .ss[data-hot="b"] .ss__note--b { color: var(--m-purple); }
.ss__note.is-flash { border-radius: 8px; }
.ss__to { display: block; margin-top: .55em; font: 600 clamp(11px, calc(13 * var(--fx)), 13px)/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-soft); }
.ss[data-hot="a"] .ss__note--a .ss__to, .ss[data-hot="b"] .ss__note--b .ss__to { color: var(--m-purple); }

/* mind-map legend: the diagram's own fills and connector colours (click to copy) */
.mm__legend { display: grid; gap: 6px; margin: 0; }
.mm__legend > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm__legend dt { width: 3.6em; font: 600 11px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft); }
.mm__legend dd { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.mm__sw { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font: 500 12px/1 ui-monospace, Menlo, monospace; color: var(--fg); background: var(--tile); transition: background .2s, transform .3s var(--ease); }
.mm__sw:hover, .mm__sw:focus-visible { background: rgba(101,47,234,.1); transform: translateY(-1px); }
.mm__sw i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.mm__sw--line i { height: 4px; width: 16px; border-radius: 2px; }
.ss__arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ss__arrow path { fill: none; stroke: var(--m-navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, opacity .4s, stroke-width .3s; }
.ss[data-hot="a"] .ss__arrow[data-zone="b"], .ss[data-hot="b"] .ss__arrow[data-zone="a"] { opacity: .25; }
.ss[data-hot="a"] .ss__arrow[data-zone="a"] path, .ss[data-hot="b"] .ss__arrow[data-zone="b"] path { stroke: var(--m-purple); stroke-width: 3.2; }
.js .ss__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ss.is-drawn .ss__arrow path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .5s, stroke .3s, opacity .4s, stroke-width .3s; }
.ss__picker { position: absolute; left: 54.7%; top: calc(100% + var(--s-3)); translate: -50% 0; display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.ss__opts { display: flex; gap: 6px; }
.ss__opt { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--m-navy); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .25s, background .25s, color .25s, transform .35s var(--ease); }
.ss__opt svg { width: 20px; height: 20px; fill: currentColor; }
.ss__opt:hover { box-shadow: inset 0 0 0 1.5px var(--m-navy); transform: translateY(-2px); }
.ss__opt[aria-checked="true"] { background: var(--m-navy); color: #fff; box-shadow: none; }
.ar-ss { padding-bottom: calc(var(--s-8) + 64px); }

/* ---------- 04 Brand Mindmap divider (stand-in for Figma video 684:6182) ---------- */
.ar-div { min-height: min(100svh, 980px); display: grid; align-items: center; padding-block: var(--s-7); }
.ar-div::after { content: ""; position: absolute; left: calc(95 * var(--fx)); right: calc(145 * var(--fx)); bottom: 0; height: 2px; background: var(--m-lilac); }
.ar-div__stage { position: absolute; inset: 0; display: grid; align-items: center; justify-items: start; padding-left: calc(140 * var(--fx)); pointer-events: none; }
.ar-div__svg { width: min(68vw, 96svh, 900px); height: auto; overflow: visible; --p: 0; }
.ar-div__grid { position: relative; display: grid; justify-items: end; }
.ar-div__title { width: min(100%, calc(430 * var(--fx) + 160px)); max-width: 6em; }
.dv-spin { animation: dv-spin 220s linear infinite; transform-box: view-box; transform-origin: 0 0; }
.dv-rings { animation: dv-spin 300s linear infinite reverse; transform-box: view-box; transform-origin: 0 0; }
@keyframes dv-spin { to { rotate: 360deg; } }
.dv-ring { fill: none; stroke: var(--m-lilac); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: calc(.25 + var(--p) * .45); }
.dv-ring--dash { stroke-dasharray: 3 9; }
.dv-link { fill: none; stroke: var(--m-navy); stroke-width: 2; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) * 1.2 - var(--dd)) * 5, 1)); }
.dv-link--blue { stroke: var(--a-blue); opacity: .8; }
.dv-node { transform-box: fill-box; transform-origin: center; opacity: clamp(0, (var(--p) * 1.2 - var(--dd)) * 6, 1); scale: clamp(.2, (var(--p) * 1.2 - var(--dd)) * 6, 1); }
.dv-node--concept { fill: var(--m-purple); }
.dv-node--outcome { fill: var(--m-lilac); }
.dv-core { fill: var(--m-purple); }
.dv-pulse { fill: none; stroke: var(--m-purple); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: dv-pulse 3.6s var(--ease) infinite; }
.dv-pulse:nth-of-type(2) { animation-delay: 1.2s; }
.dv-pulse:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes dv-pulse { 0% { scale: .2; opacity: .8; } 100% { scale: 1; opacity: 0; } }

/* ---------- 05 Mind Map Questionnaire ---------- */
.ar-q__top { display: grid; grid-template-columns: minmax(0, 456fr) minmax(0, 1067fr); gap: calc(112 * var(--fx)); align-items: start; margin-bottom: var(--s-7); }
.ar-q__top .t-h2 { max-width: 8em; }
.ar-q__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, calc(18 * var(--fx)), 18px); }
.ar-ans {
  display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; min-height: clamp(64px, calc(86 * var(--fx)), 86px); padding: .6em .7em; border-radius: 6px;
  text-align: center; font: 600 clamp(14px, calc(18 * var(--fx)), 18px)/1.3 var(--font-display); color: var(--m-navy); background: var(--tile);
}
.ar-ans--link { background: #fff; box-shadow: inset 0 0 0 3px #757575; cursor: pointer; transition: box-shadow .25s, background .25s, transform .35s var(--ease), color .25s; }
.ar-ans--link:hover, .ar-ans--link:focus-visible { box-shadow: inset 0 0 0 3px var(--m-purple); color: var(--m-purple); transform: translateY(-3px); }
.ar-ans--hl { background: var(--m-lilac); box-shadow: none; }
.ar-ans--hl:hover, .ar-ans--hl:focus-visible { background: var(--m-lilac-2); box-shadow: inset 0 0 0 3px var(--m-navy); color: var(--m-navy); }
.ar-ans__go { width: .95em; height: .95em; flex: none; transform: rotate(90deg); transition: transform .35s var(--ease); }
.ar-ans--link:hover .ar-ans__go { transform: rotate(90deg) translateX(3px); }

/* ---------- 06 Mind Map Story ---------- */
.mm { position: relative; }
.mm__head { display: grid; gap: var(--s-3); justify-items: start; }
.mm__hint { max-width: 34ch; }
.mm__views { margin-top: var(--s-1); }
/* map in Figma px: x 150..1806, y 4770..7150 */
.mm__map { position: relative; aspect-ratio: 1656 / 2380; container-type: inline-size; }
.mm[data-view="map"] .mm__head { position: absolute; left: 0; top: 0; z-index: 3; width: 36%; }
.mm[data-view="map"] .mm__head .t-h2 { max-width: 5em; }
.mm__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mm-link path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s var(--ease), stroke-width .3s, stroke .3s; }
.mm-link__flow { stroke: #fff; stroke-width: 2.5 !important; stroke-dasharray: .06 .94; opacity: 0; }
.js .mm:not(.is-in) .mm-link__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .mm:not(.is-in) .mm-link__head { opacity: 0; }
.mm.is-in:not(.is-ready) .mm-link__line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) calc(var(--d) * 110ms + 120ms); }
.mm.is-in:not(.is-ready) .mm-link__head { transition: opacity .4s calc(var(--d) * 110ms + 700ms); }
.mm.has-focus .mm-link:not(.is-lit) path { opacity: .12; }
.mm-link.is-lit path { stroke-width: 6; }
.mm-link.is-lit .mm-link__flow { opacity: .9; animation: mm-flow 1.4s linear infinite; }
@keyframes mm-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.mm__nodes { position: absolute; inset: 0; }
.mm-node {
  position: absolute; display: grid; place-items: center; padding: 0 .6em; border-radius: 6px; text-align: center;
  font: 700 max(10px, calc(var(--fs, 20) / 1656 * 100cqw))/1.22 var(--font-display), "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: -.005em; color: #fff; background: var(--m-purple);
  transition: opacity .35s var(--ease), filter .35s, transform .45s var(--ease), box-shadow .3s, background .3s;
}
.mm-node--outcome { background: var(--m-lilac); color: var(--m-navy); }
.mm-node:hover, .mm-node.is-focus { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(14,19,60,.6); }
.mm-node:focus { outline: none; }
.mm-node:focus-visible, .mm-node[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--m-navy), 0 18px 34px -16px rgba(14,19,60,.7); }
.mm-node[aria-pressed="true"] { transform: translateY(-3px) scale(1.04); z-index: 2; }
.mm.has-focus .mm-node:not(.is-lit) { opacity: .2; filter: saturate(.3); }
.mm-node.is-hit { animation: mm-hit 1.4s var(--ease); }
@keyframes mm-hit { 0% { box-shadow: 0 0 0 0 rgba(101,47,234,.7); } 100% { box-shadow: 0 0 0 26px rgba(101,47,234,0); } }
.js .mm:not(.is-in) .mm-node { opacity: 0; transform: translateY(14px) scale(.94); }
.mm.is-in:not(.is-ready) .mm-node { transition: opacity .6s var(--ease) calc(var(--d) * 110ms), transform .9s var(--ease) calc(var(--d) * 110ms); }

/* inspector: floating card while the map section is on screen */
.mm-insp {
  position: fixed; right: clamp(16px, calc(var(--gutter) * .55), 72px); bottom: 24px; z-index: 58; width: min(380px, calc(100vw - 32px)); max-height: min(70svh, 560px); overflow: auto;
  padding: 18px 20px 16px; border-radius: 16px; color: #fff; background: rgba(14,19,60,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -24px rgba(14,19,60,.6);
  font-size: 14px; line-height: 1.4; display: grid; gap: 12px; transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s;
}
.mm-insp.is-away { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
.mm-insp.is-new { animation: mm-in .45s var(--ease); }
@keyframes mm-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.mm-insp__x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.mm-insp__x:hover { background: rgba(255,255,255,.12); }
.mm-insp__x svg { width: 14px; height: 14px; }
.mm-insp__title { font: 700 20px/1.2 var(--font-display), "IBM Plex Sans Arabic", sans-serif; padding-right: 34px; }
.mm-insp__k { display: block; margin-bottom: 4px; font: 600 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--m-lilac); }
.mm-insp__path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.mm-insp__path + .mm-insp__path { margin-top: 4px; }
.mm-insp__sep { opacity: .45; font-size: 12px; }
.mm-insp__crumb { padding: 2px 6px; border-radius: 6px; font: 500 13px/1.3 var(--font-display), "IBM Plex Sans Arabic", sans-serif; color: rgba(255,255,255,.86); transition: background .2s, color .2s; }
.mm-insp__crumb:hover, .mm-insp__crumb:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.mm-insp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-insp__chip { display: inline-flex; align-items: center; gap: .4em; padding: 6px 10px; border-radius: 8px; font: 600 13px/1.2 var(--font-display), "IBM Plex Sans Arabic", sans-serif; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background .2s, box-shadow .2s; }
.mm-insp__chip:hover, .mm-insp__chip:focus-visible { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.mm-insp__chip svg { width: 12px; height: 12px; }
.mm-insp__chip--to { background: var(--m-purple); box-shadow: none; }
.mm-insp__chip--to.is-outcome { background: var(--m-lilac); color: var(--m-navy); }
.mm-insp__empty { color: rgba(255,255,255,.7); }

/* outline view (default on phones) */
.mm__outline { margin-top: var(--s-5); }
.mm-ol, .mm-ol ul { display: grid; gap: 6px; }
.mm-ol ul { margin: 6px 0 0 14px; padding-left: 14px; box-shadow: inset 1.5px 0 0 var(--line); }
.mm-ol__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: 6px; text-align: left;
  font: 700 15px/1.25 var(--font-display), "IBM Plex Sans Arabic", sans-serif; color: #fff; background: var(--m-purple);
  transition: opacity .3s, filter .3s, box-shadow .25s;
}
.mm-ol__btn--outcome { background: var(--m-lilac); color: var(--m-navy); }
.mm-ol__btn:focus-visible, .mm-ol__btn[aria-pressed="true"] { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-navy); }
.mm.has-focus .mm-ol__btn:not(.is-lit) { opacity: .25; filter: saturate(.3); }

/* ---------- 07 Logo Feelings ---------- */
.ar-lf { padding-block: var(--s-7) var(--s-8); }
.ar-lf__h { font: 700 clamp(22px, calc(32 * var(--fx)), 32px)/1.2 var(--font-display); letter-spacing: -.01em; margin-bottom: var(--s-7); }
.ar-lf__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--s-7); column-gap: var(--s-4); max-width: 1640px; }
.ar-kw { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, calc(14 * var(--fx)), 14px); font: 700 clamp(20px, calc(32 * var(--fx)), 32px)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--m-navy); text-align: left; }
.ar-kw::after { content: ""; width: clamp(80px, calc(140 * var(--fx)), 140px); height: clamp(4px, calc(6 * var(--fx)), 6px); background: var(--m-purple); transition: width .55s var(--ease); }
.ar-kw__t { position: relative; z-index: 0; padding: .3em 0; }
.ar-kw.is-hl .ar-kw__t { padding-inline: .32em; }
.ar-kw.is-hl::after { margin-left: .2em; }
.ar-kw.is-hl .ar-kw__t { color: #fff; }
.ar-kw.is-hl .ar-kw__t::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: clamp(12px, calc(24 * var(--fx)), 24px); background: var(--m-purple); transform-origin: left center; transition: transform .9s var(--ease) .25s; }
.js .ar-lf li[data-reveal]:not(.is-in) .ar-kw.is-hl .ar-kw__t::before { transform: scaleX(0); }
button.ar-kw { cursor: pointer; }
button.ar-kw:hover::after, button.ar-kw:focus-visible::after { width: 100%; }
button.ar-kw:hover .ar-kw__t, button.ar-kw:focus-visible .ar-kw__t { color: var(--m-purple); }
button.ar-kw.is-hl:hover .ar-kw__t, button.ar-kw.is-hl:focus-visible .ar-kw__t { color: #fff; }
button.ar-kw.is-hl:hover .ar-kw__t::before { background: var(--m-purple-deep); }
button.ar-kw:focus-visible { outline-offset: 6px; }
.ar-lf__wide { grid-column: 1 / -1; }

/* ---------- 08 Brand Moodboard ---------- */
.ar-mb__grid { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 893fr); gap: calc(147 * var(--fx)); align-items: start; }
.ar-mb__text { display: grid; gap: var(--s-6); }
.ar-mb__text .t-h2 { max-width: 6em; }
.ar-mb__copy { display: grid; gap: 1.1em; font-size: clamp(18px, calc(32 * var(--fx)), 32px); line-height: 1.5; max-width: 22em; }
.ar-mosaic { position: relative; aspect-ratio: 893 / 891; background: #0b0b0d; }
.ar-tile { position: absolute; left: calc(var(--x) / 893 * 100%); top: calc(var(--y) / 891 * 100%); width: calc(var(--w) / 893 * 100%); height: calc(var(--h) / 891 * 100%); overflow: hidden; cursor: zoom-in; transition: opacity .45s var(--ease), filter .45s; }
.ar-tile__in { position: absolute; inset: -7% 0; display: block; }
.ar-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ar-mosaic:hover .ar-tile:not(:hover), .ar-mosaic:has(.ar-tile:focus-visible) .ar-tile:not(:focus-visible) { opacity: .42; }
.ar-tile:hover img, .ar-tile:focus-visible img { transform: scale(1.07); }
.ar-tile:focus-visible { outline: 3px solid var(--m-purple); outline-offset: -3px; border-radius: 0; z-index: 1; }

/* ---------- 09 Brand Textures ---------- */
.ar-tx { min-height: min(100svh, 980px); color: #fff; background: var(--m-lilac); display: grid; align-items: center; isolation: isolate; }
.ar-tx__bg {
  position: absolute; inset: -24px; z-index: -1; pointer-events: none;
  background: url("../img/architecture/textures-bg-puffy-logo.webp") 43% 43% / 133.3% auto no-repeat;
  transition: transform 1.2s var(--ease), filter .8s;
}
.ar-tx.is-hover .ar-tx__bg { filter: saturate(1.15) brightness(1.04); }
.ar-tx__in { position: relative; width: 100%; }
.ar-tx__h { font: 700 clamp(26px, calc(36 * var(--fx)), 36px)/1.15 var(--font-display); letter-spacing: -.01em; margin-bottom: calc(118 * var(--fx)); text-shadow: 0 4px 24px rgba(14,19,60,.25); }
.ar-tx__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20 * var(--fx)); }
.ar-tx__hint { margin-top: var(--s-4); color: #fff; opacity: .9; text-shadow: 0 2px 12px rgba(14,19,60,.35); }
.tx-card {
  position: relative; display: grid; align-content: start; gap: clamp(14px, calc(24 * var(--fx)), 24px); height: 100%; min-height: clamp(380px, calc(540 * var(--fx)), 540px);
  padding: clamp(16px, calc(28 * var(--fx)), 28px); border-radius: clamp(18px, calc(30 * var(--fx)), 30px);
  background: rgba(159,173,211,.5); -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 30px 60px -36px rgba(14,19,60,.55);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .4s;
}
.tx-card:hover, .tx-card:focus-within { background: rgba(159,173,211,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 70px -34px rgba(14,19,60,.7); }
.tx-card__media { position: relative; aspect-ratio: 485 / 200; border-radius: clamp(10px, calc(16 * var(--fx)), 16px); overflow: hidden; background: rgba(14,19,60,.2); }
.tx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tx-card:hover .tx-card__media img { transform: scale(1.06); }
.tx-card__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
.tx-card__title { display: flex; align-items: flex-start; gap: .7em; min-width: 0; font: 700 clamp(17px, calc(22 * var(--fx)), 22px)/1.3 var(--font-display); }
.tx-card__title img { width: 1.1em; height: 1.1em; flex: none; margin-top: .1em; }
.tx-card__tags { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; flex: none; }
.tx-card__tags li { padding: .5em .7em; border-radius: 5px; background: rgba(255,255,255,.16); font: 400 clamp(12px, calc(15 * var(--fx)), 15px)/1 var(--font-display); }
.tx-card__body { font-size: clamp(15px, calc(20 * var(--fx)), 20px); line-height: 1.5; max-width: 30em; }
.tx-card__hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: zoom-in; }
.tx-card__hit:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }
.tx-card__exp { position: absolute; top: calc(clamp(16px, calc(28 * var(--fx)), 28px) + 10px); right: calc(clamp(16px, calc(28 * var(--fx)), 28px) + 10px); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(14,19,60,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .45s var(--ease); }
.tx-card__exp svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-card:hover .tx-card__exp, .tx-card__hit:focus-visible .tx-card__exp { opacity: 1; transform: none; }
@media (hover: none) { .tx-card__exp { opacity: 1; transform: none; } }

/* full-bleed texture view */
.txx { position: fixed; inset: 0; z-index: 105; color: #fff; visibility: hidden; }
.txx.is-open, .txx.is-closing { visibility: visible; }
.txx__media { position: absolute; inset: 0; overflow: hidden; background: var(--m-navy); clip-path: inset(var(--t, 40%) var(--r, 40%) var(--b, 40%) var(--l, 40%) round var(--rad, 16px)); transition: clip-path .85s var(--ease); }
.txx.is-open .txx__media { clip-path: inset(0 0 0 0 round 0); }
.txx__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 2.4s var(--ease); }
.txx__media img.is-on { opacity: 1; transform: none; }
.txx__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14,19,60,.86) 0%, rgba(14,19,60,.55) 38%, rgba(14,19,60,0) 70%), linear-gradient(0deg, rgba(14,19,60,.75), rgba(14,19,60,0) 45%); opacity: 0; transition: opacity .6s var(--ease); }
.txx__body { position: absolute; left: var(--gutter); bottom: calc(var(--s-7) + 64px); width: min(620px, calc(100% - 2 * var(--gutter))); display: grid; gap: var(--s-3); opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.txx.is-open .txx__scrim, .txx.is-open .txx__body { opacity: 1; transform: none; transition-delay: .35s; }
.txx__count { letter-spacing: .2em; color: var(--m-lilac-2); }
.txx__title { display: flex; align-items: center; gap: .45em; font: 700 clamp(34px, calc(72 * var(--fx)), 72px)/1.05 var(--font-display); letter-spacing: -.03em; }
.txx__title img { width: .6em; height: .6em; }
.txx__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.txx__tags li { padding: .5em .8em; border-radius: 5px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--t-small); line-height: 1; }
.txx__desc { font-size: clamp(17px, calc(26 * var(--fx)), 26px); line-height: 1.5; color: rgba(255,255,255,.94); }
.txx__nav { position: absolute; left: var(--gutter); bottom: var(--s-5); display: flex; gap: 8px; opacity: 0; transition: opacity .5s .45s; }
.txx.is-open .txx__nav { opacity: 1; }
.txx__opt { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 12px; font: 600 var(--t-micro)/1 var(--font-display); background: rgba(14,19,60,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: box-shadow .25s, background .25s; }
.txx__opt img { width: 54px; height: 34px; object-fit: cover; border-radius: 7px; }
.txx__opt:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.txx__opt[aria-pressed="true"] { background: #fff; color: var(--m-navy); box-shadow: none; }
html.txx-lock { overflow: hidden; }
.txx__close svg { width: 18px; height: 18px; }
.txx__close { position: absolute; top: var(--s-4); right: var(--s-4); background: rgba(14,19,60,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .4s .3s, background .25s; }
.txx.is-open .txx__close { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .ar-q__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ss { aspect-ratio: auto; display: grid; gap: var(--s-4); }
  .ss__head, .ss__fig, .ss__note, .ss__picker { position: static; width: auto; translate: none; }
  .ss__head { gap: var(--s-4); }
  .ss__fig { width: min(100%, 520px); justify-self: center; margin-top: var(--s-3); }
  .ss__arrows { display: none; }
  .ss__note { font-size: 16px; padding: 12px 14px; border-radius: 10px; background: var(--tile); }
  .ss[data-hot="a"] .ss__note--a, .ss[data-hot="b"] .ss__note--b { background: rgba(101,47,234,.08); }
  .ss__picker { justify-self: center; flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
  .ar-ss { padding-bottom: var(--s-8); }
  .ar-q__top { grid-template-columns: 1fr; gap: var(--s-4); }
  .ar-q__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ar-mb__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .ar-tx__cards { grid-template-columns: 1fr; gap: var(--s-3); max-width: 620px; }
  .tx-card { min-height: 0; }
  .ar-tx__bg { background-size: auto 115%; background-position: 50% 30%; }
  .ar-lf__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .ar-div { min-height: 0; padding-block: var(--s-6) var(--s-7); align-items: start; }
  .ar-div__stage { position: relative; inset: auto; padding: 0; justify-items: center; }
  .ar-div__svg { width: min(92vw, 520px); }
  .ar-div__grid { justify-items: start; margin-top: var(--s-3); }
  .ar-div__title { max-width: none; width: auto; }
}
@media (max-width: 760px) {
  .mm[data-view="map"] .mm__head { position: static; width: auto; margin-bottom: var(--s-4); }
  .mm__map { overflow-x: auto; }
  .txx__body { bottom: calc(var(--s-5) + 70px); }
  .txx__opt span { display: none; }
  .txx__opt { padding: 6px; }
}
@media (max-width: 520px) {
  .ar-q__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-card__row { flex-direction: column; }
  .tx-card__tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-link.is-lit .mm-link__flow { animation: none; opacity: 0; }
  .js .ar-icons[data-reveal] .shape { opacity: 1; transform: none; }
}