/* B1.studio v20 - styles.css ported, every selector scoped to body.b1-v20 */
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 100; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-hairline.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 200; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-thin.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 300; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-light.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 400; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-regular.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 600; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-semibold.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 700; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-bold.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 800; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-extrabold.ttf") format("truetype");
}
@font-face {
font-family: "Calleo"; font-style: normal; font-weight: 900; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/2024/09/calleo-trial-black.ttf") format("truetype");
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-300.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-ext-300.woff2") format("woff2");
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-400.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-ext-400.woff2") format("woff2");
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-500.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-ext-500.woff2") format("woff2");
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-600.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-ext-600.woff2") format("woff2");
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-700.woff2") format("woff2");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap;
src: url("https://b1.studio/wp-content/uploads/b1-v20/assets/fonts/outfit-ext-700.woff2") format("woff2");
unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root {
--white: #FFFFFF;
--gray-100: #D6D6D6;
--gray-300: #ADADAD;
--gray-700: #323232;
--gray-800: #212121;
--gray-900: #191919;
--orange: #EE6F0C;
--orange-dark: #B85207;
--orange-hover: #FF7E1B;
--card-light: #F4F4F4;
--card-dark: #1F1F1F;
--hairline: rgba(0, 0, 0, .14);
--hairline-dark: rgba(255, 255, 255, .10);
--bg: var(--white);
--fg: var(--gray-900);
--fg-muted: var(--gray-700);
--font-sans: "Calleo", "Outfit", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--fs-h1: clamp(2.4rem, 8.5vw, 5rem);
--fs-h2: clamp(1.9rem, 6.5vw, 3.4rem);
--fs-h3: clamp(1.4rem, 4.6vw, 2rem);
--fs-card: clamp(1.15rem, 3.6vw, 1.45rem);
--fs-lead: clamp(1rem, 3.4vw, 1.2rem);
--fs-body: clamp(.9rem, 3vw, 1rem);
--fs-small: .8125rem;
--lh-tight: 1.04;
--lh-snug: 1.2;
--lh-body: 1.6;
--gutter: clamp(1.25rem, 5vw, 3rem);
--section-y: clamp(3.5rem, 11vw, 7.5rem);
--b1-gap: clamp(.875rem, 2.6vw, 1.5rem);
--container: 1240px;
--container-narrow: 900px;
--grid-size: 24px;
--grid-light: rgba(25, 25, 25, .055);
--grid-dark: rgba(255, 255, 255, .045);
--radius: 4px;
--radius-lg: 10px;
--ease: cubic-bezier(.22, .61, .36, 1);
}
@media (min-width: 1024px) {
:root { --grid-size: 32px; }
}
body.b1-v20 *,
body.b1-v20 *::before,
body.b1-v20 *::after { box-sizing: border-box; }
body.b1-v20 [hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 84px;
}
body.b1-v20 {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.b1-v20.is-locked { overflow: hidden; }
body.b1-v20 h1,
body.b1-v20 h2,
body.b1-v20 h3,
body.b1-v20 h4,
body.b1-v20 p,
body.b1-v20 figure,
body.b1-v20 blockquote { margin: 0; }
body.b1-v20 ul,
body.b1-v20 ol { margin: 0; padding: 0; list-style: none; }
body.b1-v20 img,
body.b1-v20 svg,
body.b1-v20 video { display: block; max-width: 100%; }
body.b1-v20 button { font: inherit; color: inherit; }
body.b1-v20 a { color: inherit; text-decoration: none; }
body.b1-v20 a:hover { color: var(--orange); }
body.b1-v20 h1,
body.b1-v20 h2,
body.b1-v20 h3 { font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.02em; }
body.b1-v20 :focus-visible {
outline: 3px solid var(--orange);
outline-offset: 3px;
border-radius: 2px;
}
body.b1-v20 .skip-link {
position: absolute;
left: 50%;
top: -100px;
transform: translateX(-50%);
z-index: 200;
padding: .75rem 1.25rem;
background: var(--orange-dark);
color: #fff;
font-weight: 600;
border-radius: 0 0 var(--radius) var(--radius);
transition: top .2s var(--ease);
}
body.b1-v20 .skip-link:focus { top: 0; color: #fff; }
body.b1-v20 .visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
body.b1-v20 .container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
body.b1-v20 .container--narrow { max-width: var(--container-narrow); }
body.b1-v20 .section {
position: relative;
padding-block: var(--section-y);
}
body.b1-v20 .section--dark { background: var(--gray-900); color: var(--white); }
body.b1-v20 .section--dark h1,
body.b1-v20 .section--dark h2,
body.b1-v20 .section--dark h3 { color: var(--white); }
body.b1-v20 .section--dark p { color: var(--gray-300); }
body.b1-v20 .section--darker { background: var(--gray-800); color: var(--white); }
body.b1-v20 .section__title {
font-size: var(--fs-h2);
margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
body.b1-v20 .lead {
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--fg-muted);
}
body.b1-v20 .text-center { text-align: center; }
body.b1-v20 .i {
display: inline-block;
width: var(--i-size, 2.5rem);
height: var(--i-size, 2.5rem);
background-color: currentColor;
-webkit-mask: var(--i) no-repeat center / contain;
mask: var(--i) no-repeat center / contain;
flex: none;
}
body.b1-v20 .i--consulting { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/consulting.svg"); }
body.b1-v20 .i--animation { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/animation.svg"); }
body.b1-v20 .i--design { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/design.svg"); }
body.b1-v20 .i--vfx { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/vfx.svg"); }
body.b1-v20 .i--time-01 { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/time-01.svg"); }
body.b1-v20 .i--time-02 { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/time-02.svg"); }
body.b1-v20 .i--dollar-shield { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/dollar-shield.svg"); }
body.b1-v20 .i--flag { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/flag.svg"); }
body.b1-v20 .i--settings { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/settings.svg"); }
body.b1-v20 .i--communication { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/communication.svg"); }
body.b1-v20 .i--storytelling { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/storytelling.svg"); }
body.b1-v20 .i--star { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/star.svg"); }
body.b1-v20 .i--roi { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/roi.svg"); }
body.b1-v20 .i--call { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/call.svg"); }
body.b1-v20 .i--mail { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/mail.svg"); }
body.b1-v20 .i--instagram { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/instagram.svg"); }
body.b1-v20 .i--facebook { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/facebook.svg"); }
body.b1-v20 .i--arrow { --i: url("https://b1.studio/wp-content/uploads/b1-v20/assets/icons/arrow.svg"); }
body.b1-v20 .btn {
--btn-bg: var(--orange);
--btn-fg: #fff;
--btn-bd: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
min-height: 60px;
padding: 1rem 3.25rem 1rem 1.5rem;
border: 1px solid var(--btn-bd);
border-radius: var(--radius);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: clamp(1.1875rem, 3.4vw, 1.25rem);
font-weight: 700;
letter-spacing: .005em;
text-align: center;
cursor: pointer;
transition: background-color .22s var(--ease), transform .22s var(--ease),
border-color .22s var(--ease), color .22s var(--ease);
}
body.b1-v20 .btn::after {
content: "";
position: absolute;
right: 1.5rem;
width: .6rem;
height: .6rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .22s var(--ease);
}
body.b1-v20 .btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
body.b1-v20 .btn:hover::after { transform: rotate(45deg) translate(3px, -3px); }
body.b1-v20 .btn:active { transform: translateY(0); }
body.b1-v20 .btn--primary:hover { --btn-bg: var(--orange-hover); }
body.b1-v20 .btn--outline {
--btn-bg: transparent;
--btn-fg: var(--gray-900);
--btn-bd: var(--gray-900);
}
body.b1-v20 .btn--outline:hover { --btn-bg: var(--gray-900); --btn-fg: #fff; }
body.b1-v20 .btn--dark {
--btn-bg: var(--gray-900);
--btn-fg: #fff;
}
body.b1-v20 .btn--dark:hover { --btn-bg: var(--gray-700); }
body.b1-v20 .btn--ghost-light {
--btn-bg: transparent;
--btn-fg: #fff;
--btn-bd: rgba(255, 255, 255, .35);
}
body.b1-v20 .btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #fff; }
body.b1-v20 .btn--down::after { transform: rotate(135deg) translate(-2px, 2px); }
body.b1-v20 .btn--down:hover::after { transform: rotate(135deg) translate(1px, -1px); }
body.b1-v20 .btn--inline { width: fit-content; min-width: min(360px, 100%); max-width: 100%; }
body.b1-v20 .btn-row {
display: grid;
gap: .875rem;
max-width: 420px;
}
@media (min-width: 640px) {
body.b1-v20 .btn-row { grid-auto-flow: column; max-width: none; justify-content: start; }
body.b1-v20 .btn-row .btn { min-width: 260px; width: auto; }
}
body.b1-v20 .grid-bg { position: relative; isolation: isolate; }
body.b1-v20 .grid-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, var(--grid-light) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-light) 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
body.b1-v20 .grid-bg--dark::before {
background-image:
linear-gradient(to right, var(--grid-dark) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-dark) 1px, transparent 1px);
}
body.b1-v20 .deco {
position: absolute;
z-index: 0;
pointer-events: none;
user-select: none;
opacity: .95;
}
@media (max-width: 767px) {
body.b1-v20 .deco--desktop-only { display: none; }
}
body.b1-v20 .ph {
position: relative;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: var(--ph-ratio, 16 / 9);
border-radius: var(--radius-lg);
overflow: hidden;
background:
linear-gradient(135deg, var(--ph-a, #2A2A2A) 0%, var(--ph-b, #141414) 100%);
color: rgba(255, 255, 255, .6);
}
body.b1-v20 .ph::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 28px 28px;
}
body.b1-v20 .ph__label {
position: relative;
padding: .5rem 1rem;
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
border: 1px dashed rgba(255, 255, 255, .3);
border-radius: var(--radius);
}
body.b1-v20 .site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
body.b1-v20 .site-header.is-stuck {
border-bottom-color: var(--hairline);
box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}
body.b1-v20 .site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
}
body.b1-v20 .brand { display: inline-flex; align-items: center; }
body.b1-v20 .brand img { height: clamp(26px, 5.5vw, 34px); width: auto; }
body.b1-v20 .nav-desktop { display: none; }
@media (min-width: 1024px) {
body.b1-v20 .nav-desktop { display: flex; align-items: center; gap: 2.25rem; }
body.b1-v20 .nav-desktop a {
position: relative;
font-size: .95rem;
font-weight: 500;
padding-block: .35rem;
}
body.b1-v20 .nav-desktop a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--orange);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease);
}
body.b1-v20 .nav-desktop a:hover::after,
body.b1-v20 .nav-desktop a[aria-current="true"]::after { transform: scaleX(1); }
}
body.b1-v20 .nav-toggle {
display: grid;
place-content: center;
gap: 6px;
width: 48px; height: 48px;
margin-right: -12px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
@media (min-width: 1024px) {
body.b1-v20 .nav-toggle { display: none; }
}
body.b1-v20 .nav-toggle span {
display: block;
width: 30px; height: 3px;
background: var(--gray-900);
border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s var(--ease);
}
body.b1-v20 .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.b1-v20 .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
body.b1-v20 .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
body.b1-v20 .nav-panel {
position: fixed;
inset: 0;
z-index: 99;
display: flex;
flex-direction: column;
justify-content: center;
padding: 6rem var(--gutter) 3rem;
background: var(--gray-900);
color: #fff;
transform: translateX(100%);
visibility: hidden;
transition: transform .4s var(--ease), visibility .4s;
}
body.b1-v20 .nav-panel.is-open { transform: translateX(0); visibility: visible; }
body.b1-v20 .nav-panel__list { display: grid; gap: .25rem; }
body.b1-v20 .nav-panel__list a {
display: block;
padding: .5rem 0;
font-size: clamp(1.75rem, 8vw, 2.75rem);
font-weight: 700;
letter-spacing: -.02em;
color: #fff;
}
body.b1-v20 .nav-panel__list a:hover { color: var(--orange); }
body.b1-v20 .nav-panel__meta {
margin-top: auto;
padding-top: 2.5rem;
display: grid;
gap: .5rem;
font-size: var(--fs-small);
color: var(--gray-300);
}
body.b1-v20 .hero {
position: relative;
display: grid;
align-content: center;
min-height: min(88vh, 780px);
padding-block: clamp(3.5rem, 12vw, 8rem) clamp(2.5rem, 8vw, 5rem);
overflow: hidden;
}
body.b1-v20 .hero__inner { position: relative; z-index: 1; text-align: center; }
@media (min-width: 1024px) {
body.b1-v20 .hero__inner { text-align: left; }
body.b1-v20 .hero__title { max-width: 14ch; }
}
body.b1-v20 .hero__title {
font-size: var(--fs-h1);
margin-bottom: clamp(1rem, 3vw, 1.5rem);
text-wrap: balance;
}
body.b1-v20 .hero__sub {
font-size: var(--fs-lead);
color: var(--fg-muted);
max-width: 34ch;
margin-inline: auto;
margin-bottom: clamp(2rem, 6vw, 3rem);
text-wrap: balance;
}
@media (min-width: 1024px) {
body.b1-v20 .hero__sub { margin-inline: 0; }
}
body.b1-v20 .hero .btn-row { margin-inline: auto; }
@media (min-width: 1024px) {
body.b1-v20 .hero .btn-row { margin-inline: 0; }
}
body.b1-v20 .hero__deco--shapes { top: 8%; right: -3%; width: clamp(140px, 24vw, 300px); }
body.b1-v20 .hero__deco--arrow { bottom: 6%; left: -4%; width: clamp(110px, 18vw, 220px); transform: scaleX(-1); }
body.b1-v20 .reel { padding-block: clamp(2rem, 6vw, 4rem); text-align: center; }
body.b1-v20 .reel__label {
font-size: clamp(1.25rem, 4vw, 1.75rem);
font-weight: 700;
letter-spacing: -.01em;
}
body.b1-v20 .reel__chevron {
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
margin-top: .5rem;
color: var(--gray-900);
animation: bob 2.4s var(--ease) infinite;
}
@keyframes bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(7px); }
}
body.b1-v20 .reel__media { margin-top: clamp(1.5rem, 5vw, 2.5rem); }
body.b1-v20 .reel__media .ph { --ph-ratio: 16 / 9; }
body.b1-v20 .marquee {
background: var(--gray-800);
padding-block: clamp(1.5rem, 4vw, 2.25rem);
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
body.b1-v20 .marquee__track {
display: flex;
width: max-content;
gap: clamp(2.5rem, 7vw, 5rem);
animation: marquee 32s linear infinite;
}
body.b1-v20 .marquee:hover .marquee__track { animation-play-state: paused; }
body.b1-v20 .marquee__item {
flex: none;
font-size: clamp(1.1rem, 3.6vw, 1.6rem);
font-weight: 500;
color: var(--gray-300);
opacity: .78;
white-space: nowrap;
transition: opacity .3s var(--ease);
}
body.b1-v20 .marquee__item--strong { font-weight: 700; opacity: .95; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
body.b1-v20 .about__heading {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .625rem clamp(.5rem, 1.5vw, 1rem);
font-size: var(--fs-h2);
margin-bottom: clamp(1.25rem, 4vw, 2rem);
}
body.b1-v20 .about__play {
width: clamp(18px, 3.4vw, 30px);
color: var(--orange);
}
body.b1-v20 .about__logo { height: clamp(26px, 5.4vw, 46px); width: auto; }
body.b1-v20 .about__rule {
width: 2px;
height: clamp(28px, 5.6vw, 48px);
background: var(--gray-900);
border-radius: 2px;
}
body.b1-v20 .about__body {
max-width: 60ch;
margin-inline: auto;
text-align: center;
font-size: var(--fs-lead);
color: var(--fg-muted);
text-wrap: pretty;
}
body.b1-v20 .about__feature { margin-top: clamp(2rem, 6vw, 3.5rem); }
body.b1-v20 .about__feature .ph { --ph-ratio: 16 / 10; --ph-a: #A31D6B; --ph-b: #6E1349; }
@media (min-width: 768px) {
body.b1-v20 .about__feature .ph { --ph-ratio: 21 / 9; }
}
body.b1-v20 .card-grid {
display: grid;
gap: var(--b1-gap);
grid-template-columns: 1fr;
}
@media (min-width: 420px) {
body.b1-v20 .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
body.b1-v20 .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
body.b1-v20 .card {
position: relative;
display: flex;
flex-direction: column;
gap: .75rem;
padding: clamp(1.25rem, 3.2vw, 2rem);
background: var(--card-light);
border: 1px solid var(--hairline);
border-top: 4px solid var(--orange);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
body.b1-v20 .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); }
body.b1-v20 .card__icon { --i-size: clamp(2.25rem, 5vw, 2.75rem); color: var(--gray-900); }
body.b1-v20 .card__title { font-size: var(--fs-card); }
body.b1-v20 .card__body { font-size: var(--fs-body); color: var(--fg-muted); }
body.b1-v20 .services__cta { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
body.b1-v20 .services__cta .btn { margin-inline: auto; }
body.b1-v20 .projects-intro {
position: relative;
padding-block: clamp(4rem, 12vw, 8rem);
overflow: hidden;
background: var(--gray-100);
}
body.b1-v20 .projects-intro__bg {
position: absolute;
inset: 0;
z-index: 0;
object-fit: cover;
width: 100%; height: 100%;
filter: grayscale(1) contrast(.9);
}
body.b1-v20 .projects-intro::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
rgba(255,255,255,.94) 0%,
rgba(255,255,255,.72) 45%,
rgba(255,255,255,.25) 100%);
}
body.b1-v20 .projects-intro .container { position: relative; z-index: 2; }
body.b1-v20 .projects-intro__heading {
display: flex;
align-items: center;
gap: clamp(.75rem, 2.5vw, 1.5rem);
margin-bottom: 1.25rem;
}
body.b1-v20 .projects-intro__ghost {
height: clamp(52px, 11vw, 116px);
width: auto;
max-width: 42%;
object-fit: contain;
opacity: .4;
}
body.b1-v20 .projects-intro__title { font-size: var(--fs-h2); }
body.b1-v20 .projects-intro__body {
max-width: 34ch;
font-size: var(--fs-lead);
font-weight: 500;
color: var(--gray-900);
margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
body.b1-v20 .projects-grid {
display: grid;
gap: var(--b1-gap);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
body.b1-v20 .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
body.b1-v20 .project {
position: relative;
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 11;
background: var(--gray-800);
isolation: isolate;
}
body.b1-v20 .project .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
body.b1-v20 .project__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
body.b1-v20 .project:hover .project__media { transform: scale(1.05); }
body.b1-v20 .project::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.32) 58%, transparent 100%);
}
body.b1-v20 .project__meta {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: clamp(1rem, 3vw, 1.75rem);
}
body.b1-v20 .project__title {
font-size: var(--fs-card);
color: #fff;
max-width: 60%;
text-wrap: balance;
}
body.b1-v20 .project__view {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.75rem;
padding: .7rem 1.15rem;
background: rgba(50, 50, 50, .82);
backdrop-filter: blur(6px);
border-radius: var(--radius);
color: #fff;
font-size: var(--fs-body);
white-space: nowrap;
transition: background-color .25s var(--ease);
}
body.b1-v20 .project:hover .project__view { background: var(--orange); }
body.b1-v20 .project__view::after {
content: "";
width: .5rem; height: .5rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
body.b1-v20 .projects__more {
display: block;
margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
padding: .5rem 1rem;
background: none;
border: 0;
color: var(--gray-300);
font-size: var(--fs-lead);
cursor: pointer;
transition: color .2s var(--ease);
}
body.b1-v20 .projects__more:hover { color: var(--white); }
body.b1-v20 .projects__more[hidden] { display: none; }
body.b1-v20 .projects__cta { margin-top: clamp(1.25rem, 3vw, 2rem); }
body.b1-v20 .projects__cta .btn { margin-inline: auto; }
body.b1-v20 .why { position: relative; overflow: clip; }
body.b1-v20 .why__title {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
font-size: var(--fs-h2);
margin-bottom: clamp(1.75rem, 5vw, 3rem);
}
body.b1-v20 .why__title img { height: clamp(24px, 5vw, 44px); width: auto; }
body.b1-v20 .card--dark {
background: var(--card-dark);
border: 1px solid var(--hairline-dark);
border-top: 1px solid var(--hairline-dark);
color: var(--white);
}
body.b1-v20 .card--dark:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); border-color: rgba(238, 111, 12, .45); }
body.b1-v20 .card--dark .card__icon { color: var(--orange); }
body.b1-v20 .card--dark .card__title { color: var(--white); }
body.b1-v20 .card--dark .card__body { color: var(--gray-300); }
body.b1-v20 .why__deco { top: clamp(1rem, 4vw, 3rem); right: var(--gutter); width: clamp(40px, 6vw, 70px); }
body.b1-v20 .why__cta { margin-top: clamp(1.75rem, 5vw, 3rem); }
body.b1-v20 .why__cta .btn { margin-inline: auto; }
body.b1-v20 .testimonials {
position: relative;
background: var(--gray-800);
color: var(--white);
padding-block: clamp(3rem, 9vw, 5.5rem) clamp(4rem, 11vw, 7rem);
}
body.b1-v20 .testimonials::after {
content: "";
position: absolute;
left: 50%; bottom: 0;
transform: translate(-50%, 99%);
border-left: 34px solid transparent;
border-right: 34px solid transparent;
border-top: 30px solid var(--gray-800);
}
body.b1-v20 .testimonials__viewport { position: relative; overflow: hidden; }
body.b1-v20 .testimonials__track {
display: flex;
transition: transform .5s var(--ease);
}
body.b1-v20 .testimonial {
flex: 0 0 100%;
display: grid;
justify-items: center;
gap: .35rem;
padding-inline: clamp(0rem, 6vw, 4.5rem);
text-align: center;
}
body.b1-v20 .testimonial__avatar {
width: clamp(64px, 14vw, 84px);
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
background: var(--gray-700);
margin-bottom: .75rem;
}
body.b1-v20 .testimonial__name { font-size: clamp(1.2rem, 4vw, 1.6rem); }
body.b1-v20 .testimonial__role { font-size: var(--fs-small); color: var(--gray-300); }
body.b1-v20 .testimonial__quote {
margin-top: 1.25rem;
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--gray-100);
max-width: 52ch;
text-wrap: pretty;
}
body.b1-v20 .testimonials__mark {
display: block;
margin-top: clamp(1.25rem, 4vw, 2rem);
text-align: center;
font-size: 3.5rem;
line-height: .5;
color: rgba(255, 255, 255, .13);
}
body.b1-v20 .testimonials__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
display: grid;
place-items: center;
width: 46px; height: 62px;
background: var(--gray-700);
border: 0;
border-radius: var(--radius);
color: #fff;
cursor: pointer;
transition: background-color .2s var(--ease);
}
body.b1-v20 .testimonials__nav:hover { background: var(--orange); }
body.b1-v20 .testimonials__nav--prev { left: 0; }
body.b1-v20 .testimonials__nav--next { right: 0; }
body.b1-v20 .testimonials__nav::before {
content: "";
width: .55rem; height: .55rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
body.b1-v20 .testimonials__nav--prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
body.b1-v20 .testimonials__nav--next::before { transform: rotate(45deg) translate(-2px, 2px); }
body.b1-v20 .testimonials__dots {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 1.75rem;
}
body.b1-v20 .testimonials__dots button {
position: relative;
width: 8px; height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .28);
cursor: pointer;
transition: background-color .25s var(--ease), width .25s var(--ease);
}
body.b1-v20 .testimonials__dots button::before {
content: "";
position: absolute;
inset: -9px;
}
body.b1-v20 .testimonials__dots button[aria-current="true"] { background: var(--orange); width: 22px; border-radius: 4px; }
body.b1-v20 .process { position: relative; overflow: clip; }
body.b1-v20 .process__title {
font-size: var(--fs-h2);
margin-bottom: clamp(2rem, 6vw, 3rem);
}
body.b1-v20 .process__list { position: relative; display: grid; gap: clamp(1.75rem, 5vw, 3rem); }
body.b1-v20 .process__list::before {
content: "";
position: absolute;
top: .5rem; bottom: .5rem;
left: 13px;
border-left: 2px dashed var(--gray-700);
opacity: .55;
}
body.b1-v20 .step { position: relative; padding-left: 3.25rem; }
body.b1-v20 .step__node {
position: absolute;
left: 0; top: .35rem;
display: grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 5px;
background: #2BB24C;
color: #fff;
font-size: .95rem;
line-height: 1;
box-shadow: 0 0 0 5px var(--white);
}
body.b1-v20 .step__node svg { width: 15px; height: 15px; }
body.b1-v20 .step__head {
position: relative;
display: inline-flex;
align-items: center;
gap: 1.25rem;
padding: .7rem 1.15rem;
background: var(--gray-900);
color: #fff;
border-radius: var(--radius);
margin-bottom: .875rem;
}
body.b1-v20 .step__label { font-size: clamp(.95rem, 3vw, 1.1rem); font-weight: 500; line-height: 1.2; }
body.b1-v20 .step__num { font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 500; color: var(--gray-300); }
body.b1-v20 .step__body { font-size: var(--fs-body); color: var(--fg-muted); max-width: 46ch; }
@media (min-width: 900px) {
body.b1-v20 .process__grid {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
}
body.b1-v20 .process__title { position: sticky; top: 110px; margin-bottom: 0; }
body.b1-v20 .process__list { gap: 2.5rem; }
body.b1-v20 .process__list::before { left: 50%; transform: translateX(-1px); }
body.b1-v20 .step { padding-left: 0; width: calc(50% - 2rem); }
body.b1-v20 .step:nth-child(odd) { margin-left: auto; }
body.b1-v20 .step:nth-child(even) { margin-right: auto; text-align: right; }
body.b1-v20 .step:nth-child(even) .step__head { flex-direction: row-reverse; }
body.b1-v20 .step:nth-child(even) .step__body { margin-left: auto; }
body.b1-v20 .step__node { left: -2.9rem; right: auto; }
body.b1-v20 .step:nth-child(even) .step__node { left: auto; right: -2.9rem; }
body.b1-v20 .step__head::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
border-block: 12px solid transparent;
}
body.b1-v20 .step:nth-child(odd) .step__head::after {
left: -11px;
border-right: 12px solid var(--gray-900);
}
body.b1-v20 .step:nth-child(even) .step__head::after {
right: -11px;
border-left: 12px solid var(--gray-900);
}
}
body.b1-v20 .process__deco { bottom: 2%; left: -2%; width: clamp(120px, 16vw, 230px); }
body.b1-v20 .contact { position: relative; overflow: clip; }
body.b1-v20 .contact__title {
font-size: var(--fs-h2);
text-align: center;
margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
body.b1-v20 .form { display: grid; gap: 1.1rem; }
body.b1-v20 .field { display: grid; gap: .4rem; }
body.b1-v20 .field > label {
font-size: var(--fs-body);
font-weight: 500;
color: var(--gray-700);
}
body.b1-v20 .field input,
body.b1-v20 .field select,
body.b1-v20 .field textarea {
width: 100%;
padding: .95rem 1rem;
font: inherit;
font-size: var(--fs-body);
color: var(--gray-900);
background: var(--gray-100);
border: 1px solid transparent;
border-radius: var(--radius);
transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
body.b1-v20 .field textarea { min-height: clamp(160px, 30vw, 260px); resize: vertical; }
body.b1-v20 .field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23323232' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 20px;
padding-right: 3rem;
}
body.b1-v20 .field input:focus,
body.b1-v20 .field select:focus,
body.b1-v20 .field textarea:focus {
background: #E9E9E9;
border-color: var(--gray-700);
outline: none;
}
body.b1-v20 .field input:focus-visible,
body.b1-v20 .field select:focus-visible,
body.b1-v20 .field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
body.b1-v20 .field--phone .field__row { display: flex; gap: .5rem; }
body.b1-v20 .phone-prefix {
display: inline-flex;
align-items: center;
gap: .5rem;
flex: none;
padding: 0 1rem;
background: var(--gray-900);
color: #fff;
border-radius: var(--radius);
font-size: var(--fs-body);
font-weight: 500;
}
body.b1-v20 .phone-prefix__flag {
width: 22px; height: 15px;
border-radius: 2px;
background: linear-gradient(to bottom, #fff 0 33.33%, #00966E 33.33% 66.66%, #D62612 66.66%);
flex: none;
}
body.b1-v20 .field__error {
font-size: var(--fs-small);
color: #C0392B;
min-height: 1em;
}
body.b1-v20 .field.is-invalid input,
body.b1-v20 .field.is-invalid select,
body.b1-v20 .field.is-invalid textarea { border-color: #C0392B; }
body.b1-v20 .form__submit { margin-top: .75rem; }
body.b1-v20 .form__status {
padding: 1rem 1.25rem;
border-radius: var(--radius);
background: #E9F7EC;
border: 1px solid #2BB24C;
color: #1B7233;
font-size: var(--fs-body);
}
body.b1-v20 .form__status[hidden] { display: none; }
body.b1-v20 .contact__deco { top: 4%; right: -3%; width: clamp(110px, 15vw, 200px); }
body.b1-v20 .talk { background: var(--gray-800); color: #fff; text-align: center; }
body.b1-v20 .talk__or {
font-size: var(--fs-lead);
color: var(--gray-300);
margin-bottom: .35rem;
}
body.b1-v20 .talk__title { font-size: var(--fs-h2); margin-bottom: 1.25rem; }
body.b1-v20 .talk__title em { font-style: normal; color: var(--orange); }
body.b1-v20 .talk__body {
max-width: 58ch;
margin: 0 auto clamp(2rem, 5vw, 3rem);
font-size: var(--fs-lead);
color: var(--gray-300);
text-wrap: pretty;
}
body.b1-v20 .calendly {
position: relative;
min-height: clamp(420px, 60vw, 700px);
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
}
body.b1-v20 .calendly__consent {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 1rem;
padding: 2rem;
text-align: center;
color: var(--gray-900);
}
body.b1-v20 .calendly__consent p { max-width: 46ch; font-size: var(--fs-body); color: var(--gray-700); }
body.b1-v20 .calendly__consent .btn { max-width: 320px; }
body.b1-v20 .calendly__embed { min-height: inherit; }
body.b1-v20 .final-cta { position: relative; overflow: clip; text-align: center; }
body.b1-v20 .final-cta__lockup {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(.75rem, 2.5vw, 1.5rem);
margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}
body.b1-v20 .final-cta__mark { height: clamp(60px, 13vw, 120px); width: auto; }
body.b1-v20 .final-cta__words {
text-align: left;
font-size: clamp(1.15rem, 4.2vw, 2.5rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -.02em;
}
body.b1-v20 .final-cta .btn { margin-inline: auto; }
body.b1-v20 .final-cta__deco--pencil { bottom: 26%; left: 2%; width: clamp(48px, 7vw, 92px); }
body.b1-v20 .final-cta__deco--pad { top: -6%; right: 4%; width: clamp(90px, 13vw, 180px); }
body.b1-v20 .final-cta__deco--arrow { bottom: 22%; right: 1%; width: clamp(80px, 12vw, 165px); }
body.b1-v20 .site-footer {
position: relative;
background: var(--gray-800);
color: var(--gray-100);
padding-block: clamp(3rem, 8vw, 5rem);
overflow: hidden;
}
body.b1-v20 .site-footer__grid {
display: grid;
gap: clamp(2rem, 6vw, 3rem);
grid-template-columns: 1fr 1fr;
}
@media (min-width: 900px) {
body.b1-v20 .site-footer__grid { grid-template-columns: 1fr 1.2fr 1fr; }
}
body.b1-v20 .footer-col__title {
font-size: clamp(1.15rem, 3.6vw, 1.5rem);
color: #fff;
margin-bottom: clamp(1rem, 3vw, 1.75rem);
}
body.b1-v20 .footer-nav { display: grid; gap: .45rem; font-size: var(--fs-body); }
body.b1-v20 .footer-nav a { display: inline-block; padding-block: .3rem; min-height: 24px; color: var(--gray-100); }
body.b1-v20 .footer-contacts { display: grid; gap: .5rem; font-size: var(--fs-body); }
body.b1-v20 .footer-contacts a,
body.b1-v20 .footer-contacts > span {
display: flex;
align-items: center;
gap: .85rem;
min-height: 30px;
padding-block: .25rem;
color: var(--gray-100);
}
body.b1-v20 .footer-contacts .i { --i-size: 1.1rem; color: var(--gray-100); }
body.b1-v20 .footer-contacts a:hover { color: var(--orange); }
body.b1-v20 .footer-contacts a:hover .i { color: var(--orange); }
body.b1-v20 .site-footer__brand {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
grid-column: 1 / -1;
padding-top: clamp(1.5rem, 4vw, 2rem);
border-top: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 900px) {
body.b1-v20 .site-footer__brand {
grid-column: auto;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
padding-top: 0;
padding-left: clamp(1.5rem, 4vw, 3rem);
border-top: 0;
border-left: 1px solid rgba(255, 255, 255, .12);
text-align: right;
}
}
body.b1-v20 .site-footer__mark { width: clamp(56px, 9vw, 96px); order: 2; }
@media (min-width: 900px) {
body.b1-v20 .site-footer__mark { order: 0; align-self: flex-end; }
}
body.b1-v20 .site-footer__ghost {
font-size: clamp(1.15rem, 4.2vw, 2rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.02em;
color: rgba(255, 255, 255, .12);
pointer-events: none;
margin: 0;
}
@media (min-width: 900px) {
body.b1-v20 .site-footer__ghost { margin-top: auto; padding-top: 2.5rem; }
}
body.b1-v20 .legal-bar {
background: #fff;
color: var(--gray-700);
font-size: var(--fs-small);
padding-block: 1rem;
}
body.b1-v20 .legal-bar__inner {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.5rem;
align-items: center;
justify-content: space-between;
}
body.b1-v20 .cookie {
position: fixed;
left: 50%;
bottom: 1rem;
transform: translate(-50%, 150%);
z-index: 150;
width: min(760px, calc(100vw - 2rem));
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.35rem;
background: var(--gray-900);
color: var(--gray-100);
border: 1px solid var(--hairline-dark);
border-radius: var(--radius-lg);
box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
font-size: var(--fs-small);
transition: transform .45s var(--ease);
}
body.b1-v20 .cookie.is-visible { transform: translate(-50%, 0); }
body.b1-v20 .cookie p { flex: 1 1 260px; margin: 0; color: var(--gray-100); }
body.b1-v20 .cookie__actions { display: flex; gap: .5rem; }
body.b1-v20 .cookie .btn {
--btn-bg: var(--orange-dark);
min-height: 42px;
padding: .5rem 1.15rem;
font-size: var(--fs-small);
width: auto;
}
body.b1-v20 .cookie .btn:hover { --btn-bg: var(--orange); }
body.b1-v20 .cookie .btn::after { display: none; }
body.b1-v20 .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
body.b1-v20 .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
body.b1-v20 *,
body.b1-v20 *::before,
body.b1-v20 *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
body.b1-v20 .reveal { opacity: 1; transform: none; }
body.b1-v20 .marquee__track { animation: none; }
}
@media print {
body.b1-v20 .site-header,
body.b1-v20 .nav-panel,
body.b1-v20 .cookie,
body.b1-v20 .testimonials__nav,
body.b1-v20 .deco { display: none !important; }
body.b1-v20 { color: #000; background: #fff; }
}
body.b1-v20 { overflow-x: hidden; }
/* The v20 homepage was ported from a static composition and needs these
neutralising rules. Service archive/single templates are editor-first:
their native Elementor container and widget controls must remain authoritative. */
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .e-con:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)),
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .e-con-inner:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) {
--width: 100%;
--content-width: 100%;
--padding-block-start: 0px;
--padding-block-end: 0px;
--padding-inline-start: 0px;
--padding-inline-end: 0px;
--margin-block-start: 0px;
--margin-block-end: 0px;
--margin-inline-start: 0px;
--margin-inline-end: 0px;
--border-radius: 0px;
max-width: none;
min-width: 0;
}
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .elementor-element.e-con:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)),
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .elementor-element.e-con-inner:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) {
--display: block;
--flex-direction: row;
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
}
/* INLINE PADDING: Elementor gives containers 10px inline padding that does not
come from --padding-inline-* (that computes to 0). styles.css never puts
inline padding on sections - gutters come from .container - so zero it for
every container EXCEPT .container itself, which owns the gutter. */
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .elementor-element.e-con:not(.container):not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) {
padding-inline: 0;
}
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .e-con.container:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) {
width: 100%;
max-width: var(--container);
margin-inline: auto;
}
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .e-con.container--narrow:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) { max-width: var(--container-narrow); }
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .e-con > .e-con-inner:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) { display: contents; }
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .elementor-widget:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) { display: contents; }
body.b1-v20 .elementor:not(.elementor-593):not(.elementor-596):not(.elementor-539):not(.elementor-540):not(.elementor-658):not(.elementor-659):not(.elementor-708) .elementor-widget-container:not(:is(.e-loop-item, .e-loop-item *)):not(:is(.e-native, .e-native *)) { display: contents; }
body.b1-v20 .site-header--theme { display: none; }
/* .elementor-location-header/footer used to be hidden here - they now carry
the shared B1 Header v20 / B1 Footer v20 templates, so they must render. */
body.b1-v20 .elementor,
body.b1-v20 .elementor-section-wrap,
body.b1-v20 main.site-main,
body.b1-v20 .page-content { margin: 0; padding: 0; max-width: none; }
/* ================= V20 REFINEMENTS ================= */
/* 1. Hero: centre vertically + horizontally, existing widths kept */
body.b1-v20 .hero__inner { text-align: center; }
body.b1-v20 .hero__title { margin-inline: auto; }
body.b1-v20 .hero__sub { margin-inline: auto; }
body.b1-v20 .hero .btn-row { margin-inline: auto; justify-content: center; }
/* 1b. Mobile hero: shorter than a full screen, still roomy */
@media (max-width: 767px) {
body.b1-v20 .hero {
min-height: min(72vh, 600px);
padding-block: clamp(2.5rem, 9vw, 4rem) clamp(2rem, 7vw, 3.5rem);
}
}
/* 2. Header: no background at rest; blurs + compacts on scroll.
blur(0px) rather than none so backdrop-filter can interpolate. */
body.b1-v20 .site-header {
background: transparent;
-webkit-backdrop-filter: blur(0px) saturate(100%);
backdrop-filter: blur(0px) saturate(100%);
transition: background-color .38s var(--ease),
-webkit-backdrop-filter .38s var(--ease),
backdrop-filter .38s var(--ease),
border-color .38s var(--ease),
box-shadow .38s var(--ease);
}
body.b1-v20 .site-header.is-stuck {
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border-bottom-color: var(--hairline);
box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}
body.b1-v20 .site-header__inner { transition: min-height .38s var(--ease); }
body.b1-v20 .site-header.is-stuck .site-header__inner { min-height: 56px; }
body.b1-v20 .brand img { transition: height .38s var(--ease); }
body.b1-v20 .site-header.is-stuck .brand img { height: clamp(22px, 4.6vw, 28px); }
/* 3. Buttons: label down ~3px, shorter and wider */
body.b1-v20 .btn {
min-height: 52px;
padding: .7rem 3.25rem .7rem 2rem;
font-size: clamp(1rem, 2.9vw, 1.0625rem);
}
body.b1-v20 .btn--inline { width: fit-content; min-width: min(420px, 100%); max-width: 100%; }
body.b1-v20 .btn-row .btn { min-width: 300px; width: auto; }
/* 3b. Secondary buttons: hover moves, colours stay put */
body.b1-v20 .btn--outline:hover {
--btn-bg: transparent;
--btn-fg: var(--gray-900);
--btn-bd: var(--gray-900);
}
body.b1-v20 .btn--ghost-light:hover {
--btn-bg: transparent;
--btn-fg: #fff;
--btn-bd: rgba(255, 255, 255, .35);
}
/* 4. Reel: tighten the gap to the section below */
body.b1-v20 .reel { padding-block: clamp(2rem, 6vw, 4rem) clamp(.75rem, 2vw, 1.25rem); }
/* 5. Why Choose B1: more air under the icon, icons smaller, headlines smaller */
body.b1-v20 #why .card__icon {
--i-size: clamp(1.9rem, 4vw, 2.25rem);
margin-bottom: clamp(.4rem, 1.6vw, .85rem);
}
body.b1-v20 #why .card__title { font-size: clamp(1.05rem, 3.1vw, 1.25rem); }
/* 6. Form: one radius across every control (theme forces 12px on text inputs) */
body.b1-v20 .field input,
body.b1-v20 .field select,
body.b1-v20 .field textarea,
body.b1-v20 .phone-prefix,
body.b1-v20 .form__status { border-radius: var(--radius); }
/* 6b. KIT OVERRIDE: Elementor Kit ships
.elementor-kit-6 input:not([type="button"]):not([type="submit"]) { border-radius:12px }
whose two :not() clauses give it (0,3,1) - it outranks the scoped (0,2,2)
rule above, which is why only text inputs kept the wrong radius.
Adding .elementor lifts these to (0,3,2). */
body.b1-v20 .elementor .field input,
body.b1-v20 .elementor .field select,
body.b1-v20 .elementor .field textarea,
body.b1-v20 .elementor .phone-prefix,
body.b1-v20 .elementor .form__status { border-radius: var(--radius); }
/* 6c. KIT OVERRIDE (full): the same .elementor-kit-6 input:not():not() rule at
(0,3,1) also overrode padding, font-size, font-family, colour, background
and border-style on every text input - not just the radius. Restate the
styles.css .field control declarations at (0,3,2) so the port wins. */
body.b1-v20 .elementor .field input,
body.b1-v20 .elementor .field select,
body.b1-v20 .elementor .field textarea {
width: 100%;
padding: .95rem 1rem;
font: inherit;
font-size: var(--fs-body);
color: var(--gray-900);
background-color: var(--gray-100);
border: 1px solid transparent;
border-radius: var(--radius);
}
body.b1-v20 .elementor .field select { padding-right: 3rem; }
body.b1-v20 .elementor .field textarea { min-height: clamp(160px, 30vw, 260px); resize: vertical; }
body.b1-v20 .elementor .field input:focus,
body.b1-v20 .elementor .field select:focus,
body.b1-v20 .elementor .field textarea:focus { background-color: #E9E9E9; border-color: var(--gray-700); outline: none; }
body.b1-v20 .elementor .field.is-invalid input,
body.b1-v20 .elementor .field.is-invalid select,
body.b1-v20 .elementor .field.is-invalid textarea { border-color: #C0392B; }
/* ================= PORTFOLIO PAGE ================= */
/* Filter bar */
body.b1-v20 .work-filters { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
body.b1-v20 .work-filters__row { display: flex; flex-wrap: wrap; gap: .5rem .625rem; }
body.b1-v20 .work-filters__row + .work-filters__row {
margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--hairline);
}
body.b1-v20 .work-filter {
display: inline-flex; align-items: center; gap: .5rem;
padding: .5rem 1rem; min-height: 40px;
background: transparent; color: var(--gray-700);
border: 1px solid var(--hairline); border-radius: 999px;
font: inherit; font-size: var(--fs-small); font-weight: 500; line-height: 1;
cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
body.b1-v20 .work-filter:hover { border-color: var(--gray-900); color: var(--gray-900); transform: translateY(-1px); }
body.b1-v20 .work-filter__count { color: var(--gray-700); opacity: .65; font-variant-numeric: tabular-nums; }
body.b1-v20 .work-filter[aria-pressed="true"] {
background: var(--gray-900); border-color: var(--gray-900); color: #fff;
}
body.b1-v20 .work-filter[aria-pressed="true"] .work-filter__count { color: #fff; opacity: .7; }
body.b1-v20 .work-filter--sub[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
body.b1-v20 .work-filter[hidden] { display: none; }
/* Editorial mixed-ratio grid.
Fixed row unit + column/row spans keeps rows flush (no ragged gaps the way
aspect-ratio-only cards produce), and grid-auto-flow:dense backfills holes
left when a filter removes cards. */
body.b1-v20 .work-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: clamp(64px, 6.7vw, 96px);
grid-auto-flow: row dense;
gap: var(--b1-gap);
}
body.b1-v20 .work-item { grid-column: span 1; grid-row: span 2; aspect-ratio: auto; height: 100%; }
body.b1-v20 .work-item--wide { grid-column: span 2; grid-row: span 2; }
body.b1-v20 .work-item--tall { grid-column: span 1; grid-row: span 3; }
body.b1-v20 .work-item--feature { grid-column: span 2; grid-row: span 3; }
body.b1-v20 .work-item[hidden] { display: none; }
/* filter transition */
body.b1-v20 .work-item { opacity: 1; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
body.b1-v20 .work-item.is-filtering { opacity: 0; transform: scale(.97); }
body.b1-v20 .work-empty { display: none; padding: clamp(2.5rem, 8vw, 5rem) 0; text-align: center; color: var(--fg-muted); font-size: var(--fs-lead); }
body.b1-v20 .work-grid.is-empty + .work-empty { display: block; }
body.b1-v20 .work-count { margin-top: clamp(1.25rem, 3vw, 2rem); text-align: center; color: var(--fg-muted); font-size: var(--fs-small); }
@media (max-width: 1023px) {
body.b1-v20 .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(70px, 10vw, 110px); }
body.b1-v20 .work-item--feature { grid-column: span 2; grid-row: span 3; }
}
@media (max-width: 639px) {
body.b1-v20 .work-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(78px, 21vw, 104px); }
body.b1-v20 .work-item,
body.b1-v20 .work-item--wide,
body.b1-v20 .work-item--feature { grid-column: span 1; grid-row: span 2; }
body.b1-v20 .work-item--tall { grid-column: span 1; grid-row: span 3; }
}
/* Single project */
body.b1-v20 .work-single__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1rem, 3vw, 1.5rem); }
body.b1-v20 .work-tag { display: inline-flex; padding: .35rem .85rem; border: 1px solid var(--hairline); border-radius: 999px; font-size: var(--fs-small); color: var(--gray-700); }
body.b1-v20 .work-single__hero { margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
body.b1-v20 .work-single__hero .ph { --ph-ratio: 16 / 9; }
body.b1-v20 .work-single__body { max-width: 68ch; font-size: var(--fs-lead); color: var(--fg-muted); }
body.b1-v20 .work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--b1-gap); margin-top: clamp(2rem, 6vw, 3rem); }
body.b1-v20 .work-video { position: relative; aspect-ratio: 16 / 9; margin-top: clamp(2rem, 6vw, 3rem); border-radius: var(--radius-lg); overflow: hidden; }
body.b1-v20 .work-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.b1-v20 .work-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 7vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 1px solid var(--hairline); }
/* NARROW CARD META: .project__meta is a space-between row tuned for the
560px homepage cards. On 268px standard/tall cards the title collides with
the View button, so stack them and drop the title size. */
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--feature) .project__meta {
flex-direction: column;
align-items: flex-start;
gap: .625rem;
}
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--feature) .project__title {
max-width: 100%;
font-size: clamp(.95rem, 2.2vw, 1.0625rem);
}
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--feature) .project__view {
gap: 1rem;
padding: .5rem .9rem;
}
/* wide + feature keep the roomier homepage treatment, just a touch tighter */
body.b1-v20 .work-item--wide .project__title,
body.b1-v20 .work-item--feature .project__title { max-width: 62%; }
/* PLACEHOLDER LABEL: .ph centres its label, which collides with the taller
stacked meta on narrow cards. Sit it in the upper third instead. Only
affects placeholder cards - real thumbnails render an ![]()
, no label. */
body.b1-v20 .work-item--wide .ph,
body.b1-v20 .work-item--feature .ph { align-items: start; padding-top: clamp(1rem, 16%, 3rem); }
/* narrow cards are too short to carry both the label and a two-line title, so
the label is dropped there - the gradient still reads as a placeholder. */
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--feature) .ph__label { display: none; }
/* ================= PORTFOLIO GRID v2 =================
Supersedes the 4-column / 4-shape block above. Three columns lifts the
base cell 268px -> 365px so nothing reads as a small tile, and three
shapes (1x1, 2x1, 2x2) give size jumps big enough to look deliberate. */
body.b1-v20 .work-grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: clamp(180px, 17.4vw, 252px);
}
body.b1-v20 .work-item { grid-column: span 1; grid-row: span 1; }
body.b1-v20 .work-item--wide { grid-column: span 2; grid-row: span 1; }
body.b1-v20 .work-item--hero { grid-column: span 2; grid-row: span 2; }
/* retired shapes, mapped so any stale content still lands somewhere sane */
body.b1-v20 .work-item--tall { grid-column: span 1; grid-row: span 1; }
body.b1-v20 .work-item--feature { grid-column: span 2; grid-row: span 2; }
/* meta + placeholder label now keyed to the v2 shape names */
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--hero) .project__meta {
flex-direction: column; align-items: flex-start; gap: .625rem;
}
body.b1-v20 .work-item:not(.work-item--wide):not(.work-item--hero) .project__title {
max-width: 100%; font-size: clamp(1rem, 2.2vw, 1.125rem);
}
body.b1-v20 .work-item--wide .project__title,
body.b1-v20 .work-item--hero .project__title { max-width: 62%; }
body.b1-v20 .work-item .ph__label { display: none; }
body.b1-v20 .work-item--wide .ph__label,
body.b1-v20 .work-item--hero .ph__label { display: block; }
body.b1-v20 .work-item--wide .ph,
body.b1-v20 .work-item--hero .ph { align-items: start; padding-top: clamp(1rem, 14%, 2.75rem); }
@media (max-width: 1023px) {
body.b1-v20 .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(180px, 24vw, 250px); }
body.b1-v20 .work-item--wide { grid-column: span 2; grid-row: span 1; }
body.b1-v20 .work-item--hero { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 639px) {
body.b1-v20 .work-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(190px, 52vw, 240px); }
body.b1-v20 .work-item,
body.b1-v20 .work-item--wide { grid-column: span 1; grid-row: span 1; }
body.b1-v20 .work-item--hero { grid-column: span 1; grid-row: span 2; }
}
/* ================= NATIVE HEADER (Elementor widgets) =================
The header is now real Elementor widgets, so the old .site-header__inner /
.nav-desktop / .nav-toggle / .nav-panel rules no longer match anything here.
Two of our own neutralisation rules have to be undone for this subtree:
.e-con-inner is display:contents globally, and containers are forced to
--display:block. The header needs its inner to BE the flex row. */
body.b1-v20 .site-header > .e-con-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
min-height: 72px;
transition: min-height .38s var(--ease);
}
body.b1-v20 .site-header.is-stuck > .e-con-inner { min-height: 56px; }
/* logo: flex-grow so the nav sits centre-right, image height-driven */
body.b1-v20 .site-header__logo { flex: 1 1 auto; }
body.b1-v20 .site-header__logo img {
height: clamp(26px, 5.5vw, 34px); width: auto; display: block;
transition: height .38s var(--ease);
}
body.b1-v20 .site-header.is-stuck .site-header__logo img { height: clamp(22px, 4.6vw, 28px); }
/* desktop menu */
body.b1-v20 .site-nav { flex: 0 0 auto; }
body.b1-v20 .site-nav .elementor-nav-menu {
display: flex; align-items: center; gap: 2.25rem; margin: 0; padding: 0; list-style: none;
}
body.b1-v20 .site-nav .elementor-nav-menu li { margin: 0; }
/* items flagged is-mobile-only in Appearance > Menus stay out of the desktop bar */
body.b1-v20 .site-nav .is-mobile-only { display: none; }
body.b1-v20 .site-nav a.elementor-item {
position: relative; padding: .35rem 0; background: none;
font-size: .95rem; font-weight: 500; line-height: 1.2; color: var(--fg);
fill: currentColor;
}
body.b1-v20 .site-nav a.elementor-item:hover,
body.b1-v20 .site-nav a.elementor-item.elementor-item-active { color: var(--fg); background: none; }
body.b1-v20 .site-nav a.elementor-item::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
background: var(--orange); transform: scaleX(0); transform-origin: left;
transition: transform .25s var(--ease); opacity: 1; border: 0;
}
body.b1-v20 .site-nav a.elementor-item:hover::after,
body.b1-v20 .site-nav .current-menu-item > a.elementor-item::after,
body.b1-v20 .site-nav a.elementor-item[aria-current="true"]::after { transform: scaleX(1); }
/* burger: strip Elementor button chrome back to a bare icon */
body.b1-v20 .site-burger { flex: 0 0 auto; }
body.b1-v20 .site-burger .elementor-button {
display: grid; place-items: center; min-height: 0;
padding: .45rem; background: none; border: 0; border-radius: var(--radius);
color: var(--gray-900); box-shadow: none;
transition: color .2s var(--ease), background-color .2s var(--ease);
}
body.b1-v20 .site-burger .elementor-button:hover { background: none; color: var(--orange); }
body.b1-v20 .site-burger .elementor-button svg { width: 26px; height: 26px; fill: currentColor; }
body.b1-v20 .site-burger .elementor-button-content-wrapper { gap: 0; }
/* header CTA: the .btn look, applied to the real not the widget wrapper */
body.b1-v20 .site-cta { flex: 0 0 auto; }
body.b1-v20 .site-cta .elementor-button {
display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
min-height: 44px; padding: .55rem 1.4rem;
background: var(--orange); color: #fff; border: 1px solid transparent;
border-radius: var(--radius); box-shadow: none;
font-size: clamp(.875rem, 1.6vw, .9375rem); font-weight: 700; letter-spacing: .005em;
transition: background-color .22s var(--ease), transform .22s var(--ease);
}
body.b1-v20 .site-cta .elementor-button:hover { background: var(--orange-hover); transform: translateY(-2px); }
/* off-canvas panel */
body.b1-v20 .site-offcanvas .e-off-canvas__main { background: #fff; }
body.b1-v20 .site-offcanvas .e-off-canvas__content { padding: clamp(1.5rem, 6vw, 2.5rem); }
body.b1-v20 .site-offcanvas__nav .elementor-nav-menu { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
body.b1-v20 .site-offcanvas__nav a.elementor-item {
padding: .45rem 0; background: none; color: var(--fg);
font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -.01em;
}
body.b1-v20 .site-offcanvas__nav a.elementor-item:hover { color: var(--orange); background: none; }
/* (NATIVE HEADER FIX v2 removed: the full-width header owns its padding in Elementor) */
/* the global `.elementor-widget { display: contents }` neutralisation is right
for the ported page sections but wrong here: these four widgets ARE the
header's flex children. The off-canvas widget stays `contents` on purpose -
its panel is position:fixed and must not consume a slot in the row. */
body.b1-v20 .site-header__logo,
body.b1-v20 .site-nav,
body.b1-v20 .site-burger,
body.b1-v20 .site-cta { display: block; }
body.b1-v20 .site-offcanvas { display: contents; }
body.b1-v20 .site-header__logo { flex: 1 1 auto; min-width: 0; }
body.b1-v20 .site-header__logo .elementor-widget-container { display: flex; align-items: center; }
body.b1-v20 .site-header__logo a { display: inline-flex; align-items: center; }
body.b1-v20 .site-nav { flex: 0 0 auto; }
/* logo sits hard left - Elementor's image widget centres its content */
body.b1-v20 .site-header__logo { display: flex; align-items: center; justify-content: flex-start; text-align: left; }
/* Elementor's .elementor-hidden-* rules are single-class (0,1,0), so the
display rules above outranked them. Restate at matching weight. */
@media (min-width: 1025px) {
body.b1-v20 .site-header .elementor-hidden-desktop { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
body.b1-v20 .site-header .elementor-hidden-tablet { display: none; }
}
@media (max-width: 767px) {
body.b1-v20 .site-header .elementor-hidden-mobile { display: none; }
}
/* ================= HERO v3 + BUTTON GEOMETRY ================= */
/* Hero: left-aligned column, vertical centring kept, right half left empty.
This supersedes "1. Hero: centre vertically + horizontally" above. */
body.b1-v20 .hero__inner { text-align: left; }
body.b1-v20 .hero__title { margin-inline: 0; max-width: 14ch; }
body.b1-v20 .hero__sub { margin-inline: 0; max-width: 26ch; }
body.b1-v20 .hero .btn-row { margin-inline: 0; }
/* Buttons everywhere: taller, wider, label hard left, chevron hard right. */
body.b1-v20 .btn {
min-height: 62px;
padding: .95rem 3.5rem .95rem 2rem;
justify-content: flex-start;
text-align: left;
letter-spacing: -.015em;
}
body.b1-v20 .btn::after { right: 1.75rem; }
body.b1-v20 .btn--inline { width: fit-content; min-width: min(440px, 100%); max-width: 100%; }
/* full-bleed inside the gutter on phones, fixed generous width from 640up */
body.b1-v20 .btn-row .btn { min-width: 0; width: 100%; }
@media (min-width: 640px) {
body.b1-v20 .btn-row { grid-auto-flow: column; max-width: none; }
body.b1-v20 .btn-row .btn { min-width: 340px; width: auto; }
}
/* Tighter tracking on display type and button labels */
body.b1-v20 h1,
body.b1-v20 h2,
body.b1-v20 h3 { letter-spacing: -.03em; }
body.b1-v20 .hero__title { letter-spacing: -.035em; }
body.b1-v20 .site-cta .elementor-button { letter-spacing: -.015em; }
/* the row only packs left once it is a real two-column row; below 640 the
single column must stretch or the stacked buttons shrink to their text */
@media (min-width: 640px) {
body.b1-v20 .hero .btn-row { justify-content: start; }
}
/* symmetric block padding so align-content:center actually centres */
@media (min-width: 768px) {
body.b1-v20 .hero { padding-block: clamp(2.5rem, 8vw, 5rem); }
}
/* ================= HERO v4 ================= */
/* the earlier refinement pinned justify-content:center on the hero row, which
stops the single stacked column stretching to the gutter on phones */
@media (max-width: 639px) {
body.b1-v20 .hero .btn-row { justify-content: normal; }
}
/* buttons: shorter, taller */
body.b1-v20 .btn { min-height: 68px; }
@media (min-width: 640px) {
body.b1-v20 .btn-row .btn { min-width: 300px; }
}
/* hero heading down ~6px (80 -> 74) */
body.b1-v20 .hero__title { font-size: clamp(2.25rem, 7.9vw, 4.625rem); }
/* the hero column aims for half the container - a soft cap, so the natural
ch-based widths still win whenever they are narrower */
@media (min-width: 1024px) {
body.b1-v20 .hero__title { max-width: min(14ch, 52%); }
body.b1-v20 .hero__sub { max-width: min(26ch, 52%); }
body.b1-v20 .hero .btn-row {
max-width: min(640px, 52%);
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.b1-v20 .hero .btn-row .btn { min-width: 0; }
}
/* drop the circle + arrow graphic on the right of the hero */
body.b1-v20 .hero__deco--shapes { display: none; }
/* the composition sits lower so the button row closes the gap to the
bottom-left arrow: extra top padding biases align-content:center downward
without changing the hero's height */
@media (min-width: 1024px) {
body.b1-v20 .hero {
padding-block:
calc(clamp(2.5rem, 8vw, 5rem) + clamp(0px, (100vh - 800px) * 1.1, 110px))
clamp(2.5rem, 8vw, 5rem);
}
}
/* ================= HERO LOTTIE ================= */
/* Sits in the half the text column leaves empty. Right edge lines up with the
container's content edge, mirroring the left column's gutter. Vertically it
rides the same downward shift as the copy, so the two stay in balance. */
body.b1-v20 .hero__lottie { display: none; }
@media (min-width: 1024px) {
body.b1-v20 .hero__lottie {
display: block;
position: absolute;
z-index: 0;
pointer-events: none;
top: 50%;
right: calc(50% - (var(--container) / 2) + var(--gutter));
width: min(46%, 560px);
aspect-ratio: 1 / 1;
transform: translateY(calc(-50% + clamp(0px, (100vh - 800px) * 0.55, 55px)));
}
body.b1-v20 .hero__lottie svg { width: 100%; height: 100%; display: block; }
}
/* tablet: smaller, still right-hand side */
@media (min-width: 768px) and (max-width: 1023px) {
body.b1-v20 .hero__lottie {
display: block; position: absolute; z-index: 0; pointer-events: none;
top: 50%; right: var(--gutter); width: min(42%, 340px); aspect-ratio: 1 / 1;
transform: translateY(-50%); opacity: .9;
}
}
/* hero lottie: higher in the section and closer to the viewport edge than the
text gutter, so it reads as counterweight rather than a second column */
@media (min-width: 1024px) {
body.b1-v20 .hero__lottie {
right: max(0px, calc(50% - (var(--container) / 2) - 2.5rem));
transform: translateY(calc(-50% - clamp(1rem, 4.5vh, 2.75rem)));
}
}
/* hero lottie: second nudge -- flush to the viewport edge, riding up toward
the header so the headline sits under it rather than beside it */
@media (min-width: 1024px) {
body.b1-v20 .hero__lottie {
right: 0;
transform: translateY(calc(-50% - clamp(2rem, 10.5vh, 6.5rem)));
}
}
/* anchor from the top of the hero instead of drifting up from centre: the
vh-based shift slid under the nav on short viewports (1280x720) */
@media (min-width: 1024px) {
body.b1-v20 .hero__lottie {
top: 1rem;
transform: none;
}
}
/* hero lottie: draggable corner grips -------------------------------------
.hero__lottie stays fixed (stable rect for the drag maths); .stage carries
the user scale so artwork and grips scale together. */
body.b1-v20 .hero { overflow-x: clip; }
body.b1-v20 .hero__lottie-stage {
position: absolute; inset: 0;
transform-origin: 50% 50%;
will-change: transform;
transition: transform .18s cubic-bezier(.22,.61,.36,1);
}
body.b1-v20 .hero__lottie.is-resizing .hero__lottie-stage { transition: none; }
body.b1-v20 .hero__lottie-anim { position: absolute; inset: 0; pointer-events: none; }
body.b1-v20 .hero__lottie-anim svg { display: block; width: 100%; height: 100%; }
body.b1-v20 .hero__lottie-grips {
position: absolute; inset: 0;
width: 100%; height: 100%;
overflow: visible;
pointer-events: none;
}
body.b1-v20 .hero__lottie-grip {
fill: transparent;
pointer-events: auto;
touch-action: none;
}
body.b1-v20 .hero__lottie-grip--tl,
body.b1-v20 .hero__lottie-grip--br { cursor: nwse-resize; }
body.b1-v20 .hero__lottie-grip--tr,
body.b1-v20 .hero__lottie-grip--bl { cursor: nesw-resize; }
/* grips must sit above .hero__inner (z-index 1) or Elementor's container
swallows the pointer; the artwork layer stays pointer-transparent and is
scale-clamped in JS so it can never reach the copy column */
body.b1-v20 .hero__lottie { z-index: 2; }
/* the container itself must not swallow clicks meant for the hero copy; only
the four grips opt back in */
body.b1-v20 .hero__lottie { pointer-events: none; }
/* artwork drops behind the copy so it can bleed across the hero at big scales
without ever sitting on top of text; the grip layer alone rides above
Elementor's .hero__inner (z-index 1) to stay clickable */
body.b1-v20 .hero { overflow: clip; }
body.b1-v20 .hero__lottie { z-index: 0; }
body.b1-v20 .hero__grips { z-index: 3; }
body.b1-v20 .hero__grips .hero__lottie-anim { display: none; }
/* no hit overlay any more -- the object is hit-tested in JS, so the whole
artwork layer stays pointer-transparent and the hero copy keeps its clicks */
body.b1-v20 .hero__lottie { z-index: 0; pointer-events: none; }
body.b1-v20 .hero__lottie-stage { transform-origin: 50% 50%; }
body.b1-v20 .hero__lottie.is-resizing .hero__lottie-stage { transition: none; }
/* ==========================================================================
Edits 04.08 -- desktop pass (screenshots 1-8)
========================================================================== */
/* 1. header: transparent, pulled over the hero. --hdr-h is written by JS
because the bar changes height when the logo shrinks on scroll. */
body.b1-v20 .site-header {
z-index: 50;
margin-bottom: calc(-1 * var(--hdr-h, 72px));
}
body.b1-v20 .hero { padding-top: calc(var(--hdr-h, 72px) + 1.5rem); }
/* Elementor pads each menu item, which was doubling the visual gap to 72px */
body.b1-v20 .site-nav .elementor-nav-menu { gap: 2.25rem; }
body.b1-v20 .site-nav .elementor-nav-menu--main a.elementor-item { padding-inline: 0; }
/* header CTA: the theme button, scaled to fit the bar */
body.b1-v20 .site-cta .elementor-button {
position: relative;
min-height: 48px;
padding: .75rem 2.5rem .75rem 1.5rem;
border-radius: var(--radius);
font-size: 1rem; font-weight: 700; letter-spacing: .005em;
}
body.b1-v20 .site-cta .elementor-button::after {
content: ''; position: absolute; right: 1.15rem;
width: .5rem; height: .5rem;
border-top: 2px solid currentColor; border-right: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .22s var(--ease);
}
body.b1-v20 .site-cta .elementor-button:hover::after { transform: rotate(45deg) translate(3px, -3px); }
/* the morph object has to clear the bar too, or it sits behind the menu */
@media (min-width: 1024px) {
body.b1-v20 .hero__lottie { top: calc(var(--hdr-h, 72px) + 1rem); }
}
/* 2. more air under the reel; We Do Visual block recentred with slightly
less room below it than above */
body.b1-v20 .reel { padding-bottom: 5.5rem; }
body.b1-v20 .section:has(.about__heading) { padding-top: 4.5rem; }
body.b1-v20 .about__feature { margin-top: 4.75rem; }
/* 3. featured work and the services read as one block */
body.b1-v20 .section:has(.about__feature) { padding-bottom: 2rem; }
body.b1-v20 .section:has(.services__cta) { padding-top: 3rem; }
/* 4. Key Projects: same composition, less of it */
body.b1-v20 .projects-intro { padding-block: 4rem; }
body.b1-v20 .projects-intro__heading { gap: 1.125rem; margin-bottom: .875rem; }
body.b1-v20 .projects-intro__ghost { height: clamp(64px, 7vw, 92px); width: auto; }
body.b1-v20 .projects-intro__body { margin-bottom: 1.75rem; }
/* 5. Why Choose B1: bigger icons, more separation, larger titles */
body.b1-v20 .why .card__icon,
body.b1-v20 #why .card__icon {
--i-size: clamp(2.5rem, 5vw, 3rem);
margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
body.b1-v20 .why .card__title { font-size: clamp(1.3rem, 2.4vw, 1.45rem); line-height: 1.28; }
/* 6. testimonial: white name, arrows stripped back to the chevron */
body.b1-v20 .testimonial__name { color: #fff; }
body.b1-v20 .testimonials__nav {
width: 40px; height: 40px;
background: transparent;
color: rgba(255, 255, 255, .5);
transition: color .2s var(--ease), transform .2s var(--ease);
}
body.b1-v20 .testimonials__nav:hover { background: transparent; color: #fff; }
body.b1-v20 .testimonials__nav::before { width: .6rem; height: .6rem; border-width: 1.5px; }
/* 7. How We Operate: number to the left on every tooltip, and the tooltip
centred on its checkbox. Head height is driven by the number
(49px line + .7rem padding block), not by the label. */
body.b1-v20 .step:nth-child(odd) .step__head,
body.b1-v20 .step:nth-child(even) .step__head { flex-direction: row; }
body.b1-v20 .step__num { order: -1; }
body.b1-v20 .step__label { order: 0; }
body.b1-v20 .step__node { top: calc((3.0625rem + 1.4rem - 28px) / 2); }
/* 8. Lets Talk: tighter above the or, and the or carries more weight */
body.b1-v20 .talk { padding-top: 4rem; }
body.b1-v20 .talk__or {
margin-bottom: .75rem;
font-size: clamp(1.1rem, 2.2vw, 1.375rem);
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--orange);
}
/* corrections after measuring: an id rule owns the why titles, and the
testimonial arrows were holding width from button padding / min-width */
body.b1-v20 #why .card__title { font-size: clamp(1.3rem, 2.4vw, 1.45rem); line-height: 1.28; }
body.b1-v20 .testimonials__nav {
box-sizing: border-box;
width: 40px; min-width: 0; padding: 0;
}
/* Correction to edit 1 -----------------------------------------------------
The negative-margin approach coupled the hero's position to the header's
live height, and the header shrinks when it sticks -- so the whole page
jumped ~16px at the stick threshold. Taking the header out of flow removes
the coupling completely: it can shrink freely and nothing below moves. */
body.b1-v20 .site-header {
position: fixed;
inset-inline: 0;
top: 0;
width: auto;
margin-bottom: 0;
z-index: 50;
}
body.admin-bar.b1-v20 .site-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar.b1-v20 .site-header { top: 46px; }
}
/* ==========================================================================
Header rebuild: logo + burger only, slide-out panel at every width
========================================================================== */
/* the bar carries nothing but the mark and the toggle */
/* burger + panel were mobile-only; Elementor hides them with !important */
/* a 70px+ mark needs a taller bar to sit in */
body.b1-v20 .site-header > .e-con-inner { min-height: 104px; }
body.b1-v20 .site-header.is-stuck > .e-con-inner { min-height: 78px; }
/* no active-item indicator anywhere */
body.b1-v20 .site-nav a.elementor-item::after,
body.b1-v20 .site-offcanvas__nav a.elementor-item::after { display: none !important; }
/* Why Choose B1 icons: back down a step */
body.b1-v20 .why .card__icon,
body.b1-v20 #why .card__icon { --i-size: clamp(2.15rem, 4.2vw, 2.5rem); }
/* --- the toggle -----------------------------------------------------------
Elementor ships an