* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
background: #0f172a;
color: #0f172a;
font-family: Inter, Montserrat, Arial, sans-serif;
margin: 0;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
body.theme-light { background: #fff; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.br-shell { margin-inline: auto; width: min(1340px, calc(100vw - clamp(38px, 9vw, 124px))); }
.br-label {
color: #2f6f9f;
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .25em;
margin-bottom: 22px;
text-transform: uppercase;
}
.br-nav {
align-items: center;
color: #fff;
display: flex;
justify-content: space-between;
left: 0;
padding: 29px max(20px, calc((100vw - 1340px) / 2));
position: fixed;
right: 0;
top: 0;
transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
z-index: 100;
}
.br-nav.scrolled,
body.theme-light .br-nav {
background: rgba(15, 23, 42, .98);
box-shadow: 0 4px 30px rgba(0,0,0,.28);
padding-top: 15px;
padding-bottom: 15px;
}
.br-brand img { height: clamp(40px, 6vw, 50px); object-fit: contain; width: auto; }
.br-nav nav,
.site-menu { align-items: center; display: flex; gap: clamp(16px, 2.3vw, 30px); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.nav-group { margin: -18px 0; padding: 18px 0; position: relative; }
.nav-group > a { align-items: center; display: inline-flex; gap: 8px; }
.nav-group > a:after {
border-bottom: 1px solid currentColor;
border-right: 1px solid currentColor;
content: "";
height: 6px;
margin-top: -3px;
opacity: .75;
transform: rotate(45deg);
width: 6px;
}
.submenu {
background: rgba(15,23,42,.98);
border: 1px solid rgba(226,232,240,.15);
box-shadow: 0 20px 50px rgba(0,0,0,.28);
display: grid;
gap: 2px;
left: 50%;
min-width: 260px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
top: calc(100% - 2px);
transform: translate(-50%, -8px);
transition: opacity .18s ease, transform .18s ease;
}
.submenu a {
color: #cbd5e1;
letter-spacing: .1em;
padding: 13px 14px;
text-transform: uppercase;
white-space: nowrap;
}
.submenu a:hover,
.submenu a:focus { background: rgba(255,255,255,.07); color: #fff; }
.submenu a[data-nav-overview] { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 4px; }
@media (max-width: 900px) { .submenu a[data-nav-overview] { border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: 0; } }
.nav-group:hover .submenu,
.nav-group:focus-within .submenu {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.submenu:before {
content: "";
height: 18px;
left: 0;
position: absolute;
right: 0;
top: -18px;
}
.br-action, .br-button {
background: #0f172a;
border: 1px solid #0f172a;
color: #fff;
display: inline-flex;
font-size: 11px;
font-weight: 700;
justify-content: center;
letter-spacing: .2em;
padding: 16px 24px;
text-transform: uppercase;
white-space: nowrap;
}
.br-action { background: #000; border-color: #000; padding: 15px 22px; }
.br-hero { height: 100svh; min-height: 690px; overflow: hidden; position: fixed; inset: 0 0 auto; z-index: 0; }
.br-hero video, .br-hero img { height: 100%; object-fit: cover; width: 100%; }
.br-overlay { background: linear-gradient(to top, rgba(15,23,42,.76), rgba(15,23,42,.05) 48%), linear-gradient(90deg, rgba(15,23,42,.5), transparent 62%); inset: 0; position: absolute; }
.br-hero-copy { bottom: clamp(24px, 5vw, 54px); color: #f8fafc; left: 0; position: absolute; right: 0; }
.br-hero-copy .br-label { color: rgba(255,255,255,.72); }
.br-hero-copy h1 { font-size: clamp(34px, 5vw, 68px); font-weight: 650; letter-spacing: -.065em; line-height: .96; margin: 0 0 24px; max-width: 980px; }
.br-hero-copy p { color: rgba(255,255,255,.76); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.72; margin: 0; max-width: 610px; }
.br-content { background: #fff; margin-top: 100svh; position: relative; z-index: 2; }
.home-planner { background: #fff; padding: clamp(70px, 10vw, 118px) 0; }
.home-planner-copy { margin: 0 auto clamp(34px, 5vw, 54px); max-width: 940px; text-align: center; }
.home-planner-copy p {
color: #9ca3af;
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 360;
letter-spacing: -.02em;
line-height: 1.62;
margin: 0;
}
.planner-form {
background: #fff;
border: 1px solid #d1d5db;
border-radius: 999px;
box-shadow: 0 18px 42px rgba(15,23,42,.08);
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
margin: 0 auto;
max-width: 1100px;
min-height: 70px;
overflow: hidden;
}
.planner-form label {
border-right: 1px solid #e5e7eb;
display: grid;
gap: 5px;
justify-content: stretch;
padding: 14px 24px;
}
.planner-form span {
color: #94a3b8;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.planner-form input, .planner-form select {
appearance: none;
background: transparent;
border: 0;
color: #0f172a;
outline: 0;
width: 100%;
}
.planner-form button {
background: #0f172a;
border: 0;
color: #fff;
cursor: pointer;
font-weight: 700;
letter-spacing: .12em;
padding: 0 34px;
text-transform: uppercase;
}
.page-hero {
background: #0f172a;
color: #fff;
min-height: 520px;
padding: clamp(145px, 18vw, 210px) 0 clamp(70px, 10vw, 118px);
position: relative;
overflow: hidden;
}
.page-hero:after { background: radial-gradient(circle at 75% 10%, rgba(211,41,39,.22), transparent 34%); content:""; inset:0; position:absolute; }
.page-hero .br-shell { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(40px, 6vw, 82px); font-weight: 650; letter-spacing: -.075em; line-height: .96; margin: 0 0 26px; max-width: 930px; }
.page-hero p { color: #cbd5e1; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.78; margin: 0; max-width: 720px; }
.section { padding: clamp(72px, 10vw, 126px) 0; }
.section.soft { background: #f8fafc; }
.section.dark { background: #0f172a; color: #f8fafc; }
.intro-grid { display: grid; gap: clamp(34px, 7vw, 92px); grid-template-columns: .82fr 1.18fr; }
.intro-grid h2, .section-head h2 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 380; letter-spacing: -.075em; line-height: 1.06; margin: 0; }
.intro-grid p, .section-head p, .copy p { color: #64748b; line-height: 1.78; margin: 0; }
.dark .intro-grid p, .dark .section-head p, .dark .copy p { color: #94a3b8; }
.section-head { align-items: end; display: grid; gap: clamp(28px, 5vw, 70px); grid-template-columns: .9fr 1fr; margin-bottom: clamp(36px, 6vw, 68px); }
.card-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: #e2e8f0; }
.card { background: #fff; padding: clamp(28px, 4vw, 46px); min-height: 260px; }
.dark .card { background: #111c31; }
.card h3 { font-size: clamp(23px, 2.5vw, 32px); font-weight: 460; letter-spacing: -.045em; line-height: 1.08; margin: 0 0 18px; }
.card p, .card li { color: #64748b; line-height: 1.7; }
.dark .card p, .dark .card li { color: #a7b3c6; }
.image-duo { display: grid; grid-template-columns: 1fr 1fr; }
.image-duo article { background: #fff; }
.image-duo article + article { border-left: 1px solid #e2e8f0; }
.image-duo img { height: clamp(380px, 45vw, 580px); object-fit: cover; width: 100%; }
.image-duo div { padding: clamp(34px, 6vw, 64px) clamp(30px, 6vw, 70px); }
.image-duo h3 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 380; letter-spacing: -.065em; line-height: 1.12; margin: 0 0 18px; }
.split-feature { display: grid; grid-template-columns: 1.06fr .94fr; min-height: clamp(520px, 58vw, 720px); }
.split-feature figure { margin: 0; }
.split-feature img { height: 100%; object-fit: cover; width: 100%; }
.split-feature .copy { align-self: center; padding: clamp(42px, 7vw, 84px); }
.split-feature h2 { font-size: clamp(36px, 4.8vw, 62px); font-weight: 360; letter-spacing: -.075em; line-height: 1.06; margin: 0 0 24px; }
.process-list { display: grid; gap: 0; }
.process-list article { border-top: 1px solid #e2e8f0; display: grid; gap: 24px; grid-template-columns: 70px 190px 1fr; padding: 27px 0; }
.process-list strong { color: #2f6f9f; font-size: 12px; letter-spacing: .22em; }
.process-list h3 { font-size: 22px; font-weight: 520; margin: 0; }
.process-list p { color: #64748b; font-size: 15px; line-height: 1.7; margin: 0; }
.gallery { display: grid; gap: 14px; grid-template-columns: 1.34fr .83fr .83fr; }
.gallery figure { margin: 0; }
.gallery img { height: clamp(290px, 34vw, 450px); object-fit: cover; width: 100%; }
.gallery figcaption { color: #64748b; font-size: 11px; letter-spacing: .22em; margin-top: 14px; text-transform: uppercase; }
.journey-section { overflow: hidden; }
.journey-strip {
display: grid;
gap: 1px;
grid-template-columns: repeat(4, minmax(270px, 1fr));
margin-left: max(20px, calc((100vw - 1340px) / 2));
overflow-x: auto;
padding-right: max(20px, calc((100vw - 1340px) / 2));
scrollbar-width: none;
}
.journey-strip::-webkit-scrollbar { display: none; }
.journey-strip article {
background: #fff;
border: 1px solid #e2e8f0;
min-height: 310px;
padding: clamp(26px, 4vw, 42px);
}
.journey-strip span {
color: #2f6f9f;
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: .24em;
margin-bottom: 52px;
text-transform: uppercase;
}
.journey-strip h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 440; letter-spacing: -.055em; line-height: 1.05; margin: 0 0 18px; }
.journey-strip p { color: #64748b; line-height: 1.72; margin: 0; }
.dark-feature { background: #0f172a; color: #f8fafc; }
.dark-feature .copy p { color: #94a3b8; margin-bottom: 30px; }
.season-support {
background: #0f172a;
color: #f8fafc;
display: grid;
grid-template-columns: .92fr 1.08fr;
}
.season-support-media { margin: 0; min-height: clamp(490px, 55vw, 650px); position: relative; }
.season-support-media img { height: 100%; object-fit: cover; width: 100%; }
.season-support-media:after { background: linear-gradient(0deg, rgba(15,23,42,.64), transparent 55%); content:""; inset:0; position:absolute; }
.season-support-media span {
bottom: 30px;
color: #fff;
font-size: 11px;
font-weight: 700;
left: 30px;
letter-spacing: .22em;
position: absolute;
text-transform: uppercase;
z-index: 1;
}
.season-support-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(43px, 7vw, 76px);
}
.season-support-copy .br-label { color: #f87171; }
.season-support-copy h2 {
font-size: clamp(36px, 4.4vw, 56px);
font-weight: 360;
letter-spacing: -.075em;
line-height: 1.06;
margin: 0 0 22px;
}
.season-support-copy > p { color: #94a3b8; line-height: 1.75; margin: 0 0 42px; max-width: 510px; }
.season-metrics {
border-top: 1px solid rgba(226,232,240,.17);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.season-metrics div {
border-right: 1px solid rgba(226,232,240,.17);
padding: 23px clamp(12px, 2vw, 21px) 0 0;
}
.season-metrics div + div { padding-left: clamp(12px, 2vw, 21px); }
.season-metrics strong {
display: block;
font-size: clamp(29px, 3.5vw, 40px);
font-weight: 350;
letter-spacing: -.065em;
margin-bottom: 10px;
}
.season-metrics span { color: #94a3b8; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.faq-panel {
background: #fff;
padding: clamp(68px, 10vw, 112px) 0;
}
.faq-layout {
display: grid;
gap: clamp(34px, 7vw, 90px);
grid-template-columns: .7fr 1.3fr;
}
.faq-copy h2 {
font-size: clamp(35px, 4.3vw, 56px);
font-weight: 360;
letter-spacing: -.075em;
line-height: 1.05;
margin: 0 0 28px;
}
.faq-link {
border-bottom: 1px solid #2f6f9f;
color: #2f6f9f;
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
padding-bottom: 7px;
text-transform: uppercase;
}
.bottom-feature {
background: #f8fafc;
display: grid;
grid-template-columns: 1.05fr .95fr;
}
.bottom-feature-photo { height: clamp(460px, 56vw, 650px); margin: 0; position: relative; }
.bottom-feature-photo img { height: 100%; object-fit: cover; width: 100%; }
.bottom-feature-photo:after { background: linear-gradient(0deg, rgba(15,23,42,.46), transparent 50%); content:""; inset:0; position:absolute; }
.bottom-feature-photo span {
bottom: 28px;
color: #fff;
font-size: 11px;
font-weight: 700;
left: 28px;
letter-spacing: .22em;
position: absolute;
text-transform: uppercase;
z-index: 1;
}
.bottom-inquiry {
align-self: center;
padding: clamp(44px, 7vw, 84px);
}
.bottom-inquiry h2 {
font-size: clamp(36px, 4.5vw, 58px);
font-weight: 360;
letter-spacing: -.075em;
line-height: 1.04;
margin: 0 0 22px;
}
.bottom-inquiry p { color: #64748b; line-height: 1.78; margin: 0 0 32px; max-width: 520px; }
.inquiry-row {
border: 1px solid #dbe3ec;
display: grid;
grid-template-columns: 1fr auto;
max-width: 560px;
}
.inquiry-row input { background: #fff; border: 0; min-height: 62px; outline: 0; padding: 0 20px; width: 100%; }
.inquiry-row button { background: #0f172a; border: 0; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .18em; padding: 0 28px; text-transform: uppercase; }
.faq-list { border-top: 1px solid #dbe3ec; }
.faq-item { border-bottom: 1px solid #dbe3ec; overflow: hidden; transition: background .18s ease, border-color .18s ease; }
.faq-item:hover,
.faq-item:focus-within,
.faq-item[open] {
background: #fbfcfd;
border-color: #cbd5e1;
}
.faq-item summary { align-items: center; cursor: pointer; display: grid; font-size: clamp(17px, 1.55vw, 21px); font-weight: 500; gap: 18px; grid-template-columns: 1fr 28px; letter-spacing: -.025em; list-style: none; padding: 21px 0; position: relative; z-index: 1; }
.faq-item summary:focus { outline: 0; }
.faq-item summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(47,111,159,.42); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after {
align-items: center;
border: 1px solid #cbd5e1;
color: #2f6f9f;
content: "+";
display: inline-flex;
font-size: 17px;
font-weight: 400;
height: 28px;
justify-content: center;
line-height: 1;
transition: background .18s ease, border-color .18s ease, color .18s ease;
width: 28px;
}
.faq-item:hover summary:after,
.faq-item:focus-within summary:after {
border-color: #2f6f9f;
}
.faq-item[open] summary:after {
background: #0f172a;
border-color: #0f172a;
color: #fff;
content: "-";
}
.faq-item p { color: #64748b; line-height: 1.68; margin: 0 0 22px; max-width: 800px; padding-right: 44px; position: relative; z-index: 1; }
.faq-hero {
min-height: 500px;
}
.faq-hero:after {
background:
linear-gradient(120deg, rgba(15,23,42,.08), transparent 46%),
radial-gradient(circle at 82% 18%, rgba(47,111,159,.24), transparent 32%);
}
.faq-directory {
background: #fff;
padding: clamp(56px, 8vw, 90px) 0;
}
.faq-directory-grid {
align-items: start;
display: grid;
gap: clamp(34px, 6vw, 76px);
grid-template-columns: 250px 1fr;
}
.faq-index {
border-top: 1px solid #dbe3ec;
display: grid;
gap: 0;
position: sticky;
top: 112px;
}
.faq-index .br-label {
margin: 22px 0 18px;
}
.faq-index a {
border-bottom: 1px solid #dbe3ec;
color: #475569;
font-size: 11px;
font-weight: 800;
letter-spacing: .15em;
padding: 15px 0;
text-transform: uppercase;
transition: color .18s ease;
}
.faq-index a:hover,
.faq-index a:focus {
color: #d32927;
}
.faq-sections {
display: grid;
gap: clamp(46px, 7vw, 72px);
}
.faq-category {
scroll-margin-top: 120px;
}
.faq-category-head {
align-items: start;
display: grid;
gap: clamp(16px, 3vw, 30px);
grid-template-columns: 54px 1fr;
margin-bottom: clamp(18px, 3vw, 28px);
}
.faq-category-head > span {
color: #2f6f9f;
font-size: 12px;
font-weight: 800;
letter-spacing: .2em;
padding-top: 12px;
}
.faq-category h2 {
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 350;
letter-spacing: -.055em;
line-height: 1.05;
margin: 0 0 10px;
}
.faq-category p {
color: #64748b;
font-size: 15px;
line-height: 1.65;
margin: 0;
max-width: 640px;
}
.faq-list-large {
border-color: #cfd9e5;
}
.faq-list-large .faq-item {
border-color: #cfd9e5;
}
.faq-list-large .faq-item summary {
font-size: clamp(18px, 1.8vw, 24px);
font-weight: 430;
letter-spacing: -.035em;
min-height: 72px;
padding: 18px clamp(14px, 2.4vw, 24px);
}
.faq-list-large .faq-item p {
font-size: clamp(14px, 1.1vw, 16px);
padding: 0 clamp(56px, 6vw, 84px) 24px clamp(14px, 2.4vw, 24px);
}
.contact-panel { background: #0f172a; color: #fff; display: grid; grid-template-columns: .9fr 1.1fr; }
.contact-panel img { height: 100%; object-fit: cover; width: 100%; }
.contact-panel .copy { padding: clamp(44px, 7vw, 86px); }
.contact-panel input, .contact-panel textarea, .contact-panel select {
background: #fff;
border: 1px solid #dbe3ec;
color: #0f172a;
min-height: 54px;
padding: 14px 16px;
width: 100%;
}
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
.form-grid .wide { grid-column: 1 / -1; }
.media-row { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: clamp(44px, 7vw, 76px) 0; }
.media-row-inner { align-items: center; display: grid; gap: 34px; grid-template-columns: .55fr 1fr; }
.media-logos { align-items: center; display: grid; gap: 24px; grid-template-columns: repeat(5, 1fr); }
.media-logos img { filter: grayscale(1) contrast(1.05); max-height: 54px; object-fit: contain; opacity: .72; width: 100%; }
.site-footer { background: #0f172a; color: #cbd5e1; padding: clamp(58px, 8vw, 96px) 0 34px; }
.site-footer-grid { display: grid; gap: clamp(34px, 5vw, 70px); grid-template-columns: 1.1fr .6fr .6fr .8fr; }
.site-footer img { filter: none; height: 50px; margin-bottom: 24px; width: auto; }
.site-footer p, .footer-links a { color: #94a3b8; line-height: 1.7; }
.site-footer h3 { color: #fff; font-size: 12px; letter-spacing: .2em; margin: 0 0 22px; text-transform: uppercase; }
.footer-links { display: grid; gap: 12px; }
.site-footer-base { border-top: 1px solid rgba(226,232,240,.16); display: flex; gap: 20px; justify-content: space-between; margin-top: 52px; padding-top: 25px; color: #64748b; font-size: 12px; }
.concept-lab { background: #fff; }
.concept-lab-grid {
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
background: #dbe3ec;
}
.concept-tile {
background: #fff;
display: grid;
grid-template-rows: auto 1fr;
min-height: 640px;
}
.concept-tile figure { margin: 0; overflow: hidden; }
.concept-tile img { aspect-ratio: 1.18 / 1; height: 100%; object-fit: cover; width: 100%; }
.concept-tile-copy { padding: clamp(28px, 4vw, 44px); }
.concept-tile h2 {
font-size: clamp(30px, 3.3vw, 44px);
font-weight: 380;
letter-spacing: -.07em;
line-height: 1.04;
margin: 0 0 18px;
}
.concept-tile p { color: #64748b; line-height: 1.72; margin: 0 0 28px; }
.concept-points {
border-top: 1px solid #e2e8f0;
display: grid;
gap: 0;
margin-top: 26px;
}
.concept-points span {
border-bottom: 1px solid #e2e8f0;
color: #475569;
font-size: 12px;
letter-spacing: .14em;
padding: 15px 0;
text-transform: uppercase;
}
.concept-band {
background: #0f172a;
color: #f8fafc;
display: grid;
grid-template-columns: .8fr 1.2fr;
}
.concept-band .copy { padding: clamp(42px, 7vw, 82px); }
.concept-band h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 340; letter-spacing: -.085em; line-height: .98; margin: 0; }
.concept-band p { color: #94a3b8; line-height: 1.75; margin: 24px 0 0; max-width: 620px; }
.story-hero {
background: #f4f1ea;
color: #0f172a;
display: grid;
grid-template-columns: .78fr 1.22fr;
min-height: 720px;
}
.story-hero-copy { align-self: end; padding: clamp(120px, 16vw, 190px) clamp(36px, 7vw, 90px) clamp(50px, 8vw, 90px); }
.story-hero h1 { font-size: clamp(48px, 7.8vw, 104px); font-weight: 330; letter-spacing: -.095em; line-height: .92; margin: 0 0 26px; }
.story-hero p { color: #53606f; line-height: 1.78; margin: 0; max-width: 560px; }
.story-mosaic {
display: grid;
gap: 14px;
grid-template-columns: .8fr 1.2fr;
padding: clamp(96px, 13vw, 150px) clamp(20px, 3vw, 42px) clamp(32px, 5vw, 62px) 0;
}
.story-mosaic img { height: 100%; object-fit: cover; width: 100%; }
.story-mosaic img:first-child { margin-top: 90px; }
.story-mosaic img:last-child { grid-row: span 2; min-height: 560px; }
.stat-ribbon {
background: #0f172a;
color: #f8fafc;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.stat-ribbon div { border-right: 1px solid rgba(226,232,240,.16); padding: clamp(28px, 5vw, 54px); }
.stat-ribbon strong { display: block; font-size: clamp(34px, 4vw, 58px); font-weight: 330; letter-spacing: -.075em; margin-bottom: 10px; }
.stat-ribbon span { color: #94a3b8; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.editorial-columns { column-gap: clamp(42px, 7vw, 90px); columns: 2; color: #475569; line-height: 1.85; }
.editorial-columns p { break-inside: avoid; margin: 0 0 24px; }
.service-command {
background: #0b1220;
color: #f8fafc;
padding: clamp(145px, 18vw, 210px) 0 clamp(74px, 10vw, 118px);
}
.service-command-grid { display: grid; gap: clamp(36px, 7vw, 92px); grid-template-columns: .9fr 1.1fr; align-items: end; }
.service-command h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 330; letter-spacing: -.095em; line-height: .94; margin: 0; }
.service-command p { color: #94a3b8; line-height: 1.78; margin: 0; max-width: 650px; }
.service-rail { background: #0f172a; color: #f8fafc; display: grid; grid-template-columns: 310px 1fr; }
.service-rail aside { border-right: 1px solid rgba(226,232,240,.16); padding: clamp(32px, 5vw, 60px); position: sticky; top: 80px; height: max-content; }
.service-rail aside a { border-bottom: 1px solid rgba(226,232,240,.13); color: #94a3b8; display: block; font-size: 12px; letter-spacing: .16em; padding: 17px 0; text-transform: uppercase; }
.service-stack { display: grid; }
.service-row { border-bottom: 1px solid rgba(226,232,240,.14); display: grid; gap: clamp(24px, 5vw, 70px); grid-template-columns: .72fr 1fr; padding: clamp(40px, 7vw, 76px); }
.service-row h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 350; letter-spacing: -.075em; line-height: 1.03; margin: 0; }
.service-row p { color: #a7b3c6; line-height: 1.78; margin: 0; }
.service-proof { background: #f8fafc; display: grid; grid-template-columns: repeat(4, 1fr); }
.service-proof article { border-right: 1px solid #e2e8f0; padding: clamp(28px, 4vw, 48px); }
.service-proof h3 { font-size: clamp(22px, 2.6vw, 34px); font-weight: 390; letter-spacing: -.055em; margin: 0 0 14px; }
.service-proof p { color: #64748b; line-height: 1.7; margin: 0; }
.shop-hero {
background:
linear-gradient(135deg, rgba(15,23,42,.93), rgba(15,23,42,.78)),
url("../../media/DSC_3535-copy-scaled.jpg") center / cover;
color: #fff;
padding: clamp(138px, 18vw, 220px) 0 clamp(74px, 10vw, 128px);
}
.shop-hero .br-label { color: #9bd7f5; }
.shop-hero-grid { align-items: end; display: grid; gap: clamp(34px, 7vw, 90px); grid-template-columns: 1.05fr .95fr; }
.shop-hero-grid > *, .service-command-grid > *, .service-row > *, .story-hero > * { min-width: 0; }
.shop-hero h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 330; letter-spacing: -.095em; line-height: .94; margin: 0; }
.shop-hero p { color: #cbd5e1; line-height: 1.78; margin: 0; }
.catalog-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; padding-bottom: 8px; }
.catalog-strip a { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .15em; padding: 12px 15px; text-transform: uppercase; }
.shop-collection-header {
background: #fff;
color: #0f172a;
padding: clamp(98px, 10vw, 124px) 0 0;
}
.shop-collection-header h1 {
font-size: clamp(34px, 4vw, 52px);
font-weight: 420;
letter-spacing: -.045em;
line-height: 1.05;
margin: 0 0 clamp(30px, 5vw, 58px);
}
.shop-toolbar {
align-items: center;
border-bottom: 1px solid #e2e8f0;
display: flex;
gap: 18px;
justify-content: space-between;
padding: 0 0 18px;
}
.shop-toolbar-left,
.shop-toolbar-right {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.shop-toolbar span,
.shop-toolbar label,
.shop-toolbar button,
.shop-toolbar select {
color: #334155;
font-size: 14px;
font-weight: 430;
}
.shop-toolbar button,
.shop-toolbar select {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 16px 0 0;
position: relative;
}
.shop-toolbar button::after,
.shop-toolbar select {
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 7px) 50%, calc(100% - 3px) 50%;
background-repeat: no-repeat;
background-size: 4px 4px, 4px 4px;
}
.shop-toolbar-right > span {
color: #64748b;
margin-left: 18px;
}
.shop-product-grid {
background: #fff;
gap: clamp(28px, 3vw, 42px) clamp(16px, 2vw, 24px);
padding-top: clamp(26px, 4vw, 44px);
padding-bottom: clamp(56px, 8vw, 90px);
}
.shop-note { background: #eef6fb; border-bottom: 1px solid #dbe7ef; border-top: 1px solid #dbe7ef; padding: clamp(28px, 4vw, 44px) 0; }
.shop-note-grid { align-items: center; display: grid; gap: 28px; grid-template-columns: .55fr 1fr; }
.shop-note h2 { color: #0f172a; font-size: clamp(28px, 3.4vw, 44px); font-weight: 360; letter-spacing: -.065em; margin: 0; }
.shop-note p { color: #475569; line-height: 1.72; margin: 0; }
.product-system { background: #f8fafc; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: clamp(24px, 4vw, 54px) max(22px, calc((100vw - 1340px) / 2)); }
.product-system.shop-product-grid { background: #fff; }
.shop-page .cart-nav-trigger {
align-items: center;
display: inline-flex;
height: 34px;
justify-content: center;
margin-left: 2px;
position: relative;
width: 34px;
}
.shop-page .cart-nav-trigger svg {
height: 19px !important;
margin-left: 0 !important;
width: 19px !important;
}
.shop-page .cart-badge-count {
align-items: center;
background: #d32927;
border-radius: 999px;
color: #fff;
display: flex;
font-size: 9px;
font-weight: 700;
height: 15px;
justify-content: center;
min-width: 15px;
padding: 0 4px;
position: absolute;
right: 0;
top: 1px;
}
.shop-page .shop-collection-header {
padding-top: clamp(94px, 9vw, 118px);
}
.shop-page .shop-collection-header h1 {
font-size: clamp(36px, 3.3vw, 46px);
font-weight: 420;
margin-bottom: clamp(42px, 5vw, 64px);
}
.shop-page .shop-product-grid {
gap: clamp(30px, 3vw, 44px) clamp(10px, 1.4vw, 18px);
}
.shop-page .product-image-container {
padding: 0;
}
.shop-page .product-badge,
.shop-page .product-category-label,
.shop-page .variant-selector-wrapper,
.shop-page .btn-add-to-cart {
display: none;
}
.shop-page .product-details {
padding-top: 13px;
}
.shop-page .product-title {
font-size: 14px;
font-weight: 430;
line-height: 1.35;
margin-bottom: 7px;
}
.shop-page .product-price-row {
display: block;
padding-top: 0;
}
.shop-page .product-price {
display: block;
font-size: 16px;
font-weight: 430;
}
.product-card { background: #fff; border: 1px solid #dbe3ec; display: grid; grid-template-rows: auto 1fr; min-height: 560px; }
.product-card img { aspect-ratio: 1.12 / 1; background: #f1f5f9; height: 100%; object-fit: contain; padding: 22px; width: 100%; }
.product-card div { padding: clamp(24px, 3vw, 36px); }
.product-card h2 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 390; letter-spacing: -.06em; line-height: 1.06; margin: 0 0 16px; overflow-wrap: anywhere; }
.product-card p { color: #64748b; line-height: 1.7; margin: 0 0 24px; }
.quote-band { background: #0f172a; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: clamp(34px, 6vw, 70px) max(38px, calc((100vw - 1340px) / 2)); }
.quote-band h2 { font-size: clamp(34px, 4vw, 58px); font-weight: 340; letter-spacing: -.075em; margin: 0; }
.quote-band p { margin: 0; opacity: .82; }
.quote-band .br-button { border-color: #fff; }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); background: #e2e8f0; gap: 1px; }
.team-card { background: #fff; min-height: 430px; }
.team-card img { aspect-ratio: 1 / 1.08; height: auto; object-fit: cover; width: 100%; }
.team-card div { padding: 24px; }
.team-card h3 { font-size: 24px; font-weight: 390; letter-spacing: -.045em; margin: 0 0 8px; }
.team-card strong { color: #2f6f9f; display: block; font-size: 10px; letter-spacing: .16em; line-height: 1.5; margin-bottom: 14px; text-transform: uppercase; }
.team-card p { color: #64748b; font-size: 14px; line-height: 1.65; margin: 0; }
.install-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: #0f172a; padding: 8px; }
.install-gallery img { aspect-ratio: 1.12 / 1; height: 100%; object-fit: cover; width: 100%; }
.page-band { background: #f8fafc; padding: clamp(42px, 7vw, 78px) 0; }
.page-band-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); background: #dbe3ec; }
.page-band-card { background: #fff; padding: clamp(26px, 4vw, 42px); }
.page-band-card h3 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 390; letter-spacing: -.055em; margin: 0 0 14px; }
.page-band-card p { color: #64748b; line-height: 1.72; margin: 0; }
.about-switcher {
background: #0f172a;
border-bottom: 1px solid rgba(226,232,240,.14);
color: #fff;
padding: 104px max(22px, calc((100vw - 1340px) / 2)) 18px;
}
.about-switcher nav { display: flex; flex-wrap: wrap; gap: 10px; }
.about-switcher a {
border: 1px solid rgba(255,255,255,.18);
color: #cbd5e1;
font-size: 11px;
font-weight: 750;
letter-spacing: .16em;
padding: 12px 14px;
text-transform: uppercase;
}
.about-switcher a.active,
.about-switcher a:hover { background: #fff; color: #0f172a; }
.about-editorial-hero {
background: #f8fafc;
display: grid;
grid-template-columns: .92fr 1.08fr;
min-height: 760px;
}
.about-editorial-copy { align-self: end; padding: clamp(70px, 10vw, 128px) clamp(34px, 7vw, 90px); }
.about-editorial-copy h1 { font-size: clamp(54px, 8.4vw, 118px); font-weight: 310; letter-spacing: -.105em; line-height: .9; margin: 0 0 28px; }
.about-editorial-copy p { color: #475569; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.65; margin: 0; max-width: 670px; }
.about-editorial-media { display: grid; grid-template-columns: 1fr 1fr; min-height: 760px; }
.about-editorial-media img { height: 100%; object-fit: cover; width: 100%; }
.about-editorial-media img:first-child { margin-top: clamp(60px, 10vw, 128px); height: calc(100% - clamp(60px, 10vw, 128px)); }
.about-statement { background: #fff; padding: clamp(70px, 11vw, 132px) 0; }
.about-statement-grid { display: grid; gap: clamp(42px, 8vw, 110px); grid-template-columns: .8fr 1.2fr; }
.about-statement h2 { font-size: clamp(42px, 5.6vw, 82px); font-weight: 320; letter-spacing: -.09em; line-height: .98; margin: 0; }
.about-statement p { color: #475569; font-size: 18px; line-height: 1.82; margin: 0 0 22px; }
.about-proof-grid { background: #0f172a; color: #fff; display: grid; grid-template-columns: repeat(4, 1fr); }
.about-proof-grid article { border-right: 1px solid rgba(226,232,240,.16); padding: clamp(30px, 4.8vw, 58px); }
.about-proof-grid strong { color: #9bd7f5; display: block; font-size: 12px; letter-spacing: .2em; margin-bottom: 48px; text-transform: uppercase; }
.about-proof-grid h3 { font-size: clamp(25px, 3vw, 38px); font-weight: 360; letter-spacing: -.065em; line-height: 1.05; margin: 0 0 16px; }
.about-proof-grid p { color: #a7b3c6; line-height: 1.7; margin: 0; }
.about-panorama { min-height: clamp(420px, 54vw, 720px); position: relative; }
.about-panorama img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.about-panorama div { background: rgba(15,23,42,.82); bottom: clamp(22px, 4vw, 58px); color: #fff; left: clamp(22px, 6vw, 86px); max-width: 560px; padding: clamp(28px, 5vw, 52px); position: absolute; }
.about-panorama h2 { font-size: clamp(34px, 5vw, 68px); font-weight: 330; letter-spacing: -.08em; line-height: .98; margin: 0 0 18px; }
.about-panorama p { color: #cbd5e1; line-height: 1.72; margin: 0; }
.about-command-hero {
background: linear-gradient(120deg, rgba(15,23,42,.95), rgba(15,23,42,.72)), url("../../media/DJI_0096-scaled.jpg") center / cover;
color: #fff;
min-height: 760px;
padding: clamp(150px, 20vw, 230px) max(24px, calc((100vw - 1340px) / 2)) clamp(54px, 9vw, 110px);
}
.about-command-hero h1 { font-size: clamp(52px, 8vw, 112px); font-weight: 310; letter-spacing: -.105em; line-height: .9; margin: 0; max-width: 980px; }
.about-command-hero p { color: #cbd5e1; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.7; margin: 28px 0 0; max-width: 650px; }
.about-command-panel { background: #0b1220; color: #fff; display: grid; grid-template-columns: 320px 1fr; }
.about-command-panel aside { border-right: 1px solid rgba(226,232,240,.15); padding: clamp(32px, 5vw, 58px); }
.about-command-panel aside span { color: #9bd7f5; display: block; font-size: 11px; letter-spacing: .18em; margin-bottom: 20px; text-transform: uppercase; }
.about-command-list article { border-bottom: 1px solid rgba(226,232,240,.13); display: grid; gap: clamp(26px, 5vw, 74px); grid-template-columns: .7fr 1fr; padding: clamp(38px, 6vw, 70px); }
.about-command-list h2 { font-size: clamp(32px, 4.4vw, 60px); font-weight: 330; letter-spacing: -.08em; line-height: 1; margin: 0; }
.about-command-list p { color: #a7b3c6; line-height: 1.78; margin: 0; }
.team-hero {
background: #f8fafc;
padding: clamp(148px, 18vw, 220px) 0 clamp(56px, 8vw, 96px);
}
.team-hero-grid { align-items: end; display: grid; gap: clamp(34px, 7vw, 92px); grid-template-columns: .95fr 1.05fr; }
.team-hero h1 { font-size: clamp(54px, 8vw, 108px); font-weight: 310; letter-spacing: -.105em; line-height: .9; margin: 0; }
.team-hero p { color: #475569; font-size: 18px; line-height: 1.78; margin: 0; }
.team-page-grid { background: #e2e8f0; display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); }
.team-page-card { background: #fff; display: grid; grid-template-columns: .45fr .55fr; min-height: 380px; }
.team-page-card img { height: 100%; object-fit: cover; width: 100%; }
.team-page-card div { align-self: end; padding: clamp(24px, 4vw, 42px); }
.team-page-card h2 { font-size: clamp(28px, 3.8vw, 48px); font-weight: 330; letter-spacing: -.075em; line-height: 1; margin: 0 0 10px; }
.team-page-card strong { color: #2f6f9f; display: block; font-size: 10px; letter-spacing: .16em; line-height: 1.5; margin-bottom: 18px; text-transform: uppercase; }
.team-page-card p { color: #64748b; line-height: 1.7; margin: 0; }
/* ── Concept 4: Archive ──────────────────────────────── */
.about-archive-hero {
background: #080e1a;
color: #fff;
display: grid;
grid-template-columns: .52fr .48fr;
min-height: 820px;
}
.about-archive-left {
align-self: end;
padding: clamp(150px, 18vw, 220px) clamp(34px, 7vw, 90px) clamp(60px, 8vw, 100px);
}
.about-archive-eyebrow {
color: rgba(255,255,255,.38);
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .28em;
margin-bottom: 32px;
text-transform: uppercase;
}
.about-archive-h1 {
font-size: clamp(64px, 11vw, 158px);
font-weight: 280;
letter-spacing: -.11em;
line-height: .88;
margin: 0 0 36px;
}
.about-archive-sub {
color: rgba(255,255,255,.6);
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.72;
margin: 0;
max-width: 520px;
}
.about-archive-right { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
.about-archive-right img { height: 100%; object-fit: cover; width: 100%; }
.about-credential-bar {
background: #fff;
border-bottom: 1px solid #e2e8f0;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.about-credential-bar div { border-right: 1px solid #e2e8f0; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px); }
.about-credential-bar strong {
color: #0f172a;
display: block;
font-size: clamp(38px, 5vw, 64px);
font-weight: 290;
letter-spacing: -.08em;
line-height: 1;
margin-bottom: 10px;
}
.about-credential-bar strong sup { font-size: .55em; vertical-align: super; }
.about-credential-bar span { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.about-archive-body { background: #fff; padding: clamp(72px, 10vw, 126px) 0; }
.about-archive-body-grid {
display: grid;
gap: clamp(42px, 8vw, 110px);
grid-template-columns: .82fr 1.18fr;
}
.about-archive-body h2 {
font-size: clamp(42px, 5.8vw, 86px);
font-weight: 310;
letter-spacing: -.095em;
line-height: .96;
margin: 0;
}
.about-archive-body-copy p { color: #475569; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.85; margin: 0 0 22px; }
.about-pull-quote-inline {
border-left: 3px solid #2f6f9f;
color: #0f172a;
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 340;
letter-spacing: -.04em;
line-height: 1.3;
margin: 42px 0;
padding: 8px 0 8px 28px;
}
.about-project-types {
background: #080e1a;
color: #fff;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.about-project-type {
border-right: 1px solid rgba(226,232,240,.13);
display: flex;
flex-direction: column;
min-height: 380px;
padding: clamp(32px, 5vw, 56px) clamp(26px, 4vw, 42px);
}
.about-project-type > span {
color: rgba(255,255,255,.3);
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
margin-bottom: auto;
padding-bottom: clamp(40px, 6vw, 70px);
text-transform: uppercase;
}
.about-project-type h3 {
font-size: clamp(30px, 3.6vw, 48px);
font-weight: 330;
letter-spacing: -.075em;
line-height: 1;
margin: 0 0 14px;
}
.about-project-type p { color: #a7b3c6; font-size: 15px; line-height: 1.7; margin: 0; }
/* ── Concept 5: Open Ice ─────────────────────────────── */
.about-openice-hero { min-height: 92svh; position: relative; }
.about-openice-hero img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.about-openice-hero:after {
background: linear-gradient(to top, rgba(8,14,26,.9) 0%, rgba(8,14,26,.42) 44%, transparent 68%);
content: "";
inset: 0;
position: absolute;
}
.about-openice-caption {
bottom: 0;
color: #fff;
left: 0;
padding: 0 max(22px, calc((100vw - 1340px) / 2)) clamp(56px, 9vw, 100px);
position: absolute;
right: 0;
z-index: 1;
}
.about-openice-caption > span {
color: rgba(255,255,255,.58);
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
margin-bottom: 26px;
text-transform: uppercase;
}
.about-openice-caption h1 {
font-size: clamp(52px, 9vw, 128px);
font-weight: 290;
letter-spacing: -.105em;
line-height: .88;
margin: 0 0 26px;
max-width: 1060px;
}
.about-openice-caption p {
color: rgba(255,255,255,.76);
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.72;
margin: 0;
max-width: 620px;
}
.about-openice-pullquote {
background: #fff;
padding: clamp(72px, 11vw, 136px) max(22px, calc((100vw - 1340px) / 2));
text-align: center;
}
.about-openice-pullquote blockquote {
border: 0;
color: #0f172a;
font-size: clamp(28px, 4.6vw, 64px);
font-weight: 300;
letter-spacing: -.075em;
line-height: 1.08;
margin: 0 auto;
max-width: 1060px;
padding: 0;
}
.about-openice-pullquote cite {
color: #94a3b8;
display: block;
font-size: 11px;
font-style: normal;
font-weight: 700;
letter-spacing: .22em;
margin-top: 38px;
text-transform: uppercase;
}
.about-openice-mosaic {
background: #080e1a;
display: grid;
gap: 4px;
grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: auto auto;
}
.about-openice-mosaic figure { margin: 0; overflow: hidden; }
.about-openice-mosaic figure:first-child { grid-row: span 2; }
.about-openice-mosaic img { height: 100%; min-height: clamp(210px, 26vw, 360px); object-fit: cover; width: 100%; }
.about-openice-story { background: #f8fafc; padding: clamp(72px, 10vw, 126px) 0; }
.about-openice-story-grid {
display: grid;
gap: clamp(42px, 8vw, 110px);
grid-template-columns: .72fr 1.28fr;
}
.about-openice-story h2 {
font-size: clamp(38px, 5.2vw, 74px);
font-weight: 320;
letter-spacing: -.09em;
line-height: .97;
margin: 0;
}
.about-openice-story-body p { color: #475569; font-size: clamp(16px, 1.65vw, 19px); line-height: 1.88; margin: 0 0 24px; }
.about-openice-pillars { background: #fff; padding: clamp(56px, 9vw, 110px) 0; }
.about-openice-pillars-grid {
background: #e2e8f0;
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
}
.about-openice-pillar { background: #fff; padding: clamp(34px, 5vw, 60px) clamp(28px, 4vw, 48px); }
.about-openice-pillar > span {
color: #2f6f9f;
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
margin-bottom: 24px;
text-transform: uppercase;
}
.about-openice-pillar h3 {
font-size: clamp(26px, 3.2vw, 42px);
font-weight: 360;
letter-spacing: -.065em;
line-height: 1.04;
margin: 0 0 16px;
}
.about-openice-pillar p { color: #64748b; line-height: 1.75; margin: 0; }
@media (max-width: 950px) {
.br-nav { align-items: flex-start; flex-wrap: wrap; gap: 8px; overflow: visible; padding-bottom: 12px; padding-top: 12px; }
.br-nav nav, .site-menu { flex-wrap: nowrap; gap: 16px; max-width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 4px; width: 100%; }
.br-nav nav, .site-menu { scrollbar-width: none; }
.br-nav nav::-webkit-scrollbar, .site-menu::-webkit-scrollbar { display: none; }
.br-nav nav a:not(.br-action) { display: inline-flex; }
.nav-group { margin: 0; padding: 0; position: static; }
.submenu {
display: none;
left: auto;
min-width: 220px;
position: static;
transform: none;
}
.nav-group:hover .submenu,
.nav-group:focus-within .submenu { display: grid; transform: none; }
.intro-grid, .section-head, .image-duo, .split-feature, .contact-panel, .media-row-inner, .site-footer-grid, .season-support, .faq-layout, .bottom-feature, .concept-lab-grid, .concept-band, .story-hero, .service-command-grid, .service-rail, .service-row, .shop-hero-grid, .shop-note-grid, .quote-band, .about-editorial-hero, .about-editorial-media, .about-statement-grid, .about-command-panel, .about-command-list article, .team-hero-grid, .team-page-card, .about-archive-hero, .about-archive-body-grid, .about-openice-story-grid { grid-template-columns: 1fr; }
.faq-directory-grid { grid-template-columns: 1fr; }
.faq-index {
background: #fff;
display: flex;
gap: 8px;
overflow-x: auto;
padding: 0 0 12px;
position: static;
scrollbar-width: none;
}
.faq-index::-webkit-scrollbar { display: none; }
.faq-index .br-label { display: none; }
.faq-index a {
border: 1px solid #dbe3ec;
flex: 0 0 auto;
padding: 13px 14px;
}
.faq-index a:hover,
.faq-index a:focus { padding-left: 14px; }
.faq-category-head { grid-template-columns: 1fr; }
.faq-category-head > span { padding-top: 0; }
.about-archive-right { grid-template-rows: auto; grid-template-columns: 1fr 1fr; min-height: 320px; }
.about-credential-bar, .about-project-types { grid-template-columns: repeat(2, 1fr); }
.about-openice-mosaic { grid-template-columns: 1fr 1fr; }
.about-openice-mosaic figure:first-child { grid-row: auto; grid-column: span 2; }
.about-openice-pillars-grid { grid-template-columns: 1fr; }
.story-mosaic { grid-template-columns: 1fr; padding: 0; }
.story-mosaic img:first-child { margin-top: 0; }
.story-mosaic img:last-child { min-height: 360px; }
.stat-ribbon, .service-proof, .product-system, .team-grid, .install-gallery, .page-band-grid, .about-proof-grid, .team-page-grid { grid-template-columns: repeat(2, 1fr); }
.editorial-columns { columns: 1; }
.service-rail aside { position: static; }
.card-grid { grid-template-columns: 1fr; }
.image-duo article + article { border-left: 0; border-top: 1px solid #e2e8f0; }
.gallery { grid-template-columns: 1fr; }
.process-list article { grid-template-columns: 1fr; gap: 12px; }
.media-logos { grid-template-columns: repeat(2, 1fr); }
.planner-form { border-radius: 24px; grid-template-columns: 1fr; }
.planner-form label { border-bottom: 1px solid #e5e7eb; border-right: 0; }
.planner-form button { min-height: 62px; }
.season-metrics { grid-template-columns: repeat(2, 1fr); }
.journey-strip { grid-template-columns: repeat(4, minmax(250px, 78vw)); }
}
@media (max-width: 620px) {
.br-brand img { height: 38px; }
.br-action { padding: 12px 13px; }
.br-hero-copy h1 { font-size: clamp(33px, 11vw, 52px); }
.br-hero-copy p { font-size: 15px; }
.faq-directory { padding-top: 42px; }
.faq-list-large .faq-item summary {
font-size: clamp(18px, 5.8vw, 23px);
grid-template-columns: 1fr 28px;
min-height: 66px;
padding: 17px 0;
}
.faq-item summary:after {
height: 28px;
width: 28px;
}
.faq-list-large .faq-item p,
.faq-item p {
padding: 0 0 20px;
}
.form-grid { grid-template-columns: 1fr; }
.season-metrics { grid-template-columns: 1fr; }
.inquiry-row { grid-template-columns: 1fr; }
.inquiry-row button { min-height: 58px; }
.site-footer-base { flex-direction: column; }
.stat-ribbon, .service-proof, .product-system, .team-grid, .install-gallery, .page-band-grid, .about-proof-grid, .team-page-grid { grid-template-columns: 1fr; }
.about-credential-bar, .about-project-types { grid-template-columns: 1fr; }
.about-openice-mosaic { grid-template-columns: 1fr; }
.about-openice-mosaic figure:first-child { grid-column: auto; }
}
/* ────────────────────────────────────────────────────────
Premium E-commerce, Rinks Hub, Quiz & Interactive Heroes
──────────────────────────────────────────────────────── */
/* --- E-commerce shop enhancements --- */
.shop-filter-bar {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 20px max(22px, calc((100vw - 1340px) / 2));
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-tab {
background: #fff;
border: 1px solid #cbd5e1;
color: #475569;
padding: 10px 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transition: all .2s ease;
}
.filter-tab:hover {
border-color: #0f172a;
color: #0f172a;
}
.filter-tab.active {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.shop-stats {
font-size: 12px;
color: #64748b;
font-weight: 500;
}
/* --- Premium Product Card --- */
.product-card-improved {
background: transparent;
border: 0;
display: flex;
flex-direction: column;
position: relative;
transition: none;
overflow: hidden;
}
.product-card-improved:hover {
transform: none;
box-shadow: none;
}
.product-image-container {
aspect-ratio: 1 / 1;
background: transparent;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(18px, 2.4vw, 30px);
}
.product-image-container img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: transform 0.25s ease;
}
.product-card-improved:hover .product-image-container img {
transform: scale(1.025);
}
.product-badge {
position: absolute;
top: 12px;
left: 12px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 6px 10px;
color: #fff;
border-radius: 2px;
z-index: 10;
}
.badge-best-seller { background: #d32927; }
.badge-custom-build { background: #0f172a; }
.badge-in-stock { background: #22c55e; }
.product-details {
padding: 15px 0 0;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-category-label {
font-size: 10px;
font-weight: 700;
color: #2f6f9f;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 8px;
}
.product-title {
font-size: 15px;
font-weight: 460;
letter-spacing: 0;
line-height: 1.35;
margin: 0 0 8px;
color: #0f172a;
}
.product-reviews {
display: none;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.star-rating {
color: #f59e0b;
font-size: 13px;
letter-spacing: -1px;
}
.review-count {
font-size: 11px;
color: #64748b;
font-weight: 555;
}
.product-description {
display: none;
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin: 0 0 18px;
flex-grow: 1;
}
/* Variant selectors */
.variant-selector-wrapper {
margin-bottom: 18px;
border-top: 1px solid #f1f5f9;
padding-top: 14px;
}
.variant-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
color: #475569;
letter-spacing: 0.12em;
margin-bottom: 8px;
display: block;
}
.variant-options {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.variant-btn {
background: #fff;
border: 1px solid #cbd5e1;
color: #334155;
font-size: 11px;
font-weight: 600;
padding: 6px 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.variant-btn:hover {
border-color: #0f172a;
color: #0f172a;
}
.variant-btn.selected {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.product-price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
border-top: 0;
gap: 14px;
padding-top: 4px;
}
.product-price {
font-size: 16px;
font-weight: 520;
color: #0f172a;
letter-spacing: 0;
}
.btn-add-to-cart {
background: #0f172a;
border: 1px solid #0f172a;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
min-height: 40px;
padding: 10px 15px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-add-to-cart:hover {
background: #d32927;
border-color: #d32927;
}
/* --- Slide-Out Cart Drawer --- */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-overlay.open {
opacity: 1;
pointer-events: auto;
}
.cart-drawer {
position: fixed;
right: -460px;
top: 0;
width: 100%;
max-width: 460px;
height: 100%;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: -15px 0 45px rgba(0, 0, 0, 0.45);
z-index: 1001;
color: #fff;
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transform: translateX(0);
}
.cart-overlay.open .cart-drawer {
transform: translateX(-460px);
}
@media (max-width: 500px) {
.cart-drawer {
max-width: 85vw;
}
.cart-overlay.open .cart-drawer {
transform: translateX(-85vw);
}
}
.cart-header {
padding: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h2 {
font-size: 22px;
font-weight: 350;
letter-spacing: -0.05em;
margin: 0;
}
.cart-close-btn {
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.6);
font-size: 26px;
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s;
}
.cart-close-btn:hover {
color: #fff;
}
.cart-items-container {
flex-grow: 1;
overflow-y: auto;
padding: 28px;
}
.cart-items-container::-webkit-scrollbar {
width: 4px;
}
.cart-items-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
}
.empty-cart-message {
text-align: center;
color: rgba(255, 255, 255, 0.5);
padding: 40px 0;
}
.cart-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-item-image {
background: rgba(255, 255, 255, 0.05);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.cart-item-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.cart-item-info h3 {
font-size: 15px;
font-weight: 500;
margin: 0 0 4px;
}
.cart-item-variant {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 10px;
}
.cart-item-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-quantity-controls {
display: flex;
border: 1px solid rgba(255, 255, 255, 0.2);
align-items: center;
}
.cart-quantity-btn {
background: transparent;
border: 0;
color: #fff;
width: 28px;
height: 28px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.cart-quantity-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.cart-quantity-value {
width: 32px;
text-align: center;
font-size: 12px;
font-weight: 600;
}
.cart-item-price {
font-weight: 600;
font-size: 14px;
}
.cart-remove-btn {
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
text-decoration: underline;
cursor: pointer;
}
.cart-remove-btn:hover {
color: #ef4444;
}
.cart-footer {
padding: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(10, 17, 32, 0.95);
}
.cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cart-summary-row span {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.cart-subtotal {
font-size: 24px;
font-weight: 650;
letter-spacing: -0.02em;
}
.cart-checkout-btn {
background: #d32927;
color: #fff;
border: 1px solid #d32927;
padding: 18px 24px;
width: 100%;
font-size: 11px;
font-weight: 750;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s;
}
.cart-checkout-btn:hover {
background: #b51c1a;
border-color: #b51c1a;
}
.cart-shipping-notice {
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
margin-top: 12px;
display: block;
}
/* --- Navigation Cart Indicator --- */
.cart-nav-trigger {
position: relative;
cursor: pointer;
}
.cart-badge-count {
background: #d32927;
color: #fff;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 9px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -8px;
right: -14px;
}
/* --- Rinks Hub Specific --- */
.rinks-hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(16px, 2.5vw, 32px);
padding: clamp(24px, 4vw, 54px) 0;
}
@media (max-width: 900px) {
.rinks-hub-grid {
grid-template-columns: 1fr;
}
}
.rink-type-card {
background: #fff;
border: 1px solid #e2e8f0;
display: grid;
grid-template-rows: auto auto 1fr;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.rink-type-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.rink-type-media {
aspect-ratio: 16 / 10;
position: relative;
overflow: hidden;
margin: 0;
}
.rink-type-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rink-type-card:hover .rink-type-media img {
transform: scale(1.05);
}
.rink-type-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.4), transparent 60%);
}
.rink-type-info {
padding: clamp(24px, 3.5vw, 42px);
}
.rink-type-title {
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 355;
letter-spacing: -0.065em;
margin: 0 0 14px;
line-height: 1.05;
color: #0f172a;
}
.rink-type-desc {
color: #64748b;
line-height: 1.7;
font-size: 15px;
margin: 0 0 24px;
}
.rink-spec-table {
width: 100%;
border-top: 1px solid #e2e8f0;
border-collapse: collapse;
margin-bottom: 28px;
}
.rink-spec-table td {
padding: 12px 0;
font-size: 13px;
border-bottom: 1px solid #f1f5f9;
}
.rink-spec-table td:first-child {
font-weight: 700;
color: #475569;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.15em;
width: 45%;
}
.rink-spec-table td:last-child {
color: #0f172a;
font-weight: 500;
}
/* --- Rink Build Studio --- */
.rink-customizer {
background: #f5f7fb;
border-bottom: 1px solid #dbe4ef;
border-top: 1px solid #dbe4ef;
padding: clamp(68px, 10vw, 122px) 0;
}
.customizer-head {
align-items: end;
display: grid;
gap: clamp(26px, 5vw, 74px);
grid-template-columns: .62fr 1.38fr;
margin-bottom: clamp(34px, 5vw, 58px);
}
.customizer-head h2 {
color: #0f172a;
font-size: clamp(36px, 4.8vw, 64px);
font-weight: 380;
letter-spacing: -.075em;
line-height: 1.04;
margin: 0 0 18px;
max-width: 960px;
}
.customizer-head p {
color: #64748b;
line-height: 1.78;
margin: 0;
max-width: 760px;
}
.customizer-shell {
align-items: stretch;
display: grid;
gap: clamp(18px, 3vw, 34px);
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
}
.rink-preview-panel,
.rink-config-panel {
background: #fff;
border: 1px solid #d9e2ed;
}
.rink-preview-panel {
display: grid;
grid-template-rows: minmax(520px, 1fr) auto;
min-height: 640px;
}
.rink-preview-media {
background: #0f172a;
margin: 0;
overflow: hidden;
position: relative;
}
.rink-preview-media img {
height: 100%;
min-height: 520px;
object-fit: cover;
transition: opacity .18s ease;
width: 100%;
}
.rink-preview-media:after {
background: linear-gradient(0deg, rgba(15,23,42,.74), rgba(15,23,42,.08) 45%, rgba(15,23,42,.22));
content: "";
inset: 0;
position: absolute;
}
.rink-preview-media figcaption {
bottom: 22px;
color: #fff;
font-size: 11px;
font-weight: 800;
left: 24px;
letter-spacing: .18em;
position: absolute;
right: 24px;
text-transform: uppercase;
z-index: 1;
}
.rink-model {
--rink-width: 58%;
--rink-ratio: 2 / 1;
aspect-ratio: var(--rink-ratio);
filter: drop-shadow(0 24px 28px rgba(15,23,42,.14));
max-width: 94%;
min-width: 240px;
position: relative;
transition: width .38s ease, aspect-ratio .38s ease;
width: var(--rink-width);
}
.rink-model-overlay {
bottom: clamp(72px, 8vw, 94px);
left: 50%;
max-width: 86%;
min-width: 220px;
position: absolute;
transform: translateX(-50%) perspective(900px) rotateX(58deg) rotateZ(-5deg);
transform-origin: center bottom;
z-index: 1;
}
.rink-model-ice {
background: rgba(248,253,255,.18);
border: 4px solid rgba(255,255,255,.94);
box-shadow: inset 0 0 0 1px rgba(47,111,159,.7), inset 0 0 40px rgba(255,255,255,.2), 0 24px 48px rgba(2,6,23,.32);
height: 100%;
overflow: hidden;
position: relative;
}
.rink-model[data-design="blue"] .rink-model-ice { background: rgba(125,211,252,.22); border-color: rgba(224,247,255,.96); }
.rink-model[data-design="black"] .rink-model-ice { border-color: #1f2937; box-shadow: inset 0 0 0 2px #020617, inset 0 0 45px rgba(15,23,42,.28); }
.rink-line {
background: rgba(211,41,39,.86);
box-shadow: 0 0 0 1px rgba(255,255,255,.3);
position: absolute;
}
.center-line {
bottom: 10px;
left: 50%;
top: 10px;
transform: translateX(-50%);
width: 2px;
}
.goal-line {
height: 2px;
left: 12%;
right: 12%;
}
.goal-line.top { top: 18%; }
.goal-line.bottom { bottom: 18%; }
.rink-circle {
border: 2px solid rgba(47,111,159,.82);
box-shadow: 0 0 0 1px rgba(255,255,255,.34);
border-radius: 999px;
height: 24%;
position: absolute;
top: 38%;
width: 13%;
}
.circle-one { left: 24%; }
.circle-two { right: 24%; }
.rink-brand-mark {
color: rgba(15,23,42,.12);
display: block;
font-size: clamp(12px, 1.2vw, 18px);
font-weight: 900;
left: 50%;
letter-spacing: .12em;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity .2s ease;
white-space: nowrap;
}
.rink-model.has-branding .rink-brand-mark { opacity: 1; }
.rink-board-glow,
.rink-netting {
inset: -10px;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity .22s ease;
}
.rink-model.has-lighting .rink-board-glow {
box-shadow: 0 0 34px rgba(253,224,71,.8);
opacity: 1;
}
.rink-model.has-netting .rink-netting {
background-image: linear-gradient(45deg, rgba(15,23,42,.18) 25%, transparent 25%, transparent 50%, rgba(15,23,42,.18) 50%, rgba(15,23,42,.18) 75%, transparent 75%, transparent);
background-size: 12px 12px;
border: 2px solid rgba(15,23,42,.22);
opacity: 1;
}
.rink-preview-stats {
border-top: 1px solid #dbe4ef;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.rink-preview-stats div {
display: grid;
gap: 7px;
min-width: 0;
padding: 19px 22px;
}
.rink-preview-stats div + div { border-left: 1px solid #dbe4ef; }
.rink-preview-stats span,
.customizer-summary span {
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.rink-preview-stats strong,
.customizer-summary strong {
color: #0f172a;
font-size: 15px;
font-weight: 650;
line-height: 1.35;
}
.rink-config-panel {
display: grid;
gap: 0;
}
.config-step {
border-bottom: 1px solid #dbe4ef;
padding: clamp(22px, 3.2vw, 34px);
}
.config-step-head {
align-items: center;
display: flex;
gap: 12px;
margin-bottom: 14px;
}
.config-step-head span {
color: #94a3b8;
font-size: 11px;
font-weight: 500;
letter-spacing: .02em;
}
.config-step-head h3 {
color: #1e293b;
font-size: 15px;
font-weight: 500;
letter-spacing: -.01em;
margin: 0;
}
.choice-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
.choice-card,
.segmented-control button {
background: #fff;
border: 1px solid #cbd5e1;
color: #0f172a;
cursor: pointer;
min-height: 62px;
padding: 12px;
text-align: left;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.choice-card strong,
.choice-card span {
display: block;
}
.choice-card strong {
font-size: 14px;
font-weight: 500;
margin-bottom: 3px;
}
.choice-card span {
color: #64748b;
font-size: 12px;
font-weight: 400;
line-height: 1.35;
}
.choice-card.is-active,
.segmented-control button.is-active,
.finish-swatch.is-active {
background: #f1f5f9;
border-color: #64748b;
box-shadow: none;
color: #0f172a;
}
.segmented-control {
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
}
.segmented-control button {
font-size: 13px;
font-weight: 450;
letter-spacing: 0;
min-height: 46px;
text-align: center;
text-transform: none;
}
.finish-row {
display: flex;
gap: 12px;
}
.finish-swatch {
border: 1px solid #cbd5e1;
cursor: pointer;
height: 38px;
width: 58px;
}
.finish-swatch.ice-white { background: linear-gradient(135deg, #fff, #dceef8); }
.finish-swatch.glacier-blue { background: linear-gradient(135deg, #dff7ff, #5fa6cf); }
.finish-swatch.arena-black { background: linear-gradient(135deg, #f8fafc 0 46%, #111827 46% 100%); }
.toggle-line {
align-items: center;
color: #475569;
cursor: pointer;
display: grid;
gap: 14px;
grid-template-columns: auto 1fr;
line-height: 1.55;
}
.toggle-line input,
.accessory-grid input {
position: absolute;
opacity: 0;
}
.toggle-ui {
background: #dbe4ef;
border: 1px solid #cbd5e1;
height: 28px;
position: relative;
transition: background .18s ease;
width: 50px;
}
.toggle-ui:after {
background: #fff;
box-shadow: 0 2px 7px rgba(15,23,42,.18);
content: "";
height: 20px;
left: 4px;
position: absolute;
top: 3px;
transition: transform .18s ease;
width: 20px;
}
.toggle-line input:checked + .toggle-ui {
background: #334155;
border-color: #334155;
}
.toggle-line input:checked + .toggle-ui:after {
transform: translateX(22px);
}
.accessory-grid {
display: grid;
gap: 8px;
grid-template-columns: 1fr;
}
.accessory-grid label {
align-items: center;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #334155;
cursor: pointer;
display: flex;
font-size: 14px;
font-weight: 400;
gap: 12px;
justify-content: space-between;
line-height: 1.4;
min-height: 54px;
padding: 14px 18px;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.accessory-grid label:hover {
border-color: #94a3b8;
}
.accessory-grid label:after {
border: 1.5px solid #cbd5e1;
border-radius: 50%;
content: "";
flex: none;
height: 21px;
transition: background .18s ease, border-color .18s ease;
width: 21px;
}
.accessory-grid label:has(input:checked) {
background: #f1f5f9;
border-color: #64748b;
color: #0f172a;
}
.accessory-grid label:has(input:checked):after {
background: #334155 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
border-color: #334155;
}
.customizer-summary {
align-items: center;
display: grid;
gap: 18px;
grid-template-columns: 1fr auto;
padding: clamp(22px, 3.2vw, 34px);
}
.customizer-summary div {
display: grid;
gap: 8px;
}
/* --- Dedicated Rink Customizer Page --- */
.customizer-page {
background: #f5f7fb;
}
.customizer-page .br-nav {
background: rgba(15,23,42,.98);
box-shadow: 0 4px 30px rgba(0,0,0,.24);
padding-top: 15px;
padding-bottom: 15px;
}
/* Tesla-style split: image sticks, options scroll. --nav is the fixed header offset. */
.rink-studio-customizer {
--nav: 80px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
align-items: start;
padding-top: var(--nav);
}
.customizer-stage {
align-self: start;
background: #0f172a;
height: calc(100svh - var(--nav));
overflow: hidden;
position: sticky;
top: var(--nav);
}
.customizer-stage-media {
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
}
.customizer-stage-media img {
height: 100%;
object-fit: cover;
transition: opacity .18s ease;
width: 100%;
}
.customizer-stage-media:after {
background: linear-gradient(0deg, rgba(15,23,42,.72), rgba(15,23,42,.1) 42%, rgba(15,23,42,.24));
content: "";
inset: 0;
position: absolute;
}
.customizer-stage-media figcaption {
bottom: 96px;
color: rgba(255,255,255,.92);
font-size: 13px;
font-weight: 400;
left: clamp(22px, 4vw, 52px);
letter-spacing: 0;
position: absolute;
right: clamp(22px, 4vw, 52px);
text-transform: none;
z-index: 2;
}
.rink-model-stage {
bottom: clamp(120px, 13vh, 180px);
left: 50%;
max-width: 74%;
min-width: 240px;
position: absolute;
transform: translateX(-50%) perspective(900px) rotateX(58deg) rotateZ(-5deg);
transform-origin: center bottom;
z-index: 2;
}
.stage-stat-row {
background: rgba(255,255,255,.94);
backdrop-filter: blur(12px);
bottom: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
left: 0;
position: absolute;
right: 0;
z-index: 3;
}
.stage-stat-row div {
display: grid;
gap: 5px;
min-width: 0;
padding: 16px clamp(16px, 2.5vw, 30px);
}
.stage-stat-row div + div {
border-left: 1px solid rgba(15,23,42,.1);
}
.stage-stat-row span {
color: #94a3b8;
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
}
.stage-stat-row strong {
color: #0f172a;
font-size: clamp(14px, 1.1vw, 16px);
font-weight: 500;
}
.customizer-options {
background: #fff;
border-left: 1px solid #e2e8f0;
padding: clamp(28px, 3.5vw, 44px) clamp(22px, 3vw, 38px) 56px;
}
.options-intro {
margin-bottom: 22px;
}
.options-intro h1 {
color: #0f172a;
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.25;
margin: 0;
}
.options-intro p {
display: none;
}
.customizer-options .rink-config-panel {
background: transparent;
border: 0;
gap: 12px;
}
.customizer-options .config-step,
.customizer-options .customizer-summary {
background: #fff;
border: 1px solid #e2e8f0;
}
.customizer-options .config-step {
padding: 20px;
}
.customizer-options .customizer-summary {
margin-top: 14px;
padding: 20px;
}
@media (max-width: 900px) {
.rink-studio-customizer {
display: block;
}
.customizer-stage {
height: 40svh;
min-height: 240px;
z-index: 5;
}
.customizer-options {
border-left: 0;
position: relative;
z-index: 1;
}
.options-intro {
display: none;
}
.rink-model-stage {
bottom: 56px;
min-width: 210px;
}
.customizer-stage-media figcaption {
bottom: 58px;
font-size: 9px;
}
.stage-stat-row div {
gap: 3px;
padding: 9px 10px;
}
.stage-stat-row span {
font-size: 8px;
letter-spacing: .1em;
}
.stage-stat-row strong {
font-size: 12px;
}
}
@media (max-width: 1080px) {
.customizer-shell,
.customizer-head {
grid-template-columns: 1fr;
}
.rink-preview-panel {
min-height: 0;
}
}
@media (max-width: 620px) {
.choice-grid,
.segmented-control,
.rink-preview-stats,
.accessory-grid,
.customizer-summary {
grid-template-columns: 1fr;
}
.rink-preview-stats div + div {
border-left: 0;
border-top: 1px solid #dbe4ef;
}
.rink-model {
min-width: 210px;
}
.rink-preview-panel {
grid-template-rows: minmax(430px, 1fr) auto;
}
.rink-preview-media img {
min-height: 430px;
}
.rink-model-overlay {
bottom: 74px;
min-width: 205px;
}
}
/* --- Dynamic Process-Timeline Hero --- */
.timeline-hero-section {
background: #0b1220;
color: #f8fafc;
padding: clamp(140px, 16vw, 190px) 0 clamp(62px, 8vw, 100px);
position: relative;
overflow: hidden;
}
.timeline-hero-section::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 15%, rgba(47, 111, 159, 0.25), transparent 45%);
}
.timeline-hero-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(34px, 6vw, 84px);
align-items: center;
position: relative;
z-index: 2;
}
@media (max-width: 900px) {
.timeline-hero-grid {
grid-template-columns: 1fr;
}
}
.timeline-nav-rail {
display: flex;
margin-bottom: 34px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
overflow-x: auto;
scrollbar-width: none;
}
.timeline-nav-rail::-webkit-scrollbar {
display: none;
}
.timeline-nav-btn {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
color: rgba(255, 255, 255, 0.4);
padding: 16px 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.timeline-nav-btn.active {
color: #fff;
border-color: #fff;
}
.timeline-content-box {
min-height: 220px;
}
.timeline-content-pane {
display: none;
animation: fadeIn 0.4s ease-out;
}
.timeline-content-pane.active {
display: block;
}
.timeline-content-title {
font-size: clamp(34px, 4.5vw, 62px);
font-weight: 320;
letter-spacing: -0.08em;
line-height: 1.02;
margin: 0 0 20px;
}
.timeline-content-desc {
color: #a7b3c6;
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.75;
margin: 0 0 32px;
max-width: 580px;
}
.timeline-media-pane {
display: none;
aspect-ratio: 16 / 11;
background: rgba(255, 255, 255, 0.03);
position: relative;
overflow: hidden;
animation: fadeIn 0.4s ease-out;
}
.timeline-media-pane.active {
display: block;
}
.timeline-media-pane img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Spec-Sheet Hotspots Hero --- */
.spec-sheet-hero-section {
background: #0f172a;
color: #fff;
padding: clamp(140px, 16vw, 190px) 0 clamp(62px, 8vw, 100px);
position: relative;
}
.spec-sheet-hero-grid {
display: grid;
grid-template-columns: .95fr 1.05fr;
gap: clamp(34px, 6vw, 84px);
align-items: center;
}
@media (max-width: 950px) {
.spec-sheet-hero-grid {
grid-template-columns: 1fr;
}
}
.spec-left-side h1 {
font-size: clamp(38px, 5vw, 68px);
font-weight: 350;
letter-spacing: -0.065em;
line-height: 1.05;
margin: 0 0 22px;
}
.spec-left-side p {
color: #cbd5e1;
font-size: clamp(16px, 1.6vw, 18px);
line-height: 1.7;
margin: 0 0 32px;
}
.tech-spec-table {
width: 100%;
border-collapse: collapse;
}
.tech-spec-table tr {
border-bottom: 1px solid rgba(226, 232, 240, 0.12);
}
.tech-spec-table td {
padding: 14px 0;
font-size: 13px;
}
.tech-spec-table td:first-child {
color: #9bd7f5;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
font-size: 9px;
width: 40%;
}
.tech-spec-table td:last-child {
color: #f8fafc;
}
.hotspot-image-wrapper {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.hotspot-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Pin indicators */
.hotspot-pin {
position: absolute;
width: 20px;
height: 20px;
z-index: 10;
cursor: pointer;
}
.pin-node {
width: 100%;
height: 100%;
background: #9bd7f5;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: relative;
}
.pin-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(155, 215, 245, 0.6);
animation: hotspot-pulse 1.8s infinite ease-out;
pointer-events: none;
top: 0;
left: 0;
}
@keyframes hotspot-pulse {
0% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(2.8); opacity: 0; }
}
.hotspot-tooltip {
position: absolute;
background: rgba(15, 23, 42, 0.96);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
padding: 14px 18px;
border-radius: 4px;
font-size: 13px;
width: 220px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
bottom: 30px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
z-index: 20;
}
.hotspot-pin:hover .hotspot-tooltip {
opacity: 1;
bottom: 26px;
}
.hotspot-tooltip strong {
display: block;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #9bd7f5;
margin-bottom: 6px;
}
/* --- Frosted Glass Parallax Hero --- */
.frosted-parallax-hero-section {
min-height: 680px;
background: linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.6)), url("../../media/gallery_images-large-211-image.gif") center / cover fixed;
display: flex;
align-items: center;
padding: clamp(140px, 16vw, 190px) 0 clamp(62px, 8vw, 100px);
position: relative;
}
.frosted-hero-card {
max-width: 650px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: clamp(28px, 5vw, 60px);
color: #fff;
box-shadow: 0 25px 50px rgba(0,0,0,0.22);
}
.frosted-hero-card h1 {
font-size: clamp(36px, 5.2vw, 68px);
font-weight: 355;
letter-spacing: -0.065em;
line-height: 1.05;
margin: 0 0 20px;
}
.frosted-hero-card p {
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
line-height: 1.7;
margin: 0 0 32px;
}
.frosted-spec-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 32px;
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 20px;
}
.frosted-spec-item strong {
display: block;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #9bd7f5;
margin-bottom: 4px;
}
.frosted-spec-item span {
font-size: 15px;
font-weight: 600;
}
/* --- Team Concept Board --- */
.team-concepts { background: #fff; color: #0f172a; }
.tc-overview {
background:
linear-gradient(135deg, rgba(15,23,42,.95), rgba(15,23,42,.72)),
url("../../media/DJI_0096-scaled.jpg") center / cover;
color: #fff;
padding: clamp(150px, 18vw, 220px) 0 clamp(54px, 8vw, 96px);
}
.tc-overview .br-label { color: #9bd7f5; }
.tc-overview-grid {
align-items: end;
display: grid;
gap: clamp(34px, 7vw, 92px);
grid-template-columns: 1.05fr .95fr;
}
.tc-overview h1 {
font-size: clamp(42px, 6.4vw, 88px);
font-weight: 330;
letter-spacing: -.085em;
line-height: .96;
margin: 0;
max-width: 980px;
}
.tc-overview p {
color: #dbeafe;
font-size: clamp(16px, 1.55vw, 19px);
line-height: 1.78;
margin: 0 0 30px;
}
.tc-jump {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tc-jump a,
.tc-jump button {
background: transparent;
border: 1px solid rgba(255,255,255,.22);
color: #f8fafc;
cursor: pointer;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
padding: 12px 14px;
text-transform: uppercase;
}
.tc-jump a:hover,
.tc-jump button:hover,
.tc-jump button.active { background: #fff; color: #0f172a; }
.tc-concept[hidden] { display: none; }
.tc-concept { border-top: 1px solid #dbe3ec; padding: clamp(48px, 8vw, 96px) max(24px, calc((100vw - 1340px) / 2)); scroll-margin-top: 104px; }
.tc-kicker {
color: #64748b;
font-size: 11px;
font-weight: 800;
letter-spacing: .2em;
margin-bottom: clamp(24px, 4vw, 42px);
text-transform: uppercase;
}
.tc-leadership { background: #f8fafc; }
.tc-leadership-hero {
background: #0f172a;
color: #fff;
display: grid;
grid-template-columns: .72fr 1.28fr;
min-height: clamp(520px, 58vw, 690px);
}
.tc-leadership-hero figure { margin: 0; overflow: hidden; }
.tc-leadership-hero img { height: 100%; object-fit: cover; width: 100%; }
.tc-leadership-copy {
align-self: center;
padding: clamp(34px, 7vw, 86px);
}
.tc-leadership-copy .br-label { color: #f87171; }
.tc-leadership-copy h2,
.tc-ops-intro h2,
.tc-founder-hero h2,
.tc-directory-head h2 {
font-size: clamp(36px, 5vw, 68px);
font-weight: 340;
letter-spacing: -.08em;
line-height: 1.02;
margin: 0 0 22px;
}
.tc-leadership-copy p,
.tc-ops-intro p,
.tc-founder-hero p,
.tc-directory-head p {
color: #64748b;
line-height: 1.78;
margin: 0;
max-width: 650px;
}
.tc-leadership-copy p { color: #cbd5e1; }
.tc-proof-row {
border-top: 1px solid rgba(226,232,240,.16);
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: clamp(32px, 5vw, 54px);
}
.tc-proof-row div { border-right: 1px solid rgba(226,232,240,.16); padding: 22px 20px 0 0; }
.tc-proof-row div + div { padding-left: 20px; }
.tc-proof-row strong {
display: block;
font-size: clamp(30px, 4vw, 52px);
font-weight: 330;
letter-spacing: -.07em;
margin-bottom: 8px;
}
.tc-proof-row span {
color: #94a3b8;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.tc-profile-strip {
background: #dbe3ec;
display: grid;
gap: 1px;
grid-template-columns: repeat(4, 1fr);
}
.tc-profile-strip article { background: #fff; min-height: 330px; }
.tc-profile-strip img { aspect-ratio: 1 / .9; object-fit: cover; width: 100%; }
.tc-profile-strip h3 { font-size: 24px; font-weight: 390; letter-spacing: -.045em; margin: 22px 22px 7px; }
.tc-profile-strip p { color: #2f6f9f; font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; margin: 0 22px 24px; text-transform: uppercase; }
.tc-ops {
background: #101827;
color: #f8fafc;
}
.tc-ops .tc-kicker,
.tc-ops-intro .br-label { color: #7dd3fc; }
.tc-ops-grid {
display: grid;
gap: clamp(36px, 7vw, 86px);
grid-template-columns: .72fr 1.28fr;
}
.tc-ops-intro { position: sticky; top: 104px; height: max-content; }
.tc-ops-intro p { color: #a7b3c6; }
.tc-ops-board {
border-top: 1px solid rgba(226,232,240,.16);
display: grid;
}
.tc-ops-board article {
align-items: center;
border-bottom: 1px solid rgba(226,232,240,.16);
display: grid;
gap: clamp(18px, 3vw, 34px);
grid-template-columns: 190px 110px 1fr;
padding: 20px 0;
}
.tc-ops-board span {
color: #7dd3fc;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.tc-ops-board img { aspect-ratio: 1 / 1; object-fit: cover; width: 110px; }
.tc-ops-board h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 360; letter-spacing: -.06em; margin: 0 0 8px; }
.tc-ops-board p { color: #a7b3c6; line-height: 1.55; margin: 0; }
.tc-founders { background: #fbfbf7; }
.tc-founder-hero {
align-items: center;
display: grid;
gap: clamp(34px, 7vw, 90px);
grid-template-columns: .92fr 1.08fr;
}
.tc-founder-hero .br-label { color: #b91c1c; }
.tc-founder-pair {
display: grid;
gap: 16px;
grid-template-columns: 1fr 1fr;
margin: 0;
}
.tc-founder-pair img {
aspect-ratio: 1 / 1.32;
height: auto;
object-fit: cover;
width: 100%;
}
.tc-founder-pair img:first-child { margin-top: clamp(46px, 7vw, 82px); }
.tc-founder-team {
border-top: 1px solid #d7d2c5;
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
margin-top: clamp(40px, 7vw, 76px);
}
.tc-founder-team article {
background: #fff;
display: grid;
grid-template-columns: .44fr .56fr;
min-height: 260px;
}
.tc-founder-team img { height: 100%; object-fit: cover; width: 100%; }
.tc-founder-team div { align-self: end; padding: clamp(22px, 3vw, 34px); }
.tc-founder-team span,
.tc-directory-grid span {
color: #2f6f9f;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
margin-bottom: 12px;
text-transform: uppercase;
}
.tc-founder-team h3,
.tc-directory-grid h3 {
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 380;
letter-spacing: -.055em;
line-height: 1.05;
margin: 0 0 10px;
}
.tc-founder-team p,
.tc-directory-grid p { color: #64748b; line-height: 1.65; margin: 0; }
.tc-directory { background: #fff; }
.tc-directory-head {
align-items: end;
display: grid;
gap: clamp(30px, 6vw, 80px);
grid-template-columns: .9fr 1.1fr;
margin-bottom: clamp(34px, 6vw, 62px);
}
.tc-directory-grid {
background: #e2e8f0;
display: grid;
gap: 1px;
grid-template-columns: repeat(5, 1fr);
}
.tc-directory-grid article { background: #fff; display: grid; grid-template-rows: auto 1fr; min-height: 460px; }
.tc-directory-grid img { aspect-ratio: 1 / 1.12; object-fit: cover; width: 100%; }
.tc-directory-grid div { align-self: end; padding: 24px; }
@media (max-width: 950px) {
.tc-overview-grid,
.tc-leadership-hero,
.tc-ops-grid,
.tc-founder-hero,
.tc-directory-head,
.tc-founder-team article { grid-template-columns: 1fr; }
.tc-ops-intro { position: static; }
.tc-ops-board article { grid-template-columns: 1fr 96px; }
.tc-ops-board article span { grid-column: 1 / -1; }
.tc-profile-strip,
.tc-founder-team,
.tc-directory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.tc-proof-row,
.tc-profile-strip,
.tc-founder-pair,
.tc-founder-team,
.tc-directory-grid { grid-template-columns: 1fr; }
.tc-proof-row div,
.tc-proof-row div + div { border-right: 0; border-bottom: 1px solid rgba(226,232,240,.16); padding: 20px 0; }
.tc-ops-board article { grid-template-columns: 82px 1fr; }
.tc-ops-board article span { grid-column: 1 / -1; }
.tc-ops-board img { width: 82px; }
.tc-founder-pair img:first-child { margin-top: 0; }
}
body.theme-light.shop-page .cart-nav-trigger svg {
height: 19px !important;
margin-left: 0 !important;
width: 19px !important;
}
body.theme-light.shop-page .shop-product-grid {
gap: clamp(26px, 2.8vw, 36px) clamp(14px, 1.6vw, 20px);
padding-top: clamp(22px, 3vw, 34px);
}
body.theme-light.shop-page .product-card-improved {
cursor: pointer;
outline-offset: 5px;
overflow: visible;
}
body.theme-light.shop-page .product-image-container {
aspect-ratio: 1.08 / 1;
padding: 0;
}
body.theme-light.shop-page .product-image-container img {
height: 100%;
max-height: none;
max-width: none;
object-fit: cover;
width: 100%;
}
body.theme-light.shop-page .product-card-improved:hover .product-image-container img {
transform: none;
}
body.theme-light.shop-page .product-details {
display: block;
padding-top: 10px;
}
body.theme-light.shop-page .product-title {
font-size: 14px;
font-weight: 430;
line-height: 1.35;
margin: 0 0 5px;
}
body.theme-light.shop-page .product-price-row {
display: block;
margin: 0;
padding: 0;
}
body.theme-light.shop-page .product-price {
font-size: 16px;
font-weight: 430;
line-height: 1.35;
}
body.theme-light.shop-page .product-price::after {
content: " CAD";
}
body.theme-light.shop-page .page-band,
body.theme-light.shop-page .quote-band {
display: none;
}
.product-detail-shell {
padding: clamp(98px, 10vw, 128px) max(22px, calc((100vw - 1340px) / 2)) clamp(60px, 8vw, 100px);
}
.product-back-link {
color: #64748b;
display: inline-block;
font-size: 13px;
margin-bottom: clamp(22px, 4vw, 42px);
}
.product-back-link::before {
content: "< ";
}
.product-detail {
display: grid;
gap: clamp(36px, 7vw, 88px);
grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr);
}
.product-detail-media {
margin: 0;
}
.product-detail-media img {
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
width: 100%;
}
.product-detail-copy {
align-self: start;
padding-top: clamp(4px, 2vw, 22px);
}
.product-detail-category {
color: #64748b;
font-size: 12px;
letter-spacing: .08em;
margin: 0 0 14px;
text-transform: uppercase;
}
.product-detail h1 {
font-size: clamp(34px, 4.6vw, 58px);
font-weight: 420;
letter-spacing: -.055em;
line-height: 1.02;
margin: 0 0 16px;
}
.product-detail-price {
font-size: 20px;
margin: 0 0 28px;
}
.product-detail-description {
color: #475569;
font-size: 15px;
line-height: 1.75;
margin: 0 0 28px;
max-width: 560px;
}
.product-detail-actions {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
margin-bottom: 34px;
max-width: 520px;
}
.product-detail-add,
.product-detail-quote {
align-items: center;
border: 1px solid #0f172a;
cursor: pointer;
display: inline-flex;
font-size: 12px;
font-weight: 700;
justify-content: center;
letter-spacing: .12em;
min-height: 52px;
padding: 0 18px;
text-transform: uppercase;
}
.product-detail-add {
background: #0f172a;
color: #fff;
}
.product-detail-quote {
background: #fff;
color: #0f172a;
}
.product-detail-specs {
border-top: 1px solid #e2e8f0;
margin: 0;
max-width: 560px;
}
.product-detail-specs div {
border-bottom: 1px solid #e2e8f0;
display: grid;
gap: 18px;
grid-template-columns: 140px 1fr;
padding: 15px 0;
}
.product-detail-specs dt {
color: #64748b;
font-size: 12px;
}
.product-detail-specs dd {
margin: 0;
}
@media (max-width: 860px) {
.product-detail {
grid-template-columns: 1fr;
}
.product-detail-actions {
grid-template-columns: 1fr;
}
}
/* --- Team Lab V2 --- */
.team-lab-v2 { background: #f8fafc; }
.tlab-switch {
background: #0d1424;
color: #fff;
padding: clamp(158px, 17vw, 210px) 0 clamp(26px, 4vw, 42px);
}
.tlab-switch-grid {
align-items: end;
display: grid;
gap: clamp(28px, 6vw, 84px);
grid-template-columns: .85fr 1.15fr;
}
.tlab-switch .br-label { color: #9bd7f5; }
.tlab-switch h1 {
font-size: clamp(40px, 6.4vw, 86px);
font-weight: 330;
letter-spacing: -.085em;
line-height: .96;
margin: 0;
}
.tlab-switch p {
color: #cbd5e1;
line-height: 1.75;
margin: 0 0 24px;
max-width: 680px;
}
.tlab-switch nav {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.tlab-switch button {
background: transparent;
border: 1px solid rgba(255,255,255,.22);
color: #f8fafc;
cursor: pointer;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
padding: 12px 14px;
text-transform: uppercase;
}
.tlab-switch button:hover,
.tlab-switch button.active { background: #fff; color: #0f172a; }
.tlab-panel[hidden] { display: none; }
.tlab-panel {
animation: teamPanelIn .35s ease both;
min-height: 680px;
}
@keyframes teamPanelIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.lineup-hero {
background:
linear-gradient(90deg, rgba(7,12,24,.92), rgba(7,12,24,.55)),
url("../../media/Huntsville-Winterfest-94-scaled.jpg") center / cover;
color: #fff;
display: grid;
gap: clamp(24px, 5vw, 70px);
grid-template-columns: .92fr 1.08fr;
min-height: clamp(680px, 74vw, 820px);
overflow: hidden;
padding: clamp(50px, 8vw, 90px) max(24px, calc((100vw - 1340px) / 2));
}
.lineup-copy {
align-self: end;
padding-bottom: clamp(20px, 5vw, 70px);
}
.lineup-copy .br-label { color: #f87171; }
.lineup-copy h2,
.command-board h2,
.journal-copy h2,
.cards-head h2 {
font-size: clamp(42px, 7vw, 96px);
font-weight: 315;
letter-spacing: -.095em;
line-height: .92;
margin: 0 0 24px;
}
.lineup-copy p,
.command-board p,
.journal-copy p,
.cards-head p {
color: #cbd5e1;
font-size: clamp(16px, 1.55vw, 19px);
line-height: 1.76;
margin: 0;
max-width: 650px;
}
.lineup-stage {
align-self: center;
display: grid;
gap: 18px;
grid-template-columns: .9fr .72fr;
transform: rotate(-2deg);
}
.lineup-card {
background: #fff;
box-shadow: 0 24px 70px rgba(0,0,0,.32);
color: #0f172a;
min-height: 300px;
overflow: hidden;
}
.lineup-card.main { grid-row: span 2; }
.lineup-card img { aspect-ratio: 1 / 1.18; object-fit: cover; width: 100%; }
.lineup-card.main img { aspect-ratio: 1 / 1.38; }
.lineup-card span,
.cards-deck span,
.journal-roles span {
color: #2f6f9f;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
margin: 18px 20px 8px;
text-transform: uppercase;
}
.lineup-card strong {
display: block;
font-size: clamp(24px, 3vw, 36px);
font-weight: 380;
letter-spacing: -.06em;
line-height: 1;
margin: 0 20px 22px;
}
.lineup-ticker {
background: #d32927;
color: #fff;
display: flex;
gap: 0;
overflow: hidden;
}
.lineup-ticker span {
border-right: 1px solid rgba(255,255,255,.28);
flex: 1 0 auto;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
padding: 18px 28px;
text-transform: uppercase;
}
.command-hero {
background: #050b16;
color: #f8fafc;
display: grid;
grid-template-columns: .9fr 1.1fr;
min-height: clamp(680px, 72vw, 820px);
}
.command-hero figure { margin: 0; min-height: 100%; overflow: hidden; }
.command-hero figure img { height: 100%; object-fit: cover; width: 100%; }
.command-board {
align-self: center;
padding: clamp(40px, 7vw, 88px);
}
.command-board .br-label { color: #7dd3fc; }
.command-rows {
border-top: 1px solid rgba(226,232,240,.16);
display: grid;
margin-top: clamp(30px, 5vw, 56px);
}
.command-rows article {
align-items: center;
border-bottom: 1px solid rgba(226,232,240,.16);
display: grid;
gap: 18px;
grid-template-columns: 52px 150px 1fr;
padding: 20px 0;
}
.command-rows span {
color: #7dd3fc;
font-size: 11px;
font-weight: 800;
letter-spacing: .16em;
}
.command-rows strong {
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 360;
letter-spacing: -.05em;
}
.command-rows p {
color: #a7b3c6;
line-height: 1.62;
margin: 0;
}
.journal-hero {
background: #f4f1ea;
color: #0f172a;
display: grid;
gap: clamp(36px, 7vw, 92px);
grid-template-columns: .88fr 1.12fr;
min-height: clamp(640px, 70vw, 810px);
padding: clamp(54px, 8vw, 96px) max(24px, calc((100vw - 1340px) / 2));
}
.journal-copy {
align-self: end;
padding-bottom: clamp(18px, 4vw, 54px);
}
.journal-copy .br-label { color: #b91c1c; }
.journal-copy p,
.cards-head p { color: #64748b; }
.journal-stack {
align-self: center;
display: grid;
gap: 16px;
grid-template-columns: 1fr .82fr;
}
.journal-stack img {
box-shadow: 0 18px 44px rgba(15,23,42,.12);
height: 100%;
object-fit: cover;
width: 100%;
}
.journal-stack img:first-child { aspect-ratio: 1 / 1.34; margin-top: 70px; }
.journal-stack img:nth-child(2) { aspect-ratio: 1 / 1.12; }
.journal-stack div {
background: #0f172a;
color: #fff;
grid-column: 2;
padding: 24px;
}
.journal-stack strong {
display: block;
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 340;
letter-spacing: -.06em;
margin-bottom: 8px;
}
.journal-stack span { color: #cbd5e1; line-height: 1.55; }
.journal-roles {
background: #d7d2c5;
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
}
.journal-roles article {
background: #fbfbf7;
min-height: 250px;
padding: clamp(28px, 4vw, 48px);
}
.journal-roles span { margin: 0 0 46px; }
.journal-roles h3 {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 350;
letter-spacing: -.07em;
margin: 0 0 16px;
}
.journal-roles p { color: #64748b; line-height: 1.72; margin: 0; }
.cards-hero {
background:
linear-gradient(180deg, rgba(248,250,252,.96), rgba(248,250,252,.9)),
url("../../media/600-fit-natural_ice_rink_with_junior_boards_and_subfloor7-scaled-1.jpg") center / cover;
min-height: clamp(680px, 74vw, 840px);
overflow: hidden;
padding: clamp(54px, 8vw, 96px) max(24px, calc((100vw - 1340px) / 2));
}
.cards-head {
align-items: end;
display: grid;
gap: clamp(24px, 5vw, 70px);
grid-template-columns: .98fr 1.02fr;
margin-bottom: clamp(44px, 7vw, 82px);
}
.cards-head .br-label { color: #2f6f9f; }
.cards-deck {
align-items: end;
display: grid;
grid-template-columns: repeat(5, minmax(180px, 1fr));
min-width: 980px;
}
.cards-deck article {
background: #fff;
border: 1px solid #dbe3ec;
box-shadow: 0 18px 46px rgba(15,23,42,.08);
margin-left: -28px;
min-height: 430px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
}
.cards-deck article:first-child { margin-left: 0; }
.cards-deck article:nth-child(2) { transform: translateY(34px); }
.cards-deck article:nth-child(3) { transform: translateY(-16px); }
.cards-deck article:nth-child(4) { transform: translateY(48px); }
.cards-deck article:hover {
box-shadow: 0 28px 70px rgba(15,23,42,.16);
transform: translateY(-24px);
z-index: 2;
}
.cards-deck img { aspect-ratio: 1 / 1.16; object-fit: cover; width: 100%; }
.cards-deck h3 {
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 360;
letter-spacing: -.06em;
margin: 0 20px 22px;
}
.editorial-team {
background: #f6f6f4;
display: grid;
gap: 8px;
grid-template-columns: .95fr 1fr 1fr;
grid-auto-rows: minmax(210px, auto);
min-height: clamp(720px, 78vw, 900px);
padding: clamp(28px, 4vw, 54px) max(20px, calc((100vw - 1340px) / 2));
}
.editorial-title {
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: clamp(30px, 5vw, 62px);
}
.team-dot-label {
align-items: center;
color: #ef4b32;
display: inline-flex;
font-size: 11px;
font-weight: 800;
gap: 14px;
letter-spacing: .08em;
margin-bottom: clamp(48px, 8vw, 100px);
text-transform: uppercase;
}
.team-dot-label:before {
background: #ef4b32;
content: "";
height: 9px;
width: 9px;
}
.editorial-title h2 {
font-size: clamp(38px, 5vw, 68px);
font-weight: 340;
letter-spacing: -.08em;
line-height: .98;
margin: 0 0 24px;
max-width: 430px;
}
.editorial-title p {
color: #64748b;
line-height: 1.74;
margin: 0;
max-width: 430px;
}
.editorial-person {
background: #fff;
display: grid;
grid-template-rows: minmax(260px, 1fr) auto;
min-height: 420px;
overflow: hidden;
position: relative;
}
.editorial-person img {
height: 100%;
object-fit: cover;
width: 100%;
}
.editorial-person > div {
background: #fff;
min-height: 118px;
padding: 24px clamp(22px, 3vw, 32px);
}
.editorial-person h3 {
font-size: clamp(26px, 3vw, 38px);
font-weight: 390;
letter-spacing: -.055em;
line-height: 1.06;
margin: 0 0 8px;
}
.editorial-person p {
color: #64748b;
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.editorial-person span {
bottom: 26px;
color: #94a3b8;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
position: absolute;
right: 26px;
text-transform: uppercase;
}
.editorial-person.tall { grid-row: span 2; }
.editorial-person.wide {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
.editorial-person.text-card {
display: flex;
min-height: 210px;
}
.editorial-person.text-card > div {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.mosaic-team {
background: #fff;
display: grid;
gap: 18px;
grid-template-columns: .85fr .95fr .8fr;
grid-template-rows: auto auto;
min-height: clamp(720px, 78vw, 900px);
overflow: hidden;
padding: clamp(44px, 7vw, 92px) max(20px, calc((100vw - 1340px) / 2));
}
.mosaic-copy {
align-self: end;
grid-column: 1;
grid-row: 1;
padding-bottom: clamp(20px, 4vw, 48px);
}
.mosaic-copy .br-label { color: #2f6f9f; }
.mosaic-copy h2 {
font-size: clamp(42px, 6vw, 82px);
font-weight: 330;
letter-spacing: -.09em;
line-height: .96;
margin: 0 0 22px;
}
.mosaic-copy p {
color: #64748b;
line-height: 1.76;
margin: 0;
}
.mosaic-field {
grid-column: 2 / span 2;
grid-row: 1;
margin: 0;
min-height: 440px;
}
.mosaic-field img,
.mosaic-portrait img {
height: 100%;
object-fit: cover;
width: 100%;
}
.mosaic-index {
align-self: start;
background: #0f172a;
color: #fff;
grid-column: 1 / span 2;
grid-row: 2;
padding: clamp(26px, 4vw, 42px);
}
.mosaic-index article {
align-items: center;
border-bottom: 1px solid rgba(226,232,240,.16);
display: grid;
gap: 20px;
grid-template-columns: 190px 1fr;
padding: 17px 0;
}
.mosaic-index article:last-child { border-bottom: 0; }
.mosaic-index span {
color: #7dd3fc;
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.mosaic-index strong {
font-size: clamp(24px, 3vw, 38px);
font-weight: 350;
letter-spacing: -.06em;
}
.mosaic-portrait {
margin: 0;
min-height: 310px;
}
.mosaic-portrait.one {
grid-column: 3;
grid-row: 2;
transform: translateY(-70px);
}
.mosaic-portrait.two {
display: none;
}
@media (max-width: 950px) {
.tlab-switch { padding-top: 190px; }
.tlab-switch-grid,
.lineup-hero,
.command-hero,
.journal-hero,
.cards-head { grid-template-columns: 1fr; }
.command-hero figure { min-height: 360px; }
.journal-stack img:first-child { margin-top: 0; }
.journal-roles { grid-template-columns: 1fr; }
.cards-hero { overflow-x: auto; }
.editorial-team,
.mosaic-team { grid-template-columns: 1fr 1fr; }
.editorial-title,
.editorial-person.tall,
.editorial-person.wide,
.mosaic-copy,
.mosaic-field,
.mosaic-index,
.mosaic-portrait.one { grid-column: auto; grid-row: auto; transform: none; }
}
@media (max-width: 620px) {
.lineup-stage,
.journal-stack,
.command-rows article,
.editorial-team,
.mosaic-team,
.mosaic-index article { grid-template-columns: 1fr; }
.journal-stack div { grid-column: auto; }
.lineup-stage { transform: none; }
.lineup-card.main { grid-row: auto; }
.lineup-ticker { overflow-x: auto; }
.tlab-switch button { flex: 1 1 calc(50% - 9px); }
.editorial-person span { bottom: auto; display: block; margin-top: 16px; position: static; }
.mosaic-field { min-height: 320px; }
}
.projects-page { background: #f7f9fc; }
.projects-hero {
background: #07111f;
color: #fff;
min-height: 100svh;
overflow: hidden;
padding: clamp(150px, 17vw, 206px) 0 clamp(42px, 8vw, 96px);
position: relative;
}
.projects-hero-media { inset: 0; position: absolute; }
.projects-hero-media:after {
background:
linear-gradient(90deg, rgba(7,17,31,.95) 0%, rgba(7,17,31,.72) 38%, rgba(7,17,31,.24) 68%, rgba(7,17,31,.82) 100%),
linear-gradient(0deg, rgba(7,17,31,.82), rgba(7,17,31,.08) 42%, rgba(7,17,31,.76));
content: "";
inset: 0;
position: absolute;
}
.projects-hero-media img { height: 100%; object-fit: cover; width: 100%; }
.projects-hero-grid {
align-items: end;
display: grid;
gap: clamp(36px, 8vw, 110px);
grid-template-columns: minmax(0, 1fr) minmax(250px, 370px);
min-height: calc(100svh - 250px);
position: relative;
z-index: 1;
}
.projects-hero-copy { max-width: 900px; }
.projects-hero-copy .br-label { color: rgba(255,255,255,.68); }
.projects-hero-copy h1 {
font-size: clamp(44px, 6vw, 86px);
font-weight: 620;
letter-spacing: -.075em;
line-height: .96;
margin: 0 0 26px;
}
.projects-hero-copy p {
color: rgba(235,242,250,.78);
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.75;
margin: 0;
max-width: 670px;
}
.projects-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.projects-hero-actions .br-button { background: #d32927; border-color: #d32927; }
.projects-text-link {
border-bottom: 1px solid rgba(255,255,255,.46);
color: rgba(255,255,255,.84);
font-size: 11px;
font-weight: 800;
letter-spacing: .2em;
padding-bottom: 7px;
text-transform: uppercase;
}
.projects-hero-card {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
padding: clamp(26px, 4vw, 38px);
}
.projects-hero-card span,
.projects-category-card span,
.projects-mini span,
.project-tile span {
color: #d32927;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .2em;
margin-bottom: 12px;
text-transform: uppercase;
}
.projects-hero-card strong {
display: block;
font-size: clamp(34px, 4vw, 50px);
font-weight: 360;
letter-spacing: -.065em;
line-height: 1;
margin-bottom: 14px;
}
.projects-hero-card p { color: rgba(255,255,255,.7); line-height: 1.65; margin: 0; }
.projects-category-band,
.projects-gallery-section {
background: #f7f9fc;
padding: clamp(70px, 9vw, 118px) 0;
}
.projects-category-head {
align-items: end;
display: grid;
gap: clamp(28px, 5vw, 64px);
grid-template-columns: minmax(0, .9fr) auto;
margin-bottom: clamp(36px, 6vw, 70px);
}
.projects-category-head h2,
.projects-gallery-head h2,
.projects-process h2 {
font-size: clamp(34px, 4vw, 58px);
font-weight: 370;
letter-spacing: -.07em;
line-height: 1.05;
margin: 0;
}
.projects-filter { background: #fff; border: 1px solid #dbe3ec; display: flex; padding: 5px; }
.projects-filter button {
background: transparent;
border: 0;
color: #536173;
cursor: pointer;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
min-height: 42px;
padding: 0 17px;
text-transform: uppercase;
}
.projects-filter button.active { background: #0f172a; color: #fff; }
.projects-category-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.projects-category-card {
background: #fff;
border: 1px solid #e0e7ef;
display: grid;
grid-template-rows: 260px 1fr;
min-height: 560px;
overflow: hidden;
transition: opacity .2s ease, transform .2s ease;
}
.projects-category-card img { height: 100%; object-fit: cover; width: 100%; }
.projects-category-card div { padding: clamp(28px, 4vw, 42px); }
.projects-category-card h3,
.projects-mini h3,
.project-tile h3 {
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 430;
letter-spacing: -.055em;
line-height: 1.08;
margin: 0 0 15px;
}
.projects-category-card p,
.projects-mini p,
.project-tile p {
color: #64748b;
line-height: 1.68;
margin: 0;
}
.projects-showcase { background: #0f172a; color: #f8fafc; padding: clamp(80px, 11vw, 140px) 0; }
.projects-showcase-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); }
.projects-feature {
background: #132037;
display: grid;
grid-template-columns: 1.08fr .92fr;
min-height: 620px;
overflow: hidden;
transition: opacity .2s ease, transform .2s ease;
}
.projects-feature figure,
.projects-mini { margin: 0; }
.projects-feature img { height: 100%; object-fit: cover; width: 100%; }
.projects-feature > div { align-self: center; padding: clamp(34px, 5vw, 64px); }
.projects-feature h2 {
font-size: clamp(34px, 4vw, 58px);
font-weight: 350;
letter-spacing: -.07em;
line-height: 1.04;
margin: 0 0 22px;
}
.projects-feature p { color: #a9b7ca; line-height: 1.75; margin: 0 0 34px; }
.projects-feature dl {
border-top: 1px solid rgba(226,232,240,.16);
display: grid;
gap: 0;
grid-template-columns: repeat(3, 1fr);
margin: 0;
padding-top: 22px;
}
.projects-feature dt {
color: #718299;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
margin-bottom: 8px;
text-transform: uppercase;
}
.projects-feature dd { color: #fff; font-size: 14px; margin: 0; }
.projects-stack { display: grid; gap: 22px; }
.projects-mini {
background: #fff;
color: #0f172a;
display: grid;
grid-template-columns: 42% 1fr;
transition: opacity .2s ease, transform .2s ease;
}
.projects-mini img { height: 100%; min-height: 260px; object-fit: cover; width: 100%; }
.projects-mini div { align-self: center; padding: clamp(24px, 3vw, 34px); }
.projects-gallery-head { align-items: end; }
.projects-gallery {
display: grid;
gap: 16px;
grid-auto-flow: dense;
grid-template-columns: repeat(4, 1fr);
}
.project-tile {
background: #fff;
border: 1px solid #e0e7ef;
display: grid;
grid-template-rows: minmax(230px, 320px) auto;
min-height: 450px;
overflow: hidden;
transition: opacity .2s ease, transform .2s ease;
}
.project-tile.large { grid-column: span 2; grid-row: span 2; }
.project-tile.tall { grid-row: span 2; }
.project-tile img { height: 100%; object-fit: cover; width: 100%; }
.project-tile div { padding: clamp(22px, 3vw, 34px); }
.projects-process { background: #fff; padding: clamp(74px, 10vw, 126px) 0; }
.projects-process-grid {
display: grid;
gap: clamp(36px, 7vw, 90px);
grid-template-columns: .75fr 1.25fr;
}
.projects-process-list { border-top: 1px solid #dbe3ec; }
.projects-process-list article {
border-bottom: 1px solid #dbe3ec;
display: grid;
gap: 24px;
grid-template-columns: 70px 220px 1fr;
padding: 26px 0;
}
.projects-process-list span { color: #d32927; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.projects-process-list h3 { font-size: 23px; font-weight: 470; letter-spacing: -.04em; margin: 0; }
.projects-process-list p { color: #64748b; line-height: 1.68; margin: 0; }
.projects-cta { background: #eaf1f8; }
.is-hidden {
display: none !important;
opacity: 0 !important;
pointer-events: none;
transform: scale(.98);
}
/* Services card + selector direction */
.services-fluid-hero {
align-items: end;
background: #07101b;
color: #fff;
display: grid;
min-height: 92svh;
overflow: hidden;
padding: clamp(150px, 18vw, 220px) 0 clamp(54px, 8vw, 96px);
position: relative;
}
.services-fluid-hero video {
height: 100%;
inset: 0;
object-fit: cover;
opacity: .76;
position: absolute;
width: 100%;
z-index: 0;
}
.services-fluid-hero:after {
background:
linear-gradient(90deg, rgba(7,16,27,.88), rgba(7,16,27,.28) 56%, rgba(7,16,27,.76)),
linear-gradient(to top, rgba(7,16,27,.95), rgba(7,16,27,.1) 66%);
content: "";
inset: 0;
position: absolute;
z-index: 1;
}
.services-fluid-hero-grid {
align-items: end;
display: grid;
gap: clamp(34px, 6vw, 84px);
grid-template-columns: 1.05fr .7fr;
position: relative;
z-index: 2;
}
.services-fluid-hero .br-label { color: #9bd7f5; }
.services-fluid-hero h1 {
font-size: clamp(44px, 7.4vw, 106px);
font-weight: 320;
letter-spacing: 0;
line-height: .9;
margin: 0 0 24px;
max-width: 980px;
}
.services-fluid-hero p {
color: rgba(255,255,255,.72);
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.72;
margin: 0;
max-width: 620px;
}
.services-season-card {
backdrop-filter: blur(18px);
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.16);
padding: clamp(24px, 4vw, 38px);
}
.services-season-card span {
color: #9bd7f5;
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: .22em;
margin-bottom: 18px;
text-transform: uppercase;
}
.services-season-card strong {
display: block;
font-size: clamp(30px, 4vw, 54px);
font-weight: 340;
letter-spacing: 0;
line-height: 1;
}
.services-card-section {
background: #10161f;
color: #fff;
overflow: hidden;
padding: clamp(132px, 15vw, 180px) 0 clamp(78px, 11vw, 134px);
position: relative;
}
.services-card-section:before {
background:
linear-gradient(90deg, rgba(16,22,31,.9), rgba(16,22,31,.66) 44%, rgba(16,22,31,.88)),
url("../../media/DSC_3872-copy-scaled.jpg") center / cover;
content: "";
inset: 0;
opacity: .72;
position: absolute;
}
.services-card-section > .br-shell { position: relative; z-index: 1; }
.services-card-head {
align-items: end;
display: grid;
gap: clamp(28px, 5vw, 70px);
grid-template-columns: .65fr 1fr;
margin-bottom: clamp(34px, 5vw, 58px);
}
.services-card-head h2 {
font-size: clamp(32px, 4.2vw, 58px);
font-weight: 320;
letter-spacing: 0;
line-height: 1;
margin: 0;
max-width: 760px;
}
.services-card-grid {
display: grid;
gap: clamp(18px, 2.5vw, 28px);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.services-motion-card {
aspect-ratio: 3 / 4.05;
background: #17202c;
border: 1px solid rgba(255,255,255,.1);
color: #fff;
overflow: hidden;
position: relative;
transition: border-color .25s ease, transform .25s ease;
}
.services-motion-card:hover {
border-color: rgba(155,215,245,.58);
transform: translateY(-10px);
}
.services-motion-card img {
height: 100%;
object-fit: cover;
opacity: .82;
position: absolute;
transform: scale(1.03);
transition: opacity .45s ease, transform .45s ease;
width: 100%;
}
.services-motion-card:hover img {
opacity: .95;
transform: scale(1.09);
}
.services-motion-card:after {
background: linear-gradient(to top, rgba(5,8,13,.82), rgba(5,8,13,.08) 64%);
content: "";
inset: 0;
position: absolute;
}
.services-motion-card div {
bottom: 0;
padding: clamp(20px, 2.3vw, 28px);
position: absolute;
z-index: 1;
}
.services-motion-card span {
color: #9bd7f5;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .22em;
margin-bottom: 13px;
text-transform: uppercase;
}
.services-motion-card h3 {
font-size: clamp(20px, 1.75vw, 26px);
font-weight: 320;
letter-spacing: 0;
line-height: 1.08;
margin: 0;
}
.services-motion-card p {
color: rgba(255,255,255,.68);
font-size: 14px;
line-height: 1.45;
margin: 0;
}
.services-selector-section {
background:
linear-gradient(90deg, rgba(247,250,252,.98), rgba(247,250,252,.92) 52%, rgba(247,250,252,.98)),
url("../../media/600-fit-natural_ice_rink_with_junior_boards_and_subfloor7-scaled-1.jpg") center / cover;
color: #0f172a;
padding: clamp(64px, 9vw, 104px) 0;
}
.services-selector-wrap {
display: grid;
gap: clamp(28px, 5vw, 72px);
grid-template-columns: .86fr 1.14fr;
}
.services-question-head {
margin-bottom: clamp(24px, 4vw, 42px);
}
.services-question-head span {
color: #2f6f9f;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .22em;
margin-bottom: 12px;
text-transform: uppercase;
}
.services-question-head h2 {
color: #0f172a;
font-size: clamp(28px, 3.8vw, 50px);
font-weight: 340;
letter-spacing: 0;
line-height: 1.02;
margin: 0;
}
.services-selector-menu {
align-self: start;
display: grid;
gap: 12px;
position: sticky;
top: 112px;
}
.services-selector-menu button {
background: #fff;
border: 1px solid #dbe4ee;
color: #64748b;
cursor: pointer;
display: grid;
gap: 6px;
padding: clamp(16px, 2.2vw, 21px);
text-align: left;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.services-selector-menu button:hover { transform: translateX(6px); }
.services-selector-menu button.active {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.services-selector-menu span {
font-size: 9px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.services-selector-menu strong {
font-size: clamp(14px, 1.35vw, 17px);
font-weight: 680;
letter-spacing: 0;
}
.services-selector-stage {
background: #0f172a;
color: #fff;
min-height: 560px;
overflow: hidden;
position: relative;
}
.services-selector-stage img {
height: 100%;
inset: 0;
object-fit: cover;
opacity: .78;
position: absolute;
transition: opacity .28s ease, transform .42s ease;
width: 100%;
}
.services-selector-stage:after {
background: linear-gradient(to top, rgba(15,23,42,.82), rgba(15,23,42,.04) 64%);
content: "";
inset: 0;
position: absolute;
}
.services-selector-stage > div {
bottom: 0;
padding: clamp(28px, 5vw, 54px);
position: absolute;
z-index: 1;
}
.services-selector-stage .br-label { color: #9bd7f5; }
.services-selector-stage h2 {
font-size: clamp(26px, 3.2vw, 44px);
font-weight: 420;
letter-spacing: 0;
line-height: 1.02;
margin: 0 0 14px;
max-width: 560px;
}
.services-selector-stage p {
color: rgba(255,255,255,.72);
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
max-width: 430px;
}
.services-reveal {
opacity: 0;
transform: translateY(34px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.services-reveal.in {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1050px) {
.projects-hero-grid,
.projects-category-head,
.projects-showcase-grid,
.projects-feature,
.projects-process-grid { grid-template-columns: 1fr; }
.services-fluid-hero-grid,
.services-card-head,
.services-selector-wrap { grid-template-columns: 1fr; }
.services-card-grid { grid-template-columns: repeat(2, 1fr); }
.services-selector-menu { position: static; }
.projects-hero { min-height: auto; }
.projects-hero-grid { min-height: 620px; }
.projects-hero-card { max-width: 480px; }
.projects-category-grid { grid-template-columns: 1fr 1fr; }
.projects-gallery { grid-template-columns: repeat(2, 1fr); }
.project-tile.large,
.project-tile.tall { grid-column: auto; grid-row: auto; }
}
@media (max-width: 680px) {
.projects-filter { flex-wrap: wrap; width: 100%; }
.projects-filter button { flex: 1 1 calc(50% - 5px); }
.projects-category-grid,
.projects-gallery,
.services-card-grid,
.projects-mini,
.projects-feature dl,
.projects-process-list article { grid-template-columns: 1fr; }
.services-fluid-hero { min-height: auto; }
.services-selector-stage { min-height: 560px; }
.projects-category-card,
.project-tile { min-height: auto; }
.projects-category-card { grid-template-rows: 250px auto; }
.projects-mini img { min-height: 260px; }
.projects-process-list article { gap: 12px; }
}
.portfolio-page {
background: #f5f7f9;
color: #0f172a;
}
.portfolio-hero {
background: #0b111b;
color: #fff;
overflow: hidden;
padding: clamp(148px, 16vw, 192px) 0 clamp(72px, 8vw, 120px);
}
.portfolio-hero-grid {
align-items: end;
display: grid;
gap: clamp(38px, 6vw, 90px);
grid-template-columns: .82fr 1.18fr;
min-height: 780px;
}
.portfolio-hero-copy {
padding-bottom: clamp(0px, 5vw, 64px);
}
.portfolio-hero-copy .br-label {
color: #9bd7f5;
}
.portfolio-hero h1 {
font-size: clamp(52px, 8vw, 118px);
font-weight: 320;
letter-spacing: 0;
line-height: .9;
margin: 0 0 28px;
max-width: 760px;
}
.portfolio-hero p {
color: #b9c7d8;
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.74;
margin: 0;
max-width: 610px;
}
.portfolio-hero-links {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 22px;
margin-top: 36px;
}
.portfolio-hero-links .br-button {
background: #d32927;
border-color: #d32927;
}
.portfolio-hero-links a:not(.br-button) {
border-bottom: 1px solid rgba(255,255,255,.38);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
padding-bottom: 7px;
text-transform: uppercase;
}
.portfolio-hero-mosaic {
display: grid;
gap: 12px;
grid-template-columns: .72fr .52fr;
grid-template-rows: minmax(280px, 36vw) minmax(180px, 26vw);
min-height: clamp(620px, 62vw, 780px);
}
.portfolio-hero-mosaic figure {
margin: 0;
overflow: hidden;
position: relative;
}
.portfolio-hero-mosaic figure:after {
background: linear-gradient(0deg, rgba(7,13,22,.34), transparent 55%);
content: "";
inset: 0;
position: absolute;
}
.portfolio-hero-mosaic .wide {
grid-row: 1 / span 2;
}
.portfolio-hero-mosaic img {
height: 100%;
object-fit: cover;
width: 100%;
}
.portfolio-proof {
background: #fff;
border-bottom: 1px solid #dce4ee;
border-top: 1px solid #dce4ee;
position: relative;
z-index: 2;
}
.portfolio-proof-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.portfolio-proof article {
border-right: 1px solid #dce4ee;
padding: clamp(26px, 4vw, 48px);
}
.portfolio-proof article:first-child {
border-left: 1px solid #dce4ee;
}
.portfolio-proof span,
.portfolio-case-copy span,
.portfolio-work-card span,
.portfolio-process-list span {
color: #d32927;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 13px;
text-transform: uppercase;
}
.portfolio-proof strong {
display: block;
font-size: clamp(24px, 2.6vw, 36px);
font-weight: 360;
letter-spacing: 0;
line-height: 1.05;
}
.portfolio-featured,
.portfolio-index-section,
.portfolio-process {
padding: clamp(76px, 10vw, 136px) 0;
}
.portfolio-featured {
background: #f5f7f9;
}
.portfolio-section-head,
.portfolio-index-head {
align-items: end;
display: grid;
gap: clamp(28px, 5vw, 76px);
grid-template-columns: .78fr 1.22fr;
margin-bottom: clamp(34px, 5vw, 72px);
}
.portfolio-section-head h2,
.portfolio-index-head h2,
.portfolio-process h2 {
font-size: clamp(38px, 5.2vw, 76px);
font-weight: 320;
letter-spacing: 0;
line-height: .96;
margin: 0;
}
.portfolio-case {
background: #fff;
border: 1px solid #dce4ee;
display: grid;
grid-template-columns: 1.18fr .82fr;
margin-bottom: clamp(24px, 4vw, 46px);
min-height: clamp(560px, 58vw, 760px);
overflow: hidden;
}
.portfolio-case.reverse {
grid-template-columns: .82fr 1.18fr;
}
.portfolio-case.reverse figure {
order: 2;
}
.portfolio-case figure {
margin: 0;
min-height: 100%;
}
.portfolio-case img {
height: 100%;
object-fit: cover;
width: 100%;
}
.portfolio-case-copy {
align-self: center;
padding: clamp(34px, 5vw, 66px);
}
.portfolio-case-copy h3 {
font-size: clamp(34px, 4.5vw, 62px);
font-weight: 330;
letter-spacing: 0;
line-height: 1;
margin: 0 0 22px;
}
.portfolio-case-copy p {
color: #5f6e80;
font-size: 16px;
line-height: 1.76;
margin: 0 0 32px;
}
.portfolio-case-copy dl {
border-top: 1px solid #dce4ee;
display: grid;
gap: 0;
grid-template-columns: repeat(3, 1fr);
margin: 0;
padding-top: 20px;
}
.portfolio-case-copy dt {
color: #7c8a9c;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
margin-bottom: 8px;
text-transform: uppercase;
}
.portfolio-case-copy dd {
color: #0f172a;
font-size: 14px;
font-weight: 650;
margin: 0;
}
.portfolio-index-section {
background: #101722;
color: #fff;
}
.portfolio-index-head {
grid-template-columns: minmax(0, 1fr) auto;
}
.portfolio-index-head .br-label {
color: #9bd7f5;
}
.portfolio-filter {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
display: flex;
padding: 5px;
}
.portfolio-filter button {
background: transparent;
border: 0;
color: rgba(255,255,255,.68);
cursor: pointer;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
min-height: 42px;
padding: 0 16px;
text-transform: uppercase;
}
.portfolio-filter button.active {
background: #fff;
color: #0f172a;
}
.portfolio-work-grid {
display: grid;
gap: 14px;
grid-auto-flow: dense;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.portfolio-work-card {
background: #fff;
color: #0f172a;
display: grid;
grid-template-rows: minmax(260px, 1fr) auto;
min-height: 470px;
overflow: hidden;
}
.portfolio-work-card.large {
grid-column: span 2;
grid-row: span 2;
min-height: 700px;
}
.portfolio-work-card.tall {
grid-row: span 2;
min-height: 700px;
}
.portfolio-work-card img {
height: 100%;
object-fit: cover;
width: 100%;
}
.portfolio-work-card div {
padding: clamp(24px, 3vw, 38px);
}
.portfolio-work-card h3 {
font-size: clamp(24px, 2.4vw, 34px);
font-weight: 360;
letter-spacing: 0;
line-height: 1.04;
margin: 0 0 13px;
}
.portfolio-work-card p {
color: #64748b;
line-height: 1.62;
margin: 0;
}
.portfolio-process {
background: #fff;
}
.portfolio-process-grid {
display: grid;
gap: clamp(38px, 7vw, 100px);
grid-template-columns: .72fr 1.28fr;
}
.portfolio-process-list {
border-top: 1px solid #dce4ee;
}
.portfolio-process-list article {
border-bottom: 1px solid #dce4ee;
display: grid;
gap: 26px;
grid-template-columns: 70px 230px 1fr;
padding: 28px 0;
}
.portfolio-process-list h3 {
font-size: clamp(22px, 2vw, 30px);
font-weight: 430;
letter-spacing: 0;
margin: 0;
}
.portfolio-process-list p {
color: #64748b;
line-height: 1.72;
margin: 0;
}
.portfolio-cta {
background: #e8f0f8;
color: #0f172a;
}
.portfolio-cta .br-button {
background: #d32927;
border-color: #d32927;
}
.portfolio-page .is-hidden {
display: none !important;
}
@media (max-width: 1050px) {
.portfolio-hero-grid,
.portfolio-section-head,
.portfolio-index-head,
.portfolio-case,
.portfolio-case.reverse,
.portfolio-process-grid {
grid-template-columns: 1fr;
}
.portfolio-hero-grid {
min-height: auto;
}
.portfolio-case.reverse figure {
order: 0;
}
.portfolio-proof-grid,
.portfolio-work-grid {
grid-template-columns: repeat(2, 1fr);
}
.portfolio-work-card.large,
.portfolio-work-card.tall {
grid-column: auto;
grid-row: auto;
min-height: 520px;
}
}
@media (max-width: 680px) {
.portfolio-hero {
padding-top: 138px;
}
.portfolio-hero-mosaic,
.portfolio-proof-grid,
.portfolio-work-grid,
.portfolio-case-copy dl,
.portfolio-process-list article {
grid-template-columns: 1fr;
}
.portfolio-hero-mosaic {
grid-template-rows: repeat(3, minmax(210px, 1fr));
min-height: auto;
}
.portfolio-hero-mosaic .wide {
grid-row: auto;
}
.portfolio-proof article,
.portfolio-proof article:first-child {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #dce4ee;
}
.portfolio-filter {
flex-wrap: wrap;
width: 100%;
}
.portfolio-filter button {
flex: 1 1 calc(50% - 5px);
}
.portfolio-work-card,
.portfolio-work-card.large,
.portfolio-work-card.tall {
min-height: auto;
}
.portfolio-work-card {
grid-template-rows: 280px auto;
}
.portfolio-case {
min-height: auto;
}
.portfolio-case figure {
min-height: 320px;
}
}
/* Modern rink detail pages */
.rink-modern-page {
background: #f5f7fa;
color: #101827;
}
.rink-modern-hero {
background: #07111d;
color: #fff;
display: grid;
min-height: 92svh;
overflow: hidden;
padding: clamp(146px, 16vw, 206px) 0 clamp(42px, 7vw, 82px);
position: relative;
}
.rink-modern-hero:before {
background: var(--hero-image) center / cover;
content: "";
inset: 0;
opacity: .78;
position: absolute;
transform: scale(1.02);
}
.rink-modern-hero:after {
background:
linear-gradient(90deg, rgba(7,17,29,.94), rgba(7,17,29,.46) 52%, rgba(7,17,29,.72)),
linear-gradient(to top, rgba(7,17,29,.98), rgba(7,17,29,.06) 62%);
content: "";
inset: 0;
position: absolute;
}
.rink-modern-hero .br-shell {
align-items: end;
display: grid;
gap: clamp(34px, 6vw, 84px);
grid-template-columns: minmax(0, .95fr) minmax(280px, .45fr);
position: relative;
z-index: 1;
}
.rink-modern-hero .br-label,
.rink-modern-intro .br-label,
.rink-modern-process span,
.rink-modern-choice span,
.rink-modern-gallery span,
.rink-modern-cta .br-label {
color: #8ed1f3;
}
.rink-modern-hero h1 {
font-size: clamp(46px, 7vw, 104px);
font-weight: 320;
letter-spacing: 0;
line-height: .92;
margin: 0 0 26px;
max-width: 980px;
}
.rink-modern-hero p {
color: rgba(255,255,255,.76);
font-size: clamp(17px, 1.55vw, 21px);
line-height: 1.72;
margin: 0;
max-width: 650px;
}
.rink-modern-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 22px;
margin-top: 34px;
}
.rink-modern-actions .br-button {
background: #d32927;
border-color: #d32927;
}
.rink-modern-actions a:not(.br-button) {
border-bottom: 1px solid rgba(255,255,255,.42);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
padding-bottom: 7px;
text-transform: uppercase;
}
.rink-hero-panel {
backdrop-filter: blur(18px);
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
display: grid;
gap: 0;
}
.rink-hero-panel div {
border-bottom: 1px solid rgba(255,255,255,.14);
padding: clamp(18px, 2.5vw, 28px);
}
.rink-hero-panel div:last-child {
border-bottom: 0;
}
.rink-hero-panel span {
color: rgba(255,255,255,.58);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 10px;
text-transform: uppercase;
}
.rink-hero-panel strong {
display: block;
font-size: clamp(21px, 2.1vw, 31px);
font-weight: 390;
letter-spacing: 0;
line-height: 1.12;
}
.rink-modern-proof {
background: #fff;
border-bottom: 1px solid #dce4ee;
position: relative;
z-index: 2;
}
.rink-modern-proof-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.rink-modern-proof article {
border-right: 1px solid #dce4ee;
padding: clamp(24px, 3.4vw, 42px);
}
.rink-modern-proof article:first-child {
border-left: 1px solid #dce4ee;
}
.rink-modern-proof span {
color: #d32927;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 12px;
text-transform: uppercase;
}
.rink-modern-proof strong {
display: block;
font-size: clamp(20px, 2.3vw, 32px);
font-weight: 360;
letter-spacing: 0;
line-height: 1.1;
}
.rink-modern-intro,
.rink-modern-layout,
.rink-modern-choice-section,
.rink-modern-gallery,
.rink-modern-cta {
padding: clamp(74px, 10vw, 128px) 0;
}
.rink-modern-intro-grid {
align-items: end;
display: grid;
gap: clamp(34px, 7vw, 96px);
grid-template-columns: .78fr 1.22fr;
}
.rink-modern-intro h2,
.rink-modern-layout h2,
.rink-modern-choice-section h2,
.rink-modern-gallery h2,
.rink-modern-cta h2 {
font-size: clamp(36px, 5vw, 74px);
font-weight: 320;
letter-spacing: 0;
line-height: .98;
margin: 0;
}
.rink-modern-intro p,
.rink-modern-layout p,
.rink-modern-choice p,
.rink-modern-cta p {
color: #5f6d7d;
line-height: 1.76;
margin: 0;
}
.rink-modern-layout {
background: #101722;
color: #fff;
}
.rink-modern-layout-grid {
display: grid;
gap: clamp(32px, 5vw, 70px);
grid-template-columns: .9fr 1.1fr;
}
.rink-modern-layout figure {
margin: 0;
min-height: clamp(450px, 48vw, 680px);
overflow: hidden;
}
.rink-modern-layout img {
height: 100%;
object-fit: cover;
width: 100%;
}
.rink-modern-process {
align-self: center;
display: grid;
gap: 0;
}
.rink-modern-process h2 {
margin-bottom: 30px;
}
.rink-modern-process article {
border-top: 1px solid rgba(226,232,240,.16);
display: grid;
gap: 22px;
grid-template-columns: 72px 1fr;
padding: 24px 0;
}
.rink-modern-process h3 {
color: #fff;
font-size: clamp(22px, 2vw, 30px);
font-weight: 430;
letter-spacing: 0;
line-height: 1.12;
margin: 0 0 10px;
}
.rink-modern-process p {
color: #a9b7ca;
}
.rink-modern-choice-section {
background: #fff;
}
.rink-modern-choice-head {
align-items: end;
display: grid;
gap: clamp(28px, 5vw, 72px);
grid-template-columns: .74fr 1fr;
margin-bottom: clamp(34px, 5vw, 62px);
}
.rink-modern-choice-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(3, 1fr);
}
.rink-modern-choice {
background: #f5f7fa;
border: 1px solid #dce4ee;
min-height: 330px;
padding: clamp(26px, 3.2vw, 38px);
}
.rink-modern-choice span {
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 38px;
text-transform: uppercase;
}
.rink-modern-choice h3 {
font-size: clamp(24px, 2.3vw, 34px);
font-weight: 370;
letter-spacing: 0;
line-height: 1.08;
margin: 0 0 16px;
}
.rink-modern-gallery {
background: #eef3f8;
}
.rink-modern-gallery-head {
align-items: end;
display: grid;
gap: clamp(26px, 5vw, 70px);
grid-template-columns: .8fr 1fr;
margin-bottom: clamp(30px, 5vw, 58px);
}
.rink-modern-gallery-grid {
display: grid;
gap: 12px;
grid-template-columns: 1.2fr .8fr .8fr;
}
.rink-modern-gallery figure {
background: #fff;
border: 1px solid #dce4ee;
margin: 0;
}
.rink-modern-gallery img {
aspect-ratio: 1.2 / .84;
height: 100%;
object-fit: cover;
width: 100%;
}
.rink-modern-gallery figcaption {
color: #5f6d7d;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
padding: 16px 18px;
text-transform: uppercase;
}
.rink-modern-cta {
background: #07111d;
color: #fff;
overflow: hidden;
position: relative;
}
.rink-modern-cta:before {
background: var(--cta-image) center / cover;
content: "";
inset: 0;
opacity: .32;
position: absolute;
}
.rink-modern-cta:after {
background: linear-gradient(90deg, rgba(7,17,29,.94), rgba(7,17,29,.74));
content: "";
inset: 0;
position: absolute;
}
.rink-modern-cta .br-shell {
align-items: end;
display: grid;
gap: clamp(28px, 5vw, 74px);
grid-template-columns: .82fr 1fr;
position: relative;
z-index: 1;
}
.rink-modern-cta p {
color: #b6c3d1;
margin-bottom: 30px;
max-width: 660px;
}
@media (max-width: 1050px) {
.rink-modern-hero .br-shell,
.rink-modern-intro-grid,
.rink-modern-layout-grid,
.rink-modern-choice-head,
.rink-modern-gallery-head,
.rink-modern-cta .br-shell {
grid-template-columns: 1fr;
}
.rink-modern-proof-grid,
.rink-modern-choice-grid {
grid-template-columns: repeat(2, 1fr);
}
.rink-hero-panel {
max-width: 560px;
}
}
@media (max-width: 680px) {
.br-nav {
flex-wrap: wrap;
row-gap: 12px;
}
.br-nav .br-action {
display: none !important;
}
.rink-modern-hero {
min-height: auto;
padding-top: 132px;
}
.rink-modern-proof-grid,
.rink-modern-choice-grid,
.rink-modern-gallery-grid,
.rink-modern-process article {
grid-template-columns: 1fr;
}
.rink-modern-proof article,
.rink-modern-proof article:first-child {
border-left: 0;
border-right: 0;
border-bottom: 1px solid #dce4ee;
}
.rink-modern-layout figure {
min-height: 330px;
}
.rink-modern-choice {
min-height: auto;
}
.rink-modern-choice span {
margin-bottom: 22px;
}
}
/* Distinct premium product-page concepts */
.tesla-rink-page {
background: #f4f6f8;
color: #111827;
}
.tesla-rink-page .br-label {
letter-spacing: .24em;
}
.product-hero {
background: #07111c;
color: #fff;
min-height: 100svh;
overflow: hidden;
padding: clamp(138px, 15vw, 188px) 0 clamp(28px, 5vw, 64px);
position: relative;
}
.product-hero:before {
background: var(--hero-image) center / cover;
content: "";
inset: 0;
opacity: .82;
position: absolute;
transform: scale(1.015);
}
.product-hero:after {
background:
linear-gradient(to top, rgba(5,9,15,.94), rgba(5,9,15,.14) 52%, rgba(5,9,15,.72)),
linear-gradient(90deg, rgba(5,9,15,.72), rgba(5,9,15,.16) 50%, rgba(5,9,15,.54));
content: "";
inset: 0;
position: absolute;
}
.product-hero-inner {
display: grid;
grid-template-rows: 1fr auto;
min-height: calc(100svh - clamp(176px, 20vw, 250px));
position: relative;
z-index: 1;
}
.product-hero-copy {
align-self: center;
max-width: 900px;
}
.product-hero-copy h1 {
font-size: clamp(48px, 8.5vw, 128px);
font-weight: 300;
letter-spacing: 0;
line-height: .88;
margin: 0 0 24px;
}
.product-hero-copy p {
color: rgba(255,255,255,.78);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.72;
margin: 0;
max-width: 660px;
}
.product-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 34px;
}
.product-actions .br-button {
background: #fff;
border-color: #fff;
color: #111827;
}
.product-actions .dark-button {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.3);
color: #fff;
}
.product-spec-rail {
border-top: 1px solid rgba(255,255,255,.18);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.product-spec-rail div {
border-right: 1px solid rgba(255,255,255,.18);
padding: clamp(18px, 2.4vw, 28px) clamp(10px, 2vw, 24px);
}
.product-spec-rail div:last-child {
border-right: 0;
}
.product-spec-rail span {
color: rgba(255,255,255,.58);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 10px;
text-transform: uppercase;
}
.product-spec-rail strong {
display: block;
font-size: clamp(18px, 2vw, 30px);
font-weight: 360;
letter-spacing: 0;
line-height: 1.08;
}
.product-section {
padding: clamp(78px, 10vw, 138px) 0;
}
.product-section h2 {
font-size: clamp(38px, 5.6vw, 84px);
font-weight: 300;
letter-spacing: 0;
line-height: .95;
margin: 0;
}
.product-section p {
color: #5b6675;
line-height: 1.76;
margin: 0;
}
.pool-transform {
background: #fff;
}
.pool-transform-grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
}
.pool-transform figure {
background: #111827;
margin: 0;
min-height: clamp(470px, 48vw, 680px);
overflow: hidden;
position: relative;
}
.pool-transform img {
height: 100%;
object-fit: cover;
width: 100%;
}
.pool-transform figcaption {
bottom: 22px;
color: #fff;
font-size: 11px;
font-weight: 800;
left: 24px;
letter-spacing: .18em;
position: absolute;
text-transform: uppercase;
}
.pool-deck-system {
background: #0d141f;
color: #fff;
}
.pool-deck-grid {
align-items: center;
display: grid;
gap: clamp(36px, 7vw, 90px);
grid-template-columns: .8fr 1.2fr;
}
.pool-diagram {
aspect-ratio: 1.15 / .78;
background:
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
#101b2a;
background-size: 52px 52px;
border: 1px solid rgba(255,255,255,.18);
padding: clamp(22px, 4vw, 44px);
position: relative;
}
.pool-diagram:before,
.pool-diagram:after {
border: 1px solid rgba(142,209,243,.62);
content: "";
inset: 20% 13%;
position: absolute;
}
.pool-diagram:after {
border-color: rgba(211,41,39,.75);
inset: 29% 21%;
}
.pool-diagram span {
color: #8ed1f3;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .2em;
position: relative;
text-transform: uppercase;
z-index: 1;
}
.pool-system-list {
display: grid;
gap: 0;
}
.pool-system-list article {
border-top: 1px solid rgba(255,255,255,.16);
padding: 24px 0;
}
.pool-system-list h3 {
font-size: clamp(24px, 2.5vw, 36px);
font-weight: 340;
letter-spacing: 0;
margin: 0 0 10px;
}
.pool-system-list p {
color: #a8b5c6;
}
.court-page {
background: #f2f4f7;
}
.court-hero:before {
opacity: .55;
}
.court-hero:after {
background:
linear-gradient(90deg, rgba(244,246,248,.98), rgba(244,246,248,.78) 48%, rgba(244,246,248,.26)),
linear-gradient(to top, rgba(244,246,248,.98), rgba(244,246,248,.22) 68%);
}
.court-hero,
.court-hero .product-hero-copy,
.court-hero .product-hero-copy p {
color: #111827;
}
.court-hero .product-hero-copy p {
color: #4b5563;
}
.court-hero .product-actions .br-button {
background: #111827;
border-color: #111827;
color: #fff;
}
.court-hero .product-actions .dark-button {
background: #fff;
border-color: #d4dce6;
color: #111827;
}
.court-hero .product-spec-rail {
border-color: rgba(17,24,39,.16);
}
.court-hero .product-spec-rail div {
border-color: rgba(17,24,39,.16);
}
.court-hero .product-spec-rail span,
.court-hero .product-spec-rail strong {
color: #111827;
}
.court-blueprint {
background: #fff;
}
.court-blueprint-grid {
align-items: center;
display: grid;
gap: clamp(34px, 6vw, 80px);
grid-template-columns: .9fr 1.1fr;
}
.court-lines {
aspect-ratio: 1 / .66;
background: #111827;
border: 1px solid #dbe3ec;
overflow: hidden;
position: relative;
}
.court-lines:before {
background:
linear-gradient(90deg, transparent 7%, #fff 7% 7.5%, transparent 7.5% 92.5%, #fff 92.5% 93%, transparent 93%),
linear-gradient(transparent 9%, #fff 9% 10%, transparent 10% 90%, #fff 90% 91%, transparent 91%),
linear-gradient(90deg, transparent 49.5%, #fff 49.5% 50.5%, transparent 50.5%),
linear-gradient(transparent 49.5%, #fff 49.5% 50.5%, transparent 50.5%);
content: "";
inset: 36px;
opacity: .9;
position: absolute;
}
.court-lines:after {
background: url("../../media/DJI_0057-scaled (1).jpg") center / cover;
content: "";
inset: 0;
opacity: .18;
position: absolute;
}
.court-option-strip {
display: grid;
gap: 1px;
grid-template-columns: repeat(3, 1fr);
}
.court-option-strip article {
background: #111827;
color: #fff;
min-height: 390px;
padding: clamp(28px, 4vw, 46px);
}
.court-option-strip article:nth-child(2) {
background: #202b3b;
}
.court-option-strip article:nth-child(3) {
background: #e8eef4;
color: #111827;
}
.court-option-strip span {
color: #8ed1f3;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .2em;
margin-bottom: 96px;
text-transform: uppercase;
}
.court-option-strip h3 {
font-size: clamp(27px, 3vw, 42px);
font-weight: 320;
letter-spacing: 0;
line-height: 1.02;
margin: 0 0 18px;
}
.court-option-strip p {
color: inherit;
opacity: .72;
}
.synthetic-page {
background: #fff;
}
.synthetic-hero:before {
opacity: .34;
}
.synthetic-hero:after {
background:
linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.9) 46%, rgba(255,255,255,.38)),
linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.18) 70%);
}
.synthetic-hero,
.synthetic-hero .product-hero-copy,
.synthetic-hero .product-hero-copy p {
color: #111827;
}
.synthetic-hero .product-hero-copy p {
color: #525f70;
}
.synthetic-hero .product-actions .br-button {
background: #111827;
border-color: #111827;
color: #fff;
}
.synthetic-hero .product-actions .dark-button {
background: #eef3f8;
border-color: #dbe3ec;
color: #111827;
}
.synthetic-hero .product-spec-rail {
border-color: #dbe3ec;
}
.synthetic-hero .product-spec-rail div {
border-color: #dbe3ec;
}
.synthetic-hero .product-spec-rail span,
.synthetic-hero .product-spec-rail strong {
color: #111827;
}
.synthetic-material {
background: #f7f9fb;
}
.synthetic-material-grid {
align-items: stretch;
display: grid;
gap: 12px;
grid-template-columns: .86fr 1.14fr;
}
.synthetic-tile-wall {
background:
linear-gradient(90deg, rgba(17,24,39,.08) 1px, transparent 1px),
linear-gradient(rgba(17,24,39,.08) 1px, transparent 1px),
#fff;
background-size: 88px 88px;
border: 1px solid #dbe3ec;
min-height: clamp(420px, 45vw, 640px);
position: relative;
}
.synthetic-tile-wall:after {
background: url("../../media/shop_premium_hero.png") center / contain no-repeat;
content: "";
inset: 10%;
position: absolute;
}
.synthetic-lab-cards {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, 1fr);
}
.synthetic-lab-cards article {
background: #fff;
border: 1px solid #dbe3ec;
padding: clamp(24px, 3.5vw, 42px);
}
.synthetic-lab-cards article:first-child {
grid-column: 1 / -1;
}
.synthetic-lab-cards h3 {
font-size: clamp(25px, 2.8vw, 40px);
font-weight: 320;
letter-spacing: 0;
margin: 0 0 16px;
}
.indoor-page {
background: #080d14;
color: #fff;
}
.indoor-hero:after {
background:
linear-gradient(90deg, rgba(5,9,15,.88), rgba(5,9,15,.22) 52%, rgba(5,9,15,.72)),
linear-gradient(to top, rgba(5,9,15,.96), rgba(5,9,15,.18) 64%);
}
.indoor-engineering {
background: #080d14;
color: #fff;
}
.indoor-console {
display: grid;
gap: 1px;
grid-template-columns: .8fr 1.2fr;
}
.indoor-console-copy {
background: #101722;
padding: clamp(34px, 5vw, 66px);
}
.indoor-spec-table {
background: #fff;
color: #111827;
display: grid;
gap: 0;
}
.indoor-spec-table div {
border-bottom: 1px solid #dbe3ec;
display: grid;
gap: 26px;
grid-template-columns: 170px 1fr;
padding: clamp(22px, 3vw, 34px);
}
.indoor-spec-table div:last-child {
border-bottom: 0;
}
.indoor-spec-table span {
color: #d32927;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.indoor-spec-table strong {
font-size: clamp(21px, 2.1vw, 31px);
font-weight: 330;
letter-spacing: 0;
line-height: 1.12;
}
.indoor-gallery-wall {
display: grid;
gap: 10px;
grid-template-columns: 1.2fr .8fr .8fr;
}
.indoor-gallery-wall figure {
margin: 0;
min-height: clamp(340px, 36vw, 520px);
overflow: hidden;
}
.indoor-gallery-wall img {
height: 100%;
object-fit: cover;
width: 100%;
}
@media (max-width: 1050px) {
.product-spec-rail,
.pool-deck-grid,
.court-blueprint-grid,
.synthetic-material-grid,
.indoor-console {
grid-template-columns: 1fr;
}
.product-spec-rail {
grid-template-columns: repeat(2, 1fr);
}
.product-spec-rail div:nth-child(2) {
border-right: 0;
}
.pool-transform-grid,
.court-option-strip,
.indoor-gallery-wall {
grid-template-columns: 1fr;
}
}
@media (max-width: 680px) {
.product-hero {
min-height: auto;
padding-top: 126px;
}
.product-hero-inner {
min-height: auto;
}
.product-spec-rail,
.synthetic-lab-cards,
.indoor-spec-table div {
grid-template-columns: 1fr;
}
.product-spec-rail div,
.product-spec-rail div:nth-child(2) {
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.16);
}
.court-hero .product-spec-rail div,
.synthetic-hero .product-spec-rail div {
border-bottom-color: rgba(17,24,39,.16);
}
.product-spec-rail div:last-child {
border-bottom: 0;
}
.pool-transform figure,
.synthetic-tile-wall,
.indoor-gallery-wall figure {
min-height: 300px;
}
.court-option-strip span {
margin-bottom: 42px;
}
}
/* Concept picker for rink page directions */
.concept-picker-page {
background: #05070b;
color: #fff;
}
.concept-picker-hero {
align-items: end;
background:
linear-gradient(90deg, rgba(5,7,11,.92), rgba(5,7,11,.36)),
url("../../media/DJI_0096-scaled.jpg") center / cover;
display: grid;
min-height: 82svh;
padding: clamp(150px, 17vw, 210px) 0 clamp(54px, 8vw, 92px);
}
.concept-picker-hero h1 {
font-size: clamp(48px, 8vw, 120px);
font-weight: 300;
letter-spacing: 0;
line-height: .9;
margin: 0 0 24px;
max-width: 1050px;
}
.concept-picker-hero p {
color: rgba(255,255,255,.74);
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.72;
margin: 0;
max-width: 720px;
}
.concept-jump {
background: #0c1119;
border-bottom: 1px solid rgba(255,255,255,.12);
border-top: 1px solid rgba(255,255,255,.12);
position: sticky;
top: 80px;
z-index: 20;
}
.concept-jump .br-shell {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 10px;
padding-top: 10px;
scrollbar-width: none;
}
.concept-jump .br-shell::-webkit-scrollbar {
display: none;
}
.concept-jump a {
border: 1px solid rgba(255,255,255,.16);
color: rgba(255,255,255,.72);
flex: 0 0 auto;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
padding: 13px 16px;
text-transform: uppercase;
}
.concept-group {
padding: clamp(78px, 10vw, 138px) 0;
}
.concept-group:nth-child(even) {
background: #080d14;
}
.concept-group-head {
align-items: end;
display: grid;
gap: clamp(26px, 5vw, 72px);
grid-template-columns: .72fr 1fr;
margin-bottom: clamp(34px, 5vw, 68px);
}
.concept-group-head h2 {
font-size: clamp(40px, 6vw, 90px);
font-weight: 300;
letter-spacing: 0;
line-height: .92;
margin: 0;
}
.concept-group-head p {
color: #a8b3c1;
line-height: 1.75;
margin: 0;
}
.concept-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.concept-card {
background: #111827;
border: 1px solid rgba(255,255,255,.12);
min-height: 680px;
overflow: hidden;
position: relative;
}
.concept-card:before {
background: var(--concept-image) center / cover;
content: "";
inset: 0;
opacity: .72;
position: absolute;
transition: transform .5s ease, opacity .5s ease;
}
.concept-card:hover:before {
opacity: .86;
transform: scale(1.04);
}
.concept-card:after {
background: linear-gradient(to top, rgba(4,7,12,.94), rgba(4,7,12,.18) 62%);
content: "";
inset: 0;
position: absolute;
}
.concept-card-inner {
bottom: 0;
left: 0;
padding: clamp(25px, 3vw, 38px);
position: absolute;
right: 0;
z-index: 1;
}
.concept-card span {
color: #8ed1f3;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .22em;
margin-bottom: 14px;
text-transform: uppercase;
}
.concept-card h3 {
font-size: clamp(28px, 3vw, 44px);
font-weight: 300;
letter-spacing: 0;
line-height: .98;
margin: 0 0 18px;
}
.concept-card p {
color: rgba(255,255,255,.72);
line-height: 1.62;
margin: 0 0 24px;
}
.concept-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.concept-tags b {
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.72);
font-size: 9px;
font-weight: 800;
letter-spacing: .16em;
padding: 9px 10px;
text-transform: uppercase;
}
.concept-card.light {
background: #f6f8fb;
color: #111827;
}
.concept-card.light:before {
opacity: .32;
}
.concept-card.light:after {
background: linear-gradient(to top, rgba(246,248,251,.98), rgba(246,248,251,.62) 58%, rgba(246,248,251,.12));
}
.concept-card.light p,
.concept-card.light .concept-tags b {
color: #4b5563;
}
.concept-card.light .concept-tags b {
border-color: #d5dee9;
}
.concept-card.blueprint:before {
background:
linear-gradient(90deg, rgba(142,209,243,.16) 1px, transparent 1px),
linear-gradient(rgba(142,209,243,.16) 1px, transparent 1px),
var(--concept-image) center / cover;
background-size: 46px 46px, 46px 46px, cover;
opacity: .5;
}
.concept-card.lab {
background:
linear-gradient(90deg, rgba(17,24,39,.07) 1px, transparent 1px),
linear-gradient(rgba(17,24,39,.07) 1px, transparent 1px),
#fff;
background-size: 76px 76px;
color: #111827;
}
.concept-card.lab:before {
background: var(--concept-image) center / contain no-repeat;
inset: 7%;
opacity: .72;
}
.concept-card.lab:after {
background: linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.74) 48%, rgba(255,255,255,.08));
}
.concept-card.lab p,
.concept-card.lab .concept-tags b {
color: #4b5563;
}
.concept-card.lab .concept-tags b {
border-color: #d5dee9;
}
@media (max-width: 1050px) {
.concept-group-head,
.concept-grid {
grid-template-columns: 1fr;
}
.concept-card {
min-height: 560px;
}
}
@media (max-width: 680px) {
.concept-jump {
top: 99px;
}
.concept-card {
min-height: 520px;
}
}
/* Live A/B/C concept switchers on individual pages */
/* ── Concept top bar (fixed below nav) ── */
.concept-topbar {
align-items: center;
background: #0d1117;
border-bottom: 1px solid rgba(255,255,255,.13);
display: flex;
height: 52px;
left: 0;
position: fixed;
right: 0;
top: 108px;
transition: top .3s;
z-index: 99;
}
.concept-topbar-inner {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.concept-topbar-label {
color: #8ed1f3;
font-size: 10px;
font-weight: 800;
letter-spacing: .24em;
text-transform: uppercase;
}
.live-concept-page {
background: #05070b;
color: #fff;
min-height: 100svh;
padding-top: 108px;
}
.concept-picker-bar {
align-items: center;
display: flex;
gap: 18px;
justify-content: space-between;
padding: 24px 0;
position: relative;
z-index: 5;
}
.concept-picker-bar > span {
color: #8ed1f3;
font-size: 11px;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
}
.concept-toggle {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
display: flex;
gap: 5px;
padding: 5px;
}
.concept-toggle label {
color: rgba(255,255,255,.66);
cursor: pointer;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
min-height: 42px;
padding: 14px 16px 0;
text-transform: uppercase;
white-space: nowrap;
}
.concept-toggle input {
appearance: none;
height: 0;
margin: 0;
position: absolute;
width: 0;
}
.concept-toggle label:has(input:checked),
.concept-toggle label.selected {
background: #fff;
color: #111827;
}
.concept-stage {
min-height: calc(100svh - 160px);
position: relative;
}
.page-concept {
display: grid;
min-height: calc(100vh - 108px);
min-height: calc(100svh - 108px);
overflow: visible;
position: relative;
}
.page-concept:before {
background: var(--concept-bg) center / cover;
content: "";
height: calc(100vh - 108px);
height: calc(100svh - 108px);
inset: 0 0 auto;
opacity: .95;
position: absolute;
}
.page-concept:after {
background: linear-gradient(to top, rgba(5,7,11,1) 0%, transparent 40%);
content: "";
height: calc(100vh - 108px);
height: calc(100svh - 108px);
inset: 0 0 auto;
position: absolute;
}
.page-concept.light {
background: #f6f8fb;
color: #111827;
}
.page-concept.light:before {
opacity: .34;
}
.page-concept.light:after {
background: linear-gradient(90deg, rgba(246,248,251,.98), rgba(246,248,251,.78) 52%, rgba(246,248,251,.24)), linear-gradient(to top, rgba(246,248,251,.98), transparent 65%);
}
.page-concept.blueprint:before {
background:
linear-gradient(90deg, rgba(142,209,243,.16) 1px, transparent 1px),
linear-gradient(rgba(142,209,243,.16) 1px, transparent 1px),
var(--concept-bg) center / cover;
background-size: 48px 48px, 48px 48px, cover;
opacity: .54;
}
.page-concept.lab {
background:
linear-gradient(90deg, rgba(17,24,39,.08) 1px, transparent 1px),
linear-gradient(rgba(17,24,39,.08) 1px, transparent 1px),
#fff;
background-size: 76px 76px;
color: #111827;
}
.page-concept.lab:before {
background: var(--concept-bg) center / contain no-repeat;
inset: 8%;
opacity: .65;
}
.page-concept.lab:after {
background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.7) 54%, rgba(255,255,255,.12)), linear-gradient(to top, rgba(255,255,255,.98), transparent 62%);
}
.page-concept-inner {
align-content: end;
display: grid;
gap: clamp(28px, 5vw, 70px);
grid-template-columns: 1fr minmax(280px, .42fr);
padding-bottom: clamp(34px, 6vw, 78px);
padding-top: clamp(54px, 8vw, 96px);
min-height: calc(100vh - 108px);
min-height: calc(100svh - 108px);
position: relative;
z-index: 1;
}
.page-concept-copy {
align-self: end;
}
.page-concept-copy span {
color: #8ed1f3;
display: block;
font-size: 11px;
font-weight: 800;
letter-spacing: .22em;
margin-bottom: 18px;
text-transform: uppercase;
}
.page-concept-copy h1 {
font-size: clamp(48px, 8vw, 118px);
font-weight: 300;
letter-spacing: 0;
line-height: .9;
margin: 0 0 24px;
}
.page-concept-copy p {
color: rgba(255,255,255,.76);
font-size: clamp(17px, 1.45vw, 21px);
line-height: 1.68;
margin: 0;
max-width: 690px;
}
.page-concept.light .page-concept-copy p,
.page-concept.lab .page-concept-copy p {
color: #4b5563;
}
.concept-mini-specs {
align-self: end;
backdrop-filter: blur(18px);
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.16);
}
.page-concept.light .concept-mini-specs,
.page-concept.lab .concept-mini-specs {
background: rgba(255,255,255,.72);
border-color: #d5dee9;
}
.concept-mini-specs div {
border-bottom: 1px solid rgba(255,255,255,.14);
padding: 22px 24px;
}
.concept-mini-specs div:last-child {
border-bottom: 0;
}
.page-concept.light .concept-mini-specs div,
.page-concept.lab .concept-mini-specs div {
border-bottom-color: #d5dee9;
}
.concept-mini-specs span {
color: rgba(255,255,255,.56);
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 10px;
text-transform: uppercase;
}
.page-concept.light .concept-mini-specs span,
.page-concept.lab .concept-mini-specs span {
color: #64748b;
}
.concept-mini-specs strong {
display: block;
font-size: clamp(20px, 2vw, 30px);
font-weight: 340;
letter-spacing: 0;
line-height: 1.1;
}
.concept-preview-body {
background: #f5f7fa;
color: #111827;
position: relative;
z-index: 2;
}
.concept-preview-body.dark {
background: #080d14;
color: #fff;
}
.concept-preview-section {
padding: clamp(58px, 8vw, 104px) 0;
}
.concept-preview-head {
align-items: end;
display: grid;
gap: clamp(24px, 5vw, 72px);
grid-template-columns: .75fr 1fr;
margin-bottom: clamp(28px, 5vw, 56px);
}
.concept-preview-head h2 {
font-size: clamp(32px, 4.5vw, 68px);
font-weight: 310;
letter-spacing: 0;
line-height: .98;
margin: 0;
}
.concept-preview-head p,
.concept-preview-card p,
.concept-preview-step p {
color: #5f6d7d;
line-height: 1.68;
margin: 0;
}
.dark .concept-preview-head p,
.dark .concept-preview-card p,
.dark .concept-preview-step p {
color: #a8b5c6;
}
.concept-preview-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(3, 1fr);
}
.concept-preview-card {
background: #fff;
border: 1px solid #dce4ee;
min-height: 250px;
padding: clamp(24px, 3vw, 38px);
}
.dark .concept-preview-card {
background: #101722;
border-color: rgba(255,255,255,.12);
}
.concept-preview-card span,
.concept-preview-step span {
color: #d32927;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 28px;
text-transform: uppercase;
}
.concept-preview-card h3,
.concept-preview-step h3 {
font-size: clamp(23px, 2.3vw, 34px);
font-weight: 360;
letter-spacing: 0;
line-height: 1.06;
margin: 0 0 14px;
}
.concept-preview-media {
display: grid;
gap: 12px;
grid-template-columns: 1.15fr .85fr;
}
.concept-preview-media figure {
background: #111827;
margin: 0;
min-height: clamp(340px, 40vw, 560px);
overflow: hidden;
}
.concept-preview-media img {
height: 100%;
object-fit: cover;
width: 100%;
}
.concept-preview-steps {
border-top: 1px solid #dce4ee;
}
.dark .concept-preview-steps {
border-top-color: rgba(255,255,255,.14);
}
.concept-preview-step {
border-bottom: 1px solid #dce4ee;
display: grid;
gap: 24px;
grid-template-columns: 90px 220px 1fr;
padding: 24px 0;
}
.dark .concept-preview-step {
border-bottom-color: rgba(255,255,255,.14);
}
.concept-preview-spec {
background:
linear-gradient(90deg, rgba(17,24,39,.08) 1px, transparent 1px),
linear-gradient(rgba(17,24,39,.08) 1px, transparent 1px),
#fff;
background-size: 60px 60px;
border: 1px solid #dce4ee;
padding: clamp(30px, 5vw, 58px);
}
.dark .concept-preview-spec {
background:
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
#101722;
border-color: rgba(255,255,255,.14);
}
.concept-preview-proof {
border-bottom: 1px solid #dce4ee;
border-top: 1px solid #dce4ee;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.dark .concept-preview-proof {
border-color: rgba(255,255,255,.14);
}
.concept-preview-proof div {
border-right: 1px solid #dce4ee;
padding: clamp(20px, 3vw, 34px);
}
.dark .concept-preview-proof div {
border-right-color: rgba(255,255,255,.14);
}
.concept-preview-proof div:last-child {
border-right: 0;
}
.concept-preview-proof span,
.concept-preview-faq span {
color: #d32927;
display: block;
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
margin-bottom: 10px;
text-transform: uppercase;
}
.concept-preview-proof strong {
display: block;
font-size: clamp(19px, 2vw, 28px);
font-weight: 350;
letter-spacing: 0;
line-height: 1.12;
}
.concept-preview-split {
align-items: center;
display: grid;
gap: clamp(32px, 6vw, 86px);
grid-template-columns: .9fr 1.1fr;
}
.concept-preview-split figure {
margin: 0;
min-height: clamp(330px, 38vw, 540px);
overflow: hidden;
}
.concept-preview-split img {
height: 100%;
object-fit: cover;
width: 100%;
}
.concept-preview-split h3,
.concept-preview-cta h2 {
font-size: clamp(32px, 4.2vw, 64px);
font-weight: 310;
letter-spacing: 0;
line-height: .98;
margin: 0 0 22px;
}
.concept-preview-split p,
.concept-preview-faq p,
.concept-preview-cta p {
color: #5f6d7d;
line-height: 1.7;
margin: 0;
}
.dark .concept-preview-split p,
.dark .concept-preview-faq p,
.dark .concept-preview-cta p {
color: #a8b5c6;
}
.concept-preview-faq {
border-top: 1px solid #dce4ee;
display: grid;
gap: 0;
}
.dark .concept-preview-faq {
border-top-color: rgba(255,255,255,.14);
}
.concept-preview-faq article {
border-bottom: 1px solid #dce4ee;
display: grid;
gap: 24px;
grid-template-columns: 240px 1fr;
padding: 22px 0;
}
.dark .concept-preview-faq article {
border-bottom-color: rgba(255,255,255,.14);
}
.concept-preview-faq h3 {
font-size: clamp(20px, 2vw, 28px);
font-weight: 380;
letter-spacing: 0;
margin: 0;
}
.concept-preview-cta {
background: #111827;
color: #fff;
padding: clamp(42px, 7vw, 82px);
}
.dark .concept-preview-cta {
background: #fff;
color: #111827;
}
.concept-preview-cta .br-button {
background: #d32927;
border-color: #d32927;
}
.dark .concept-preview-cta .br-button {
background: #111827;
border-color: #111827;
color: #fff;
}
@media (max-width: 1050px) {
.page-concept-inner {
grid-template-columns: 1fr;
}
.concept-mini-specs {
max-width: 560px;
}
.concept-preview-head,
.concept-preview-grid,
.concept-preview-media,
.concept-preview-step,
.concept-preview-proof,
.concept-preview-split,
.concept-preview-faq article {
grid-template-columns: 1fr;
}
.concept-preview-proof div {
border-bottom: 1px solid #dce4ee;
border-right: 0;
}
.dark .concept-preview-proof div {
border-bottom-color: rgba(255,255,255,.14);
}
.concept-preview-proof div:last-child {
border-bottom: 0;
}
}
@media (max-width: 680px) {
.live-concept-page {
padding-top: 140px;
}
.concept-topbar {
height: auto;
min-height: 52px;
padding: 8px 0;
}
.concept-topbar-inner {
align-items: start;
flex-direction: column;
gap: 8px;
}
.concept-toggle {
max-width: calc(100vw - 24px);
overflow-x: auto;
}
.page-concept-copy h1 {
font-size: clamp(42px, 13vw, 58px);
}
}
/* Mobile Navigation Drawer */
.mobile-menu-toggle { display: none; background: transparent; border: none; color: #fff; cursor: pointer; padding: 8px; position: relative; z-index: 1000; }
.mobile-overlay { display: none; }
@media (max-width: 900px) {
.br-nav { overflow: visible; z-index: 1000; flex-wrap: nowrap; align-items: center; padding-top: 18px; padding-bottom: 18px; gap: 0; }
.mobile-menu-toggle { display: block !important; margin-left: auto; z-index: 1001; pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.br-nav nav.site-menu {
position: fixed;
top: 0;
right: -100%;
width: 320px;
max-width: 85vw;
height: 100vh;
height: 100dvh;
background: #0f172a;
flex-direction: column;
align-items: flex-start;
padding: 90px 30px 40px;
gap: 20px !important;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -10px 0 30px rgba(0,0,0,0.5);
overflow-y: auto;
z-index: 999;
}
.br-nav nav.site-menu.is-open { right: 0; }
body.menu-open { overflow: hidden; }
.nav-group { margin: 0; padding: 0; width: 100%; }
.nav-group > a,
.br-nav nav.site-menu > a:not(.br-action) { width: 100%; justify-content: space-between; font-size: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-group > a:after { transition: transform 0.3s; }
.nav-group.active > a:after { transform: rotate(225deg); }
.submenu {
position: static; transform: none; opacity: 1; pointer-events: auto; display: none;
background: transparent; box-shadow: none; border: none; padding: 10px 0 10px 15px; min-width: 100%;
}
.submenu a { padding: 8px 0; font-size: 13px; display: block; }
.nav-group.active .submenu { display: grid; }
.br-action { width: 100%; margin-top: 20px; text-align: center; }
.mobile-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.6);
z-index: 998;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.mobile-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
}