/* ==========================================================================
North Town Cycle Repairs — Site Stylesheet
==========================================================================
Reference stylesheet for pages matching final_site_preview.html.
Usage:
...
...
...
Asset paths assume CSS lives in /site/ with images in /input/.
========================================================================== */
:root {
/* Brand palette */
--ntcr-teal: #3A8A85;
--ntcr-teal-dark: #2C6E6A;
--ntcr-teal-hover: #2e6e68;
--ntcr-teal-nav-hover: #3d8a82;
--ntcr-cream: #F5F2ED;
--ntcr-cream-warm: #E8E0D0;
--ntcr-cream-accent: #D4C9B5;
--ntcr-black: #1A1A1A;
--ntcr-charcoal: #2c2c2c;
--ntcr-text: #3D3D3D;
--ntcr-muted: #6B6B6B;
--ntcr-white: #FFFFFF;
/* Typography */
--ntcr-font-display: 'Oswald', sans-serif;
--ntcr-font-body: 'Lato', sans-serif;
--ntcr-font-ui: 'Montserrat', sans-serif;
--ntcr-font-hero-headline: 'Arial Black', 'Arial', sans-serif;
--ntcr-font-hero-sub: 'Georgia', serif;
--ntcr-font-hero-ui: 'Arial', sans-serif;
/* Layout */
--ntcr-container-wide: 1320px;
--ntcr-container-services: 960px;
--ntcr-container-gallery: 1120px;
--ntcr-container-cta: 800px;
--ntcr-section-y: 80px;
--ntcr-gutter: 48px;
--ntcr-gutter-mobile: 24px;
/* Assets (relative to this file in /site/) */
--ntcr-hero-bg: url("/input/hero_reference.jpg");
}
/* ==========================================================================
1. Base & preview shell
========================================================================== */
/* preview shell */
html {
scroll-behavior: smooth;
overscroll-behavior: none;
}
body {
margin: 0;
overscroll-behavior: none;
}
.site-preview-root {
display: block;
}
/* Keep hero/nav appearance stable even if sections toggle page theme/color-scheme. */
.wf-assembled-hero-shell,
.wf-assembled-hero-shell * {
color-scheme: normal !important;
}
/* Hide common model-added fixed “Press D / light–dark” hint UI; document-level key handlers still run */
.site-preview-root [aria-label*="Press D" i],
.site-preview-root [aria-label*="press d" i],
.site-preview-root [title*="Press D" i],
.site-preview-root [title*="light/dark" i],
.site-preview-root [title*="light / dark" i],
.site-preview-root [data-theme-toggle],
.site-preview-root [data-wf-theme-hint],
.site-preview-root .wf-theme-toggle-chip {
display: none !important;
}
/* === section scroll animations === */
@keyframes wf-section-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/*
* wf-anim-js is added to by a blocking script before body renders.
* Without it (no JS), nothing is hidden.
*
* Structure per section:
* [data-wf-section] ← outer shell, background, never animated
* .wf-section-body ← passthrough
* model root ← owns background colour, never animated
* > children ← hidden until in-view, then fade+lift
*/
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 0;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: wf-section-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (prefers-reduced-motion: reduce) {
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 1;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: none;
}
}
/* === hero === */
.wf-hero {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--ntcr-font-hero-ui);
}
.wf-hero *,
.wf-hero *::before,
.wf-hero *::after {
box-sizing: border-box;
}
.wf-hero__nav {
display: flex;
align-items: center;
background: rgba(245, 242, 235, 0.92);
position: relative;
z-index: 10;
}
.wf-hero__nav-logo {
display: flex;
align-items: center;
justify-content: center;
}
.wf-hero__nav-links {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.wf-hero__nav-links li a {
text-decoration: none;
color: var(--ntcr-charcoal);
font-weight: 600;
font-family: var(--ntcr-font-hero-ui);
transition: color 0.2s;
}
.wf-hero__nav-links li a:hover {
color: var(--ntcr-teal-nav-hover);
}
.wf-hero__nav-links li a.is-active,
.wf-hero__mobile-nav-links li a.is-active {
color: var(--ntcr-teal);
font-weight: 700;
}
.wf-hero__nav-logo a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* Hamburger menu (mobile) */
.wf-hero__menu-toggle {
display: none;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(245, 242, 235, 0.96);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
padding: 0;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.wf-hero__menu-toggle:hover {
background: rgba(245, 242, 235, 1);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
.wf-hero__menu-toggle:focus-visible {
outline: 2px solid var(--ntcr-teal);
outline-offset: 2px;
}
.wf-hero__menu-bar {
display: block;
width: 22px;
height: 2px;
background: var(--ntcr-charcoal);
border-radius: 2px;
transition:
transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.28s ease,
width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.wf-hero__menu-toggle[aria-expanded="true"] .wf-hero__menu-bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.wf-hero__menu-toggle[aria-expanded="true"] .wf-hero__menu-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wf-hero__menu-toggle[aria-expanded="true"] .wf-hero__menu-bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.wf-hero__mobile-menu {
position: fixed;
inset: 0;
z-index: 10001;
pointer-events: none;
visibility: hidden;
}
.wf-hero__mobile-menu.is-open {
pointer-events: auto;
visibility: visible;
}
.wf-hero__mobile-menu-backdrop {
position: absolute;
inset: 0;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
background: rgba(26, 26, 26, 0);
transition: background-color 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-backdrop {
background: rgba(26, 26, 26, 0.48);
}
.wf-hero__mobile-menu-panel {
position: absolute;
top: 0;
right: 0;
width: min(100%, 18.75rem);
height: 100%;
background: rgba(245, 242, 235, 0.98);
backdrop-filter: blur(12px);
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.14);
padding:
calc(env(safe-area-inset-top, 0px) + 5.5rem)
1.75rem
calc(env(safe-area-inset-bottom, 0px) + 2rem);
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-menu-panel {
transform: translateX(0);
}
.wf-hero__mobile-nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.wf-hero__mobile-nav-links li {
opacity: 0;
transform: translateX(1.25rem);
transition:
opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li {
opacity: 1;
transform: translateX(0);
}
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li:nth-child(1) { transition-delay: 0.06s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li:nth-child(2) { transition-delay: 0.1s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li:nth-child(3) { transition-delay: 0.14s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li:nth-child(4) { transition-delay: 0.18s; }
.wf-hero__mobile-menu.is-open .wf-hero__mobile-nav-links li:nth-child(5) { transition-delay: 0.22s; }
.wf-hero__mobile-nav-links li a {
display: block;
padding: 0.875rem 0;
text-decoration: none;
color: var(--ntcr-charcoal);
font-family: var(--ntcr-font-hero-ui);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-bottom: 1px solid rgba(26, 26, 26, 0.08);
transition: color 0.2s ease;
}
.wf-hero__mobile-nav-links li a:hover,
.wf-hero__mobile-nav-links li a:focus-visible {
color: var(--ntcr-teal-nav-hover);
}
body.wf-menu-open {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.wf-hero__menu-bar,
.wf-hero__mobile-menu-backdrop,
.wf-hero__mobile-menu-panel,
.wf-hero__mobile-nav-links li {
transition: none;
}
}
.wf-hero__body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.wf-hero__overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.08) 0%,
rgba(0, 0, 0, 0.22) 60%,
rgba(0, 0, 0, 0.45) 100%
);
}
.wf-hero__headline {
font-weight: 900;
color: var(--ntcr-black);
margin: 0;
text-shadow: 0 2px 12px rgba(255, 255, 255, 0.18);
font-family: var(--ntcr-font-hero-headline);
}
.wf-hero__subheadline {
color: var(--ntcr-black);
margin: 0;
font-weight: 400;
text-shadow: 0 1px 6px rgba(255, 255, 255, 0.2);
font-family: var(--ntcr-font-hero-sub);
}
.wf-hero__cta {
display: inline-block;
background-color: var(--ntcr-teal-nav-hover);
color: var(--ntcr-white);
text-decoration: none;
font-weight: 700;
border-radius: 40px;
margin-top: 6px;
transition: background-color 0.2s, transform 0.15s;
font-family: var(--ntcr-font-hero-ui);
}
.wf-hero__cta:hover {
background-color: var(--ntcr-teal-hover);
transform: translateY(-2px);
}
/* Web Foundation: hero concept image as section background */
.wf-assembled-hero-shell,
.wf-hero,
.site-preview-root {
overflow: visible;
}
.wf-hero__body {
position: relative;
overflow: visible !important;
min-height: clamp(32rem, 88svh, 42.5rem);
}
.wf-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.wf-hero__bg-image {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--ntcr-hero-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.wf-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.wf-hero__nav,
.wf-hero__content,
.wf-hero__text-col,
.wf-hero__tablet-preview {
position: relative;
z-index: 2;
}
.wf-hero__nav-logo img {
display: block;
width: clamp(2.75rem, 11vw, 4.375rem);
height: clamp(2.75rem, 11vw, 4.375rem);
object-fit: contain;
}
.wf-hero__nav {
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: auto;
min-height: clamp(4rem, 12vw, 5.625rem);
padding:
clamp(0.625rem, 2.5vw, 0.875rem)
max(clamp(1rem, 4vw, 3.75rem), env(safe-area-inset-right, 0px))
clamp(0.625rem, 2.5vw, 0.875rem)
max(clamp(1rem, 4vw, 3.75rem), env(safe-area-inset-left, 0px));
gap: 0.625rem 1rem;
}
.wf-hero__nav-links {
flex: 1 1 100%;
justify-content: center;
flex-wrap: wrap;
gap: clamp(0.5rem, 2vw, 1.125rem) clamp(0.625rem, 2.5vw, 2.625rem);
}
.wf-hero__nav-links li a {
font-size: clamp(0.6875rem, 2.8vw, 0.875rem);
letter-spacing: clamp(0.04em, 0.15vw, 0.0625em);
white-space: nowrap;
}
.wf-hero__circle-badge img {
display: block;
width: clamp(10rem, 52vw, 20rem);
height: clamp(10rem, 52vw, 20rem);
max-width: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.wf-hero__circle-badge {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 1;
width: auto !important;
height: auto !important;
margin: 0;
transform: none !important;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.22));
}
.wf-hero__content-fade {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
ellipse 92% 58% at 50% 72%,
rgba(245, 242, 235, 0.96) 0%,
rgba(245, 242, 235, 0.86) 28%,
rgba(245, 242, 235, 0.48) 54%,
rgba(245, 242, 235, 0.14) 76%,
rgba(245, 242, 235, 0) 100%
);
}
.wf-hero__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1rem, 4vw, 1.75rem);
width: 100%;
min-height: clamp(32rem, 88svh, 42.5rem);
padding:
clamp(1.5rem, 5vw, 2.5rem)
max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-right, 0px))
max(clamp(2rem, 6vw, 3.75rem), env(safe-area-inset-bottom, 0px))
max(clamp(1rem, 4vw, 1.5rem), env(safe-area-inset-left, 0px));
box-sizing: border-box;
overflow: visible;
}
.wf-hero__text-block {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 1;
transform: none !important;
width: 100%;
max-width: min(45rem, 100%);
margin: 0;
padding: 0 clamp(0.25rem, 2vw, 0.5rem);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.75rem, 3vw, 0.875rem);
}
.wf-hero__headline {
font-size: clamp(1.75rem, 6.5vw, 3.5rem) !important;
letter-spacing: clamp(0.04em, 0.25vw, 0.125em) !important;
line-height: 1.08;
max-width: 100%;
}
.wf-hero__subheadline {
font-size: clamp(0.9375rem, 3.6vw, 1.125rem) !important;
line-height: 1.55;
max-width: 34rem;
}
.wf-hero__cta {
font-size: clamp(0.8125rem, 3vw, 0.9375rem) !important;
letter-spacing: clamp(0.08em, 0.35vw, 0.15625em) !important;
padding: clamp(0.875rem, 3vw, 1.0625rem) clamp(1.75rem, 8vw, 3.25rem) !important;
width: min(100%, 18rem);
text-align: center;
box-sizing: border-box;
}
@media (min-width: 901px) {
.wf-hero__nav {
flex-wrap: nowrap;
justify-content: space-between;
height: 90px;
min-height: 90px;
padding:
0
max(3.75rem, env(safe-area-inset-right, 0px))
0
max(3.75rem, env(safe-area-inset-left, 0px));
gap: 0;
}
.wf-hero__nav-links {
flex: 0 1 auto;
flex-wrap: nowrap;
justify-content: flex-end;
}
.wf-hero__headline {
white-space: nowrap;
}
.wf-hero__content-fade {
background: radial-gradient(
ellipse 68% 52% at 50% 70%,
rgba(245, 242, 235, 0.96) 0%,
rgba(245, 242, 235, 0.86) 28%,
rgba(245, 242, 235, 0.48) 54%,
rgba(245, 242, 235, 0.14) 76%,
rgba(245, 242, 235, 0) 100%
);
}
}
@media (max-width: 549px) {
.wf-hero__nav {
position: sticky;
top: 0;
z-index: 10002;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
padding-right: calc(3.25rem + env(safe-area-inset-right, 0px));
}
.wf-hero__nav-links {
display: none !important;
}
.wf-hero__menu-toggle {
display: flex;
position: absolute;
top: 50%;
right: max(1rem, env(safe-area-inset-right, 0px));
transform: translateY(-50%);
}
}
@media (max-width: 480px) {
.wf-hero__cta {
width: 100%;
max-width: none;
}
}
.footer-brand-logo {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
margin-bottom: 16px;
}
/* === assembled preview layer (hero bg, sections, rhythm, responsive non-hero) === */
/* ========== Assembled preview: coordinated rest-of-site (variant CSS owns section backgrounds) ========== */
.site-preview-root {
min-height: auto;
background: #fff;
}
.wf-assembled-hero-shell {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.site-section-wf {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
border-top: none;
background: transparent;
color: inherit;
}
@media (max-width: 900px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
padding-left: max(0rem, env(safe-area-inset-left, 0px));
padding-right: max(0rem, env(safe-area-inset-right, 0px));
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) img,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) video,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) svg {
max-width: 100%;
height: auto;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) table {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
min-width: 0;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display:grid"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display: grid"] {
grid-template-columns: 1fr !important;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction:row"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction: row"] {
flex-direction: column !important;
}
}
@media (max-width: 480px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) .button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"] {
max-width: 100%;
box-sizing: border-box;
word-break: break-word;
}
}
/* === about_v1.css === */
.about-section-v1 {
background-color: #FFFFFF;
padding: 80px 0;
position: relative;
}
.about-section-v1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 30% 20%, rgba(232, 224, 208, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.about-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
}
.about-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 64px;
align-items: center;
margin-bottom: 64px;
}
.about-heading {
font-family: 'Oswald', sans-serif;
font-size: 38px;
font-weight: 800;
color: #1A1A1A;
line-height: 1.1;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.about-subhead {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 500;
color: #3A8A85;
margin: 0 0 32px 0;
line-height: 1.4;
}
.about-text p {
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #3D3D3D;
margin: 0 0 20px 0;
}
.about-text p:last-child {
margin-bottom: 0;
}
.about-image {
position: relative;
}
.about-image img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
padding: 48px 0;
border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: 'Oswald', sans-serif;
font-size: 28px;
font-weight: 700;
color: #3A8A85;
line-height: 1.1;
margin-bottom: 8px;
}
.stat-label {
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: 500;
color: #6B6B6B;
text-transform: uppercase;
letter-spacing: 0.08em;
}
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
gap: 40px;
}
.about-image {
order: -1;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 768px) {
.about-container {
padding: 0 24px;
}
.about-heading {
font-size: 28px;
}
.about-stats {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* === about comparison labels (temporary — remove after selection) === */
.about-variation-compare {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding:
clamp(2rem, 5vw, 3rem)
max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-right, 0px))
0
max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-left, 0px));
}
.about-variation-compare:first-of-type {
padding-top: clamp(1.5rem, 4vw, 2rem);
}
.about-variation-label {
margin: 0;
padding: 0.75rem 1rem;
font-family: var(--ntcr-font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ntcr-muted);
background: var(--ntcr-cream);
border-left: 4px solid var(--ntcr-teal);
}
/* === about_v2.css === */
.about-section-v2 {
background-color: var(--ntcr-cream-warm);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.about-v2-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.about-v2-header {
max-width: 42rem;
margin: 0 auto clamp(2rem, 5vw, 3rem);
text-align: center;
}
.about-v2-eyebrow {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.about-v2-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.375rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.about-v2-subhead {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-weight: 500;
line-height: 1.45;
color: var(--ntcr-text);
}
.about-v2-figure {
margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.about-v2-figure img {
display: block;
width: 100%;
max-height: clamp(16rem, 42vw, 28rem);
object-fit: cover;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
}
.about-v2-body {
max-width: 56rem;
margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
}
.about-v2-columns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.25rem, 3vw, 2rem);
margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
}
.about-v2-columns p,
.about-v2-closer {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--ntcr-text);
}
.about-v2-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.about-v2-stat-card {
padding: clamp(1.25rem, 3vw, 1.75rem);
text-align: center;
background: var(--ntcr-white);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.about-v2-stat-number {
margin-bottom: 0.5rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.5rem, 3.5vw, 1.75rem);
font-weight: 700;
line-height: 1.1;
color: var(--ntcr-teal);
}
.about-v2-stat-label {
font-family: var(--ntcr-font-body);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ntcr-muted);
}
@media (max-width: 1024px) {
.about-v2-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.about-v2-columns {
grid-template-columns: 1fr;
}
.about-v2-stats {
grid-template-columns: 1fr;
}
}
/* === about_v3.css === */
.about-section-v3 {
background-color: var(--ntcr-white);
padding: clamp(3rem, 8vw, 5rem) 0 0;
}
.about-v3-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.about-v3-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.about-v3-media img {
display: block;
width: 100%;
min-height: clamp(18rem, 45vw, 26rem);
object-fit: cover;
border-radius: 12px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}
.about-v3-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.375rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.about-v3-subhead {
margin: 0 0 1.5rem;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-weight: 500;
line-height: 1.45;
color: var(--ntcr-teal);
}
.about-v3-copy p {
margin: 0 0 1.25rem;
font-family: var(--ntcr-font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--ntcr-text);
}
.about-v3-quote {
margin: 0 0 1.25rem;
padding: 1rem 0 1rem 1.25rem;
border-left: 4px solid var(--ntcr-teal);
font-family: var(--ntcr-font-body);
font-size: clamp(1.0625rem, 2.5vw, 1.1875rem);
font-weight: 500;
font-style: italic;
line-height: 1.55;
color: var(--ntcr-charcoal);
}
.about-v3-highlights {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.about-v3-highlights li {
position: relative;
padding-left: 1.25rem;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.5;
color: var(--ntcr-text);
}
.about-v3-highlights li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ntcr-teal);
}
.about-v3-stats-band {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 3vw, 2rem);
margin: 0 calc(clamp(1.5rem, 4vw, 3rem) * -1);
padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
background: var(--ntcr-teal);
color: var(--ntcr-white);
}
.about-v3-stat {
text-align: center;
}
.about-v3-stat-number {
margin-bottom: 0.375rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: 700;
line-height: 1.1;
color: var(--ntcr-white);
}
.about-v3-stat-label {
font-family: var(--ntcr-font-body);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 1024px) {
.about-v3-grid {
grid-template-columns: 1fr;
}
.about-v3-media {
order: -1;
}
.about-v3-stats-band {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.about-v3-stats-band {
grid-template-columns: 1fr;
}
}
/* === services_v1.css === */
.services-section-v1 {
background-color: #E8E0D0;
padding: 80px 0;
}
.services-container {
max-width: 960px;
margin: 0 auto;
padding: 0 48px;
}
.services-header {
text-align: center;
margin-bottom: 64px;
}
.services-heading {
font-family: 'Oswald', sans-serif;
font-size: 42px;
font-weight: 800;
color: #1A1A1A;
line-height: 1.1;
margin: 0 0 20px 0;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.services-intro {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
color: #3D3D3D;
line-height: 1.6;
margin: 0;
}
.services-list {
display: flex;
flex-direction: column;
gap: 0;
}
.service-band {
display: grid;
grid-template-columns: 1fr 6px;
background-color: #FFFFFF;
border-bottom: 1px solid rgba(26, 26, 26, 0.08);
transition: all 0.3s ease;
}
.service-band:first-child {
border-radius: 12px 12px 0 0;
overflow: hidden;
}
.service-band:last-child {
border-radius: 0 0 12px 12px;
border-bottom: none;
overflow: hidden;
}
.service-band:hover {
transform: translateX(8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.service-band:hover .service-accent {
background-color: #3A8A85;
}
.service-content {
padding: 32px 40px;
}
.service-title {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 700;
color: #1A1A1A;
margin: 0 0 12px 0;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.service-description {
font-family: 'Lato', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #3D3D3D;
margin: 0;
}
.service-accent {
background-color: #D4C9B5;
transition: background-color 0.3s ease;
}
@media (max-width: 768px) {
.services-container {
padding: 0 24px;
}
.services-heading {
font-size: 32px;
}
.service-band {
grid-template-columns: 1fr;
}
.service-accent {
display: none;
}
.service-content {
padding: 24px;
}
.service-band:hover {
transform: none;
}
}
/* === services_v2.css === */
.services-section-v2 {
background-color: var(--ntcr-white);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.services-v2-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.services-v2-header {
max-width: 40rem;
margin: 0 auto clamp(2.5rem, 6vw, 4rem);
text-align: center;
}
.services-v2-eyebrow {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.services-v2-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.services-v2-intro {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
color: var(--ntcr-text);
}
.services-v2-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.services-v2-card {
padding: clamp(1.5rem, 3.5vw, 2rem);
background: var(--ntcr-cream);
border-radius: 12px;
border-top: 4px solid var(--ntcr-teal);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.services-v2-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.services-v2-card--wide {
grid-column: 1 / -1;
}
.services-v2-card-title {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.services-v2-card-desc {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--ntcr-text);
}
@media (max-width: 768px) {
.services-v2-grid {
grid-template-columns: 1fr;
}
.services-v2-card--wide {
grid-column: auto;
}
.services-v2-card:hover {
transform: none;
}
}
/* === services_v3.css === */
.services-section-v3 {
background-color: var(--ntcr-cream-warm);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.services-v3-container {
max-width: var(--ntcr-container-services);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.services-v3-header {
margin-bottom: clamp(2rem, 5vw, 3rem);
padding-bottom: clamp(1.5rem, 4vw, 2rem);
border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.services-v3-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.services-v3-intro {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
color: var(--ntcr-text);
}
.services-v3-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.services-v3-item {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1rem, 3vw, 2rem);
align-items: start;
padding: clamp(1.5rem, 4vw, 2rem) 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.services-v3-item:first-child {
padding-top: 0;
}
.services-v3-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.services-v3-number {
font-family: var(--ntcr-font-display);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ntcr-teal);
opacity: 0.85;
}
.services-v3-title {
margin: 0 0 0.5rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.services-v3-desc {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
line-height: 1.65;
color: var(--ntcr-text);
}
@media (max-width: 480px) {
.services-v3-item {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.services-v3-number {
font-size: 1.5rem;
}
}
/* === testimonials_v1.css === */
.testimonials-section-v1 {
background-color: var(--ntcr-white);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.testimonials-v1-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.testimonials-v1-header {
max-width: 40rem;
margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
text-align: center;
}
.testimonials-v1-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.testimonials-v1-intro {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
color: var(--ntcr-text);
}
.testimonials-v1-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.testimonials-v1-card {
margin: 0;
padding: clamp(1.5rem, 3.5vw, 2rem);
background: var(--ntcr-cream);
border-radius: 12px;
border-left: 4px solid var(--ntcr-teal);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.testimonials-v1-quote {
margin: 0 0 1.25rem;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
font-style: italic;
line-height: 1.65;
color: var(--ntcr-text);
}
.testimonials-v1-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.testimonials-v1-name {
font-family: var(--ntcr-font-display);
font-size: 0.9375rem;
font-weight: 700;
font-style: normal;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.testimonials-v1-meta {
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
@media (max-width: 1024px) {
.testimonials-v1-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.testimonials-v1-grid {
grid-template-columns: 1fr;
}
}
/* === testimonials_v2.css === */
.testimonials-section-v2 {
background-color: var(--ntcr-cream-warm);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.testimonials-v2-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.testimonials-v2-header {
text-align: center;
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.testimonials-v2-eyebrow {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.testimonials-v2-heading {
margin: 0;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.testimonials-v2-featured {
margin: 0 0 clamp(2rem, 5vw, 3rem);
padding: clamp(2rem, 5vw, 3rem);
background: var(--ntcr-white);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
text-align: center;
}
.testimonials-v2-featured-quote {
margin: 0 auto 1.5rem;
max-width: 42rem;
font-family: var(--ntcr-font-body);
font-size: clamp(1.0625rem, 2.5vw, 1.25rem);
font-style: italic;
line-height: 1.65;
color: var(--ntcr-charcoal);
}
.testimonials-v2-featured-author {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.testimonials-v2-featured-name {
font-family: var(--ntcr-font-display);
font-size: 1rem;
font-weight: 700;
font-style: normal;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.testimonials-v2-featured-meta {
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ntcr-muted);
}
.testimonials-v2-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
}
.testimonials-v2-item {
margin: 0;
padding: clamp(1.25rem, 3vw, 1.75rem);
background: var(--ntcr-white);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.testimonials-v2-quote {
margin: 0 0 1rem;
font-family: var(--ntcr-font-body);
font-size: 0.875rem;
font-style: italic;
line-height: 1.6;
color: var(--ntcr-text);
}
.testimonials-v2-item footer {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.testimonials-v2-name {
font-family: var(--ntcr-font-display);
font-size: 0.8125rem;
font-weight: 700;
font-style: normal;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.testimonials-v2-meta {
font-family: var(--ntcr-font-body);
font-size: 0.8125rem;
color: var(--ntcr-muted);
}
@media (max-width: 1024px) {
.testimonials-v2-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.testimonials-v2-grid {
grid-template-columns: 1fr;
}
}
/* === testimonials_v3.css === */
.testimonials-section-v3 {
background-color: var(--ntcr-teal-dark);
padding: clamp(3rem, 8vw, 5rem) 0;
position: relative;
}
.testimonials-section-v3::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(58, 138, 133, 0.92) 0%, rgba(44, 110, 106, 0.95) 100%);
pointer-events: none;
}
.testimonials-v3-container {
position: relative;
z-index: 1;
max-width: var(--ntcr-container-services);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.testimonials-v3-header {
text-align: center;
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.testimonials-v3-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-white);
}
.testimonials-v3-intro {
margin: 0 auto;
max-width: 36rem;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.testimonials-v3-list {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.25rem);
}
.testimonials-v3-item {
position: relative;
margin: 0;
padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) clamp(3rem, 6vw, 3.5rem);
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.testimonials-v3-mark {
position: absolute;
top: clamp(0.75rem, 2vw, 1rem);
left: clamp(1rem, 3vw, 1.5rem);
font-family: Georgia, serif;
font-size: clamp(2.5rem, 6vw, 3.5rem);
line-height: 1;
color: rgba(255, 255, 255, 0.25);
}
.testimonials-v3-quote {
margin: 0 0 1rem;
font-family: var(--ntcr-font-body);
font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
font-style: italic;
line-height: 1.65;
color: rgba(255, 255, 255, 0.95);
}
.testimonials-v3-author {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.375rem 0.75rem;
}
.testimonials-v3-name {
font-family: var(--ntcr-font-display);
font-size: 0.875rem;
font-weight: 700;
font-style: normal;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ntcr-white);
}
.testimonials-v3-meta {
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 480px) {
.testimonials-v3-item {
padding-left: clamp(1.5rem, 4vw, 2rem);
}
.testimonials-v3-mark {
position: static;
display: block;
margin-bottom: 0.5rem;
font-size: 2rem;
}
}
/* === gallery_v2.css === */
.gallery-section-v2 {
background-color: #2C6E6A;
padding: 80px 0;
}
.gallery-container {
max-width: 1120px;
margin: 0 auto;
padding: 0 48px;
}
.gallery-header {
text-align: center;
margin-bottom: 64px;
}
.gallery-heading {
font-family: 'Oswald', sans-serif;
font-size: 42px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
margin: 0 0 20px 0;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.gallery-intro {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin: 0;
max-width: 600px;
margin: 0 auto;
}
.gallery-showcase {
position: relative;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(10px);
}
.gallery-nav {
display: none;
}
.gallery-track {
position: relative;
}
.gallery-slide {
display: none;
width: 100%;
grid-template-columns: 1fr 1fr;
animation: gallery-slide-in 0.45s ease;
}
.gallery-slide.active {
display: grid;
}
@keyframes gallery-slide-in {
from { opacity: 0; }
to { opacity: 1; }
}
.slide-image {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.22);
padding: 16px;
min-height: clamp(220px, 38vw, 420px);
border-radius: 12px;
}
.slide-image img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: clamp(220px, 38vw, 420px);
object-fit: contain;
object-position: center;
border-radius: 12px;
}
.slide-content {
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, rgba(58, 138, 133, 0.9) 0%, rgba(44, 110, 106, 0.9) 100%);
}
.slide-content h3 {
font-family: 'Oswald', sans-serif;
font-size: 28px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 20px 0;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.2;
}
.slide-content p {
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
margin: 0;
}
.gallery-thumbs {
display: flex;
justify-content: center;
gap: 12px;
padding: 24px;
background-color: rgba(0, 0, 0, 0.2);
}
.thumb {
appearance: none;
-webkit-appearance: none;
font: inherit;
width: 80px;
height: 60px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s ease, transform 0.3s ease;
border: 2px solid transparent;
padding: 0;
background: rgba(0, 0, 0, 0.28);
}
.thumb:hover {
opacity: 0.8;
transform: scale(1.05);
}
.thumb:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 2px;
}
.thumb.active {
opacity: 1;
border-color: rgba(255, 255, 255, 0.6);
}
.thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 1024px) {
.gallery-slide {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.slide-image {
min-height: clamp(200px, 52vw, 360px);
}
.slide-image img {
max-height: clamp(200px, 52vw, 360px);
}
.slide-content {
padding: 32px;
}
.slide-content h3 {
font-size: 24px;
}
}
@media (max-width: 768px) {
.gallery-container {
padding: 0 24px;
}
.gallery-heading {
font-size: 32px;
}
.slide-content {
padding: 24px;
}
.slide-content h3 {
font-size: 20px;
}
.gallery-thumbs {
gap: 8px;
padding: 16px;
flex-wrap: wrap;
}
.thumb {
width: 60px;
height: 45px;
}
}
/* === cta_v1.css === */
.cta-section-v1 {
background-color: #3A8A85;
padding: 80px 0;
position: relative;
}
.cta-section-v1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(58, 138, 133, 0.95) 0%, rgba(44, 110, 106, 0.95) 100%);
}
.cta-container {
max-width: 800px;
margin: 0 auto;
padding: 0 48px;
position: relative;
z-index: 1;
}
.cta-content {
text-align: center;
}
.cta-heading {
font-family: 'Oswald', sans-serif;
font-size: 42px;
font-weight: 800;
color: #FFFFFF;
line-height: 1.1;
margin: 0 0 24px 0;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.cta-text {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
margin: 0 0 40px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 48px;
}
.cta-button {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
padding: 16px 36px;
border-radius: 9999px;
transition: all 0.2s ease;
display: inline-block;
border: none;
cursor: pointer;
}
.cta-button.primary {
background-color: #FFFFFF;
color: #3A8A85;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.cta-button.primary:hover {
background-color: #F5F2ED;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
.cta-button.secondary {
background-color: transparent;
color: #FFFFFF;
border: 2px solid #FFFFFF;
}
.cta-button.secondary:hover {
background-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.trust-indicators {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 600px;
margin: 0 auto;
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Lato', sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
text-align: left;
}
.trust-icon {
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.2);
color: #FFFFFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
flex-shrink: 0;
}
@media (max-width: 768px) {
.cta-container {
padding: 0 24px;
}
.cta-heading {
font-size: 32px;
}
.cta-text {
font-size: 16px;
}
.cta-actions {
flex-direction: column;
align-items: center;
gap: 16px;
}
.trust-indicators {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* === contact_v1.css === */
.contact-section-v1 {
background-color: var(--ntcr-white);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.contact-v1-container {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.contact-v1-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.contact-v1-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.375rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.contact-v1-intro {
margin: 0 0 2rem;
font-family: var(--ntcr-font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--ntcr-text);
}
.contact-v1-details {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.contact-v1-detail-label {
display: block;
margin-bottom: 0.25rem;
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.contact-v1-detail-value {
font-family: var(--ntcr-font-body);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.4;
color: var(--ntcr-charcoal);
text-decoration: none;
}
a.contact-v1-detail-value:hover {
color: var(--ntcr-teal);
}
.contact-v1-notes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-v1-notes li {
position: relative;
padding-left: 1.25rem;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ntcr-text);
}
.contact-v1-notes li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--ntcr-teal);
font-weight: 700;
}
.contact-v1-actions {
padding: clamp(1.5rem, 4vw, 2rem);
background: var(--ntcr-cream);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.contact-v1-actions-title {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-display);
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ntcr-black);
}
.contact-v1-actions-intro {
margin: 0 0 1.5rem;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ntcr-text);
}
.contact-cta-row {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.contact-cta-row--centred {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 0;
}
.contact-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 1.5rem;
border-radius: 9999px;
font-family: var(--ntcr-font-ui);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.contact-cta--primary {
background: var(--ntcr-teal);
color: var(--ntcr-white);
box-shadow: 0 4px 16px rgba(58, 138, 133, 0.25);
}
.contact-cta--primary:hover {
background: var(--ntcr-teal-hover);
transform: translateY(-1px);
}
.contact-cta--secondary {
background: var(--ntcr-white);
color: var(--ntcr-teal);
border: 2px solid var(--ntcr-teal);
}
.contact-cta--secondary:hover {
background: rgba(58, 138, 133, 0.08);
transform: translateY(-1px);
}
.contact-v1-tips-title {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ntcr-muted);
}
.contact-v1-tips-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.contact-v1-tips-list li {
position: relative;
padding-left: 1rem;
font-family: var(--ntcr-font-body);
font-size: 0.875rem;
line-height: 1.5;
color: var(--ntcr-text);
}
.contact-v1-tips-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--ntcr-teal);
font-weight: 700;
}
@media (max-width: 1024px) {
.contact-v1-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.contact-cta-row--centred {
flex-direction: column;
}
}
/* === contact_v2.css === */
.contact-section-v2 {
background-color: var(--ntcr-cream-warm);
padding: clamp(3rem, 8vw, 5rem) 0;
}
.contact-v2-container {
max-width: var(--ntcr-container-cta);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.contact-v2-header {
text-align: center;
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.contact-v2-eyebrow {
margin: 0 0 0.75rem;
font-family: var(--ntcr-font-ui);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.contact-v2-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.375rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-black);
}
.contact-v2-intro {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--ntcr-text);
}
.contact-v2-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 2.5vw, 1.5rem);
margin-bottom: clamp(2rem, 5vw, 3rem);
}
.contact-v2-card {
padding: clamp(1.25rem, 3vw, 1.75rem);
text-align: center;
background: var(--ntcr-white);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.contact-v2-card-label {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.contact-v2-card-value {
display: block;
margin-bottom: 0.5rem;
font-family: var(--ntcr-font-body);
font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
font-weight: 600;
line-height: 1.35;
color: var(--ntcr-charcoal);
text-decoration: none;
word-break: break-word;
}
a.contact-v2-card-value:hover {
color: var(--ntcr-teal);
}
.contact-v2-card-note {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--ntcr-muted);
}
.contact-v2-band {
padding: clamp(1.5rem, 4vw, 2.25rem);
text-align: center;
background: var(--ntcr-white);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.contact-v2-band-text {
margin: 0 0 1.25rem;
font-family: var(--ntcr-font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--ntcr-text);
}
@media (max-width: 768px) {
.contact-v2-cards {
grid-template-columns: 1fr;
}
}
/* === contact_v3.css === */
.contact-section-v3 {
background-color: var(--ntcr-white);
}
.contact-v3-hero {
position: relative;
padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 3rem);
background-color: var(--ntcr-teal);
overflow: hidden;
}
.contact-v3-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(58, 138, 133, 0.95) 0%, rgba(44, 110, 106, 0.95) 100%);
pointer-events: none;
}
.contact-v3-hero-inner {
position: relative;
z-index: 1;
max-width: var(--ntcr-container-cta);
margin: 0 auto;
text-align: center;
}
.contact-v3-heading {
margin: 0 0 1rem;
font-family: var(--ntcr-font-display);
font-size: clamp(1.75rem, 5vw, 2.625rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ntcr-white);
}
.contact-v3-lead {
margin: 0 auto 2rem;
max-width: 36rem;
font-family: var(--ntcr-font-body);
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.95);
}
.contact-v3-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-v3-btn {
display: inline-block;
padding: 1rem 1.75rem;
border-radius: 9999px;
font-family: var(--ntcr-font-ui);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.2s ease;
}
.contact-v3-btn--primary {
background: var(--ntcr-white);
color: var(--ntcr-teal);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.contact-v3-btn--primary:hover {
background: var(--ntcr-cream);
transform: translateY(-2px);
}
.contact-v3-btn--secondary {
background: transparent;
color: var(--ntcr-white);
border: 2px solid var(--ntcr-white);
}
.contact-v3-btn--secondary:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
}
.contact-v3-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 0.75rem;
font-family: var(--ntcr-font-body);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
}
.contact-v3-body {
padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.contact-v3-body-inner {
max-width: var(--ntcr-container-wide);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.contact-v3-trust-title,
.contact-v3-details-title {
margin: 0 0 1.25rem;
font-family: var(--ntcr-font-display);
font-size: 1.125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ntcr-black);
}
.contact-v3-trust-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.contact-v3-trust-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--ntcr-text);
}
.contact-v3-trust-list li::before {
content: "✓";
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(58, 138, 133, 0.12);
color: var(--ntcr-teal);
font-size: 0.6875rem;
font-weight: 700;
}
.contact-v3-details {
padding: clamp(1.5rem, 4vw, 2rem);
background: var(--ntcr-cream);
border-radius: 12px;
}
.contact-v3-details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.contact-v3-detail-label {
display: block;
margin-bottom: 0.25rem;
font-family: var(--ntcr-font-ui);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ntcr-teal);
}
.contact-v3-detail-value {
font-family: var(--ntcr-font-body);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
color: var(--ntcr-charcoal);
text-decoration: none;
}
a.contact-v3-detail-value:hover {
color: var(--ntcr-teal);
}
.contact-v3-details-note {
margin: 0;
font-family: var(--ntcr-font-body);
font-size: 0.875rem;
line-height: 1.6;
color: var(--ntcr-muted);
}
@media (max-width: 768px) {
.contact-v3-actions {
flex-direction: column;
align-items: stretch;
}
.contact-v3-btn {
text-align: center;
}
.contact-v3-body-inner {
grid-template-columns: 1fr;
}
.contact-v3-details-grid {
grid-template-columns: 1fr;
}
}
/* === footer_v1.css === */
.footer-section-v1 {
background-color: #F5F2ED;
padding: 64px 0 24px 0;
border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.footer-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand {
max-width: 400px;
}
.brand-name {
font-family: 'Oswald', sans-serif;
font-size: 24px;
font-weight: 700;
color: #1A1A1A;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.brand-description {
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.6;
color: #3D3D3D;
margin: 0;
}
.footer-title {
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 600;
color: #1A1A1A;
margin: 0 0 16px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.contact-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-item {
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 1.4;
color: #3D3D3D;
}
.contact-label {
font-weight: 600;
color: #3A8A85;
}
.contact-item a {
color: #3A8A85;
text-decoration: none;
font-weight: 500;
}
.contact-item a:hover {
color: #2C6E6A;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-links a {
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #3D3D3D;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3A8A85;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.footer-copyright p,
.footer-tagline p {
font-family: 'Lato', sans-serif;
font-size: 12px;
color: #6B6B6B;
margin: 0;
}
.footer-tagline p {
font-weight: 500;
}
@media (max-width: 1024px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-brand {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.footer-container {
padding: 0 24px;
}
.footer-main {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-brand {
grid-column: span 1;
}
.footer-bottom {
flex-direction: column;
gap: 8px;
text-align: center;
}
}
/* === Home page section teasers === */
.section-page-cta-wrap {
display: flex;
justify-content: center;
margin-top: clamp(2rem, 4vw, 2.75rem);
padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.section-page-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9375rem 2rem;
border-radius: 9999px;
background: var(--ntcr-teal);
color: var(--ntcr-white);
font-family: var(--ntcr-font-ui);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 4px 16px rgba(58, 138, 133, 0.25);
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.section-page-cta:hover {
background: var(--ntcr-teal-hover);
transform: translateY(-1px);
}
.section-page-cta--light {
background: var(--ntcr-white);
color: var(--ntcr-teal);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.section-page-cta--light:hover {
background: var(--ntcr-cream);
color: var(--ntcr-teal-hover);
}
.about-section-v3--home {
padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.about-section-v3--home .about-v3-grid {
margin-bottom: 0;
}
.about-section-v3--home .section-page-cta-wrap {
padding-bottom: clamp(2rem, 5vw, 3rem);
}
.gallery-section-v2--home .section-page-cta-wrap {
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.cta-section-v1--home {
padding: clamp(2.5rem, 6vw, 3.5rem) 0;
}
.cta-section-v1--home .cta-text {
margin-bottom: 0;
}
.cta-section-v1--home .section-page-cta-wrap {
margin-top: 1.75rem;
padding-bottom: 0;
}