/* ─── YUNIKSA — Global Stylesheet ─────────────────────────────────────────── */
/* Fonts are loaded via in each page's , not @import — an @import
here would queue the font request only after this file has downloaded and
parsed. See the head of any page for the two requests. */
/* ── CSS Variables ── */
:root {
/* Neutral scheme, shared sitewide.
--ink* are the near-blacks; --accent* is the muted label grey, which is
redefined to a light tint inside dark sections (see "dark section accent"
further down) so every var(--accent) stays legible without per-rule patches. */
--ink: #000000;
--ink-mid: #1A1A1A;
--ink-light: #333333;
--accent: #605E5C;
--accent-light:#8A8A88;
--white: #FFFFFF;
--off-white: #F2F2F2;
--text-dark: #000000;
--text-mid: #333333;
--text-light:#605E5C;
--border: #E5E5E5;
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 8px 32px rgba(0,0,0,.09);
--shadow-lg: 0 20px 60px rgba(0,0,0,.13);
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Inter', system-ui, sans-serif;
--ease-out: cubic-bezier(.22,.68,0,1.2);
--ease-smooth:cubic-bezier(.4,0,.2,1);
--nav-h: 80px;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-sans);
color: var(--text-dark);
background: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--font-serif); line-height: 1.2; }
p { line-height: 1.7; color: var(--text-mid); }
.eyebrow {
font-family: var(--font-sans);
font-size: .75rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: .75rem;
}
.section-title {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--ink);
margin-bottom: 1.25rem;
}
.section-subtitle {
font-size: 1.0625rem;
max-width: 560px;
margin-bottom: 3rem;
}
/* ── Layout Utilities ── */
.container { width: 90%; max-width: 1240px; margin: 0 auto; }
.section { padding: 6rem 0; }
.section-sm{ padding: 4rem 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .875rem 2rem;
border-radius: 3px;
font-family: var(--font-sans);
font-size: .9375rem;
font-weight: 500;
letter-spacing: .03em;
cursor: pointer;
border: none;
transition: all .25s var(--ease-smooth);
}
.btn-primary {
background: var(--accent);
color: var(--ink);
}
.btn-primary:hover {
background: var(--accent-light);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(96,94,92,.35);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 1.5px solid rgba(255,255,255,.55);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
}
.btn-outline-navy {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--ink);
}
.btn-outline-navy:hover {
background: var(--ink);
color: var(--white);
transform: translateY(-2px);
}
/* ── Gold Divider ── */
.gold-line {
width: 52px;
height: 3px;
background: var(--accent);
border-radius: 2px;
margin-bottom: 1.5rem;
}
.gold-line.center { margin-left: auto; margin-right: auto; }
/* ═══════════════════════════════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
background: transparent;
transition: background .4s var(--ease-smooth), box-shadow .4s;
}
.nav.scrolled {
background: rgba(0,0,0,.97);
box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.nav-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.nav-logo {
display: flex;
flex-direction: column;
line-height: 1;
}
.nav-logo .wordmark {
font-family: var(--font-serif);
font-size: 1.625rem;
font-weight: 700;
color: var(--white);
letter-spacing: .04em;
}
.nav-logo .tagline {
font-size: .6rem;
letter-spacing: .2em;
color: var(--accent);
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: 2.25rem;
}
.nav-links a {
font-size: .875rem;
font-weight: 500;
color: rgba(255,255,255,.8);
letter-spacing: .04em;
position: relative;
transition: color .2s;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px; left: 0; right: 0;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease-smooth);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
padding: .625rem 1.375rem;
font-size: .8125rem;
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
width: 24px; height: 2px;
background: var(--white);
border-radius: 2px;
transition: all .3s var(--ease-smooth);
display: block;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0,0,0,.98);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
opacity: 0;
pointer-events: none;
transition: opacity .35s var(--ease-smooth);
}
.mobile-menu.open {
opacity: 1;
pointer-events: all;
}
.mobile-menu a {
font-family: var(--font-serif);
font-size: 2rem;
color: var(--white);
transition: color .2s;
}
.mobile-menu a:hover { color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════════════════════ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--ink);
}
.hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 60%, rgba(26,26,26,.5) 100%),
url('Photos/hero-floor.jpg') center/cover no-repeat;
transform: scale(1.05);
animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom {
from { transform: scale(1.05); }
to { transform: scale(1.0); }
}
.hero-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-particles span {
position: absolute;
width: 1px; height: 1px;
background: rgba(96,94,92,.6);
border-radius: 50%;
animation: float var(--dur,8s) var(--delay,0s) infinite ease-in-out;
}
@keyframes float {
0%,100% { transform: translateY(0) scale(1); opacity: .6; }
50% { transform: translateY(-40px) scale(1.4); opacity: 1; }
}
.hero-content {
position: relative;
z-index: 1;
max-width: 720px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: .75rem;
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(20px);
animation: fadeUp .7s .3s var(--ease-out) forwards;
}
.hero-eyebrow::before {
content: '';
width: 36px; height: 1.5px;
background: var(--accent);
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--white);
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(30px);
animation: fadeUp .8s .5s var(--ease-out) forwards;
}
.hero h1 em {
color: var(--accent);
font-style: italic;
}
.hero-desc {
font-size: 1.125rem;
color: rgba(255,255,255,.62);
max-width: 520px;
margin-bottom: 2.5rem;
opacity: 0;
transform: translateY(30px);
animation: fadeUp .8s .7s var(--ease-out) forwards;
}
.hero-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
opacity: 0;
transform: translateY(30px);
animation: fadeUp .8s .9s var(--ease-out) forwards;
}
/* Aligned to the container's left edge so it sits under the CTAs,
not stranded mid-screen beneath a left-aligned hero. */
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: max(5vw, calc(50vw - 620px));
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5rem;
color: rgba(255,255,255,.55);
font-size: .6875rem;
letter-spacing: .15em;
text-transform: uppercase;
opacity: 0;
animation: fadeIn 1s 1.4s forwards;
}
.scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, rgba(96,94,92,0), rgba(96,94,92,.8));
animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
0%,100% { opacity: 1; }
50% { opacity: .3; }
}
/* ═══════════════════════════════════════════════════════════════════════════
STATS STRIP
═══════════════════════════════════════════════════════════════════════════ */
.stats-strip {
background: var(--ink);
padding: 3rem 0;
border-top: 1px solid rgba(96,94,92,.2);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 0;
text-align: center;
}
.stat-item {
padding: 1.5rem;
border-right: 1px solid rgba(255,255,255,.1);
}
.stat-item:last-child { border-right: none; }
.stat-number {
font-family: var(--font-serif);
font-size: clamp(2rem,4vw,3rem);
font-weight: 700;
color: var(--accent);
line-height: 1;
display: block;
}
.stat-suffix {
font-size: .875em;
}
.stat-label {
font-size: .8rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-top: .5rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
ABOUT (HOME)
═══════════════════════════════════════════════════════════════════════════ */
.about-home { background: var(--off-white); }
.about-image-wrap {
position: relative;
}
.about-image-main {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: 4px;
}
/* Solid black stamp, not the mid-grey that read as a disabled chip. */
.about-image-badge {
position: absolute;
bottom: -1.5rem; right: -1.5rem;
background: #000;
color: #fff;
padding: 1.5rem;
border-radius: 4px;
text-align: center;
box-shadow: var(--shadow-md);
min-width: 140px;
}
.about-image-badge strong {
display: block;
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.about-image-badge span {
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.about-text { padding-left: 2rem; }
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-top: 2.5rem;
}
.feature-item {
display: flex;
gap: .875rem;
}
.feature-icon {
width: 40px; height: 40px;
min-width: 40px;
background: rgba(96,94,92,.12);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
font-size: 1.125rem;
}
.feature-text h4 {
font-family: var(--font-sans);
font-size: .875rem;
font-weight: 600;
color: var(--ink);
margin-bottom: .25rem;
}
.feature-text p { font-size: .8125rem; }
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCTS PREVIEW
═══════════════════════════════════════════════════════════════════════════ */
.products-preview { background: var(--white); }
.product-card {
border-radius: 6px;
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-sm);
transition: transform .35s var(--ease-smooth), box-shadow .35s;
position: relative;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
/* height:auto is required. The width/height attributes on ![]()
reserve layout
space, but they are also presentational hints — without an explicit height
here, the height attribute wins and aspect-ratio is ignored. */
.product-card-img {
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
transition: transform .5s var(--ease-smooth);
}
.product-card:hover .product-card-img { transform: scale(1.06); }
.product-card-body {
padding: 1.5rem;
border-top: 3px solid var(--accent);
}
.product-card-body h3 {
font-size: 1.1875rem;
color: var(--ink);
margin-bottom: .5rem;
}
.product-card-body p {
font-size: .875rem;
margin-bottom: 1.25rem;
}
.card-link {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .875rem;
font-weight: 600;
color: var(--accent);
letter-spacing: .03em;
transition: gap .2s;
}
.card-link:hover { gap: .75rem; }
/* ═══════════════════════════════════════════════════════════════════════════
WHY CHOOSE US (HOME TEASER)
═══════════════════════════════════════════════════════════════════════════ */
.why-strip {
background: var(--ink);
padding: 5rem 0;
overflow: hidden;
}
.why-strip .section-title { color: var(--white); }
.why-strip .section-subtitle { color: rgba(255,255,255,.62); }
.why-cards {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1.5rem;
margin-top: 3.5rem;
}
.why-card {
padding: 2.25rem 1.75rem;
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px;
background: rgba(255,255,255,.06);
transition: background .3s, border-color .3s, transform .3s var(--ease-smooth);
}
.why-card:hover {
background: rgba(96,94,92,.08);
border-color: rgba(96,94,92,.35);
transform: translateY(-6px);
}
.why-icon {
width: 52px; height: 52px;
background: rgba(96,94,92,.15);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.why-icon svg { width: 24px; height: 24px; color: var(--accent); }
.why-card h3 {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
color: var(--white);
margin-bottom: .6rem;
}
.why-card p { font-size: .875rem; color: rgba(255,255,255,.62); }
/* ═══════════════════════════════════════════════════════════════════════════
CTA BAND
═══════════════════════════════════════════════════════════════════════════ */
.cta-band {
background: linear-gradient(135deg, var(--accent) 0%, #A87820 100%);
padding: 4.5rem 0;
text-align: center;
}
.cta-band h2 {
font-size: clamp(1.75rem,4vw,2.75rem);
color: var(--ink);
margin-bottom: 1rem;
}
.cta-band p {
color: rgba(0,0,0,.75);
max-width: 500px;
margin: 0 auto 2rem;
}
.cta-band .btn-primary {
background: var(--ink);
color: var(--white);
}
.cta-band .btn-primary:hover {
background: var(--ink-light);
box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
/* ═══════════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.footer {
background: #070F1F;
padding: 5rem 0 0;
color: rgba(255,255,255,.62);
font-size: .875rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
gap: 3rem;
padding-bottom: 4rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .wordmark {
font-family: var(--font-serif);
font-size: 1.75rem;
color: var(--white);
font-weight: 700;
}
.footer-brand .tagline {
font-size: .65rem;
letter-spacing: .18em;
color: var(--accent);
text-transform: uppercase;
display: block;
margin-bottom: 1.25rem;
}
.footer-brand p {
font-size: .8rem;
line-height: 1.7;
color: rgba(255,255,255,.55);
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: .75rem;
}
.social-btn {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.55);
transition: all .25s;
font-size: .875rem;
}
.social-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-3px);
}
.footer-col h4 {
font-family: var(--font-sans);
font-size: .75rem;
font-weight: 600;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.25rem;
}
.footer-col ul li {
margin-bottom: .65rem;
}
.footer-col ul li a {
color: rgba(255,255,255,.55);
transition: color .2s;
}
.footer-col ul li a:hover { color: var(--white); }
.footer-contact-item {
display: flex;
gap: .75rem;
margin-bottom: .875rem;
align-items: flex-start;
}
.footer-contact-item svg {
width: 15px; height: 15px;
min-width: 15px;
color: var(--accent);
margin-top: 2px;
}
.footer-bottom {
padding: 1.75rem 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.4); }
/* ═══════════════════════════════════════════════════════════════════════════
FLOATING WHATSAPP
═══════════════════════════════════════════════════════════════════════════ */
.wa-float {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 900;
display: flex;
align-items: center;
gap: .75rem;
background: #25D366;
color: var(--white);
padding: .875rem 1.5rem;
border-radius: 50px;
box-shadow: 0 8px 28px rgba(37,211,102,.45);
font-size: .875rem;
font-weight: 600;
cursor: pointer;
transition: all .3s var(--ease-smooth);
animation: waPulse 3s 2s infinite;
}
.wa-float:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 14px 36px rgba(37,211,102,.55);
}
@keyframes waPulse {
0%,100% { box-shadow: 0 8px 28px rgba(37,211,102,.45); }
50% { box-shadow: 0 8px 40px rgba(37,211,102,.7); }
}
.wa-float svg { width: 22px; height: 22px; }
/* ═══════════════════════════════════════════════════════════════════════════
SCROLL ANIMATIONS
═══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
/* Reveals are a garnish, not a gate. Kept short (.45s) with a small offset so
content is legible almost immediately once it enters view. */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .45s var(--ease-smooth), transform .45s var(--ease-smooth);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-left {
opacity: 0;
transform: translateX(-24px);
transition: opacity .45s var(--ease-smooth), transform .45s var(--ease-smooth);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
opacity: 0;
transform: translateX(24px);
transition: opacity .45s var(--ease-smooth), transform .45s var(--ease-smooth);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
/* staggered children — total run for a 6-up row is now .4s + .30s = .70s */
.stagger > * {
opacity: 0;
transform: translateY(18px);
transition: opacity .4s var(--ease-smooth), transform .4s var(--ease-smooth);
}
.stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.0s; }
.stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.06s; }
.stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.12s; }
.stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.18s; }
.stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.24s; }
.stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.30s; }
/* Never hide content from anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PAGE HERO (inner pages)
═══════════════════════════════════════════════════════════════════════════ */
.page-hero {
padding: calc(var(--nav-h) + 5rem) 0 5rem;
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-mid) 100%);
position: relative;
overflow: hidden;
}
.page-hero::after {
content: '';
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 4px;
background: linear-gradient(to right, transparent, var(--accent), transparent);
}
.page-hero h1 { color: var(--white); font-size: clamp(2.25rem,5vw,3.5rem); margin-bottom: .875rem; }
.page-hero p { color: rgba(255,255,255,.62); font-size: 1.0625rem; max-width: 560px; }
.breadcrumb {
display: flex;
align-items: center;
gap: .5rem;
font-size: .8rem;
color: rgba(255,255,255,.55);
margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--accent); }
/* ═══════════════════════════════════════════════════════════════════════════
PRODUCTS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.products-page { background: var(--off-white); }
.product-category-section { padding: 5rem 0; }
.product-category-section:nth-child(even) { background: var(--white); }
.product-big-card {
background: var(--white);
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.product-big-card .grid-2 { gap: 0; }
.product-big-img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
}
.product-big-body {
padding: 3.5rem;
}
.product-big-body h2 { font-size: 2rem; color: var(--ink); margin-bottom: 1rem; }
.product-specs {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 1.5rem 0;
}
.spec-tag {
padding: .35rem .875rem;
background: rgba(96,94,92,.1);
border: 1px solid rgba(96,94,92,.25);
border-radius: 20px;
font-size: .78rem;
font-weight: 500;
color: #8B6020;
}
.product-features-list { margin: 1.5rem 0 2rem; }
.product-features-list li {
display: flex;
align-items: center;
gap: .625rem;
font-size: .875rem;
color: var(--text-mid);
padding: .4rem 0;
}
.product-features-list li::before {
content: '';
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
min-width: 6px;
}
/* ═══════════════════════════════════════════════════════════════════════════
ABOUT PAGE
═══════════════════════════════════════════════════════════════════════════ */
.about-story { background: var(--white); }
.about-values { background: var(--off-white); }
.value-card {
background: var(--white);
border-radius: 8px;
padding: 2.5rem 2rem;
box-shadow: var(--shadow-sm);
border-top: 3px solid var(--accent);
transition: transform .3s var(--ease-smooth), box-shadow .3s;
}
.value-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
/* The icons used to be emoji (hence font-size); they are now inline SVGs, which
fill their block box unless sized. Match .why-icon svg at 24px. */
.value-card .icon {
display: block;
margin-bottom: 1.25rem;
line-height: 0;
}
.value-card .icon svg { width: 24px; height: 24px; color: var(--accent); }
.value-card h3 {
font-family: var(--font-sans);
font-size: 1.0625rem;
font-weight: 600;
color: var(--ink);
margin-bottom: .625rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════════════════════════════ */
.contact-page { background: var(--off-white); }
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
align-items: start;
}
.contact-info {
background: var(--ink);
border-radius: 8px;
padding: 3rem;
color: var(--white);
}
.contact-info h3 {
font-size: 1.625rem;
color: var(--white);
margin-bottom: .75rem;
}
.contact-info > p { color: rgba(255,255,255,.62); margin-bottom: 2.5rem; font-size: .9375rem; }
.contact-detail {
display: flex;
gap: 1rem;
margin-bottom: 1.75rem;
}
.contact-detail-icon {
width: 44px; height: 44px;
min-width: 44px;
background: rgba(96,94,92,.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
}
.contact-detail-text h4 {
font-family: var(--font-sans);
font-size: .75rem;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: .25rem;
}
.contact-detail-text p, .contact-detail-text a {
color: var(--white);
font-size: .9375rem;
}
.contact-detail-text a:hover { color: var(--accent); }
.contact-form {
background: var(--white);
border-radius: 8px;
padding: 3rem;
box-shadow: var(--shadow-md);
}
.contact-form h3 {
font-size: 1.75rem;
color: var(--ink);
margin-bottom: .5rem;
}
.contact-form > p { font-size: .9375rem; margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
display: block;
font-size: .8125rem;
font-weight: 500;
color: var(--ink);
margin-bottom: .5rem;
letter-spacing: .02em;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: .8125rem 1rem;
border: 1.5px solid var(--border);
border-radius: 4px;
font-family: var(--font-sans);
font-size: .9375rem;
color: var(--text-dark);
background: var(--white);
transition: border-color .2s, box-shadow .2s;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(96,94,92,.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .78rem; color: var(--text-light); margin-top: .375rem; }
.form-submit { margin-top: .75rem; }
/* Success message */
.form-success {
display: none;
text-align: center;
padding: 2.5rem 1rem;
}
.form-success .checkmark {
width: 64px; height: 64px;
background: rgba(37,211,102,.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
color: #18A349;
font-size: 1.75rem;
}
.form-success h4 { font-size: 1.375rem; color: var(--ink); margin-bottom: .5rem; }
.form-success p { font-size: .9375rem; }
/* Send failed — keeps the filled-in form on screen and offers a way through */
.form-error {
margin-top: 1.25rem;
padding: 1.25rem 1.5rem;
border: 1px solid #E5B4B4;
border-left: 3px solid #C0392B;
background: #FCF6F5;
border-radius: 4px;
}
.form-error p { font-size: .875rem; color: var(--text-mid); line-height: 1.65; margin: 0; }
.form-error strong { color: #A03225; }
.form-error a[href^="mailto"] { color: var(--ink); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════════════════
CLIENTS / INDUSTRIES STRIP
═══════════════════════════════════════════════════════════════════════════ */
.industries-section { background: var(--off-white); padding: 5rem 0; }
.industries-grid {
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 1.25rem;
margin-top: 3rem;
}
.industry-item {
background: var(--white);
border-radius: 6px;
padding: 2rem 1.25rem;
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease-smooth), box-shadow .3s;
}
.industry-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.industry-item .icon { font-size: 2.25rem; margin-bottom: .875rem; display: block; }
.industry-item h4 {
font-family: var(--font-sans);
font-size: .8125rem;
font-weight: 600;
color: var(--ink);
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.grid-4 { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.industries-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
:root { --nav-h: 68px; }
.section { padding: 4rem 0; }
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
.mobile-menu { display: flex; }
.grid-2 { grid-template-columns: 1fr; gap: 2.5rem; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.why-cards { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2,1fr); }
.stat-item:nth-child(2) { border-right: none; }
.stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.1); }
.stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.1); border-right: none; }
.about-text { padding-left: 0; }
.about-image-badge { bottom: -1rem; right: -1rem; }
.about-features { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-bottom { flex-direction: column; text-align: center; }
.contact-wrap { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
/* 3rem of padding each side ate 96px of a 338px container, and a grid item's
automatic minimum is its min-content width — so the column refused to drop
below ~393px and pushed the page sideways. min-width:0 lets it shrink. */
.contact-info, .contact-form { padding: 2rem 1.5rem; min-width: 0; }
.product-big-card .grid-2 { grid-template-columns: 1fr; }
.product-big-img { min-height: 260px; }
.product-big-body { padding: 2rem; }
.industries-grid { grid-template-columns: repeat(2,1fr); }
.wa-float .wa-label { display: none; }
.wa-float { padding: 1rem; }
.hero h1 { font-size: 2.25rem; }
.hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; }
.industries-grid { grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ===========================================================================
PRODUCTS PAGE - neutral editorial layout
=========================================================================== */
.page-products {
--pp-white: #FFFFFF;
--pp-grey: #F2F2F2;
--pp-ink: #000000;
--pp-text: #333333;
--pp-mute: #605E5C;
--pp-rule: #E5E5E5;
}
/* -- Hero -- */
.prod-hero {
background: var(--pp-white);
padding: calc(var(--nav-h) + 4.5rem) 0 3.5rem;
}
.prod-crumb {
display: flex; gap: .55rem; align-items: center;
font-size: .75rem; color: var(--pp-mute); margin-bottom: 2.25rem;
}
.prod-crumb a { color: var(--pp-mute); }
.prod-crumb a:hover { color: var(--pp-ink); }
.prod-hero h1 {
font-family: var(--font-sans);
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 500;
line-height: 1.06;
letter-spacing: -.015em;
color: var(--pp-ink);
text-transform: uppercase;
}
.prod-hero p {
margin-top: 1.15rem;
font-size: 1rem;
color: var(--pp-mute);
max-width: 34rem;
}
/* -- Sticky tab bar -- */
.prod-tabbar {
position: sticky; top: var(--nav-h); z-index: 100;
background: var(--pp-white);
border-top: 1px solid var(--pp-rule);
border-bottom: 1px solid var(--pp-rule);
}
.prod-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.prod-tabs::-webkit-scrollbar { display: none; }
.prod-tab {
padding: 1.05rem 1.5rem;
font-size: .6875rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--pp-mute);
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .2s, border-color .2s;
}
.prod-tab:first-child { padding-left: 0; }
.prod-tab:hover { color: var(--pp-ink); }
.prod-tab.active { color: var(--pp-ink); border-bottom-color: var(--pp-ink); }
/* -- Category sections -- */
.cat { background: var(--pp-white); padding: 4.5rem 0 5rem; }
.cat--alt { background: var(--pp-grey); }
.cat-banner {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
overflow: hidden;
background: var(--pp-grey);
margin-bottom: 2.75rem;
}
.cat-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-banner .ph { width: 100%; height: 100%; }
.cat-tag {
display: inline-block;
font-size: .625rem;
font-weight: 500;
letter-spacing: .17em;
text-transform: uppercase;
color: var(--pp-mute);
margin-bottom: 1.25rem;
}
.cat-tag--over {
position: absolute; top: 1.25rem; right: 1.5rem;
margin: 0;
color: rgba(255,255,255,.94);
text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.cat-head { margin-bottom: 2.25rem; }
.cat-head h2 {
font-family: var(--font-sans);
font-size: clamp(1.6rem, 3.2vw, 2.25rem);
font-weight: 500;
letter-spacing: .01em;
line-height: 1.12;
color: var(--pp-ink);
text-transform: uppercase;
}
.cat-head p {
margin-top: .7rem;
font-size: .9375rem;
color: var(--pp-mute);
max-width: 36rem;
line-height: 1.65;
}
/* -- Photo grids -- */
.detail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 2.5rem;
}
.detail-grid .ph, .detail-grid .shot { aspect-ratio: 3 / 4; }
.pair-grid {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 10px;
margin-bottom: 2.25rem;
}
.pair-grid--flip { grid-template-columns: 1fr 1.45fr; }
.pair-grid .ph, .pair-grid .shot { aspect-ratio: 4 / 3; }
.shot { overflow: hidden; background: var(--pp-grey); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder blocks - swap for when photos land */
.ph {
position: relative;
display: flex;
align-items: flex-end;
background: #CFCCC4;
}
.ph::after {
content: attr(data-slot);
font-size: .625rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(0,0,0,.4);
padding: 10px 12px;
}
.ph-slate { background: #8FA0AD; }
.ph-sand { background: #C8BCA9; }
.ph-stone { background: #B7B0A6; }
.ph-olive { background: #7F8C7A; }
.ph-mint { background: #A8B5B0; }
/* -- Spec rows -- */
.spec-rows { margin-bottom: 2.25rem; }
.spec-rows > div {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
padding: .8rem 0;
border-top: 1px solid var(--pp-rule);
}
.spec-rows > div:last-child { border-bottom: 1px solid var(--pp-rule); }
.spec-rows dt {
font-size: .625rem;
font-weight: 500;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--pp-mute);
padding-top: .15rem;
}
.spec-rows dd {
font-size: .875rem;
color: var(--pp-text);
line-height: 1.55;
}
.cat--alt .spec-rows > div { border-color: #E0E0E0; }
/* -- Solid button -- */
.btn-solid {
display: inline-block;
background: var(--pp-ink);
color: #fff;
font-size: .6875rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
padding: .85rem 1.65rem;
transition: opacity .2s;
}
.btn-solid:hover { opacity: .75; color: #fff; }
/* -- Process -- */
.process { background: var(--pp-ink); padding: 5rem 0; }
.process-label {
display: block;
font-size: .625rem; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 2.75rem;
}
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.process-num {
display: block;
font-size: .625rem; letter-spacing: .15em;
color: rgba(255,255,255,.4);
margin-bottom: .9rem;
}
.process-step h3 {
font-family: var(--font-sans);
font-size: .9375rem; font-weight: 500;
color: #fff; margin-bottom: .55rem;
text-transform: uppercase; letter-spacing: .02em;
}
.process-step p { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.6; }
/* -- Closing CTA -- */
.prod-cta { background: var(--pp-white); padding: 5rem 0; text-align: center; }
.prod-cta h2 {
font-family: var(--font-sans);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 500; color: var(--pp-ink);
text-transform: uppercase; letter-spacing: .01em;
}
.prod-cta p { margin: .8rem 0 1.85rem; font-size: .9375rem; color: var(--pp-mute); }
/* -- Responsive -- */
@media (max-width: 900px) {
.process-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem; }
}
@media (max-width: 720px) {
.cat { padding: 3rem 0 3.5rem; }
.cat-banner { aspect-ratio: 3 / 2; margin-bottom: 1.75rem; }
.detail-grid { grid-template-columns: repeat(2, 1fr); }
.pair-grid, .pair-grid--flip { grid-template-columns: 1fr; }
.spec-rows > div { grid-template-columns: 1fr; gap: .3rem; }
.process-grid { grid-template-columns: 1fr; }
.prod-hero { padding-top: calc(var(--nav-h) + 3rem); }
}
/* -- Light nav for the products page -- */
.page-products .nav,
.page-products .nav.scrolled {
background: #FFFFFF;
box-shadow: none;
border-bottom: 1px solid var(--pp-rule);
}
.page-products .nav-logo .wordmark { color: var(--pp-ink); }
.page-products .nav-links a { color: var(--pp-mute); }
.page-products .nav-links a:hover,
.page-products .nav-links a.active { color: var(--pp-ink); }
.page-products .nav-links a::after { background: var(--pp-ink); }
.page-products .hamburger span { background: var(--pp-ink); }
/* ===========================================================================
SITE-WIDE NEUTRAL SCHEME - brings index/about/contact in line with products
=========================================================================== */
/* Headings become sans. The wordmark stays serif as the brand mark. */
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 500; letter-spacing: .01em; }
.wordmark { font-family: var(--font-serif); }
h1, .section-title, .cta-band h2 { text-transform: uppercase; }
.hero h1, .page-hero h1 { letter-spacing: -.015em; line-height: 1.06; }
.mobile-menu a {
font-family: var(--font-sans);
font-size: 1.5rem; font-weight: 500;
text-transform: uppercase; letter-spacing: .08em;
}
.mobile-menu a:hover { color: rgba(255,255,255,.62); }
/* Eyebrow labels match .cat-tag on the products page */
.eyebrow {
font-size: .625rem;
font-weight: 500;
letter-spacing: .17em;
color: var(--text-light);
}
/* Divider becomes a hairline rather than a gold bar */
.gold-line {
width: 34px; height: 1px;
background: var(--ink);
opacity: .3;
border-radius: 0;
margin-bottom: 1.25rem;
}
/* Buttons: square, uppercase, matching .btn-solid */
.btn {
border-radius: 0;
font-size: .6875rem;
font-weight: 500;
letter-spacing: .13em;
text-transform: uppercase;
padding: .85rem 1.65rem;
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--ink-light); transform: none; box-shadow: none; }
.btn-outline:hover { border-color: var(--white); color: var(--white); transform: none; }
.btn-outline-navy:hover { transform: none; }
/* On dark sections the primary button inverts to stay visible */
.hero .btn-primary,
.stats-strip .btn-primary,
.why-strip .btn-primary,
.page-hero .btn-primary { background: var(--white); color: var(--ink); }
.hero .btn-primary:hover,
.stats-strip .btn-primary:hover,
.why-strip .btn-primary:hover,
.page-hero .btn-primary:hover { background: rgba(255,255,255,.82); color: var(--ink); }
/* CTA band: light ground, no gradient (its text and button are already black) */
.cta-band { background: var(--off-white); }
/* Light nav across every page */
.nav, .nav.scrolled {
background: #FFFFFF;
box-shadow: none;
border-bottom: 1px solid var(--border);
}
.nav-logo .wordmark { color: var(--ink); }
.nav-links a { color: var(--text-light); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a::after { background: var(--ink); }
.hamburger span { background: var(--ink); }
/* Hero content clears the now-opaque nav */
.hero { padding-top: var(--nav-h); }
/* Hero specks read as texture, not gold confetti */
.hero-particles span { background: rgba(255,255,255,.38); }
/* Dark section accent — the accent variable flips to light so every
var(--accent) usage stays legible without patching each rule. */
.hero, .page-hero, .stats-strip, .why-strip, .footer, .mobile-menu, .process {
--accent: rgba(255,255,255,.62);
--accent-light: rgba(255,255,255,.88);
}
.hero h1 em { font-style: italic; }
/* Footer ground was a dark navy hex outside the sweep */
.footer { background: #000000; }
/* Slightly stronger hero scrim so the headline holds against a busy photo */
.hero-bg {
background:
linear-gradient(135deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.74) 58%, rgba(0,0,0,.58) 100%),
url('Photos/hero-floor.jpg') center/cover no-repeat;
}
/* Industry tiles use line icons rather than emoji */
.industry-item .icon {
font-size: 0;
display: flex;
justify-content: center;
margin-bottom: 1rem;
color: var(--ink);
}
.industry-item .icon svg { width: 26px; height: 26px; }
/* Tiles are links to the matching range — they need to look and behave like it. */
.industry-item {
border: 1px solid var(--border); box-shadow: none; border-radius: 0;
display: block; text-decoration: none; color: inherit;
}
.industry-item:hover,
.industry-item:focus-visible { transform: none; box-shadow: none; border-color: var(--ink); background: var(--off-white); }
.industry-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.industry-item:hover h4 { text-decoration: underline; text-underline-offset: 3px; }
/* Numerals follow the sans scheme too */
.stat-number, .about-image-badge strong {
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: -.01em;
}
/* ===========================================================================
TYPE SCALE - one system across all four pages
=========================================================================== */
h1, h2, h3, h4 { font-weight: 500; }
/* Page-level titles */
.hero h1 { font-size: clamp(2.75rem, 5.5vw, 4.25rem); }
.page-hero h1, .prod-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
/* Section titles - one size everywhere */
.section-title, .cat-head h2,
.cta-band h2, .prod-cta h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
/* Panel titles */
.contact-info > h3, .contact-form > h3 { font-size: 1.5rem; }
/* Card and list-item titles */
.product-card-body h3, .why-card h3,
.value-card h3 { font-size: 1.0625rem; }
/* Numbered step titles stay uppercase and smaller */
.process-step h3 { font-size: .9375rem; text-transform: uppercase; letter-spacing: .02em; }
/* Small label headings */
.feature-text h4, .industry-item h4 { font-size: .8125rem; }
.footer-col h4, .contact-detail-text h4 { font-size: .75rem; }
.form-success h4 { font-size: 1.25rem; }
/* One heading weight - these selectors were still carrying 600 */
.feature-text h4, .why-card h3, .footer-col h4,
.value-card h3, .industry-item h4,
.product-card-body h3, .contact-detail-text h4 { font-weight: 500; }
/* Eyebrow matches the products page .cat-tag */
.eyebrow { font-weight: 500; }
/* Homepage product showcase - 4 categories, one clean row */
.products-preview .grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .products-preview .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .products-preview .grid-3 { grid-template-columns: 1fr; } }
/* ===========================================================================
HOSPITAL PAGE
=========================================================================== */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Fallbacks let this work outside body.page-products, where --pp-* is undefined. */
.b2h-note {
margin-top: 1.1rem !important;
font-size: .8125rem !important;
color: var(--pp-mute, var(--text-light));
border-left: 2px solid var(--pp-ink, var(--ink));
padding-left: .85rem;
max-width: 32rem;
}
/* -- Credentials strip -- */
.cred-strip { background: var(--pp-ink); padding: 3.25rem 0; }
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.cred-num {
display: block;
font-size: 1.75rem; font-weight: 500; color: #fff;
letter-spacing: -.01em; margin-bottom: .5rem;
}
.cred-item p { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.55; }
/* -- Tier explainer -- */
.tier-intro { background: var(--pp-white); padding: 4.5rem 0 1rem; }
.tier-intro h2 {
font-family: var(--font-sans); font-weight: 500;
color: var(--pp-ink); text-transform: uppercase; letter-spacing: .01em;
margin-bottom: .7rem;
}
.tier-intro > .container > p {
font-size: .9375rem; color: var(--pp-mute); max-width: 40rem; line-height: 1.65;
}
.tier-cards {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; margin-top: 2.5rem;
background: var(--pp-rule);
border: 1px solid var(--pp-rule);
}
.tier-card { background: var(--pp-white); padding: 1.4rem 1.5rem; }
.tier-name {
display: block;
font-size: .6875rem; font-weight: 500; letter-spacing: .15em;
text-transform: uppercase; color: var(--pp-ink); margin-bottom: .55rem;
}
.tier-card p { font-size: .8125rem; color: var(--pp-mute); line-height: 1.6; }
/* -- Tier table -- */
.tier-table {
width: 100%; border-collapse: collapse; margin-bottom: 2.25rem;
table-layout: fixed;
}
.tier-table th {
text-align: left;
font-size: .625rem; font-weight: 500; letter-spacing: .15em;
text-transform: uppercase; color: var(--pp-mute);
padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--pp-ink);
}
.tier-table td {
font-size: .875rem; color: var(--pp-text);
padding: .8rem 1rem .8rem 0;
border-bottom: 1px solid var(--pp-rule);
vertical-align: top;
}
.tier-table th:first-child, .tier-table td:first-child { width: 11rem; }
.tier-table th:nth-child(2), .tier-table td:nth-child(2) { width: 8rem; }
.tier-table td:first-child { color: var(--pp-ink); }
.cat--alt .tier-table td { border-bottom-color: #E0E0E0; }
/* -- Grid variants -- */
.detail-grid--3 { grid-template-columns: repeat(3, 1fr); }
.detail-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 44rem; }
.hole-shot {
overflow: hidden; margin-bottom: 2.5rem;
aspect-ratio: 3 / 2; max-width: 52rem; background: var(--pp-grey);
}
.hole-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* -- Catalogue note -- */
.cat-note { background: var(--pp-grey); padding: 2.5rem 0; }
.cat-note p {
font-size: .8125rem; color: var(--pp-mute); line-height: 1.7;
max-width: 44rem; border-left: 2px solid var(--pp-ink); padding-left: 1rem;
}
/* -- Contact block -- */
.hosp-contact { background: var(--pp-ink); padding: 5rem 0; }
.hosp-contact h2 {
font-family: var(--font-sans); font-weight: 500; color: #fff;
text-transform: uppercase; letter-spacing: .01em; margin-bottom: 1rem;
}
.hosp-contact-intro {
font-size: .9375rem; color: rgba(255,255,255,.62); line-height: 1.7;
max-width: 44rem; margin-bottom: 2.5rem;
}
.contact-people {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.person-name {
display: block;
font-size: .625rem; font-weight: 500; letter-spacing: .15em;
text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .6rem;
}
.contact-people a {
font-size: .9375rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3);
padding-bottom: 2px; transition: border-color .2s;
}
.contact-people a:hover { border-bottom-color: #fff; color: #fff; }
.person-plain { font-size: .875rem; color: rgba(255,255,255,.62); line-height: 1.6; }
.hosp-contact .btn-solid {
background: #fff; color: var(--pp-ink);
}
.hosp-contact .btn-solid:hover { opacity: .8; color: var(--pp-ink); }
/* -- Responsive -- */
@media (max-width: 900px) {
.cred-grid, .contact-people { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.tier-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.cred-grid, .contact-people { grid-template-columns: 1fr; }
.detail-grid--3 { grid-template-columns: repeat(2, 1fr); }
.tier-table th:first-child, .tier-table td:first-child { width: 8rem; }
.tier-table th:nth-child(2), .tier-table td:nth-child(2) { width: 5.5rem; }
.tier-table th, .tier-table td { font-size: .75rem; }
}
/* -- Paired actions -- */
.cat-actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.btn-line {
font-size: .6875rem; font-weight: 500; letter-spacing: .13em;
text-transform: uppercase; color: var(--pp-ink);
border-bottom: 1px solid var(--pp-ink); padding-bottom: 3px;
transition: opacity .2s;
}
.btn-line:hover { opacity: .6; color: var(--pp-ink); }
/* Text-valued stat (e.g. "Pan-India") — keep on one line alongside the numerals */
.stat-number--text { white-space: nowrap; font-size: clamp(1.5rem, 2.6vw, 2.125rem); }
/* About-teaser image is a wide flat-lay; 4:5 cropped away most of it */
.about-image-main { aspect-ratio: 4 / 3; height: auto; }
/* Why-us reduced to four cards — 2x2 avoids a 3+1 orphan row */
.why-cards--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .why-cards--four { grid-template-columns: 1fr; } }
/* ===========================================================================
IMAGE LIGHTBOX
=========================================================================== */
.shot img, .cat-banner img, .hole-shot img { cursor: zoom-in; }
.lightbox {
position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,.95);
display: none; align-items: center; justify-content: center;
opacity: 0; transition: opacity .22s ease;
}
.lightbox.open { display: flex; }
.lightbox.shown { opacity: 1; }
.lb-stage {
width: 92vw; height: 86vh;
display: flex; align-items: center; justify-content: center;
overflow: auto;
scrollbar-width: none;
}
.lb-stage::-webkit-scrollbar { display: none; }
.lb-stage img {
max-width: 100%; max-height: 100%;
width: auto; height: auto; object-fit: contain;
flex: 0 0 auto; margin: auto;
cursor: zoom-in; user-select: none;
}
.lb-stage img.zoomed { cursor: grab; max-width: none; max-height: none; }
.lb-stage img.zoomed:active { cursor: grabbing; }
.lb-close, .lb-prev, .lb-next {
position: absolute; z-index: 2;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.4);
}
.lb-close {
top: 1.5rem; right: 1.5rem;
width: 44px; height: 44px; border-radius: 50%;
font-size: 1.5rem; line-height: 1;
}
.lb-prev, .lb-next {
top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%;
font-size: 1.1rem;
}
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
.lb-caption {
position: absolute; bottom: 1.75rem; left: 50%;
transform: translateX(-50%);
text-align: center; color: rgba(255,255,255,.72);
font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
pointer-events: none;
}
.lb-caption .lb-hint {
display: block; margin-top: .4rem;
font-size: .625rem; color: rgba(255,255,255,.4); letter-spacing: .12em;
}
@media (max-width: 720px) {
.lb-prev { left: .6rem; } .lb-next { right: .6rem; }
.lb-close { top: .8rem; right: .8rem; }
.lb-prev, .lb-next { width: 40px; height: 40px; }
}
/* Collage banners: 16:9 source shown whole. Width capped to 16/21 of the viewport
so the rendered height matches a full-bleed 21:9 banner exactly — same weight, no crop. */
.cat-banner--collage {
aspect-ratio: 16 / 9;
max-width: 76.19vw;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 720px) {
.cat-banner--collage { max-width: 100%; aspect-ratio: 16 / 9; }
}
/* ===========================================================================
MOBILE TOUCH TARGETS & LEGIBILITY
Measured at 375px: the hamburger was 32x24, mobile menu links 29px tall and
card links 17px tall — all well under a comfortable thumb. The nav tagline
rendered at 9.6px. Nothing here changes desktop.
=========================================================================== */
@media (max-width: 768px) {
.hamburger {
padding: 10px;
min-width: 44px;
min-height: 44px;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.mobile-menu a {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.card-link {
min-height: 44px;
align-items: center;
}
.nav-logo .tagline,
.footer-brand .tagline { font-size: .6875rem; }
.eyebrow, .process-label, .cat-tag { font-size: .6875rem; }
/* .btn-line is a secondary text link by design; give it tap room above the
underline rather than turning it into a filled button. */
.btn-line {
display: inline-flex;
align-items: flex-end;
min-height: 44px;
}
/* Phone and email are the primary conversion path on a phone — make them
comfortably tappable without changing how they read. */
.footer-contact-item a,
.contact-detail-text a,
.contact-people a { display: inline-block; padding: .5rem 0; }
.quick-strip a { padding: .625rem 0; }
}