body {
background-color: #ffffff;
color: #111111;
-webkit-font-smoothing: antialiased;
}
.font-serif {
font-family: 'Playfair Display', serif;
}
.font-sans {
font-family: 'DM Sans', sans-serif;
}
.brand-gradient-text {
background: linear-gradient(to right, #E80000, #7E0101);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-gradient-bg {
background: linear-gradient(to right, #E80000, #7E0101);
}
.glass-panel {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}
.glass-panel-card {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 50;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(14px);
}
.site-header-inner {
width: min(1280px, calc(100% - 48px));
height: 88px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
}
.site-header-brand {
flex: 0 0 auto;
}
.site-header-logo {
width: 190px;
height: auto;
display: block;
}
.site-header-desktop {
display: flex;
align-items: center;
gap: 32px;
}
.site-header-menu {
display: flex;
align-items: center;
gap: 30px;
}
.site-header-menu-item {
position: relative;
}
.site-header-menu-item > a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-header-menu-item > a .iconify {
font-size: 0.92rem;
transition: transform 180ms ease;
}
.site-header-submenu {
position: absolute;
top: 100%;
left: 50%;
width: 250px;
padding: 8px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 6px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 10px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.site-header-menu-item:hover .site-header-submenu,
.site-header-menu-item:focus-within .site-header-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.site-header-menu-item:hover > a .iconify,
.site-header-menu-item:focus-within > a .iconify {
transform: rotate(180deg);
}
.site-header-submenu a {
display: flex;
align-items: center;
min-height: 42px;
padding: 0 12px;
border-radius: 4px;
color: #111111;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: color 180ms ease, background-color 180ms ease;
}
.site-header-submenu a::after {
display: none;
}
.site-header-submenu a:hover,
.site-header-submenu a:focus-visible,
.site-header-submenu a[aria-current="page"] {
color: #7E0101;
background: #F3F5F6;
}
.site-header-menu a {
position: relative;
padding: 12px 0;
color: #111111;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
transition: color 180ms ease;
}
.site-header-menu a::after {
content: "";
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 2px;
background: #E80000;
transform: scaleX(0);
transform-origin: left;
transition: transform 180ms ease;
}
.site-header-menu a:hover,
.site-header-menu a:focus-visible {
color: #7E0101;
}
.site-header-menu a:hover::after,
.site-header-menu a:focus-visible::after {
transform: scaleX(1);
}
.site-header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.site-header-phone,
.site-header-login {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 16px;
border-radius: 6px;
color: #ffffff;
font-size: 0.91rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.site-header-phone {
background-color: #E80000;
box-shadow: 0 8px 20px rgba(126, 1, 1, 0.17);
}
.site-header-login {
background-color: #111111;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.site-header-phone:hover,
.site-header-phone:focus-visible,
.site-header-login:hover,
.site-header-login:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.site-header-phone .iconify,
.site-header-login .iconify {
font-size: 1rem;
}
.site-header-toggle {
width: 44px;
height: 44px;
display: none;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 6px;
background: #ffffff;
color: #111111;
cursor: pointer;
}
.site-header-toggle .iconify {
font-size: 1.4rem;
}
.site-header-mobile {
display: none;
border-top: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
}
.site-header-mobile.is-open {
display: block;
}
.site-header-mobile-inner {
width: min(100% - 40px, 520px);
margin: 0 auto;
padding: 20px 0 24px;
}
.site-header-mobile-nav {
display: grid;
}
.site-header-mobile-services {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.site-header-mobile-services summary {
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: #111111;
font-size: 1.05rem;
font-weight: 650;
cursor: pointer;
list-style: none;
}
.site-header-mobile-services summary::-webkit-details-marker {
display: none;
}
.site-header-mobile-services summary .iconify {
color: #E80000;
font-size: 1rem;
transition: transform 180ms ease;
}
.site-header-mobile-services[open] summary .iconify {
transform: rotate(180deg);
}
.site-header-mobile-submenu {
display: grid;
padding: 2px 0 12px 16px;
border-left: 2px solid #E80000;
}
.site-header-mobile-submenu a {
min-height: 42px;
display: flex;
align-items: center;
padding: 0 12px;
color: #5B6168;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.site-header-mobile-submenu a:hover,
.site-header-mobile-submenu a:focus-visible,
.site-header-mobile-submenu a[aria-current="page"] {
color: #7E0101;
background: #F3F5F6;
}
.site-header-mobile-link {
display: flex;
align-items: center;
min-height: 52px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
color: #111111;
font-size: 1.05rem;
font-weight: 650;
text-decoration: none;
}
.site-header-mobile-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 20px;
}
.site-header-mobile-actions .site-header-phone,
.site-header-mobile-actions .site-header-login {
min-height: 50px;
font-size: 0.98rem;
}
@media (max-width: 1120px) {
.site-header-inner {
gap: 20px;
}
.site-header-logo {
width: 170px;
}
.site-header-desktop {
gap: 22px;
}
.site-header-menu {
gap: 20px;
}
.site-header-menu a {
font-size: 1rem;
}
.site-header-phone,
.site-header-login {
padding-inline: 13px;
}
}
@media (max-width: 980px) {
.site-header-inner {
height: 80px;
}
.site-header-logo {
width: 158px;
}
.site-header-desktop {
display: none;
}
.site-header-toggle {
display: inline-flex;
}
}

.gopher-hero-section {
position: relative;
overflow: hidden;
padding: 128px 0 80px;
background: #ffffff;
}
.gopher-hero-section::before {
content: "";
position: absolute;
top: 80px;
right: 0;
width: 28%;
height: 1px;
background: rgba(0, 0, 0, 0.12);
}
.gopher-hero {
width: min(1280px, calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.12fr);
gap: 64px;
align-items: center;
}
.gopher-hero-copy {
max-width: 590px;
}
.gopher-hero-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 24px;
color: #7E0101;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.gopher-hero-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: #E80000;
}
.gopher-hero-title {
margin: 0;
color: #111111;
font-size: clamp(3.2rem, 4.5vw, 4.25rem);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
.gopher-hero-title span {
font-family: "Playfair Display", serif;
font-style: italic;
font-weight: 500;
}
.gopher-hero-intro {
max-width: 570px;
margin: 28px 0 0;
color: #5B6168;
font-size: 1.08rem;
font-weight: 300;
line-height: 1.7;
}
.gopher-hero-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.gopher-hero-cta-note {
margin: 28px 0 0;
color: #111111;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.45;
}
.gopher-hero-cta {
min-width: 174px;
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: 6px;
color: #ffffff;
font-size: 0.84rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.gopher-hero-cta-primary {
background: linear-gradient(to right, #E80000, #7E0101);
box-shadow: 0 12px 28px rgba(126, 1, 1, 0.18);
}
.gopher-hero-cta-secondary {
background: #111111;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
.gopher-hero-cta:hover,
.gopher-hero-cta:focus-visible {
transform: translateY(-2px);
box-shadow: 0 16px 32px rgba(126, 1, 1, 0.24);
}
.gopher-hero-cta:focus-visible {
outline: 3px solid rgba(239, 3, 3, 0.2);
outline-offset: 3px;
}
.gopher-hero-coverage {
display: flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: #5B6168;
font-size: 0.78rem;
font-weight: 600;
}
.gopher-hero-coverage .iconify {
color: #E80000;
font-size: 1rem;
}
.gopher-run {
width: 100%;
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 8px;
background: #F4F6F8;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.11);
}
.gopher-run-header {
height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.82);
}
.gopher-run-kicker,
.gopher-run-live {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
}
.gopher-run-kicker {
color: #5B6168;
text-transform: uppercase;
}
.gopher-run-live {
color: #111111;
}
.gopher-run-live::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #E80000;
box-shadow: 0 0 0 4px rgba(239, 3, 3, 0.12);
}
.gopher-run-map {
position: relative;
height: 500px;
overflow: hidden;
background: #F4F6F8;
}
.gopher-run-map::before {
content: "";
position: absolute;
inset: 0;
border: 18px solid rgba(255, 255, 255, 0.42);
pointer-events: none;
}
.gopher-run-map svg {
width: 100%;
height: 100%;
display: block;
}
.gopher-run-road {
fill: none;
stroke: #ffffff;
stroke-linecap: round;
stroke-width: 18;
}
.gopher-run-road-edge {
fill: none;
stroke: rgba(0, 0, 0, 0.08);
stroke-linecap: round;
stroke-width: 1;
}
.gopher-run-grid {
stroke: rgba(0, 0, 0, 0.08);
stroke-width: 1;
}
.gopher-run-route-base {
fill: none;
stroke: rgba(126, 1, 1, 0.13);
stroke-linecap: round;
stroke-width: 9;
}
.gopher-run-route-live {
fill: none;
stroke: #E80000;
stroke-linecap: round;
stroke-width: 5;
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: gopherRunDraw 8s linear infinite;
}
.gopher-run-stop {
fill: #ffffff;
stroke: #7E0101;
stroke-width: 3;
}
.gopher-run-endpoint-ring {
fill: rgba(239, 3, 3, 0.08);
stroke: rgba(239, 3, 3, 0.28);
stroke-width: 1;
}
.gopher-run-endpoint {
fill: #E80000;
stroke: #ffffff;
stroke-width: 5;
}
.gopher-run-destination {
fill: #111111;
stroke: #ffffff;
stroke-width: 5;
}
.gopher-run-courier {
filter: drop-shadow(0 8px 10px rgba(126, 1, 1, 0.24));
}
.gopher-run-courier-disc {
fill: #E80000;
stroke: #ffffff;
stroke-width: 5;
}
.gopher-run-courier-glyph {
fill: none;
stroke: #ffffff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.5;
}
.gopher-run-courier-static {
display: none;
}
.gopher-run-node-label {
position: absolute;
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
color: #111111;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
}
.gopher-run-node-label span {
display: block;
margin-top: 2px;
color: #5B6168;
font-size: 0.6rem;
font-weight: 500;
}
.gopher-run-node-label .iconify {
color: #E80000;
font-size: 1rem;
}
.gopher-run-node-label--pickup {
left: 4%;
bottom: 7%;
}
.gopher-run-node-label--delivery {
top: 5%;
right: 3%;
}
.gopher-run-card {
position: absolute;
z-index: 2;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(10px);
}
.gopher-run-eta {
top: 17%;
left: 5%;
width: 148px;
padding: 14px;
}
.gopher-run-card-label {
display: flex;
align-items: center;
gap: 6px;
color: #5B6168;
font-size: 0.64rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-run-card-label .iconify {
color: #E80000;
font-size: 0.88rem;
}
.gopher-run-eta strong {
display: block;
margin-top: 10px;
color: #111111;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.05;
}
.gopher-run-eta small {
display: block;
margin-top: 6px;
color: #5B6168;
font-size: 0.62rem;
}
.gopher-run-status {
right: 5%;
bottom: 17%;
width: 164px;
min-height: 86px;
padding: 15px;
}
.gopher-run-status-item {
position: absolute;
inset: 15px;
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: center;
opacity: 0;
}
.gopher-run-status-icon {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(239, 3, 3, 0.09);
color: #E80000;
}
.gopher-run-status-item strong {
display: block;
color: #111111;
font-size: 0.76rem;
line-height: 1.2;
}
.gopher-run-status-item small {
display: block;
margin-top: 4px;
color: #5B6168;
font-size: 0.62rem;
line-height: 1.2;
}
.gopher-run-stages {
height: 76px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: #ffffff;
}
.gopher-run-stage {
position: relative;
display: flex;
align-items: center;
gap: 9px;
padding: 0 15px;
color: #5B6168;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
}
.gopher-run-stage + .gopher-run-stage {
border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.gopher-run-stage-dot {
width: 9px;
height: 9px;
flex: 0 0 auto;
border: 2px solid #E80000;
border-radius: 50%;
background: #ffffff;
}
.gopher-run-stage:nth-child(1),
.gopher-run-stage:nth-child(1) .gopher-run-stage-dot {
animation: gopherRunStageOne 8s linear infinite;
}
.gopher-run-stage:nth-child(2),
.gopher-run-stage:nth-child(2) .gopher-run-stage-dot {
animation: gopherRunStageTwo 8s linear infinite;
}
.gopher-run-stage:nth-child(3),
.gopher-run-stage:nth-child(3) .gopher-run-stage-dot {
animation: gopherRunStageThree 8s linear infinite;
}
.gopher-run-status-item:nth-child(1) {
animation: gopherRunStatusPickup 8s linear infinite;
}
.gopher-run-status-item:nth-child(2) {
animation: gopherRunStatusTransit 8s linear infinite;
}
.gopher-run-status-item:nth-child(3) {
animation: gopherRunStatusDelivered 8s linear infinite;
}
.gopher-run-destination {
transform-origin: 536px 72px;
animation: gopherRunDestination 8s ease-out infinite;
}
@keyframes gopherRunDraw {
0%, 8% { stroke-dashoffset: 1; }
90%, 100% { stroke-dashoffset: 0; }
}
@keyframes gopherRunStatusPickup {
0%, 27% { opacity: 1; transform: translateY(0); }
30%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes gopherRunStatusTransit {
0%, 28% { opacity: 0; transform: translateY(6px); }
32%, 78% { opacity: 1; transform: translateY(0); }
81%, 100% { opacity: 0; transform: translateY(6px); }
}
@keyframes gopherRunStatusDelivered {
0%, 79% { opacity: 0; transform: translateY(6px); }
83%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes gopherRunStageOne {
0%, 8% { color: #5B6168; background-color: #ffffff; }
12%, 100% { color: #111111; background-color: rgba(239, 3, 3, 0.025); }
}
@keyframes gopherRunStageTwo {
0%, 34% { color: #5B6168; background-color: #ffffff; }
38%, 100% { color: #111111; background-color: rgba(239, 3, 3, 0.025); }
}
@keyframes gopherRunStageThree {
0%, 79% { color: #5B6168; background-color: #ffffff; }
83%, 100% { color: #111111; background-color: rgba(239, 3, 3, 0.025); }
}
@keyframes gopherRunDestination {
0%, 81% { transform: scale(1); }
86% { transform: scale(1.45); }
91%, 100% { transform: scale(1); }
}
@media (max-width: 1080px) {
.gopher-hero {
grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1.2fr);
gap: 40px;
}
.gopher-hero-title {
font-size: 3.2rem;
}
}
@media (max-width: 900px) {
.gopher-hero-section {
padding: 120px 0 64px;
}
.gopher-hero {
grid-template-columns: 1fr;
gap: 44px;
}
.gopher-hero-copy {
max-width: 760px;
}
.gopher-run {
width: min(650px, 100%);
}
}
@media (max-width: 620px) {
.gopher-hero-section {
padding: 112px 0 32px;
}
.gopher-hero {
width: min(100% - 40px, 520px);
gap: 28px;
}
.gopher-hero-eyebrow {
margin-bottom: 18px;
font-size: 0.66rem;
}
.gopher-hero-title {
font-size: clamp(2.35rem, 10.5vw, 2.9rem);
}
.gopher-hero-intro {
margin-top: 20px;
font-size: 0.92rem;
line-height: 1.55;
}
.gopher-hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.gopher-hero-cta {
width: 100%;
min-width: 0;
padding: 0 10px;
font-size: 0.76rem;
}
.gopher-hero-cta-note {
margin-top: 22px;
font-size: 0.84rem;
}
.gopher-run-header {
height: 48px;
padding: 0 14px;
}
.gopher-run-map {
height: 290px;
}
.gopher-run-map::before {
border-width: 9px;
}
.gopher-run-eta {
top: 15%;
left: 4%;
width: 112px;
padding: 10px;
}
.gopher-run-eta strong {
font-size: 0.92rem;
}
.gopher-run-eta small {
display: none;
}
.gopher-run-status {
right: 4%;
bottom: 15%;
width: 130px;
min-height: 68px;
padding: 10px;
}
.gopher-run-status-item {
inset: 10px;
grid-template-columns: 22px 1fr;
gap: 7px;
}
.gopher-run-status-icon {
width: 22px;
height: 22px;
}
.gopher-run-status-item strong {
font-size: 0.64rem;
}
.gopher-run-status-item small {
font-size: 0.54rem;
}
.gopher-run-node-label {
padding: 6px 8px;
font-size: 0.56rem;
}
.gopher-run-node-label span {
display: none;
}
.gopher-run-node-label--pickup {
left: 3%;
bottom: 5%;
}
.gopher-run-node-label--delivery {
top: 4%;
right: 2%;
}
.gopher-run-stages {
height: 54px;
}
.gopher-run-stage {
justify-content: center;
padding: 0 5px;
font-size: 0.56rem;
}
.gopher-run-stage-dot {
width: 7px;
height: 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-run-route-live,
.gopher-run-stage,
.gopher-run-stage-dot,
.gopher-run-status-item,
.gopher-run-destination {
animation: none !important;
}
.gopher-run-route-live {
stroke-dashoffset: 0;
}
.gopher-run-courier {
display: none;
}
.gopher-run-courier-static {
display: block;
}
.gopher-run-status-item {
display: none;
opacity: 1;
}
.gopher-run-status-item:nth-child(2) {
display: grid;
}
.gopher-run-stage {
color: #111111;
}
.gopher-run-stage-dot {
background: #E80000;
}
}

.awards-showcase {
position: relative;
overflow: hidden;
border-block: 1px solid rgba(0, 0, 0, 0.12);
background: #ffffff;
isolation: isolate;
}
.awards-showcase::after {
content: "GOPHER IT";
position: absolute;
right: -0.03em;
bottom: -0.18em;
z-index: -1;
color: rgba(17, 17, 17, 0.025);
font-size: clamp(8rem, 18vw, 17rem);
font-weight: 800;
line-height: 0.8;
white-space: nowrap;
}
.awards-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
gap: 72px;
align-items: center;
padding: 112px 0;
}
.awards-copy {
max-width: 520px;
}
.awards-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 28px;
color: #7E0101;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.awards-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: #E80000;
}
.awards-title {
max-width: 510px;
margin: 0;
color: #111111;
font-size: clamp(3.2rem, 4.8vw, 4.75rem);
font-weight: 500;
line-height: 0.92;
letter-spacing: 0;
}
.awards-title em {
color: #E80000;
font-family: "Playfair Display", serif;
font-weight: 500;
}
.awards-intro {
max-width: 460px;
margin: 30px 0 0;
color: #5B6168;
font-size: 1.05rem;
font-weight: 300;
line-height: 1.7;
}
.awards-proof {
display: flex;
gap: 44px;
margin: 40px 0;
padding: 24px 0;
border-block: 1px solid rgba(0, 0, 0, 0.12);
}
.awards-proof-item {
display: grid;
grid-template-columns: auto auto;
gap: 2px 12px;
align-items: center;
}
.awards-proof strong {
grid-row: 1 / 3;
color: #111111;
font-family: "Playfair Display", serif;
font-size: 2.8rem;
font-weight: 500;
line-height: 1;
}
.awards-proof span {
color: #5B6168;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
text-transform: uppercase;
}
.awards-years {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 6px;
background: #F4F6F8;
}
.awards-years button {
min-width: 76px;
height: 42px;
border: 0;
border-radius: 3px;
background: transparent;
color: #5B6168;
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0;
transition: background-color 180ms ease, color 180ms ease;
}
.awards-years button:hover {
color: #111111;
}
.awards-years button[aria-selected="true"] {
background: #E80000;
color: #ffffff;
}
.awards-cabinet {
min-width: 0;
padding: 28px 28px 24px;
border: 1px solid rgba(0, 0, 0, 0.12);
background: #F4F6F8;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}
.awards-cabinet-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.awards-cabinet-label {
color: #5B6168;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.awards-active-year {
display: flex;
align-items: center;
gap: 9px;
color: #111111;
font-size: 0.78rem;
font-weight: 700;
}
.awards-active-year::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #E80000;
box-shadow: 0 0 0 4px rgba(239, 3, 3, 0.12);
}
.awards-frames {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.awards-award {
min-width: 0;
margin: 0;
}
.awards-frame {
position: relative;
overflow: hidden;
aspect-ratio: 0.76;
padding: 7px;
border: 1px solid rgba(126, 1, 1, 0.28);
background: #ffffff;
}
.awards-frame::after {
content: "";
position: absolute;
inset: 7px;
border: 1px solid rgba(0, 0, 0, 0.1);
pointer-events: none;
}
.awards-frame picture {
width: 100%;
height: 100%;
display: block;
}
.awards-frame img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
opacity: 1;
transition: opacity 170ms ease, transform 350ms ease;
}
.awards-frame img.is-changing {
opacity: 0;
transform: scale(0.985);
}
.awards-award figcaption {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 13px;
color: #111111;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.awards-award figcaption span:last-child {
color: #7E0101;
}
.awards-cabinet-footer {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
color: #5B6168;
font-size: 0.7rem;
line-height: 1.4;
}
.awards-cabinet-footer::before {
content: "";
flex: 1;
height: 1px;
background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 980px) {
.awards-shell {
grid-template-columns: 1fr;
gap: 52px;
padding: 88px 0;
}
.awards-copy,
.awards-title,
.awards-intro {
max-width: 700px;
}
.awards-cabinet {
width: min(650px, 100%);
}
}
@media (max-width: 620px) {
.awards-shell {
width: min(100% - 40px, 520px);
gap: 40px;
padding: 64px 0;
}
.awards-eyebrow {
margin-bottom: 22px;
font-size: 0.66rem;
}
.awards-title {
font-size: clamp(2.75rem, 13vw, 3.6rem);
}
.awards-intro {
margin-top: 24px;
font-size: 0.96rem;
}
.awards-proof {
gap: 24px;
margin: 30px 0;
padding: 22px 0;
}
.awards-proof strong {
font-size: 2.35rem;
}
.awards-proof span {
font-size: 0.62rem;
}
.awards-years {
width: 100%;
}
.awards-years button {
min-width: 0;
}
.awards-cabinet {
padding: 18px 14px;
}
.awards-cabinet-top {
margin-bottom: 16px;
}
.awards-frames {
gap: 9px;
}
.awards-frame {
padding: 4px;
}
.awards-frame::after {
inset: 4px;
}
.awards-award figcaption {
display: block;
margin-top: 10px;
font-size: 0.57rem;
line-height: 1.55;
}
.awards-award figcaption span {
display: block;
}
.awards-cabinet-footer {
margin-top: 16px;
font-size: 0.62rem;
}
}
@media (prefers-reduced-motion: reduce) {
.awards-showcase *,
.awards-showcase *::before,
.awards-showcase *::after {
transition-duration: 0.01ms !important;
}
}

/* Why Ottawa chooses Gopher It */
.why-gopher {
--why-red: #E80000;
--why-red-dark: #7E0101;
--why-ink: #111111;
--why-muted: #5B6168;
--why-surface: #F4F6F8;
--why-line: rgba(0, 0, 0, 0.14);
overflow: hidden;
border-bottom: 1px solid var(--why-line);
background: var(--why-surface);
}
.why-gopher-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
padding: 96px 0 104px;
}
.why-gopher-heading {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.75fr);
gap: 80px;
align-items: end;
margin-bottom: 72px;
}
.why-gopher-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: var(--why-red-dark);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
.why-gopher-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: var(--why-red);
}
.why-gopher-title {
max-width: 620px;
margin: 0;
color: var(--why-ink);
font-size: clamp(3rem, 4.4vw, 4.35rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: 0;
}
.why-gopher-title em {
color: var(--why-red);
font-family: "Playfair Display", serif;
font-weight: 500;
}
.why-gopher-intro {
max-width: 530px;
margin: 0 0 4px;
color: var(--why-muted);
font-size: 1.05rem;
font-weight: 300;
line-height: 1.75;
}
.why-gopher-route {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.why-gopher-route::before,
.why-gopher-route::after {
content: "";
position: absolute;
top: 26px;
right: calc(10% - 2px);
left: calc(10% - 2px);
height: 2px;
}
.why-gopher-route::before {
background: var(--why-line);
}
.why-gopher-route::after {
background: var(--why-red);
transform: scaleX(0);
transform-origin: left;
transition: transform 1000ms cubic-bezier(0.65, 0, 0.35, 1);
}
.why-gopher.is-visible .why-gopher-route::after {
transform: scaleX(1);
}
.why-gopher-stop {
position: relative;
z-index: 1;
min-width: 0;
opacity: 0;
transform: translateY(14px);
transition: opacity 450ms ease, transform 450ms ease;
transition-delay: calc(var(--stop-index) * 120ms);
}
.why-gopher.is-visible .why-gopher-stop {
opacity: 1;
transform: translateY(0);
}
.why-gopher-marker {
width: 54px;
height: 54px;
display: grid;
place-items: center;
margin: 0 auto 26px;
border: 2px solid var(--why-red);
border-radius: 50%;
background: #ffffff;
color: var(--why-red);
box-shadow: 0 0 0 7px var(--why-surface);
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.why-gopher-marker .iconify {
font-size: 1.3rem;
}
.why-gopher-stop:hover .why-gopher-marker {
background: var(--why-red);
color: #ffffff;
transform: translateY(-4px);
}
.why-gopher-stop h3 {
margin: 0 0 10px;
color: var(--why-ink);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
}
.why-gopher-stop p {
margin: 0;
color: var(--why-muted);
font-size: 0.88rem;
font-weight: 300;
line-height: 1.65;
text-align: center;
}
@media (max-width: 980px) {
.why-gopher-shell {
padding: 80px 0 88px;
}
.why-gopher-heading {
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 60px;
}
.why-gopher-intro {
max-width: 700px;
}
.why-gopher-route {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 38px 40px;
}
.why-gopher-route::before,
.why-gopher-route::after {
display: none;
}
.why-gopher-marker {
margin-left: 0;
}
.why-gopher-stop h3,
.why-gopher-stop p {
text-align: left;
}
}
@media (max-width: 620px) {
.why-gopher-shell {
width: min(100% - 40px, 520px);
padding: 64px 0 72px;
}
.why-gopher-heading {
margin-bottom: 46px;
}
.why-gopher-eyebrow {
font-size: 0.66rem;
}
.why-gopher-title {
font-size: clamp(2.65rem, 12vw, 3.25rem);
}
.why-gopher-intro {
font-size: 0.96rem;
}
.why-gopher-route {
display: block;
}
.why-gopher-route::before {
top: 25px;
bottom: 25px;
left: 25px;
width: 2px;
height: auto;
display: block;
}
.why-gopher-stop {
min-height: 104px;
padding: 0 0 32px 80px;
}
.why-gopher-stop:last-child {
min-height: 54px;
padding-bottom: 0;
}
.why-gopher-marker {
position: absolute;
top: 0;
left: 0;
width: 52px;
height: 52px;
margin: 0;
box-shadow: 0 0 0 6px var(--why-surface);
}
.why-gopher-stop h3 {
padding-top: 2px;
font-size: 1rem;
}
.why-gopher-stop p {
font-size: 0.87rem;
}
}
@media (prefers-reduced-motion: reduce) {
.why-gopher-route::after {
transform: scaleX(1);
transition: none;
}
.why-gopher-stop {
opacity: 1;
transform: none;
transition: none;
}
}

/* Services switchboard */
.gopher-services {
--services-red: #E80000;
--services-red-dark: #7E0101;
--services-ink: #111111;
--services-muted: #5B6168;
--services-paper: #FFFFFF;
--services-surface: #F4F6F8;
--services-line: rgba(0, 0, 0, 0.12);
scroll-margin-top: 88px;
overflow: hidden;
padding: 96px 0;
border-top: 1px solid var(--services-line);
background: var(--services-paper);
}
.gopher-services * {
box-sizing: border-box;
}
.gopher-services-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-services-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 64px;
margin-bottom: 48px;
}
.gopher-services-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 18px;
color: var(--services-red-dark);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-services-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: var(--services-red);
}
.gopher-services-title {
margin: 0;
color: var(--services-ink);
font-size: clamp(3.2rem, 5vw, 4.75rem);
font-weight: 500;
line-height: 0.94;
}
.gopher-services-title em {
color: var(--services-red);
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-services-note {
max-width: 390px;
margin: 0;
color: var(--services-muted);
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
}
.gopher-switchboard {
display: grid;
grid-template-columns: minmax(270px, 0.62fr) minmax(0, 1.38fr);
min-height: 540px;
overflow: hidden;
border: 1px solid var(--services-line);
border-radius: 8px;
background: var(--services-surface);
box-shadow: 0 28px 65px rgba(0, 0, 0, 0.1);
}
.gopher-service-tabs {
display: flex;
flex-direction: column;
border-right: 1px solid var(--services-line);
background: var(--services-paper);
}
.gopher-service-tab-intro {
padding: 26px 26px 20px;
border-bottom: 1px solid var(--services-line);
color: var(--services-muted);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-service-tab {
position: relative;
flex: 1 1 0;
min-height: 108px;
display: flex;
align-items: center;
padding: 26px 54px 26px 26px;
border: 0;
border-bottom: 1px solid var(--services-line);
background: var(--services-paper);
color: var(--services-muted);
cursor: pointer;
font: inherit;
font-size: 1.12rem;
font-weight: 600;
line-height: 1.25;
text-align: left;
transition: background-color 180ms ease, color 180ms ease;
}
.gopher-service-tab::after {
content: "→";
position: absolute;
right: 24px;
color: var(--services-ink);
font-size: 1.1rem;
opacity: 0;
transform: translateX(-7px);
transition: opacity 180ms ease, transform 180ms ease;
}
.gopher-service-tab:hover,
.gopher-service-tab:focus-visible {
color: var(--services-ink);
background: #FAFAFA;
}
.gopher-service-tab:focus-visible {
z-index: 1;
outline: 3px solid rgba(239, 3, 3, 0.18);
outline-offset: -3px;
}
.gopher-service-tab[aria-selected="true"] {
color: var(--services-ink);
background: rgba(239, 3, 3, 0.045);
box-shadow: inset 5px 0 0 var(--services-red);
}
.gopher-service-tab[aria-selected="true"]::after {
opacity: 1;
transform: translateX(0);
}
.gopher-service-aside {
margin-top: auto;
padding: 24px 26px;
color: var(--services-muted);
font-size: 0.72rem;
line-height: 1.5;
}
.gopher-service-display {
min-width: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
}
.gopher-service-stage {
position: relative;
min-height: 410px;
overflow: hidden;
background: #ECEFF1;
}
.gopher-service-stage::before {
content: "";
position: absolute;
inset: 22px;
z-index: 3;
border: 1px solid rgba(0, 0, 0, 0.07);
pointer-events: none;
}
.gopher-service-topline {
position: absolute;
top: 38px;
right: 42px;
left: 42px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.gopher-service-kicker,
.gopher-service-status {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-service-kicker {
color: var(--services-muted);
}
.gopher-service-status {
display: flex;
align-items: center;
gap: 8px;
color: var(--services-ink);
}
.gopher-service-status::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--services-red);
box-shadow: 0 0 0 4px rgba(239, 3, 3, 0.12);
}
.gopher-service-scene {
position: absolute;
inset: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gopher-service-scene[data-active="true"] {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.gopher-service-scene svg {
width: 100%;
height: 100%;
display: block;
}
.gopher-service-road {
fill: none;
stroke: #FFFFFF;
stroke-linecap: round;
stroke-width: 25;
}
.gopher-service-road-edge {
fill: none;
stroke: rgba(0, 0, 0, 0.09);
stroke-linecap: round;
stroke-width: 1;
}
.gopher-service-route-base {
fill: none;
stroke: rgba(126, 1, 1, 0.13);
stroke-linecap: round;
stroke-width: 10;
}
.gopher-service-route {
fill: none;
stroke: var(--services-red);
stroke-linecap: round;
stroke-width: 5;
}
.gopher-service-node {
fill: var(--services-red);
stroke: #FFFFFF;
stroke-width: 5;
}
.gopher-service-destination {
fill: var(--services-ink);
stroke: #FFFFFF;
stroke-width: 5;
}
.gopher-service-marker {
filter: drop-shadow(0 8px 10px rgba(126, 1, 1, 0.22));
}
.gopher-service-marker-disc {
fill: var(--services-red);
stroke: #FFFFFF;
stroke-width: 5;
}
.gopher-service-marker-icon {
fill: none;
stroke: #FFFFFF;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.8;
}
.gopher-service-scene[data-active="true"] .gopher-service-same-marker {
animation: gopherServiceSameDay 5s ease-in-out infinite;
}
.gopher-service-scene[data-active="true"] .gopher-service-business-marker {
animation: gopherServiceBusiness 6s ease-in-out infinite;
}
.gopher-service-scene[data-active="true"] .gopher-service-retail-marker {
animation: gopherServiceRetail 5.4s ease-in-out infinite;
}
.gopher-service-scene[data-active="true"] .gopher-service-personal-marker {
animation: gopherServicePersonal 5.8s ease-in-out infinite;
}
.gopher-service-scene[data-active="true"] .gopher-service-route {
animation: gopherServiceRouteDraw 900ms ease-out both;
}
@keyframes gopherServiceSameDay {
0%, 10% { transform: translate(115px, 323px); }
45%, 55% { transform: translate(303px, 240px); }
90%, 100% { transform: translate(494px, 123px); }
}
@keyframes gopherServiceBusiness {
0%, 8% { transform: translate(125px, 326px); }
27%, 35% { transform: translate(260px, 93px); }
53%, 61% { transform: translate(444px, 91px); }
79%, 87% { transform: translate(531px, 244px); }
100% { transform: translate(125px, 326px); }
}
@keyframes gopherServiceRetail {
0%, 12% { transform: translate(126px, 290px); }
45%, 57% { transform: translate(350px, 205px); }
90%, 100% { transform: translate(590px, 126px); }
}
@keyframes gopherServicePersonal {
0%, 10% { transform: translate(118px, 306px); }
42%, 52% { transform: translate(345px, 176px); }
90%, 100% { transform: translate(594px, 246px); }
}
@keyframes gopherServiceRouteDraw {
from { stroke-dasharray: 900; stroke-dashoffset: 900; }
to { stroke-dasharray: 900; stroke-dashoffset: 0; }
}
.gopher-service-label {
position: absolute;
z-index: 4;
min-width: 114px;
padding: 11px 12px;
border: 1px solid var(--services-line);
border-radius: 5px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}
.gopher-service-label strong {
display: block;
font-size: 0.7rem;
}
.gopher-service-label span {
display: block;
margin-top: 4px;
color: var(--services-muted);
font-size: 0.6rem;
}
.gopher-service-label-a {
bottom: 34px;
left: 38px;
}
.gopher-service-label-b {
top: 80px;
right: 42px;
}
.gopher-service-panel {
min-height: 330px;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
gap: 48px;
align-items: start;
padding: 34px;
border-top: 1px solid var(--services-line);
background: var(--services-paper);
}
.gopher-service-number {
display: block;
margin-bottom: 8px;
color: var(--services-red-dark);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-service-panel-title {
margin: 0;
color: var(--services-ink);
font-size: 1.55rem;
font-weight: 600;
line-height: 1.2;
}
.gopher-service-lede,
.gopher-service-description {
max-width: 650px;
color: var(--services-muted);
font-size: 0.88rem;
font-weight: 300;
line-height: 1.65;
}
.gopher-service-lede {
margin: 14px 0 0;
color: var(--services-ink);
font-weight: 500;
}
.gopher-service-description {
margin: 12px 0 0;
}
.gopher-service-solves {
padding-left: 32px;
border-left: 1px solid var(--services-line);
}
.gopher-service-solves-label {
display: block;
margin-bottom: 14px;
color: var(--services-muted);
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-service-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.gopher-service-list li {
position: relative;
padding-left: 19px;
color: var(--services-ink);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
}
.gopher-service-list li::before {
content: "";
position: absolute;
top: 0.5em;
left: 0;
width: 7px;
height: 7px;
border: 2px solid var(--services-red);
border-radius: 50%;
}
.gopher-service-info-link {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 20px;
color: var(--services-red-dark);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.gopher-service-info-link .iconify {
font-size: 0.95rem;
transition: transform 180ms ease;
}
.gopher-service-info-link:hover,
.gopher-service-info-link:focus-visible {
color: var(--services-red);
}
.gopher-service-info-link:hover .iconify,
.gopher-service-info-link:focus-visible .iconify {
transform: translateX(3px);
}
.gopher-service-cta {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-top: 24px;
border-top: 1px solid var(--services-line);
}
.gopher-service-cta-copy {
margin: 0;
color: var(--services-ink);
font-size: 0.94rem;
font-weight: 700;
line-height: 1.4;
}
.gopher-service-cta-actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.gopher-service-cta-button {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 15px;
border-radius: 5px;
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.gopher-service-cta-button:hover,
.gopher-service-cta-button:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}
.gopher-service-cta-button-phone {
background: var(--services-red);
}
.gopher-service-cta-button-contact {
background: var(--services-ink);
}
@media (max-width: 900px) {
.gopher-services {
padding: 72px 0;
}
.gopher-services-heading {
display: grid;
gap: 22px;
margin-bottom: 36px;
}
.gopher-services-note {
max-width: 620px;
}
.gopher-switchboard {
grid-template-columns: 1fr;
}
.gopher-service-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-right: 0;
border-bottom: 1px solid var(--services-line);
}
.gopher-service-tab-intro,
.gopher-service-aside {
display: none;
}
.gopher-service-tab {
min-height: 88px;
justify-content: center;
padding: 28px 12px 14px;
border-bottom: 0;
text-align: center;
}
.gopher-service-tab + .gopher-service-tab {
border-left: 1px solid var(--services-line);
}
.gopher-service-tab::after {
display: none;
}
.gopher-service-tab[aria-selected="true"] {
box-shadow: inset 0 -4px 0 var(--services-red);
}
.gopher-service-panel {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 540px) {
.gopher-services-shell {
width: min(100% - 40px, 480px);
}
.gopher-services-title {
font-size: 2.9rem;
}
.gopher-service-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gopher-service-tab {
min-height: 88px;
padding: 16px;
font-size: 0.78rem;
}
.gopher-service-tab:nth-of-type(3),
.gopher-service-tab:nth-of-type(4) {
border-top: 1px solid var(--services-line);
}
.gopher-service-stage {
min-height: 315px;
}
.gopher-service-topline {
top: 28px;
right: 28px;
left: 28px;
}
.gopher-service-kicker {
display: none;
}
.gopher-service-status {
margin-left: auto;
}
.gopher-service-label {
min-width: 92px;
padding: 8px 9px;
}
.gopher-service-label-a {
bottom: 22px;
left: 22px;
}
.gopher-service-label-b {
top: 60px;
right: 24px;
}
.gopher-service-panel {
grid-template-columns: 1fr;
gap: 18px;
padding: 24px;
}
.gopher-service-solves {
padding: 16px 0 0;
border-top: 1px solid var(--services-line);
border-left: 0;
}
.gopher-service-cta {
grid-column: 1;
align-items: flex-start;
flex-direction: column;
}
.gopher-service-cta-actions {
width: 100%;
}
.gopher-service-cta-button {
flex: 1;
padding-inline: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-services *,
.gopher-services *::before,
.gopher-services *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

/* About and community */
.gopher-community {
scroll-margin-top: 88px;
overflow: hidden;
padding: 112px 0 104px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: #F3F5F6;
color: #111111;
}
.gopher-community * {
box-sizing: border-box;
}
.gopher-community-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-community-layout {
display: grid;
grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
gap: clamp(48px, 6vw, 88px);
align-items: center;
}
.gopher-community-copy {
max-width: 455px;
}
.gopher-community-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
color: #7E0101;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-community-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: #E80000;
}
.gopher-community-title {
margin: 0;
font-size: clamp(3rem, 4.4vw, 4.35rem);
font-weight: 500;
line-height: 0.98;
}
.gopher-community-title em {
display: block;
color: #E80000;
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-community-lede {
margin: 30px 0 0;
color: #4F565D;
font-size: 1.05rem;
font-weight: 300;
line-height: 1.75;
}
.gopher-community-statement {
position: relative;
margin: 34px 0 0;
padding: 22px 0 0 28px;
border-top: 1px solid rgba(0, 0, 0, 0.13);
color: #111111;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
.gopher-community-statement::before {
content: "";
position: absolute;
top: 22px;
bottom: 2px;
left: 0;
width: 4px;
background: #E80000;
}
.gopher-community-mosaic {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(190px, 0.75fr);
grid-template-rows: repeat(2, minmax(0, 240px));
gap: 12px;
}
.gopher-community-photo {
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
margin: 0;
border-radius: 6px;
background: #DDE1E3;
}
.gopher-community-photo-main {
grid-row: 1 / 3;
}
.gopher-community-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gopher-community-photo-main img {
object-position: 54% center;
}
.gopher-community-photo-kitchen img {
object-position: center center;
}
.gopher-community-photo-shop img {
object-position: center center;
}
.gopher-community-photo::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 46%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.68), transparent);
pointer-events: none;
}
.gopher-community-photo:hover img {
transform: scale(1.035);
}
.gopher-community-photo figcaption {
position: absolute;
right: 18px;
bottom: 16px;
left: 18px;
z-index: 1;
display: flex;
align-items: end;
justify-content: space-between;
gap: 12px;
color: #FFFFFF;
}
.gopher-community-photo figcaption strong {
font-size: 0.86rem;
font-weight: 600;
}
.gopher-community-photo figcaption span {
font-size: 0.63rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-community-rail-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin-top: 68px;
padding-top: 28px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.gopher-community-rail-head h3 {
margin: 0;
font-size: 1.35rem;
font-weight: 600;
}
.gopher-community-rail-head p {
margin: 0;
color: #656B71;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
}
.gopher-community-rail {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 20px;
}
.gopher-community-tile {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
margin: 0;
border-radius: 5px;
background: #DDE1E3;
}
.gopher-community-tile img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gopher-community-tile:hover img {
transform: scale(1.04);
}
.gopher-community-tile::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
}
.gopher-community-tile figcaption {
position: absolute;
right: 14px;
bottom: 12px;
left: 14px;
z-index: 1;
color: #FFFFFF;
font-size: 0.72rem;
font-weight: 600;
}
@media (max-width: 980px) {
.gopher-community {
padding: 88px 0;
}
.gopher-community-layout {
grid-template-columns: 1fr;
}
.gopher-community-copy {
max-width: 720px;
}
.gopher-community-mosaic {
grid-template-rows: repeat(2, minmax(0, 220px));
}
}
@media (max-width: 640px) {
.gopher-community {
padding: 72px 0;
}
.gopher-community-shell {
width: min(100% - 40px, 480px);
}
.gopher-community-title {
font-size: 2.85rem;
}
.gopher-community-lede {
font-size: 0.98rem;
}
.gopher-community-mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: 340px 170px;
}
.gopher-community-photo-main {
grid-column: 1 / 3;
grid-row: 1;
}
.gopher-community-photo-kitchen,
.gopher-community-photo-shop {
grid-row: 2;
}
.gopher-community-photo figcaption {
right: 12px;
bottom: 12px;
left: 12px;
display: block;
}
.gopher-community-photo figcaption span {
display: block;
margin-top: 3px;
}
.gopher-community-rail-head {
display: block;
margin-top: 48px;
}
.gopher-community-rail-head p {
margin-top: 8px;
}
.gopher-community-rail {
grid-template-columns: repeat(4, 76vw);
overflow-x: auto;
margin-right: -20px;
padding-right: 20px;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.gopher-community-rail::-webkit-scrollbar {
display: none;
}
.gopher-community-tile {
scroll-snap-align: start;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-community img {
transition-duration: 0.01ms !important;
}
}

/* Credentials */
.gopher-credentials {
--credentials-red: #E80000;
--credentials-red-dark: #7E0101;
--credentials-ink: #111111;
--credentials-muted: #5B6168;
--credentials-surface: #F4F6F8;
--credentials-line: rgba(0, 0, 0, 0.12);
scroll-margin-top: 88px;
overflow: hidden;
padding: 104px 0;
border-top: 1px solid var(--credentials-line);
background: #ffffff;
}
.gopher-credentials * {
box-sizing: border-box;
}
.gopher-credentials-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-credentials-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
gap: 80px;
align-items: end;
margin-bottom: 64px;
}
.gopher-credentials-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
color: var(--credentials-red-dark);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-credentials-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: var(--credentials-red);
}
.gopher-credentials-title {
margin: 0;
color: var(--credentials-ink);
font-size: clamp(3rem, 4.4vw, 4.35rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: 0;
}
.gopher-credentials-title em {
color: var(--credentials-red);
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-credentials-intro {
max-width: 470px;
margin: 0 0 4px;
color: var(--credentials-muted);
font-size: 1.02rem;
font-weight: 300;
line-height: 1.72;
}
.gopher-credentials-ledger {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-block: 1px solid var(--credentials-line);
}
.gopher-credential {
position: relative;
min-height: 168px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 22px;
align-content: center;
padding: 30px 42px 30px 0;
border-bottom: 1px solid var(--credentials-line);
transition: background-color 180ms ease;
}
.gopher-credential:nth-child(even) {
padding-right: 0;
padding-left: 42px;
border-left: 1px solid var(--credentials-line);
}
.gopher-credential:nth-last-child(-n + 2) {
border-bottom: 0;
}
.gopher-credential:hover {
background: linear-gradient(90deg, rgba(239, 3, 3, 0.035), transparent 72%);
}
.gopher-credential-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 1px solid rgba(126, 1, 1, 0.28);
border-radius: 50%;
background: var(--credentials-surface);
color: var(--credentials-red);
transition: background-color 180ms ease, color 180ms ease;
}
.gopher-credential:hover .gopher-credential-icon {
background: var(--credentials-red);
color: #ffffff;
}
.gopher-credential-icon .iconify {
font-size: 1.25rem;
}
.gopher-credential-copy {
align-self: center;
}
.gopher-credential-copy h3 {
margin: 0 0 8px;
color: var(--credentials-ink);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}
.gopher-credential-copy p {
margin: 0;
color: var(--credentials-muted);
font-size: 0.88rem;
font-weight: 300;
line-height: 1.6;
}
.gopher-credentials-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-top: 26px;
color: var(--credentials-muted);
font-size: 0.74rem;
line-height: 1.5;
}
.gopher-credentials-established {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--credentials-ink);
font-weight: 700;
}
.gopher-credentials-established::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--credentials-red);
box-shadow: 0 0 0 4px rgba(239, 3, 3, 0.1);
}
@media (max-width: 900px) {
.gopher-credentials {
padding: 80px 0;
}
.gopher-credentials-heading {
grid-template-columns: 1fr;
gap: 26px;
margin-bottom: 50px;
}
.gopher-credentials-intro {
max-width: 700px;
}
.gopher-credentials-ledger {
grid-template-columns: 1fr;
}
.gopher-credential,
.gopher-credential:nth-child(even) {
padding: 28px 0;
border-right: 0;
border-bottom: 1px solid var(--credentials-line);
border-left: 0;
}
.gopher-credential:nth-last-child(2) {
border-bottom: 1px solid var(--credentials-line);
}
.gopher-credential:last-child {
border-bottom: 0;
}
}
@media (max-width: 620px) {
.gopher-credentials {
padding: 64px 0 70px;
}
.gopher-credentials-shell {
width: min(100% - 40px, 520px);
}
.gopher-credentials-heading {
margin-bottom: 40px;
}
.gopher-credentials-eyebrow {
font-size: 0.66rem;
}
.gopher-credentials-title {
font-size: clamp(2.65rem, 12vw, 3.25rem);
}
.gopher-credentials-intro {
font-size: 0.96rem;
}
.gopher-credential {
min-height: 0;
grid-template-columns: 46px minmax(0, 1fr);
gap: 18px;
}
.gopher-credential-icon {
width: 46px;
height: 46px;
}
.gopher-credential-copy p {
font-size: 0.84rem;
}
.gopher-credentials-foot {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
}

/* Areas served */
.gopher-areas {
--areas-red: #E80000;
--areas-red-dark: #7E0101;
--areas-ink: #111111;
--areas-muted: #5B6168;
--areas-paper: #FFFFFF;
--areas-surface: #F4F6F8;
--areas-line: rgba(0, 0, 0, 0.12);
scroll-margin-top: 88px;
overflow: hidden;
padding: 104px 0;
border-top: 1px solid var(--areas-line);
background: var(--areas-surface);
}
.gopher-areas * {
box-sizing: border-box;
}
.gopher-areas-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-areas-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 0.62fr);
gap: 80px;
align-items: end;
margin-bottom: 54px;
}
.gopher-areas-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
color: var(--areas-red-dark);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-areas-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: var(--areas-red);
}
.gopher-areas-title {
margin: 0;
color: var(--areas-ink);
font-size: clamp(3rem, 4.4vw, 4.35rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: 0;
}
.gopher-areas-title em {
color: var(--areas-red);
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-areas-intro {
max-width: 500px;
margin: 0 0 4px;
color: var(--areas-muted);
font-size: 1.02rem;
font-weight: 300;
line-height: 1.72;
}
.gopher-areas-board {
display: grid;
grid-template-columns: minmax(390px, 0.82fr) minmax(0, 1.18fr);
min-height: 500px;
overflow: hidden;
border: 1px solid var(--areas-line);
border-radius: 8px;
background: var(--areas-paper);
box-shadow: 0 28px 65px rgba(0, 0, 0, 0.09);
}
.gopher-areas-map {
position: relative;
min-height: 500px;
overflow: hidden;
border-right: 1px solid var(--areas-line);
background-color: #E9EDEF;
background-image:
linear-gradient(rgba(255, 255, 255, 0.65) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.65) 1px, transparent 1px);
background-size: 42px 42px;
isolation: isolate;
}
.gopher-areas-map::before,
.gopher-areas-map::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
border: 1px solid rgba(239, 3, 3, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.gopher-areas-map::before {
width: 250px;
height: 250px;
}
.gopher-areas-map::after {
width: 390px;
height: 390px;
}
.gopher-areas-map svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.gopher-areas-map-road {
fill: none;
stroke: rgba(255, 255, 255, 0.96);
stroke-linecap: round;
stroke-width: 18;
}
.gopher-areas-map-road-edge {
fill: none;
stroke: rgba(0, 0, 0, 0.08);
stroke-linecap: round;
stroke-width: 1;
}
.gopher-areas-map-route {
fill: none;
stroke: var(--areas-red);
stroke-dasharray: 7 9;
stroke-linecap: round;
stroke-width: 3;
animation: gopherAreasRoute 18s linear infinite;
}
@keyframes gopherAreasRoute {
to { stroke-dashoffset: -320; }
}
.gopher-areas-core {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: grid;
place-items: center;
transform: translate(-50%, -50%);
}
.gopher-areas-core-dot {
width: 26px;
height: 26px;
border: 6px solid #ffffff;
border-radius: 50%;
background: var(--areas-red);
box-shadow: 0 0 0 1px rgba(126, 1, 1, 0.25), 0 8px 20px rgba(126, 1, 1, 0.24);
animation: gopherAreasPulse 2.6s ease-out infinite;
}
.gopher-areas-core-label {
min-width: 112px;
margin-top: 9px;
padding: 8px 10px;
border: 1px solid var(--areas-line);
border-radius: 4px;
background: rgba(255, 255, 255, 0.94);
font-size: 0.68rem;
font-weight: 700;
text-align: center;
}
@keyframes gopherAreasPulse {
0% { box-shadow: 0 0 0 0 rgba(239, 3, 3, 0.24), 0 8px 20px rgba(126, 1, 1, 0.24); }
75%, 100% { box-shadow: 0 0 0 20px rgba(239, 3, 3, 0), 0 8px 20px rgba(126, 1, 1, 0.24); }
}
.gopher-areas-pin {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 7px;
padding: 6px 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
background: rgba(255, 255, 255, 0.9);
color: var(--areas-ink);
font-size: 0.62rem;
font-weight: 700;
box-shadow: 0 7px 16px rgba(0, 0, 0, 0.06);
}
.gopher-areas-pin::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--areas-red);
}
.gopher-areas-pin-dunrobin { top: 9%; left: 11%; }
.gopher-areas-pin-carp { top: 30%; left: 7%; }
.gopher-areas-pin-kanata { top: 50%; left: 13%; }
.gopher-areas-pin-orleans { top: 19%; right: 8%; }
.gopher-areas-pin-barrhaven { bottom: 20%; left: 19%; }
.gopher-areas-pin-manotick { bottom: 8%; left: 47%; }
.gopher-areas-pin-greely { right: 8%; bottom: 17%; }
.gopher-areas-directory {
display: flex;
flex-direction: column;
padding: 38px 40px 34px;
}
.gopher-areas-directory-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 24px;
border-bottom: 1px solid var(--areas-line);
}
.gopher-areas-directory-head h3 {
margin: 0;
color: var(--areas-ink);
font-size: 1.15rem;
font-weight: 700;
}
.gopher-areas-directory-head span {
color: var(--areas-red-dark);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-areas-lists {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
padding: 30px 0 22px;
}
.gopher-areas-list {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.gopher-areas-list li {
position: relative;
padding-left: 17px;
color: var(--areas-ink);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
}
.gopher-areas-list li::before {
content: "";
position: absolute;
top: 0.48em;
left: 0;
width: 6px;
height: 6px;
border: 2px solid var(--areas-red);
border-radius: 50%;
}
.gopher-areas-directory-foot {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 22px;
border-top: 1px solid var(--areas-line);
color: var(--areas-muted);
font-size: 0.72rem;
line-height: 1.45;
}
.gopher-areas-directory-foot .iconify {
flex: 0 0 auto;
color: var(--areas-red);
font-size: 1rem;
}
.gopher-areas-arrangement {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
margin-top: 28px;
padding: 26px 28px;
border: 1px solid var(--areas-line);
border-left: 4px solid var(--areas-red);
border-radius: 6px;
background: var(--areas-paper);
}
.gopher-areas-arrangement p {
max-width: 790px;
margin: 0;
color: var(--areas-muted);
font-size: 0.86rem;
font-weight: 300;
line-height: 1.65;
}
.gopher-areas-arrangement strong {
color: var(--areas-ink);
font-weight: 700;
}
.gopher-areas-actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.gopher-areas-action {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 16px;
border-radius: 5px;
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.gopher-areas-action:hover,
.gopher-areas-action:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}
.gopher-areas-action-phone {
background: var(--areas-red);
}
.gopher-areas-action-contact {
background: var(--areas-ink);
}
@media (max-width: 980px) {
.gopher-areas {
padding: 80px 0;
}
.gopher-areas-heading {
grid-template-columns: 1fr;
gap: 26px;
margin-bottom: 46px;
}
.gopher-areas-intro {
max-width: 700px;
}
.gopher-areas-board {
grid-template-columns: 1fr;
}
.gopher-areas-map {
min-height: 440px;
border-right: 0;
border-bottom: 1px solid var(--areas-line);
}
.gopher-areas-arrangement {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 620px) {
.gopher-areas {
padding: 64px 0 70px;
}
.gopher-areas-shell {
width: min(100% - 40px, 520px);
}
.gopher-areas-eyebrow {
font-size: 0.66rem;
}
.gopher-areas-title {
font-size: clamp(2.65rem, 12vw, 3.25rem);
}
.gopher-areas-intro {
font-size: 0.96rem;
}
.gopher-areas-map {
min-height: 350px;
}
.gopher-areas-map::before {
width: 190px;
height: 190px;
}
.gopher-areas-map::after {
width: 300px;
height: 300px;
}
.gopher-areas-pin {
font-size: 0.56rem;
}
.gopher-areas-pin-dunrobin { top: 7%; left: 5%; }
.gopher-areas-pin-carp { top: 28%; left: 3%; }
.gopher-areas-pin-kanata { top: 51%; left: 5%; }
.gopher-areas-pin-orleans { top: 13%; right: 3%; }
.gopher-areas-pin-barrhaven { bottom: 17%; left: 7%; }
.gopher-areas-pin-manotick { bottom: 4%; left: 39%; }
.gopher-areas-pin-greely { right: 3%; bottom: 15%; }
.gopher-areas-directory {
padding: 28px 24px;
}
.gopher-areas-directory-head {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}
.gopher-areas-lists {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 22px;
}
.gopher-areas-list:last-child {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gopher-areas-arrangement {
padding: 24px 20px;
}
.gopher-areas-actions {
width: 100%;
}
.gopher-areas-action {
flex: 1;
padding-inline: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-areas-map-route,
.gopher-areas-core-dot {
animation: none !important;
}
}

/* Testimonials */
.gopher-testimonials {
scroll-margin-top: 88px;
overflow: hidden;
padding: 104px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: #FFFFFF;
color: #111111;
}
.gopher-testimonials * {
box-sizing: border-box;
}
.gopher-testimonials-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-testimonials-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
gap: 64px;
align-items: end;
margin-bottom: 50px;
}
.gopher-testimonials-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
color: #7E0101;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-testimonials-eyebrow::before {
content: "";
width: 40px;
height: 2px;
background: #E80000;
}
.gopher-testimonials-title {
max-width: 720px;
margin: 0;
font-size: clamp(3rem, 4.6vw, 4.6rem);
font-weight: 500;
line-height: 0.98;
}
.gopher-testimonials-title em {
color: #E80000;
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-testimonials-intro {
margin: 0;
color: #5B6168;
font-size: 1rem;
font-weight: 300;
line-height: 1.65;
}
.gopher-testimonial-board {
display: grid;
grid-template-columns: minmax(290px, 0.7fr) minmax(0, 1.3fr);
min-height: 510px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
box-shadow: 0 28px 65px rgba(0, 0, 0, 0.08);
}
.gopher-testimonial-selectors {
display: flex;
flex-direction: column;
border-right: 1px solid rgba(0, 0, 0, 0.12);
background: #F5F6F7;
}
.gopher-testimonial-selector-label {
padding: 24px 26px 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: #656B71;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-testimonial-selector {
position: relative;
min-height: 98px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 18px 48px 18px 26px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: transparent;
color: #656B71;
cursor: pointer;
font: inherit;
text-align: left;
transition: color 180ms ease, background-color 180ms ease;
}
.gopher-testimonial-selector::after {
content: "→";
position: absolute;
right: 22px;
color: #111111;
opacity: 0;
transform: translateX(-6px);
transition: opacity 180ms ease, transform 180ms ease;
}
.gopher-testimonial-selector:hover,
.gopher-testimonial-selector:focus-visible {
color: #111111;
background: #FFFFFF;
}
.gopher-testimonial-selector:focus-visible {
z-index: 1;
outline: 3px solid rgba(239, 3, 3, 0.16);
outline-offset: -3px;
}
.gopher-testimonial-selector[aria-selected="true"] {
color: #111111;
background: #FFFFFF;
box-shadow: inset 5px 0 0 #E80000;
}
.gopher-testimonial-selector[aria-selected="true"]::after {
opacity: 1;
transform: translateX(0);
}
.gopher-testimonial-initials {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.13);
border-radius: 50%;
background: #FFFFFF;
color: #7E0101;
font-size: 0.66rem;
font-weight: 700;
}
.gopher-testimonial-selector strong,
.gopher-testimonial-selector small {
display: block;
}
.gopher-testimonial-selector strong {
font-size: 0.92rem;
font-weight: 600;
}
.gopher-testimonial-selector small {
margin-top: 4px;
color: #777D82;
font-size: 0.7rem;
}
.gopher-testimonial-mix {
margin-top: auto;
padding: 22px 26px;
color: #656B71;
font-size: 0.7rem;
line-height: 1.5;
}
.gopher-testimonial-feature {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(46px, 6vw, 82px);
background: #FFFFFF;
}
.gopher-testimonial-mark {
position: absolute;
top: 30px;
right: 42px;
color: rgba(239, 3, 3, 0.1);
font-family: "Playfair Display", serif;
font-size: 9rem;
line-height: 1;
pointer-events: none;
}
.gopher-testimonial-review-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 26px;
}
.gopher-testimonial-stars {
display: inline-flex;
align-items: center;
gap: 4px;
color: #F4B400;
}
.gopher-testimonial-stars .iconify {
width: 17px;
height: 17px;
fill: currentColor;
stroke: currentColor;
}
.gopher-testimonial-google {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 44px;
color: #5B6168;
font-size: 0.7rem;
font-weight: 700;
}
.gopher-testimonial-google .iconify {
font-size: 1rem;
}
.gopher-testimonial-quote {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0;
font-family: "Playfair Display", serif;
font-size: clamp(1.35rem, 1.9vw, 1.9rem);
font-style: italic;
font-weight: 400;
line-height: 1.48;
}
.gopher-testimonial-quote.is-changing,
.gopher-testimonial-attribution.is-changing {
opacity: 0;
transform: translateY(6px);
}
.gopher-testimonial-quote,
.gopher-testimonial-attribution {
transition: opacity 180ms ease, transform 240ms ease;
}
.gopher-testimonial-attribution {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 42px;
padding-top: 24px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.gopher-testimonial-person strong,
.gopher-testimonial-person span {
display: block;
}
.gopher-testimonial-person strong {
font-size: 0.95rem;
font-weight: 700;
}
.gopher-testimonial-person span {
margin-top: 5px;
color: #656B71;
font-size: 0.76rem;
}
.gopher-testimonial-theme {
flex: 0 0 auto;
padding-left: 24px;
border-left: 1px solid rgba(0, 0, 0, 0.12);
text-align: right;
}
.gopher-testimonial-theme span,
.gopher-testimonial-theme strong {
display: block;
}
.gopher-testimonial-theme span {
color: #777D82;
font-size: 0.58rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-testimonial-theme strong {
margin-top: 5px;
color: #7E0101;
font-size: 0.72rem;
font-weight: 700;
}
@media (max-width: 860px) {
.gopher-testimonials {
padding: 80px 0;
}
.gopher-testimonials-heading {
grid-template-columns: 1fr;
gap: 22px;
}
.gopher-testimonials-intro {
max-width: 620px;
}
.gopher-testimonial-board {
grid-template-columns: 1fr;
}
.gopher-testimonial-selectors {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.gopher-testimonial-selector-label,
.gopher-testimonial-mix {
display: none;
}
.gopher-testimonial-selector {
min-height: 96px;
display: flex;
justify-content: center;
padding: 14px 8px;
border-bottom: 0;
text-align: center;
}
.gopher-testimonial-selector + .gopher-testimonial-selector {
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.gopher-testimonial-selector::after,
.gopher-testimonial-selector small {
display: none;
}
.gopher-testimonial-selector[aria-selected="true"] {
box-shadow: inset 0 -4px 0 #E80000;
}
.gopher-testimonial-initials {
width: 42px;
height: 42px;
}
.gopher-testimonial-selector strong {
display: none;
}
}
@media (max-width: 540px) {
.gopher-testimonials-shell {
width: min(100% - 40px, 480px);
}
.gopher-testimonials-title {
font-size: 2.9rem;
}
.gopher-testimonial-selector {
min-height: 76px;
}
.gopher-testimonial-feature {
min-height: 500px;
justify-content: flex-start;
padding: 42px 24px 30px;
}
.gopher-testimonial-mark {
top: 14px;
right: 20px;
font-size: 7rem;
}
.gopher-testimonial-quote {
font-size: 1.2rem;
line-height: 1.55;
}
.gopher-testimonial-attribution {
display: block;
margin-top: auto;
}
.gopher-testimonial-theme {
display: inline-block;
margin-top: 18px;
padding-left: 0;
border-left: 0;
text-align: left;
}
.gopher-testimonial-review-meta {
margin-bottom: 22px;
}
.gopher-testimonial-stars .iconify {
width: 15px;
height: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-testimonials * {
transition-duration: 0.01ms !important;
}
}

/* Conversion calls to action */
.gopher-cta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 28px;
padding: 24px 28px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-left: 4px solid #E80000;
border-radius: 6px;
background: #F7F8F9;
}
.gopher-cta-row-copy span,
.gopher-cta-row-copy strong {
display: block;
}
.gopher-cta-row-copy span {
margin-bottom: 4px;
color: #656B71;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-cta-row-copy strong {
font-size: 1.22rem;
font-weight: 600;
line-height: 1.3;
}
.gopher-cta-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.gopher-cta-button {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 18px;
border: 1px solid transparent;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.gopher-cta-button:hover,
.gopher-cta-button:focus-visible {
transform: translateY(-2px);
}
.gopher-cta-button:focus-visible {
outline: 3px solid rgba(239, 3, 3, 0.2);
outline-offset: 3px;
}
.gopher-cta-button-primary {
background: #E80000;
color: #FFFFFF;
box-shadow: 0 9px 20px rgba(126, 1, 1, 0.16);
}
.gopher-cta-button-primary:hover,
.gopher-cta-button-primary:focus-visible {
background: #CF0202;
box-shadow: 0 13px 26px rgba(126, 1, 1, 0.22);
}
.gopher-cta-button-secondary {
background: #111111;
color: #FFFFFF;
box-shadow: 0 9px 20px rgba(0, 0, 0, 0.11);
}
.gopher-cta-button-secondary:hover,
.gopher-cta-button-secondary:focus-visible {
background: #2A2A2A;
box-shadow: 0 13px 26px rgba(0, 0, 0, 0.17);
}
.gopher-testimonials .gopher-cta-row {
margin-top: 34px;
}
.gopher-final-cta {
scroll-margin-top: 88px;
padding: 112px 0 104px;
border-block: 1px solid rgba(0, 0, 0, 0.1);
background: #F3F5F6;
color: #111111;
text-align: center;
}
.gopher-final-cta-shell {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-final-cta-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 22px;
color: #7E0101;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-final-cta-eyebrow::before,
.gopher-final-cta-eyebrow::after {
content: "";
width: 34px;
height: 2px;
background: #E80000;
}
.gopher-final-cta-title {
max-width: 860px;
margin: 0;
margin-inline: auto;
font-size: clamp(3.1rem, 4.8vw, 4.75rem);
font-weight: 500;
line-height: 0.98;
}
.gopher-final-cta-title em {
color: #E80000;
font-family: "Playfair Display", serif;
font-weight: 500;
}
.gopher-final-cta-copy {
max-width: 720px;
margin: 28px auto 0;
color: #5B6168;
font-size: 1.02rem;
font-weight: 300;
line-height: 1.65;
}
.gopher-final-cta-prep {
margin: 20px 0 0;
color: #111111;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.55;
}
.gopher-final-cta-details {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 24px 0 0;
padding: 24px 0;
border-block: 1px solid rgba(0, 0, 0, 0.12);
}
.gopher-final-cta-detail {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 14px;
color: #111111;
font-size: 0.76rem;
font-weight: 600;
line-height: 1.35;
}
.gopher-final-cta-detail + .gopher-final-cta-detail {
border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.gopher-final-cta-detail .iconify {
flex: 0 0 auto;
color: #E80000;
font-size: 1.05rem;
}
.gopher-final-cta-prompt {
margin: 30px 0 0;
color: #111111;
font-size: 0.94rem;
font-weight: 700;
line-height: 1.5;
}
.gopher-final-cta .gopher-cta-actions {
justify-content: center;
margin-top: 24px;
}
.gopher-final-cta .gopher-cta-button {
min-height: 52px;
padding-inline: 24px;
font-size: 0.86rem;
}

/* Footer */
.gopher-footer {
padding: 72px 0 34px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background: #FFFFFF;
color: #111111;
}
.gopher-footer-shell {
width: min(1240px, calc(100% - 48px));
margin: 0 auto;
}
.gopher-footer-main {
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(250px, 0.72fr) minmax(250px, 0.62fr);
gap: 70px;
padding-bottom: 52px;
}
.gopher-footer-logo {
width: 205px;
height: auto;
display: block;
margin-bottom: 24px;
}
.gopher-footer-intro {
max-width: 410px;
margin: 0;
color: #5B6168;
font-size: 0.88rem;
font-weight: 300;
line-height: 1.7;
}
.gopher-footer h3 {
margin: 0 0 22px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
.gopher-footer-details,
.gopher-footer-hours {
display: grid;
gap: 13px;
margin: 0;
padding: 0;
list-style: none;
}
.gopher-footer-details li,
.gopher-footer-details a,
.gopher-footer-hours li {
color: #5B6168;
font-size: 0.82rem;
font-weight: 300;
line-height: 1.55;
text-decoration: none;
}
.gopher-footer-details a:hover,
.gopher-footer-details a:focus-visible {
color: #7E0101;
}
.gopher-footer-detail {
display: grid;
grid-template-columns: 19px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.gopher-footer-detail .iconify {
margin-top: 2px;
color: #E80000;
font-size: 0.95rem;
}
.gopher-footer-hours li {
display: flex;
justify-content: space-between;
gap: 20px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.gopher-footer-hours strong {
color: #111111;
font-weight: 600;
}
.gopher-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding-top: 28px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.gopher-footer-bottom p {
margin: 0;
color: #5B6168;
font-size: 0.76rem;
line-height: 1.5;
}
.gopher-footer-bottom a {
color: #111111;
font-weight: 700;
text-decoration: none;
}
.gopher-footer-bottom a:hover,
.gopher-footer-bottom a:focus-visible {
color: #7E0101;
}
.gopher-footer-links {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.gopher-footer-links a {
font-size: 0.76rem;
}
@media (max-width: 980px) {
.gopher-footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
}
.gopher-footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 680px) {
.gopher-cta-row {
display: block;
padding: 22px;
}
.gopher-cta-actions {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 20px;
}
.gopher-cta-button {
padding: 0 12px;
}
.gopher-final-cta {
padding: 88px 0;
}
.gopher-final-cta-shell {
width: min(100% - 40px, 520px);
}
.gopher-final-cta-title {
font-size: 3rem;
}
.gopher-final-cta-details {
grid-template-columns: 1fr;
padding: 0;
}
.gopher-final-cta-detail {
justify-content: flex-start;
padding: 14px 8px;
}
.gopher-final-cta-detail + .gopher-final-cta-detail {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-left: 0;
}
.gopher-final-cta .gopher-cta-actions {
display: grid;
grid-template-columns: 1fr;
}
.gopher-footer {
padding-top: 56px;
}
.gopher-footer-shell {
width: min(100% - 40px, 520px);
}
.gopher-footer-main {
grid-template-columns: 1fr;
gap: 42px;
padding-bottom: 42px;
}
.gopher-footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.gopher-cta-button {
transition-duration: 0.01ms !important;
}
}

.why-gopher-stop--0 { --stop-index: 0; }
.why-gopher-stop--1 { --stop-index: 1; }
.why-gopher-stop--2 { --stop-index: 2; }
.why-gopher-stop--3 { --stop-index: 3; }
.why-gopher-stop--4 { --stop-index: 4; }