/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.brxe-button {
  font-weight: 900 !important;
}

.project-hero-bg video {
	object-fit: cover;
	height: 100%;
}


.rd-link.light {
	color: var(--neutral);
}

.rd-link.light .icon {
	width: var(--text-m);
}

.rd-link .text {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.rd-link .text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #1664CB;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rd-link:hover .text {
  color: #1664CB;
}

.rd-link:hover .text::after {
  width: 100%;
}

.rd-inline-link {
  color: #1664CB;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.rd-inline-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #1664CB;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rd-inline-link:hover {
  color: #1664CB;
}

.rd-inline-link:hover::after {
  opacity: 1;
}

.rd-inline-link.light {
  color: white;
}
.rd-inline-link.light::after {
  background: white;
}
.rd-inline-link.light:hover {
  color: white;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Initial fade style – NO transition here */
.js-fade {
  opacity: 0;
  transform: translateY(20px);
}
/* Triggered once in view */
.js-fade.visible {
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.2s;
}

/* Optional staggered delays */
.fade-delay-1 { animation-delay: 0.2s !important; }
.fade-delay-2 { animation-delay: 0.4s !important; }
.fade-delay-3 { animation-delay: 0.6s !important; }
.fade-delay-4 { animation-delay: 0.8s !important; }
.fade-delay-5 { animation-delay: 1s !important; }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.js-fade-simple {
  opacity: 0;
}

.js-fade-simple.visible {
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

.work-animated-svg {
  fill: white !important;
}

:where(.brxe-video) iframe, :where(.brxe-video) video {
	height: auto;
}

/* RD button hover: fill sweep + label slide (rd-btn-anim, applied by animations.js) */
.rd-btn-anim {position: relative; overflow: hidden; z-index: 0; transition: color 0.45s cubic-bezier(0.76, 0, 0.24, 1), border-color 0.45s cubic-bezier(0.76, 0, 0.24, 1), transform 0.15s ease}
.rd-btn-anim::after {content: ""; position: absolute; inset: -1px; background: var(--rd-fill, #1c1c1c); border-radius: inherit; transform: scaleY(0); transform-origin: top; transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1); z-index: -1}
/* the fill sweep latches after a tap on touch (iOS keeps :hover until the
   next tap elsewhere), so the whole hover grammar is pointer-only */
@media (hover: hover) {
  .rd-btn-anim:hover {color: var(--rd-fill-text, #fff) !important; border-color: var(--rd-fill, #1c1c1c) !important}
  .rd-btn-anim:hover::after {transform: scaleY(1); transform-origin: bottom}
  .rd-btn-anim:hover svg.fill, .rd-btn-anim:hover svg.fill path {fill: var(--rd-fill-text, #fff)}
}
.rd-btn-anim:active {transform: scale(0.97)}
.rd-btn-anim--ghost {border: 1px solid var(--rd-base) !important}
.rd-btn-anim--ghost::after {background: var(--rd-base); transform: scaleY(1); transform-origin: bottom}
@media (hover: hover) {
  .rd-btn-anim--ghost:hover::after {transform: scaleY(0); transform-origin: top}
  .rd-btn-anim--ghost:hover {color: var(--rd-base) !important; border-color: var(--rd-base) !important}
  .rd-btn-anim--ghost:hover svg.fill, .rd-btn-anim--ghost:hover svg.fill path {fill: var(--rd-base)}
}
.rd-btn__label {display: inline-block}
.rd-btn__arrow {display: inline-flex; align-items: center; width: 0; opacity: 0; overflow: hidden; margin-left: var(--rd-gapfix, 0px); transform: translateX(-8px); transition: width 0.45s cubic-bezier(0.76, 0, 0.24, 1), margin 0.45s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s ease, transform 0.45s cubic-bezier(0.76, 0, 0.24, 1)}
.rd-btn__arrow svg {flex-shrink: 0; width: 0.72em !important; height: 0.72em !important; min-width: 0}
@media (hover: hover) { .rd-btn-anim:hover .rd-btn__arrow {width: 0.8em; opacity: 1; margin-left: 0.55em; transform: none} }
@media (prefers-reduced-motion: reduce) {
  .rd-btn-anim::after, .rd-btn__arrow {transition: none}
}

/* ---- hero-b poster-bar navigation, promoted site-wide ---- */

/* single poster bar: cream, sharp corners, hard shadow, orange end-cap */
#menu-item-3305 { display: none !important; }
/* shape-peek hovers: each link summons its Bauhaus shape from the bar's bottom edge */
.header-1__menu .bricks-nav-menu > .menu-item:not(:last-child) > a { position: relative; z-index: 0; }
.header-1__menu .bricks-nav-menu > .menu-item:not(:last-child) > a::before {
  content: ""; position: absolute; left: 50%; bottom: 0; height: 100%; z-index: -1; pointer-events: none;
  transform: translate(-50%, 30%) scale(.7); transform-origin: bottom center; opacity: 0;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .15s ease;
}
.header-1__menu .bricks-nav-menu > .menu-item:not(:last-child) > a:hover::before { transform: translate(-50%, 0) scale(1); opacity: 1; }
.header-1__menu .bricks-nav-menu > .menu-item:not(:last-child) > a:hover { animation: none !important; border-bottom: 0 !important; }
/* vestigial dashed underline from the pre-poster-bar nav hover; the shape-peek replaced it */
.header-1__menu .bricks-nav-menu > .menu-item > a { border-bottom: 0 !important; }
#menu-item-45 > a::before { aspect-ratio: 2 / 1; background: #F6592A; border-radius: 999px 999px 0 0; }
#menu-item-play > a::before { aspect-ratio: 1 / 1; background: #F5B90E; border-radius: 50%; }
#menu-item-44 > a::before { aspect-ratio: 1 / 1; background: #098B58; }
/* Pricing: the splat star pops in centred and the label goes white over it */
#menu-item-pricing > a::before {
  height: 150%; aspect-ratio: 1 / 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153 153'%3E%3Cpath fill='%231664CB' d='M131.289 152.554C113.647 128.139 95.0374 110.692 97.2519 147.041C76.8845 107.752 65.5877 105.782 34.0371 136.802C47.5154 102.855 24.5895 113.456 0 131.289C24.593 113.456 41.9574 94.9127 5.51307 97.2519C44.8738 76.9069 46.7548 65.6712 15.7521 34.0371C49.6655 47.7004 39.0769 24.7441 21.2652 0C39.0769 24.7441 57.4719 42.0054 55.3023 5.51306C75.4673 44.9201 86.7627 46.6095 118.517 15.7521C104.842 49.5379 127.988 38.8866 152.554 21.2652C127.988 38.8866 110.64 57.3502 147.041 55.3023C107.702 75.4891 105.927 86.8497 136.802 118.517C102.983 105.027 113.647 128.139 131.289 152.554Z'/%3E%3C/svg%3E") center / contain no-repeat;
  top: 50%; bottom: auto;
  transform: translate(-50%, -50%) scale(.55);
}
#menu-item-pricing > a:hover::before,
#menu-item-pricing > a:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
#menu-item-pricing > a { transition: color .18s ease; }
#menu-item-pricing > a:hover,
#menu-item-pricing > a:focus-visible { color: #ffffff !important; }
#brxe-hyzlwa { background: #F2ECDF !important; box-shadow: 10px 10px 0 rgba(17,17,17,.92) !important; border-radius: 2px !important; padding: 0 0 0 1.6rem !important; overflow: hidden; align-items: stretch !important; }
#brxe-uurjfw { width: auto !important; flex: 0 0 auto !important; padding: .95rem 0; align-self: center; }
#brxe-mygait { display: flex !important; justify-content: flex-end !important; flex: 1 1 auto !important; align-items: stretch !important; }
#brxe-mygait nav.bricks-nav-menu-wrapper { align-items: stretch; margin: 0; }
@media (min-width: 992px) { #brxe-mygait nav.bricks-nav-menu-wrapper { display: flex; } }
#brxe-mygait .bricks-nav-menu { display: flex; align-items: stretch; height: 100%; margin: 0 !important; }
.header-1__menu .bricks-nav-menu > .menu-item { display: flex; margin: 0 !important; }
.header-1__menu .bricks-nav-menu > .menu-item > a { display: flex; align-items: center; padding: 0 1.15rem; font-size: 20px; }
.header-1__menu .bricks-nav-menu > .menu-item:last-child { margin-left: .9rem !important; }
.header-1__menu .bricks-nav-menu > .menu-item:last-child > a { border-radius: 0 !important; padding: 0 2.1rem !important; height: 100%; }
.bricks-mobile-menu-toggle { background: transparent !important; box-shadow: none !important; margin-right: 1.1rem; }
/* the page swallowed touch and wheel scroll behind the open drawer (Bricks'
   body.no-scroll misses the html scroller); making the drawer its own scroll
   container with contain stops the chaining */
.bricks-mobile-menu-wrapper { overflow-y: auto; overscroll-behavior: contain; }

/* ---- poster pass on the rest of the page ---- */
.work-card, .work-card__cover-wrapper, .work-card__cover, .work-card__overlay { border-radius: 2px !important; }
.work-card__cover-wrapper { box-shadow: 10px 10px 0 rgba(242,236,223,.14) !important; }
.work-card { transition: translate .2s ease, box-shadow .2s ease !important; }
@media (hover: hover) { .work-card:hover { transform: none !important; translate: -3px -3px !important; } }
.work-tag { background: #F2ECDF !important; color: #161616 !important; border-radius: 2px !important; }
.brxe-button { border-radius: 2px !important; }
.btn--primary, .btn--info { box-shadow: 6px 6px 0 rgba(17,17,17,.18); }
.feature-70__tab-btn { border-radius: 2px !important; background: #F2ECDF !important; }
.content-44 { background: #F7F2E7 !important; }
.card-testimonial-40 { background: #F2ECDF !important; border: 1px solid rgba(22,22,22,.75) !important; border-radius: 2px !important; box-shadow: 7px 7px 0 rgba(17,17,17,.9) !important; }
#brx-footer { background: #F7F2E7 !important; }

/* RD hard-shadow card system, from the hero-b staircase concept: cream slab, hard border, offset shadow */
.rd-surf { background: #F2ECDF; border: 1px solid rgba(22,22,22,.75); border-radius: 2px; box-shadow: 9px 9px 0 rgba(17,17,17,.92); }

/* RD grain texture overlay, from hero-b: subtle animated noise, multiply-blended over any background */
.grain-section { position: relative; overflow: hidden; isolation: isolate; }
.grain-section::after {
  animation: grain 8s steps(10) infinite;
  background-image: url('/wp-content/uploads/noise_tiled.png');
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.9;
  position: absolute;
  top: -100%;
  width: 300%;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
  transform: translateZ(0);
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0) }
  10% { transform: translate(-5%, -10%) }
  20% { transform: translate(-15%, 5%) }
  30% { transform: translate(7%, -25%) }
  40% { transform: translate(-5%, 25%) }
  50% { transform: translate(-15%, 10%) }
  60% { transform: translate(15%, 0%) }
  70% { transform: translate(0%, 15%) }
  80% { transform: translate(3%, 15%) }
  90% { transform: translate(-10%, 10%) }
}
@media (prefers-reduced-motion: reduce) {
  .grain-section::after { animation: none; }
}


/* Mobile drawer: Contact sits in the ruled list like every other item,
   it just speaks in the accent color (Grant, Aug 25) */
@media (max-width: 991px) {
  #brxe-mygait .bricks-mobile-menu > li.menu-item-42 > a {
    margin: 0 !important;
    background: transparent !important;
    color: #F6592A !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
    --rd-fill: #161616 !important;
    --rd-fill-text: #ffffff !important;
  }
}

/* ---- mobile: touch target sizes and small-screen typography ---- */
@media (max-width: 991px) {
  /* the hamburger is the only nav control on a phone and shipped at 20x16 */
  .bricks-mobile-menu-toggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex !important; align-items: center; justify-content: center;
    /* growing it to 44px left it top-aligned in a 64px row, so it crowded the
       top edge of the bar while the logo sat centred */
    align-self: center;
    /* 1.1rem was the inset for the old 20px toggle; 1.6rem matches the logo's
       own 25.6px inset on the other side, so the bar reads symmetrical */
    margin-right: 1.6rem;
  }
  /* header Contact pill sat 2px under the threshold */
  .header-1__menu .bricks-nav-menu > .menu-item:last-child > a,
  #brxe-mygait .bricks-mobile-menu > li.menu-item-42 > a { min-height: 44px }
  /* footer logo: Bricks inline CSS scales the anchor to 60% (transform: scale(.6)),
     which scales the tap target to 205x26 and the mark to 19px. Size the mark
     itself instead; the double-ID selector out-specifies the per-page inline rule. */
  #brx-footer #brxe-wlezdv { transform: none; }
  #brx-footer #rd-logo { width: 34px !important; height: auto !important; }
  /* the nav row is a .brxe-div, so the container-top .brxe-block wrap rule
     misses it; also widen the text-only hit areas (Play was 27px wide) */
  #brxe-dbhsru { flex-wrap: wrap; justify-content: center; }
  #brx-footer .footer-menu.brxe-text-link { padding: 0 .5rem; margin: 0 -.2rem; }
  /* five 22px links in one row is the classic mis-tap pattern */
  .footer-menu.brxe-text-link {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .footer-7__container-top .brxe-block { flex-wrap: wrap }
  #brxe-wlezdv { min-height: 44px }
}
@media (max-width: 767px) {
  /* line-height 1 on a 20px subtitle cramps descenders against the next line */
  .case-study-subtitle.brxe-text-basic { line-height: 1.3 !important }
}

/* ---- cream canvas instead of white ---- */
/* #F7F2E7 is the section cream already used on the footer and What We Do; the
   deeper #F2ECDF stays on cards and the nav so they still read as raised. */
:root { --body-bg-color: #F7F2E7; }
body { background-color: #F7F2E7; }
/* sections that hard-set white, cleared so the canvas shows through. Client
   specimens on the case studies keep their own white, since they reproduce
   how those sites actually look. */
.hero-35.brxe-section,
.faq-12.brxe-section,
.testimonial-40.brxe-section,
.footer-7 { background-color: transparent !important; }
/* case study detail pages stay white, the work sits cleaner on it */
body.single-project { --body-bg-color: #fff; background-color: #fff; }
body.single-project .footer-7 { background-color: #fff !important; }

/* ACSS's texture_geometry.gif is 97% opaque #FAFAFA with the shapes drawn
   2.5% darker, so tiling it painted the cream canvas out and the
   testimonials band read grey. GIF carries no partial alpha, so there was
   nothing to soften. Same shapes, rebuilt with a real alpha channel and a
   warm tone, by scripts/make-texture-alpha.py. 2x tile at background-size
   412px so it stays sharp on retina. */
.texture-3 {
  background-image: url(/wp-content/uploads/2026/08/texture-geometry-cream.png) !important;
  background-color: #F7F2E7 !important;
}

/* ---- nav labels: ink at rest, colour arrives with the peek shape ---- */
/* Blue/green/yellow on the cream bar measured 4.8, 3.7 and 1.5 to 1, so About
   was effectively invisible. Ink reads 15.4 to 1 and the shapes still carry
   the colour on hover, which is where it has the most impact anyway. */
.header-1__menu .bricks-nav-menu > .menu-item:not(:last-child) > a {
  color: #161616 !important;
  transition: color .18s ease;
}
/* Work's arch and Play's circle keep ink on top (5.5:1 and 10.2:1).
   About flips to cream against its green triangle: 3.68:1, which clears the
   3:1 large-text bar at 20px bold, and reads better than ink on that green. */
.header-1__menu .bricks-nav-menu > #menu-item-44 > a:hover,
.header-1__menu .bricks-nav-menu > #menu-item-44 > a:focus-visible {
  color: #F2ECDF !important;
}
/* the drawer has no peek shapes to carry the colour, and About was the same
   1.5:1 there, so its labels go ink too. Contact keeps the orange button. */
#brxe-mygait .bricks-mobile-menu > li:not(.menu-item-42) > a { color: #161616 !important; }

/* ---- mobile drawer: poster pass ---- */
@media (max-width: 991px) {
  /* Bricks paints the drawer its own #F6F3E5; align it to the poster cream */
  .bricks-mobile-menu-wrapper::before { background: #F2ECDF !important; }
  /* wordmark kicker balances the close X and names the surface; the Penrose
     mark rides as a background image to the left of the text */
  .bricks-mobile-menu-wrapper::after {
    content: "Rare Dimension";
    position: absolute; top: 0; left: 0;
    white-space: nowrap;
    padding: 2.35rem 0 0 calc(var(--space-m) + 36px);
    /* the text line-box matches the mark's height, so the two center on the
       same axis */
    line-height: 26px;
    background: url('/wp-content/uploads/2025/05/rd_logo_trans-2-300x300.png') no-repeat;
    background-size: 26px 26px;
    background-position: var(--space-m) 2.35rem;
    font-family: "Source Code Pro", monospace;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(22,22,22,.6);
  }
  /* the menu column fills the drawer and the list centers in it; the top
     padding keeps the wordmark and close X clear on short screens */
  .bricks-mobile-menu-wrapper { display: flex; flex-direction: column; }
  #menu-nav-1 { counter-reset: rdmenu; margin: 0 var(--space-m) !important; padding-top: 6rem !important; display: flex; flex-direction: column; justify-content: center; flex: 1 0 auto; min-height: 100%; }
  #menu-nav-1 > li { counter-increment: rdmenu; border-top: 1px solid rgba(22,22,22,.22); }
  #menu-nav-1 > li:first-child { border-top: 0; }
  #menu-nav-1 > li > a { padding-left: 0 !important; padding-right: 0 !important; position: relative; }
  #menu-nav-1 > li > a::after {
    content: "0" counter(rdmenu);
    position: absolute; right: 2px; bottom: 1.55rem;
    font-family: "Source Code Pro", monospace;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em;
    color: rgba(22,22,22,.45);
  }
}

/* ---- bottom dock: mobile nav in the thumb zone ---- */
/* The dock replaces the top bar entirely on mobile (Grant, Aug 21). The top
   header can't be display:none'd because the Bricks mobile drawer lives inside
   it, so hide it with visibility and let the open drawer punch back through. */
@media (max-width: 991px) {
  #brxe-udtquq.header-1 { visibility: hidden; pointer-events: none; height: 0; min-height: 0; padding: 0; margin: 0; overflow: visible; }
  /* the drawer stays focusable at all times (it parks off-canvas via its
     transform when closed); Bricks moves focus into it on open, and a
     visibility-gated wrapper made that focus call fail */
  #brxe-udtquq .bricks-mobile-menu-wrapper { visibility: visible; pointer-events: auto; }
  #brxe-udtquq .show-mobile-menu .bricks-mobile-menu-overlay { visibility: visible; pointer-events: auto; }
  /* the close X lives in the collapsed header; pin it top-right over the drawer */
  #brxe-udtquq .show-mobile-menu .bricks-mobile-menu-toggle { visibility: visible; pointer-events: auto; position: fixed; top: 20px; right: 20px; z-index: 1000; }
}
.rd-dock { display: none; }
@media (max-width: 991px) {
  .rd-dock {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 990; /* under the drawer (999), over everything else */
    display: flex; align-items: stretch;
    height: 58px;
    background: #F2ECDF;
    border: 1px solid rgba(22,22,22,.85);
    border-radius: 2px;
    box-shadow: 5px 5px 0 rgba(17,17,17,.9);
    overflow: hidden;
  }
  .rd-dock__burger {
    flex: 0 0 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    background: transparent; border: 0; border-right: 1px solid rgba(22,22,22,.25);
    cursor: pointer; padding: 0;
  }
  .rd-dock__burger span { width: 22px; height: 2.5px; background: #161616; }
  .rd-dock__link {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Source_Code_Pro', monospace;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #161616; text-decoration: none;
  }
  .rd-dock__link + .rd-dock__link { border-left: 1px solid rgba(22,22,22,.25); }
  .rd-dock__link[aria-current="page"] { box-shadow: inset 0 -3px 0 #F6592A; }
  .rd-dock__cta {
    flex: 1.25;
    display: flex; align-items: center; justify-content: center;
    background: #F6592A; color: #fff; text-decoration: none;
    font-family: 'Space_Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  }
  .rd-dock__cta[aria-current="page"] { background: #161616; }
  .rd-dock__burger:active, .rd-dock__link:active { background: rgba(22,22,22,.07); }
  .rd-dock__cta:active { opacity: .88; }
  /* the last thing on every page has to clear the dock */
  #brx-footer { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- rd-cta-link: mono uppercase link with orange sweep underline,
   shared across pages (hover script lives per page) ---- */
a.rd-cta-link { text-decoration: none; color: #f5f5f5 !important; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; align-self: flex-start; margin-top: 0.4rem; }
.rd-cta-link__inner { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(245, 245, 245, 0.3); }
.rd-cta-link__line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #F6592A; transform: scaleX(0); }