/* SUDO-CYCLES look, built from the logo: a big photo across the top, black and white with the theme colour,
   tall condensed capitals (Bebas Neue) like flat-track number boards, condensed capitals (Saira Condensed) like CYCLES, and sticker-style outlines.
   Loaded after site.css; every rule starts html.brand so it wins over the template's own rules. */

/* ===== big photo across the top, with the headline over it ===== */
html.brand body.has-hero-photo .hero { min-height: min(78vh, 720px); padding: 0 0 56px; align-content: end; color: #fff; }
html.brand body.has-hero-photo .hero-photo { left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 100vw; transform: translateX(-50%); border: 0;
  -webkit-mask-image: none; mask-image: none; }
html.brand body.has-hero-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
html.brand body.has-hero-photo .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 30%, #000c 100%), linear-gradient(90deg, #0008, #0000 70%); }
html.brand body.has-hero-photo .hero h1 { font-size: 76px; text-shadow: 0 2px 24px #0006; }
html.brand body.has-hero-photo .hero .sub { color: #ffffffd9; font-size: 19px; }
html.brand body.has-hero-photo .hero > div:not(.hero-photo) { max-width: 860px; }
html.brand body.has-hero-photo .hero .sub { max-width: 34rem; }
html.brand body.has-hero-photo .hero .btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
html.brand .points { margin-top: -28px; position: relative; z-index: 2; box-shadow: 0 10px 30px #0002; }
html.brand .grid { gap: 14px; }
html.brand .job { aspect-ratio: 4 / 5; grid-template-rows: 1fr; position: relative; border: 0; overflow: hidden; }
html.brand .job .ph { position: absolute; inset: 0; }
html.brand .job .ph img { width: 100%; height: 100%; object-fit: cover; filter: none; }
html.brand .job .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 14px; background: linear-gradient(#0000, #000b); color: #fff; }
html.brand .job .cap .spec { color: #ffffffbf; }
html.brand .job .cap .more { color: #fff; }
html.brand .gal figure { height: 460px; border: 0; }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero { min-height: 78vh; padding: 0 0 28px; }
  html.brand body.has-hero-photo .hero-photo { height: auto; }
  html.brand body.has-hero-photo .hero h1 { font-size: 44px; }
}

/* ===== from the logo: black and white with one colour, chunky rounded capitals, sticker outlines ===== */
html.brand { --ink: #111; --head: "Bebas Neue", "Chakra Petch", sans-serif; --mono: "Saira Condensed", "IBM Plex Mono", sans-serif; --rule: 3px; }
html.brand body { background-image: none; background-color: #fff; }
html.brand .hero h1, html.brand h2, html.brand h3, html.brand .f-logo { font-family: var(--head); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
html.brand .btn, html.brand .k, html.brand .spec, html.brand .nav ul a, html.brand label, html.brand .note { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
/* header: a black bar with the real logo */
html.brand .site-head { background: #fff; }
html.brand .site-head::after { background: #111; height: 3px; }
html.brand .site-head .logo img { height: 66px; margin: 6px 0; }
html.brand .menu-btn span { background: #111; }
/* hero: big photo, white capitals over it, the second line in red like the dot */
html.brand body.has-hero-photo .hero h1 { font-size: 82px; line-height: .95; }
html.brand body.has-hero-photo .hero h1 span:last-child { color: var(--t); text-shadow: 0 2px 18px #0008; }
/* sticker outlines: thick black, rounded, hard shadow */
html.brand .btn { border-radius: 0; border: 3px solid #111; box-shadow: 4px 4px 0 #111; font-size: 17px; }
html.brand .btn:hover { box-shadow: 7px 7px 0 #111; }
html.brand body.has-hero-photo .hero .btn.ghost { box-shadow: 4px 4px 0 #111; border-color: #fff; background: #111; }
html.brand .job, html.brand .contact, html.brand .gal figure { border: 3px solid #111 !important; border-radius: 0; box-shadow: 6px 6px 0 #111; overflow: hidden; }
html.brand .job:hover { box-shadow: 9px 9px 0 var(--t); }
html.brand .job::after, html.brand .btn::after { display: none; }
html.brand .job .cap h3 { font-size: 22px; }
html.brand .points { background: #111; border: 3px solid #111; border-radius: 0; color: #fff; box-shadow: 6px 6px 0 var(--t); }
html.brand .points * { color: #fff; }
html.brand .points .pn { color: var(--t) !important; font-size: 16px; font-weight: 700; }
html.brand .points p { color: #ffffffbf; }
html.brand .points li + li::before { background: #ffffff33; }
html.brand .points::before, html.brand .contact::before, html.brand .points::after, html.brand .contact::after { display: none !important; }
html.brand .contact .intro { background: #111; }
html.brand .form input, html.brand .form select, html.brand .form textarea { border: 2px solid #111; border-radius: 0; }
html.brand .work .head h2, html.brand .contact-sec .head h2, html.brand .gal-sec .head h2 { font-size: 52px; }
html.brand footer { background: #111; color: #fff; margin: 40px calc(50% - 50vw) 0; padding: 28px calc(50vw - 50% + 0px); }
html.brand footer .f-logo, html.brand footer .f-line, html.brand footer a { color: #fff; }
html.brand .placeholder-note { border-radius: 0; }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero h1 { font-size: 50px; }
  html.brand .site-head .logo img { height: 44px; }
  html.brand .work .head h2, html.brand .contact-sec .head h2, html.brand .gal-sec .head h2 { font-size: 38px; }
}
/* headline outlined in black like the logo lettering, so it reads over any photo */
html.brand body.has-hero-photo .hero h1 span { -webkit-text-stroke: 10px #111; paint-order: stroke fill; text-shadow: none !important; }
@media (max-width: 900px) { html.brand body.has-hero-photo .hero h1 span { -webkit-text-stroke: 7px #111; } }
/* shop cards in the logo look: sticker outlines like the service cards */
html.brand .prod { border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
html.brand .prod:hover { box-shadow: 9px 9px 0 var(--t); }
html.brand .prod .pi { border-bottom: 3px solid #111; background: #fff; }
html.brand .prod h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; font-size: 17px; }
html.brand .prod .price { font-size: 17px; }
html.brand .prod .tag { background: var(--t); }
html.brand .shop-sec .head h2 { font-size: 52px; font-family: var(--head); font-weight: 900; text-transform: uppercase; }
@media (max-width: 900px) { html.brand .shop-sec .head h2 { font-size: 38px; } }
html.brand .job .cap { border-top: 0; }

/* Bebas Neue comes in one weight: use it as it is (no faked bold), a little larger and spaced, as the font is narrow */
html.brand .hero h1, html.brand h2, html.brand h3, html.brand .f-logo, html.brand .prod h3 { font-weight: 400 !important; }
html.brand body.has-hero-photo .hero h1 { font-size: 112px; line-height: .9; letter-spacing: .01em; }
html.brand .work .head h2, html.brand .contact-sec .head h2, html.brand .gal-sec .head h2, html.brand .shop-sec .head h2 { font-size: 64px; letter-spacing: .02em; }
html.brand .job .cap h3 { font-size: 28px; letter-spacing: .03em; }
html.brand .prod h3 { font-size: 22px; letter-spacing: .03em; }
html.brand .points h3 { font-size: 26px; letter-spacing: .03em; }
html.brand .contact .intro h2 { letter-spacing: .02em; }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero h1 { font-size: 68px; }
  html.brand .work .head h2, html.brand .contact-sec .head h2, html.brand .gal-sec .head h2, html.brand .shop-sec .head h2 { font-size: 46px; }
}

/* the Chopper / Flattrack switch in the logo look: thick outlines and a hard shadow, like the buttons */
html.brand .cat-filter button { font-size: 17px; border: 3px solid #111; box-shadow: 3px 3px 0 #111; padding: 7px 16px; }
html.brand .cat-filter button[aria-pressed="true"] { border-color: #111; }
html.brand .work .head { align-items: center; }

/* picture frames, "clean": no frames, just the photos. On hover the photo zooms a little and a red bar slides in along the bottom. */
html.brand .job, html.brand .prod, html.brand .gal figure { border: 0 !important; box-shadow: none !important; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
html.brand .prod .pi { border-bottom: 0; }
html.brand .job::after { display: block !important; content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: var(--t); border: 0; opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
html.brand .job:hover::after, html.brand .job:focus-visible::after { transform: scaleX(1); }
html.brand .prod .pi img, html.brand .gal figure img { transition: transform .5s ease; }
html.brand .prod:hover .pi img, html.brand .gal figure:hover img { transform: scale(1.06); }
html.brand .prod:hover { transform: none; box-shadow: inset 0 -6px 0 var(--t) !important; }
html.brand .gal figure { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html.brand .job, html.brand .job::after, html.brand .prod .pi img, html.brand .gal figure img { transition: none; } }

/* headline photo: everything here comes from the editor (Page text > Headline photo on computers / on phones) */
html.brand body.has-hero-photo .hero { min-height: var(--hd-h, 660px); align-content: var(--hd-ta, end); padding: 40px 0 56px; }
html.brand body.has-hero-photo .hero-photo { background: #000; overflow: hidden; }
html.brand body.has-hero-photo .hero-img { left: 0; top: 0; background-size: cover; background-repeat: no-repeat;
  background-position: var(--hd-fx, 50%) var(--hd-fy, 30%); transform-origin: var(--hd-fx, 50%) var(--hd-fy, 30%);
  transform: rotate(var(--hd-r, 0deg)) scale(var(--hd-z, 1)); opacity: var(--hd-o, 1); }
html.brand body.has-hero-photo .hero-photo::after { background: linear-gradient(180deg, transparent 30%, rgb(0 0 0 / calc(.8 * var(--hd-sh, 1))) 100%), linear-gradient(90deg, rgb(0 0 0 / calc(.53 * var(--hd-sh, 1))), transparent 70%); }
html.brand body.has-hero-photo .hero h1 { font-size: var(--hd-ts, 112px); }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero { min-height: var(--hm-h, 640px); align-content: var(--hm-ta, end); padding: 28px 0 28px; }
  html.brand body.has-hero-photo .hero-img { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background-size: cover;
    background-position: var(--hm-fx, 50%) var(--hm-fy, 30%); transform-origin: var(--hm-fx, 50%) var(--hm-fy, 30%);
    transform: rotate(var(--hm-r, 0deg)) scale(var(--hm-z, 1)); opacity: var(--hm-o, 1); }
  html.brand body.has-hero-photo .hero-photo::after { background: linear-gradient(180deg, transparent 20%, rgb(0 0 0 / calc(.8 * var(--hm-sh, 1))) 100%), linear-gradient(90deg, rgb(0 0 0 / calc(.4 * var(--hm-sh, 1))), transparent 80%); }
  html.brand body.has-hero-photo .hero h1 { font-size: var(--hm-ts, 68px); }
}

/* drop shadows: none. Buttons and boxes are flat; buttons change colour on hover */
html.brand .btn, html.brand .btn:hover, html.brand body.has-hero-photo .hero .btn.ghost, html.brand .cat-filter button,
html.brand .contact, html.brand .points { box-shadow: none !important; }
html.brand .cat-filter button:hover { background: #f2f2f2; }
html.brand .cat-filter button[aria-pressed="true"]:hover { background: var(--t-dark); }

/* logo: a bit bigger; on hover it lifts and tilts slightly like a sticker; on click the red dot flicks to black and back */
html.brand .site-head .logo img { height: 86px; margin: 0; }
html.brand .site-head .logo .logo-wrap { margin: 4px 0; transition: transform .25s cubic-bezier(.2,.8,.2,1.3), filter .25s ease; }
html.brand .site-head .logo:hover .logo-wrap, html.brand .site-head .logo:focus-visible .logo-wrap { transform: translateY(-1px) rotate(-2deg) scale(1.04); filter: drop-shadow(2px 3px 0 #0002); }
html.brand .logo-dot { display: block; position: absolute; left: 84.55%; top: 37.2%; width: 10.6%; aspect-ratio: 1; border-radius: 50%; background: #dc0101; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes logo-dot-blink { 0%, 100% { background: #dc0101; } 15%, 55% { background: #111; } }
html.brand .site-head .logo.tap .logo-dot { animation: logo-dot-blink .32s linear 1; }
@media (max-width: 900px) { html.brand .site-head .logo img { height: 54px; } }
@media (prefers-reduced-motion: reduce) { html.brand .site-head .logo .logo-wrap { transition: none; } html.brand .site-head .logo:hover .logo-wrap { transform: none; } html.brand .site-head .logo.tap .logo-dot { animation: none; } }

/* headline text: moved by dragging it in the editor's preview (or the Text left/right and up/down sliders) */
html.brand body.has-hero-photo .hero > div:not(.hero-photo) { translate: var(--hd-tx, 0px) 0; }      /* left / right: all together, so they stay lined up */
html.brand body.has-hero-photo .hero h1 { translate: 0 calc(var(--hd-h, 660px) * var(--hd-hy, 0)); }
html.brand body.has-hero-photo .hero .sub { translate: 0 calc(var(--hd-h, 660px) * var(--hd-sy, 0)); }
html.brand body.has-hero-photo .hero .ctas { translate: 0 calc(var(--hd-h, 660px) * var(--hd-by, 0)); }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero > div:not(.hero-photo) { translate: var(--hm-tx, 0px) 0; }
  html.brand body.has-hero-photo .hero h1 { translate: 0 calc(var(--hm-h, 640px) * var(--hm-hy, 0)); }
  html.brand body.has-hero-photo .hero .sub { translate: 0 calc(var(--hm-h, 640px) * var(--hm-sy, 0)); }
  html.brand body.has-hero-photo .hero .ctas { translate: 0 calc(var(--hm-h, 640px) * var(--hm-by, 0)); }
}

/* headline spacing grows and shrinks with the Height slider, so the text and buttons keep the same proportions */
html.brand body.has-hero-photo .hero { padding: calc(var(--hd-h, 660px) * .07) 0 calc(var(--hd-h, 660px) * .085); }
html.brand body.has-hero-photo .hero-side { margin-top: calc(var(--hd-h, 660px) * .05); }
html.brand body.has-hero-photo .hero { grid-template-rows: auto auto; grid-auto-rows: min-content; }
html.brand body.has-hero-photo .hero > div:not(.hero-photo), html.brand body.has-hero-photo .hero-side { align-self: auto; }
html.brand body.has-hero-photo .hero .ctas { margin-top: 0; }
@media (max-width: 900px) {
  html.brand body.has-hero-photo .hero { padding: calc(var(--hm-h, 640px) * .05) 0 calc(var(--hm-h, 640px) * .045); }
  html.brand body.has-hero-photo .hero-side { margin-top: calc(var(--hm-h, 640px) * .04); }
}