/* Brand (brand/index.html), scoped to main.pg-brand.
   23 Oct 2026: cut down to a standard corporate logo page (owner: "remove except on logo and how to use the logo").
   What stays: the logo and its three forms (each in full colour, single colour and white: owner, 23 Oct, the kit
   page's "orange only" line was wrong; near-black and white masters derived by recolouring where the kit has none), clear space, minimum size, backgrounds, do and don't, downloads, and the
   enquiry line. Every rule comes from the REKA brand kit (reka-brand-kit, brand-guidelines.html v1.0, logo chapter).
   The look is still the "living kit" (owner, 14 Oct): chamfered brand surfaces (clip-path, no border-radius), the 20px
   dot grid on panels, HUD corner brackets around logo specimens, mono spec labels, an orange-on-near-black hero. */
main.pg-brand{--nb:#0B0B0C;--sf:#161618;--cr:#F7F6F3;--hudc:rgba(251,152,0,.4);
  --dots-l:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 1.2px) 0 0/20px 20px;
  --dots-d:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/20px 20px}

/* ---------- hero: orange on near-black, the dot grid, the mark inside HUD brackets ---------- */
main.pg-brand .br-hero{position:relative;padding:176px 0 0;background:var(--dots-d),var(--nb);color:#F1F1F0;overflow:hidden}
main.pg-brand .br-hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-bottom:72px}
main.pg-brand .br-hero h1{font:600 64px/1.02 var(--sans);letter-spacing:-1.9px;text-wrap:balance;color:var(--cr)}
main.pg-brand .br-hero .lead{margin-top:18px;font-size:19px;line-height:29px;color:#B9B9BD;max-width:34em}
main.pg-brand .br-hero .acts{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
main.pg-brand .br-hero .btn-brand:hover{background:#FFA826}
main.pg-brand .br-hero .btn-brand .ba{--ba:#E65D01;--ba-fg:#0B0B0C}
main.pg-brand .br-hero .btn:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #0B0B0C}
main.pg-brand .br-sec-btn{background:transparent;color:var(--cr);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);--ol:rgba(255,255,255,.34);
  background-image:linear-gradient(to bottom right,transparent calc(50% - .8px),var(--ol) calc(50% - .8px),var(--ol) calc(50% + .8px),transparent calc(50% + .8px)),linear-gradient(to bottom right,transparent calc(50% - .8px),var(--ol) calc(50% - .8px),var(--ol) calc(50% + .8px),transparent calc(50% + .8px));background-size:8px 8px;background-position:0 0,100% 100%;background-repeat:no-repeat}
main.pg-brand .br-sec-btn:hover{background-color:rgba(255,255,255,.06)}
main.pg-brand .br-sec-btn .ba{--ba:transparent;--ba-fg:var(--brand);--ba-line:inset 1px 0 0 rgba(255,255,255,.3)}
main.pg-brand .br-stage{position:relative;margin:0;background:var(--dots-d),var(--sf);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;--hudi:18px}
main.pg-brand .br-stage img{width:40%;height:auto}
main.pg-brand .br-stage .cap,main.pg-brand .br-spec{position:absolute;z-index:2;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8C8C92}
main.pg-brand .br-stage .cap{left:36px;bottom:34px}
main.pg-brand .br-spec.tr{right:36px;top:34px;color:var(--brand)}
main.pg-brand .br-spec.br{right:36px;bottom:34px}

/* ---------- the page menu: a near-black instrument strip with mono labels; the current section reads in orange ---------- */
main.pg-brand .br-nav{position:sticky;top:96px;z-index:5;margin-top:8px;background:rgba(247,246,243,.92);backdrop-filter:blur(8px);padding:10px 0}
main.pg-brand .br-nav .in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--nb);padding:6px}
main.pg-brand .br-nav .in::-webkit-scrollbar{display:none}
main.pg-brand .br-nav a{flex:none;padding:10px 12px;font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#A3A3A8;transition:color .15s var(--ease),box-shadow .15s var(--ease)}
main.pg-brand .br-nav a:hover{color:#fff}
main.pg-brand .br-nav a.on{background:#1C1C1F;color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand)}
main.pg-brand .br-nav a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}

/* ---------- chapters: the title on the left, the rule of thumb on the right, an oat dot-grid tray below ---------- */
main.pg-brand .br-s{padding:96px 0 0;scroll-margin-top:150px}
main.pg-brand .br-s .chap-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 56px;align-items:end;max-width:none;text-align:left;margin-bottom:28px}
main.pg-brand .br-s .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
main.pg-brand .br-s .chap-head p{max-width:560px;justify-self:end;font-size:17px;line-height:27px;color:#4A4945}
main.pg-brand .br-s .tray{background:var(--dots-l),var(--oat)}
main.pg-brand .tray>:first-child{margin-top:0}
main.pg-brand .br-card{background:#fff}
main.pg-brand .br-label{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
main.pg-brand .br-h3{margin-top:0;font:600 22px/1.25 var(--sans);letter-spacing:-.3px}
main.pg-brand .br-tag{position:absolute;z-index:2;left:20px;bottom:18px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8C8A85}

/* one chamfer for every brand surface; --cut sets its size (kit: 7 micro, 9 medium, 12 large) */
main.pg-brand :is(.br-s .tray,.br-card,.br-stage,.br-mis .tile,.br-ground,.br-dl a,.br-nav .in,.br-terms){
  border-radius:0;clip-path:polygon(var(--cut,9px) 0,calc(100% - var(--cut,9px)) 0,100% var(--cut,9px),100% calc(100% - var(--cut,9px)),calc(100% - var(--cut,9px)) 100%,var(--cut,9px) 100%,0 calc(100% - var(--cut,9px)),0 var(--cut,9px))}
main.pg-brand :is(.br-s .tray,.br-stage){--cut:12px}
main.pg-brand .br-dl a{--cut:6px}

/* HUD corner brackets around every logo specimen: drawn by a pseudo-element, never in the markup */
main.pg-brand :is(.br-hud,.br-form .pair>div,.br-ground .sp){position:relative}
main.pg-brand :is(.br-hud,.br-form .pair>div,.br-ground .sp)::before{content:"";position:absolute;inset:var(--hudi,12px);pointer-events:none;z-index:1;--c:var(--hudc);
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--hl,18px) var(--hw,1.8px) no-repeat,linear-gradient(var(--c),var(--c)) 0 0/var(--hw,1.8px) var(--hl,18px) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--hl,18px) var(--hw,1.8px) no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/var(--hw,1.8px) var(--hl,18px) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--hl,18px) var(--hw,1.8px) no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/var(--hw,1.8px) var(--hl,18px) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--hl,18px) var(--hw,1.8px) no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/var(--hw,1.8px) var(--hl,18px) no-repeat}
main.pg-brand .br-stage{--hl:26px;--hw:2px}
main.pg-brand :is(.br-form .pair>div,.br-ground .sp){--hudi:9px;--hl:12px;--hw:1.5px;--c:rgba(251,152,0,.35)}

/* ---------- the logo: three forms, each shown on paper and on near-black ---------- */
main.pg-brand .br-forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
main.pg-brand .br-form{overflow:hidden}
main.pg-brand .br-form .pair{display:grid;grid-template-columns:1fr 1fr}
main.pg-brand .br-form .pair>div{aspect-ratio:4/3}
main.pg-brand .br-form .pair>div:first-child{background:var(--dots-l),var(--cr)}
main.pg-brand .br-form .pair>div:last-child{background:var(--dots-d),var(--nb)}
main.pg-brand .br-form .pair img{position:absolute;inset:22%;width:56%;height:56%;object-fit:contain}
main.pg-brand .br-form .pair .br-tag{left:16px;bottom:14px;font-size:9px}
main.pg-brand .br-form .pair>div:last-child .br-tag{color:#8C8C92}
main.pg-brand .br-form .meta{padding:16px 18px 20px}
main.pg-brand .br-form .meta .br-label{margin-bottom:8px;color:var(--brand-text)}
main.pg-brand .br-form .meta b{font:600 16px/1.3 var(--sans)}
main.pg-brand .br-form .meta p{margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}
main.pg-brand .br-vh{margin-top:32px}
main.pg-brand .br-vers{margin-top:16px}
main.pg-brand .br-ground figcaption .br-label{margin:0 0 8px;font:500 11px/1.2 var(--mono);color:var(--brand-text)}
main.pg-brand .br-colnote{margin-top:16px;padding:20px 22px;display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 16px;align-items:baseline}
main.pg-brand .br-colnote p{font-size:15px;line-height:24px;color:#3D3B37;max-width:62em}
main.pg-brand .br-colnote code{font:500 14px/1 var(--mono);color:var(--ink)}

/* ---------- clear space and minimum size ---------- */
main.pg-brand .br-rules{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
main.pg-brand .br-clear{padding:28px;display:grid;place-items:center}
main.pg-brand .br-zone{position:relative;padding:var(--x);border:1.5px dashed rgba(230,93,1,.45);background:var(--dots-l);--x:clamp(28px,5vw,56px)}
main.pg-brand .br-zone img{display:block;height:var(--x);width:auto;max-width:100%}
main.pg-brand .br-zone i{position:absolute;font:500 12px/1 var(--mono);color:var(--brand-text);font-style:normal}
main.pg-brand .br-zone .t{top:calc(var(--x)/2 - 6px);left:50%;transform:translateX(-50%)}
main.pg-brand .br-zone .b{bottom:calc(var(--x)/2 - 6px);left:50%;transform:translateX(-50%)}
main.pg-brand .br-zone .l{left:calc(var(--x)/2 - 4px);top:50%;transform:translateY(-50%)}
main.pg-brand .br-zone .r{right:calc(var(--x)/2 - 4px);top:50%;transform:translateY(-50%)}
main.pg-brand .br-clear p{margin-top:18px;font-size:14px;line-height:21px;color:var(--muted);text-align:center;max-width:30em}
main.pg-brand .br-sizes{padding:8px 22px}
main.pg-brand .br-sizes div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
main.pg-brand .br-sizes div:first-child{border-top:0}
main.pg-brand .br-sizes b{font:600 24px/1 var(--mono);font-variant-numeric:tabular-nums}
main.pg-brand .br-sizes span{font-size:14px;line-height:20px;color:var(--muted)}

/* ---------- backgrounds: the lockup on each approved ground ---------- */
main.pg-brand .br-grounds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
main.pg-brand .br-ground{margin:0;background:#fff}
main.pg-brand .br-ground .sp{aspect-ratio:16/10;display:grid;place-items:center}
main.pg-brand .br-ground .sp img{width:56%;height:auto}
main.pg-brand .br-ground.nb .sp{background:var(--dots-d),var(--nb)}
main.pg-brand .br-ground.nb .br-tag{color:#8C8C92}
main.pg-brand .br-ground.pp .sp{background:var(--dots-l),var(--cr)}
main.pg-brand .br-ground.wh .sp{background:#fff;box-shadow:inset 0 -1px 0 var(--line)}
main.pg-brand .br-ground figcaption{padding:16px 18px 20px}
main.pg-brand .br-ground figcaption b{display:block;font:600 16px/1.3 var(--sans)}
main.pg-brand .br-ground figcaption span{display:block;margin-top:4px;font-size:14px;line-height:20px;color:var(--muted)}

/* ---------- do and don't: the kit's six misuse tiles, then the two lists ---------- */
main.pg-brand .br-mis{margin-top:16px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
main.pg-brand .br-mis figure{margin:0}
main.pg-brand .br-mis .tile{aspect-ratio:1;background:#fff;display:grid;place-items:center;position:relative;overflow:hidden}
main.pg-brand .br-mis .tile img{width:46%}
main.pg-brand .br-mis .tile::after{content:"\2715";position:absolute;top:10px;right:12px;font:600 14px/1 var(--sans);color:#B42318}
main.pg-brand .br-mis figcaption{margin-top:8px;font-size:13px;line-height:18px;color:var(--muted);text-align:center}
main.pg-brand .br-mis .st img{transform:scaleX(1.5)}
main.pg-brand .br-mis .ro img{transform:rotate(-24deg)}
main.pg-brand .br-mis .rc img{filter:hue-rotate(160deg) saturate(1.4)}
main.pg-brand .br-mis .fx img{filter:drop-shadow(0 0 10px #FB9800) drop-shadow(4px 6px 0 #1D1D1D)}
main.pg-brand .br-mis .bz .tile{background:repeating-linear-gradient(45deg,#1D1D1D 0 6px,#FB9800 6px 12px,#F7F6F3 12px 18px)}
main.pg-brand .br-mis .lc .tile{background:#FFC56B}
main.pg-brand .br-do{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-brand .br-do .br-card{padding:6px 20px}
main.pg-brand .br-do h3{padding:16px 0 4px;font:600 16px/1.2 var(--sans)}
main.pg-brand .br-do h3::before{content:"\2713";margin-right:8px;color:#0B7A47}
main.pg-brand .br-do .br-card+.br-card h3::before{content:"\2715";color:#B42318}
main.pg-brand .br-do div div{padding:14px 0;border-top:1px solid var(--line);font-size:14px;line-height:20px}
main.pg-brand .br-do div div:first-of-type{border-top:0}

/* ---------- downloads: an instrument list; enquiries ---------- */
main.pg-brand .br-files{overflow-x:auto}
main.pg-brand .br-files table{width:100%;border-collapse:collapse;min-width:560px}
main.pg-brand .br-files th,main.pg-brand .br-files td{text-align:left;padding:14px;border-top:1px solid var(--line);vertical-align:middle}
main.pg-brand .br-files th{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:0}
main.pg-brand .br-files td:first-child{font:600 16px/1.3 var(--sans)}
main.pg-brand .br-files th:nth-child(2),main.pg-brand .br-files td:nth-child(2){width:240px}
main.pg-brand .br-files td:nth-child(3){font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
main.pg-brand .br-files td img{height:48px;width:auto;max-width:220px;object-fit:contain;object-position:left center}
main.pg-brand .br-files td.br-dl{white-space:nowrap}
main.pg-brand .br-files tr.grp th{padding-top:24px;border-top:1px solid var(--line);color:var(--ink)}
main.pg-brand .br-files td.dk img{padding:8px 12px;background:var(--nb)}
main.pg-brand .br-dl a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;background:var(--oat);font:500 11.5px/1 var(--mono);letter-spacing:.1em;color:var(--ink);transition:background .15s var(--ease),color .15s}
main.pg-brand .br-dl a+a{margin-left:6px}
main.pg-brand .br-dl a::after{content:"\2193";font-family:var(--sans)}
main.pg-brand .br-dl a:hover{background:var(--brand);color:#0B0B0C}
main.pg-brand .br-dl a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #0B0B0C}
main.pg-brand .br-terms{margin-top:16px;padding:22px 24px;background:#fff;font-size:15px;line-height:24px}
main.pg-brand .br-terms a{color:var(--brand-text);border-bottom:1px solid currentColor}

/* liveliness: the logo cards lift on hover (grids rise in on scroll through data-reveal, motion.js) */
main.pg-brand :is(.br-forms .br-card,.br-ground){transition:transform .35s var(--ease)}
main.pg-brand :is(.br-forms .br-card,.br-ground):hover{transform:translateY(-4px)}

@media (max-width:1000px){
  main.pg-brand .br-hero .in,main.pg-brand .br-rules{grid-template-columns:minmax(0,1fr)}
  main.pg-brand .br-forms{grid-template-columns:minmax(0,1fr)}
  main.pg-brand .br-mis{grid-template-columns:repeat(3,minmax(0,1fr))}
  main.pg-brand .br-s .chap-head{grid-template-columns:minmax(0,1fr);gap:12px}
  main.pg-brand .br-s .chap-head p{justify-self:start}
  main.pg-brand .br-s .chap-head h2{font-size:38px;line-height:1.08}
}
@media (max-width:760px){
  main.pg-brand .br-s{padding-top:64px}
  main.pg-brand .br-hero{padding-top:132px}
  main.pg-brand .br-hero .in{padding-bottom:48px;gap:32px}
  main.pg-brand .br-stage .cap{left:26px;bottom:24px}
  main.pg-brand .br-spec.tr{right:26px;top:24px}
  main.pg-brand .br-spec.br{bottom:auto;right:auto;left:26px;top:24px}
  main.pg-brand .br-s .tray{--cut:10px}
  main.pg-brand .br-grounds{grid-template-columns:minmax(0,1fr)}
  main.pg-brand .br-ground .sp{aspect-ratio:16/8}
  main.pg-brand .br-ground .sp img{width:52%}
  main.pg-brand .br-do{grid-template-columns:minmax(0,1fr)}
  main.pg-brand .br-colnote{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  main.pg-brand .br-hero h1{font-size:42px;letter-spacing:-1.2px}
  main.pg-brand .br-nav{top:76px}
  main.pg-brand .br-s .chap-head h2{font-size:34px}
  main.pg-brand .br-s .chap-head p{font-size:16px;line-height:24px}
  main.pg-brand .br-mis{gap:10px}
  main.pg-brand .br-mis .tile img{width:64%}
  main.pg-brand .br-clear{padding:20px 14px}
  main.pg-brand .br-sizes{padding:4px 18px}
  /* downloads: each file becomes a block (preview, name, use, buttons), no sideways table */
  main.pg-brand .br-files{overflow:visible;padding:4px 16px}
  main.pg-brand .br-files table{min-width:0}
  main.pg-brand .br-files thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  main.pg-brand .br-files tbody{display:block}
  main.pg-brand .br-files tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:16px 0;border-top:1px solid var(--line)}
  main.pg-brand .br-files tr:first-child{border-top:0}
  main.pg-brand .br-files td{display:block;padding:0;border:0;width:auto!important}
  main.pg-brand .br-files td:first-child{grid-column:1}
  main.pg-brand .br-files td:nth-child(2){grid-column:1/-1;order:-1;padding:14px;background:var(--dots-l),var(--cr)}
  main.pg-brand .br-files td:nth-child(3){grid-column:1;align-self:center}
  main.pg-brand .br-files td.br-dl{display:flex;gap:6px;grid-column:2;grid-row:2/span 2;align-self:center;justify-content:flex-end}
  main.pg-brand .br-files td.br-dl a+a{margin-left:0}
  main.pg-brand .br-files td img{height:48px;max-width:100%}
  main.pg-brand .br-files td.dk:nth-child(2){background:var(--dots-d),var(--nb)}
  main.pg-brand .br-files td.dk img{padding:0;background:none}
  main.pg-brand .br-files tr.grp{display:block;padding:20px 0 0}
  main.pg-brand .br-files tr.grp th{display:block;padding:0;border:0}
  main.pg-brand .br-files tr.grp+tr{border-top:0}
}
@media (prefers-reduced-motion:reduce){
  main.pg-brand .br-nav a,main.pg-brand .br-dl a,main.pg-brand :is(.br-forms .br-card,.br-ground){transition:none}
  main.pg-brand :is(.br-forms .br-card,.br-ground):hover{transform:none}
}