/* ========================================
Elena D Beauty — ENHANCED LAYOUT
Extends base.css. Uses existing palette.
======================================== */
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.75rem, 1rem + 5vw, 5.5rem);
--text-display: clamp(3.5rem, 1rem + 8vw, 8rem);
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
--space-32: 8rem;
--font-display: 'Cormorant', 'Cormorant Garamond', 'Georgia', serif;
--font-body: 'Switzer', 'Helvetica Neue', sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
--color-bg: #FAF6F3;
--color-bg-warm: #F3EAE4;
--color-surface: #FFFFFF;
--color-surface-alt: #F5EEE9;
--color-border: #E5D9D1;
--color-divider: #EADFD7;
--color-ink: #2B1C1F;
--color-text: #3D2B2B;
--color-text-muted: #8A7070;
--color-text-faint: #BBA8A8;
--color-primary: #8B4A5E;
--color-primary-hover: #6E3748;
--color-primary-light: #F3E8EC;
--color-gold: #B08E5A;
--color-star: #B08E5A;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--shadow-sm: 0 1px 3px rgba(61, 43, 43, 0.06);
--shadow-md: 0 10px 30px -10px rgba(61, 43, 43, 0.18);
--shadow-lg: 0 30px 60px -20px rgba(61, 43, 43, 0.22);
--content-narrow: 720px;
--content-default: 1100px;
--content-wide: 1280px;
--content-xwide: 1440px;
--transition: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
body {
font-family: var(--font-body);
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
}
/* ========================================
Utility: eyebrow label
======================================== */
.eyebrow {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.eyebrow::before {
content: '';
display: inline-block;
width: 28px;
height: 1px;
background: var(--color-primary);
}
.section-label {
display: flex;
align-items: center;
gap: var(--space-4);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.section-label .num {
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-primary);
letter-spacing: 0.08em;
}
.section-label .rule {
flex: 1;
height: 1px;
background: var(--color-divider);
}
.section-h {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
line-height: 1.02;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.section-h em {
font-style: italic;
color: var(--color-primary);
font-weight: 300;
}
/* ========================================
Header — refined with scroll progress
======================================== */
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(250, 246, 243, 0.88);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
border-bottom: 1px solid rgba(229, 217, 209, 0.7);
}
.header-progress {
position: absolute; left: 0; bottom: -1px; height: 1px;
background: var(--color-primary);
width: 0%;
transition: width 100ms linear;
}
.header-inner {
max-width: var(--content-xwide);
margin: 0 auto;
padding: var(--space-4) var(--space-8);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-8);
}
.logo-group {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
}
.logo-mark {
width: 38px; height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--color-border);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name {
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--color-ink);
}
.logo-tagline {
font-family: var(--font-display);
font-size: 13px; font-style: italic;
color: var(--color-text);
letter-spacing: 0.02em;
}
.header-nav-main {
display: flex; align-items: center;
gap: var(--space-8);
justify-content: center;
}
.header-nav-main a {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-muted);
text-decoration: none;
position: relative;
padding: var(--space-2) 0;
}
.header-nav-main a::after {
content: '';
position: absolute;
left: 50%; bottom: 0;
width: 0; height: 1px;
background: var(--color-primary);
transition: width var(--transition), left var(--transition);
}
.header-nav-main a:hover,
.header-nav-main a.is-active { color: var(--color-ink); }
.header-nav-main a:hover::after,
.header-nav-main a.is-active::after {
width: 18px; left: calc(50% - 9px);
}
.header-right {
display: flex; align-items: center; gap: var(--space-5);
justify-self: end;
}
.header-socials { display: flex; gap: var(--space-4); }
.header-socials a {
color: var(--color-text-muted);
display: flex; align-items: center;
transition: color var(--transition);
}
.header-socials a:hover { color: var(--color-primary); }
.nav-cta {
background: var(--color-primary);
color: #FFF !important;
padding: 10px 22px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--transition), transform var(--transition);
}
.nav-cta:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
/* ========================================
HERO — asymmetric editorial split
======================================== */
.hero-new {
position: relative;
padding: clamp(var(--space-10), 6vw, var(--space-20)) var(--space-8) var(--space-16);
max-width: var(--content-xwide);
margin: 0 auto;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(var(--space-8), 5vw, var(--space-16));
align-items: center;
position: relative;
}
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow {
font-family: var(--font-body);
font-size: 11px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-8);
display: block;
text-align: center;
/* Override base.css's `p { max-width: 72ch }` readability default — the
eyebrow is a short uppercase tag-line, not body copy, and 72ch at this
letter-spacing forced an unwanted wrap. nowrap also keeps the three
segments locked on one line; below 560px viewport we drop nowrap and
trim letter-spacing so the line wraps gracefully instead of overflowing. */
max-width: none;
white-space: nowrap;
}
@media (max-width: 560px) {
.hero-eyebrow {
white-space: normal;
letter-spacing: 0.08em;
font-size: 10px;
}
}
.hero-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(3rem, 1rem + 7vw, 7rem);
line-height: 0.95;
letter-spacing: -0.02em;
text-align: center; /* center the main hero words on every viewport (added 2026-05-12) */
color: var(--color-ink);
margin-bottom: var(--space-8);
}
.hero-title .italic {
font-style: italic;
color: var(--color-primary);
font-weight: 300;
}
.hero-title .script {
font-style: italic;
font-weight: 300;
display: inline-block;
}
.hero-title .amp {
font-style: italic;
font-weight: 300;
color: var(--color-primary);
margin: 0 0.1em;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-8);
padding: var(--space-5) 0;
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
margin-bottom: var(--space-8);
max-width: 520px;
}
.hero-meta-item {
display: flex; flex-direction: column; gap: 4px;
align-items: center;
text-align: center;
}
.hero-meta-item .k {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-faint);
}
.hero-meta-item .v {
font-family: var(--font-display);
font-size: 1.25rem;
font-style: italic;
color: var(--color-ink);
line-height: 1.3;
}
.hero-meta-item .num-em {
font-style: italic;
color: var(--color-primary);
font-weight: 400;
font-size: 1.35rem;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
justify-content: center;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: #FFF;
background: var(--color-primary);
padding: 18px 32px;
border-radius: 999px;
text-decoration: none;
border: none; cursor: pointer;
transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
.btn-primary .arrow {
width: 14px; height: 10px;
transition: transform var(--transition);
}
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-ghost {
display: inline-flex;
align-items: center; gap: var(--space-3);
font-family: var(--font-body);
font-size: 12px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--color-ink);
padding: 18px 4px;
text-decoration: none;
border-bottom: 1px solid var(--color-ink);
}
.btn-ghost:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* Hero right column */
.hero-visual {
position: relative;
width: 100%;
}
/* Pinboard in hero context — scale down for the narrower column */
.hero-pinboard {
/* Proportions locked to the pinboard itself (% padding/gap) so the photos
fill the same fraction of the board at every viewport / zoom level.
Previously these were vw-based and the floor (32px / 2rem) caused the
photos to look small inside a wide blank border at narrower windows. */
--pin-gap: clamp(8px, 1.5%, 14px);
padding: 3.5% 3.5% 5% !important;
grid-template-columns: repeat(6, 1fr) !important;
grid-auto-rows: max-content !important;
overflow: visible;
}
.hero-pinboard::after {
content: '';
position: absolute;
inset: 0;
background-image: url('./hero-cards.jpg');
background-size: cover;
background-position: center;
opacity: 0.07;
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.hero-pinboard .pin { padding: 6px 6px 22px; aspect-ratio: 1 / 1.08; min-height: 0; z-index: 2; }
.hero-pinboard .pin-1 { grid-column: 1 / span 3; grid-row: 1 / span 1; transform: rotate(-2.5deg); }
.hero-pinboard .pin-2 { grid-column: 4 / span 3; grid-row: 1 / span 1; transform: rotate(1.8deg) translateY(10px); }
.hero-pinboard .pin-3 { grid-column: 1 / span 3; grid-row: 2 / span 1; transform: rotate(2.2deg) translateY(14px); }
.hero-pinboard .pin-4 { grid-column: 4 / span 3; grid-row: 2 / span 1; transform: rotate(-2.8deg) translateY(4px); }
.hero-pinboard .pin-5 { grid-column: 1 / span 3; grid-row: 3 / span 1; transform: rotate(3deg); }
.hero-pinboard .pin-6 { grid-column: 4 / span 3; grid-row: 3 / span 1; transform: rotate(-1.8deg) translateY(8px); }
/* All pinboard accents are circular thumbtack pins, each in a different
color from the site's mauve / blush / gold / cream / sage palette.
Previously pins 2/4/6 used wide rectangular "washi tape" shapes — replaced
with circles for visual consistency. Applies to desktop AND mobile. */
.hero-pinboard .pin::before { width: 11px; height: 11px; top: -5px; }
.hero-pinboard .pin-1::before { background: radial-gradient(circle at 30% 30%, #C47B85 0%, #833941 55%, #5C2128 100%); } /* burgundy mauve */
.hero-pinboard .pin-2::before { background: radial-gradient(circle at 30% 30%, #DBB678 0%, #A88747 55%, #6E5728 100%); } /* gold / champagne */
.hero-pinboard .pin-3::before { background: radial-gradient(circle at 30% 30%, #E5B5BC 0%, #B0727A 55%, #834D55 100%); } /* dusty rose */
.hero-pinboard .pin-4::before { background: radial-gradient(circle at 30% 30%, #9FAA8A 0%, #6E7B5C 55%, #4A5240 100%); } /* sage olive */
.hero-pinboard .pin-5::before { background: radial-gradient(circle at 30% 30%, #BC8AA0 0%, #7A4458 55%, #4F2638 100%); } /* deep plum */
.hero-pinboard .pin-6::before { background: radial-gradient(circle at 30% 30%, #E5B19B 0%, #B07A5E 55%, #804D38 100%); } /* warm peach */
.hero-pinboard .pinboard-stamp {
right: clamp(10px, 2vw, 20px);
bottom: clamp(10px, 2vw, 20px);
padding: 6px 10px;
}
.hero-pinboard .pinboard-stamp-l1 { font-size: 0.95rem; }
.hero-pinboard .pinboard-stamp-l2 { font-size: 8px; letter-spacing: 0.25em; }
/* Legacy hero collage (now unused — kept safe) */
.hero-collage {
display: grid;
grid-template-rows: auto auto;
gap: var(--space-4);
}
.hc-main {
margin: 0;
position: relative;
overflow: hidden;
background: var(--color-surface-alt);
box-shadow: var(--shadow-lg);
min-height: 0;
aspect-ratio: 3 / 4;
}
.hc-main > img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hc-main figcaption {
position: absolute;
left: var(--space-4);
bottom: var(--space-4);
right: var(--space-4);
display: flex;
align-items: baseline;
gap: var(--space-3);
color: #FFF;
}
.hc-main-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
opacity: 0.85;
}
.hc-main-cap {
font-family: var(--font-body);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.92;
}
.hc-main-cap em {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
}
.hc-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.hc-sm {
margin: 0;
position: relative;
overflow: hidden;
background: var(--color-surface-alt);
box-shadow: var(--shadow-md);
aspect-ratio: 4 / 3;
}
.hc-sm > img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hc-sm figcaption {
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 0.95rem;
color: #FFF;
text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.hero-visual-main {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 2px;
box-shadow: var(--shadow-lg);
background: var(--color-surface-alt) center/cover;
}
.hero-visual-main img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.hero-visual-tag {
position: absolute;
left: -36px;
top: 32px;
transform: rotate(-90deg);
transform-origin: left top;
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-text-muted);
white-space: nowrap;
z-index: 2;
}
.hero-visual-caption {
position: absolute;
right: -8px;
bottom: -24px;
background: var(--color-bg);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-divider);
box-shadow: var(--shadow-md);
max-width: 220px;
z-index: 2;
}
.hero-visual-caption .num {
font-family: var(--font-display);
font-size: 2.4rem;
font-style: italic;
font-weight: 300;
color: var(--color-primary);
line-height: 1;
display: block;
margin-bottom: 2px;
}
.hero-visual-caption .lbl {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1.4;
}
.hero-bgword {
position: absolute;
left: -4%;
top: 6%;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(8rem, 18vw, 20rem);
color: var(--color-primary);
opacity: 0.05;
letter-spacing: -0.04em;
line-height: 0.9;
pointer-events: none;
z-index: 0;
user-select: none;
}
/* Marquee strip under hero */
.hero-marquee {
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
padding: var(--space-5) 0;
overflow: hidden;
background: var(--color-bg);
margin-top: var(--space-12);
}
.hero-marquee-track {
display: flex;
gap: var(--space-12);
white-space: nowrap;
animation: marquee 40s linear infinite;
}
.hero-marquee-item {
font-family: var(--font-display);
font-size: 1.5rem;
font-style: italic;
font-weight: 300;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: var(--space-12);
flex-shrink: 0;
}
.hero-marquee-item::after {
content: '✦';
color: var(--color-primary);
font-size: 0.8rem;
font-style: normal;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ========================================
ABOUT — overlapping editorial spread
======================================== */
.about-new {
position: relative;
padding: clamp(var(--space-16), 10vw, var(--space-32)) var(--space-8);
max-width: var(--content-xwide);
margin: 0 auto;
}
.about-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(var(--space-8), 6vw, var(--space-16));
align-items: center;
}
.about-photo-wrap {
position: relative;
aspect-ratio: 4/5;
}
.about-photo-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
box-shadow: var(--shadow-lg);
}
.about-photo-framelabel {
position: absolute;
left: -20px;
bottom: 40px;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.about-photo-badge {
position: absolute;
right: -40px; top: -40px;
width: 140px; height: 140px;
border-radius: 50%;
background: var(--color-primary);
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-display);
font-size: 0.95rem;
font-style: italic;
line-height: 1.3;
padding: var(--space-4);
box-shadow: var(--shadow-md);
animation: slowspin 40s linear infinite;
}
.about-photo-badge span {
display: block;
font-weight: 400;
}
@keyframes slowspin { to { transform: rotate(360deg); } }
/* about-content fills the right column so the eyebrow line, signature
divider, and stats divider all extend to the column's right edge —
matching where the Services eyebrow line ends. Inner prose is
constrained separately for readable line length. */
.about-content { width: 100%; text-align: center; }
.about-content .about-quote {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.about-content .about-body {
max-width: 560px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.about-quote {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: clamp(1.75rem, 0.8rem + 2.2vw, 2.6rem);
line-height: 1.25;
color: var(--color-ink);
margin-bottom: var(--space-8);
letter-spacing: -0.005em;
}
.about-quote::first-letter {
font-size: 1.4em;
color: var(--color-primary);
}
.about-body {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.about-body p {
font-size: 15px;
color: var(--color-text);
line-height: 1.75;
}
.about-sign {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
border-top: 1px solid var(--color-divider);
padding-top: var(--space-5);
text-align: center;
}
.about-sign-name {
font-family: var(--font-display);
font-style: italic;
font-size: 1.6rem;
color: var(--color-primary);
font-weight: 400;
line-height: 1;
}
.about-sign-title {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1.4;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-8);
padding-top: var(--space-5);
border-top: 1px solid var(--color-divider);
text-align: center;
}
.about-stat .v {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 300;
font-style: italic;
color: var(--color-primary);
line-height: 1;
display: block;
margin-bottom: 6px;
}
.about-stat .k {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* ========================================
SERVICES — numbered horizontal cards
======================================== */
.services-new {
background: var(--color-bg-warm);
padding: clamp(var(--space-16), 10vw, var(--space-24)) 0;
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
.services-inner {
max-width: var(--content-xwide);
margin: 0 auto;
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.services-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-12);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-divider);
}
.services-head-right {
max-width: 360px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.65;
color: var(--color-text-muted);
}
.services-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.service-card-new {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-divider);
padding: var(--space-8);
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-5);
min-height: 360px;
transition: transform var(--transition), box-shadow var(--transition);
}
.service-card-new:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.service-card-new .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--color-primary);
}
.service-card-new h3 {
font-family: var(--font-display);
font-weight: 300;
font-size: 2.2rem;
line-height: 1;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.service-card-new h3 em {
font-style: italic;
color: var(--color-primary);
}
.service-card-new p {
font-size: 14px;
line-height: 1.7;
color: var(--color-text-muted);
}
.service-card-new ul {
list-style: none;
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px solid var(--color-divider);
display: grid;
gap: var(--space-2);
}
.service-card-new ul li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--color-text);
}
.service-card-new ul li::before {
content: '';
width: 14px; height: 1px;
background: var(--color-primary);
}
/* ========================================
PROCESS — quiet, numbered strip
======================================== */
.process-section {
background: var(--color-bg-warm);
padding: clamp(var(--space-16), 10vw, var(--space-24)) 0;
border-top: 1px solid var(--color-divider);
border-bottom: 1px solid var(--color-divider);
}
.process-inner {
max-width: var(--content-xwide);
margin: 0 auto;
padding-left: var(--space-8);
padding-right: var(--space-8);
display: grid;
grid-template-columns: 0.8fr 1.2fr;
grid-template-rows: auto auto auto;
column-gap: clamp(var(--space-8), 6vw, var(--space-16));
row-gap: 0;
align-items: stretch; /* row 3 children fill the row height so kit bottom aligns with last step bottom */
}
.process-inner > .section-label {
grid-column: 1 / -1;
grid-row: 1;
margin-bottom: var(--space-6);
}
.process-inner > .section-h {
grid-column: 1;
grid-row: 2;
margin-bottom: var(--space-6);
}
.process-inner > .process-inquiry {
grid-column: 2;
grid-row: 2;
align-self: end;
justify-self: end;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
white-space: nowrap;
transition: letter-spacing var(--transition);
margin-bottom: var(--space-6); /* match h2 margin so they share a baseline */
}
.process-inner > .process-inquiry:hover { letter-spacing: 0.22em; }
.process-inner > .process-content {
grid-column: 1;
grid-row: 3;
display: flex;
flex-direction: column;
align-self: stretch; /* fill row height so margin-top: auto on .process-kit pushes the photo to the bottom of the column */
}
.process-inner > .process-steps {
grid-column: 2;
grid-row: 3;
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: stretch;
}
.process-blurb {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.6rem);
line-height: 1.35;
color: var(--color-ink);
text-wrap: pretty;
margin: 0 auto var(--space-8); /* center as block so its centerline matches the kit photo below */
max-width: 50ch;
}
/* Kit photo: centered horizontally in the left column, matching the visual
area of the blurb above it. Reuses .wd-tile styling for the overlay
gradient + figcaption typography (italic title + uppercase subline).
The source (hero-flatlay.jpg) is portrait 1067×1600 (~2:3). We display a
CSS-cropped slice running from the purse-handle top down to the shoe-bottom
(~y60 → y1460 in the source), so the new effective aspect is ~1067:1400.
Per repo Asset rules — never distort; here we crop via object-position
instead of re-encoding the JPEG. The rendered height stays ~540px (same
as the previous 360×540 layout) while the rendered width grows to ~412px,
filling more of the column's blank space. */
.process-kit {
width: 100%;
max-width: 412px;
margin: 0 auto;
margin-top: auto; /* push to bottom of column so its bottom aligns with the last process step */
}
.process-kit.wd-tile {
aspect-ratio: 1067 / 1400;
/* Restore auto margins overridden by .wd-tile { margin: 0 }: top auto pushes
to bottom of column, left/right auto centers horizontally so kit centerline
matches the blurb's centerline above. */
margin: auto auto 0;
}
.process-kit.wd-tile img {
/* Slide the visible region downward so the purse-handle apex sits right
at the top edge and the shoe bottom sits right at the bottom edge.
Source 1600 tall, container 1400 tall → 200px gets cropped; at 60%
that's 120px off the top (cream above the handle) + 80px off the
bottom (cream below the shoe), revealing y≈[120, 1520] of the source. */
object-position: center 60%;
}
.process-kit.wd-tile figcaption {
grid-template-columns: 1fr auto;
}
.process-steps {
display: grid;
gap: 0;
}
.process-step {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: var(--space-8);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--color-divider);
align-items: baseline;
}
.process-step:first-child { border-top: 0; }
.process-step .step-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--color-primary);
padding-top: 4px;
}
.process-step .step-body h4 {
font-family: var(--font-display);
font-weight: 300;
font-size: 1.8rem;
color: var(--color-ink);
line-height: 1.1;
margin-bottom: var(--space-2);
}
.process-step .step-body h4 em {
font-style: italic;
color: var(--color-primary);
}
.process-step .step-body p {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.6;
max-width: 440px;
}
.process-step .step-meta {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-faint);
white-space: nowrap;
padding-top: 6px;
}
/* ========================================
RECENT WORK — editorial mosaic
======================================== */
.work-new {
padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--space-8);
max-width: var(--content-xwide);
margin: 0 auto;
}
.work-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
.work-head .view-all {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
white-space: nowrap;
transition: letter-spacing var(--transition);
}
.work-head .view-all:hover { letter-spacing: 0.22em; }
/* ========================================
RECENT WORK — 3-tile mosaic
======================================== */
.work-mosaic {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
align-items: start;
}
.work-tile {
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--color-divider);
padding: 0;
background: var(--color-surface-alt);
display: block;
text-align: left;
aspect-ratio: 3 / 4;
/* Layered shadow: soft warm drop shadow for editorial 'lifted' feel + faint
hairline ring (inner inset shadow) for crisp definition against the bg. */
box-shadow:
0 14px 36px -16px rgba(61, 43, 43, 0.22),
0 2px 6px -2px rgba(61, 43, 43, 0.08);
transition: transform var(--transition), box-shadow var(--transition);
}
.work-tile:hover {
transform: translateY(-3px);
box-shadow:
0 22px 48px -16px rgba(61, 43, 43, 0.28),
0 4px 10px -2px rgba(61, 43, 43, 0.12);
}
.work-tile img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 600ms var(--transition), filter 400ms var(--transition);
}
.work-tile:hover img { transform: scale(1.04); filter: brightness(0.88); }
.tile-insta-icon {
position: absolute;
top: 12px;
right: 12px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
pointer-events: none;
z-index: 4;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
transition: transform var(--transition);
}
.tile-insta-icon svg { width: 100%; height: 100%; display: block; }
.work-tile:hover .tile-insta-icon,
.pin:hover .tile-insta-icon { transform: scale(1.1); }
.hero-pinboard .tile-insta-icon {
top: 14px;
right: 14px;
width: 18px;
height: 18px;
}
/* Polaroid-style date in the white border below each pinboard photo */
.pin-date {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--color-text-muted);
pointer-events: none;
z-index: 3;
}
.hero-pinboard .pin-date {
bottom: 5px;
font-size: 0.62rem;
}
/* Pinboard photos: keep top of head close to the top of the frame.
Default 18%, then per-pin overrides because each source photo has
a different head position — we tune toward consistent minimal
space above head across all six pins. */
.hero-pinboard .pin img {
object-position: center 18%;
}
.hero-pinboard .pin-1 img { object-position: center 40%; } /* new insta8 has empty ceiling above head; push down */
.hero-pinboard .pin-2 img { object-position: center 38%; } /* push down to crop empty space above head */
.hero-pinboard .pin-6 img { object-position: center 38%; } /* same — too much headroom by default */
/* Recent Work video tile: match img layout + hover behavior */
.work-tile video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
pointer-events: none;
transition: transform var(--transition), filter var(--transition);
}
.work-tile:hover video { transform: scale(1.04); filter: brightness(0.88); }
.work-tile img { object-position: center 22%; }
/* Tile 1 (Soft romantic bridal — insta8) was reading too close-up;
pull the crop toward the top of the source so more frame is visible. */
.work-mosaic .work-tile:nth-child(1) img { object-position: center 0%; }
.work-tile-caption {
position: absolute;
inset: auto 0 0 0;
padding: var(--space-5) var(--space-5) var(--space-5);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(43,28,31,0.72) 100%);
color: #FFF;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-4);
}
.work-tile-caption .ttl {
font-family: var(--font-display);
font-style: italic;
font-size: 1.3rem;
font-weight: 300;
line-height: 1.1;
}
.work-tile-caption .meta {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.85;
}
/* ========================================
HERO — pinboard (lookbook) variant
======================================== */
.work-pinboard {
--pin-gap: clamp(14px, 1.8vw, 28px);
position: relative;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
gap: var(--pin-gap);
padding: clamp(var(--space-8), 5vw, var(--space-14)) clamp(var(--space-6), 4vw, var(--space-12));
background:
radial-gradient(ellipse at 20% 10%, rgba(131,57,65,0.05) 0%, transparent 55%),
radial-gradient(ellipse at 85% 90%, rgba(131,57,65,0.04) 0%, transparent 55%),
linear-gradient(180deg, #F3EAE1 0%, #EDE0D2 100%);
border: 1px solid var(--color-divider);
border-radius: 2px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.4),
inset 0 1px 0 rgba(255,255,255,0.6),
0 2px 0 rgba(131,57,65,0.04),
0 20px 40px -20px rgba(43,28,31,0.18);
}
/* subtle cork/paper texture via SVG noise */
.work-pinboard::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: 0.35;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
border-radius: inherit;
}
.pin {
position: relative;
display: block;
background: #FFF;
padding: 8px 8px 30px;
box-shadow:
0 1px 1px rgba(43,28,31,0.06),
0 10px 22px -12px rgba(43,28,31,0.35),
0 30px 40px -28px rgba(43,28,31,0.28);
transition: transform 450ms var(--transition), box-shadow 450ms var(--transition), z-index 0s 450ms;
transform-origin: 50% 0%;
will-change: transform;
z-index: 1;
}
.pin::before {
/* pushpin / washi-tape accent */
content: "";
position: absolute;
top: -7px; left: 50%;
transform: translateX(-50%);
width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #C47B85 0%, #833941 55%, #5C2128 100%);
box-shadow:
0 1px 0 rgba(255,255,255,0.5) inset,
0 2px 4px rgba(43,28,31,0.35),
0 6px 8px -4px rgba(43,28,31,0.25);
z-index: 3;
}
.pin img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
aspect-ratio: 1 / 1;
filter: saturate(0.95) contrast(1.02);
transition: filter 350ms var(--transition);
}
.pin:hover {
transform: scale(1.035) rotate(0deg) !important;
z-index: 10;
box-shadow:
0 2px 2px rgba(43,28,31,0.08),
0 20px 40px -18px rgba(43,28,31,0.45),
0 50px 60px -38px rgba(43,28,31,0.35);
transition: transform 280ms var(--transition), box-shadow 280ms var(--transition), z-index 0s;
}
.pin:hover img { filter: saturate(1.05) contrast(1.04); }
/* Scattered grid placements — squareish polaroids, mix of sizes & rotations */
.pin { aspect-ratio: 1 / 1.08; }
.pin-1 { grid-column: 1 / span 5; grid-row: 1 / span 5; transform: rotate(-2.2deg); }
.pin-2 { grid-column: 6 / span 4; grid-row: 2 / span 4; transform: rotate(1.4deg); }
.pin-3 { grid-column: 9 / span 4; grid-row: 1 / span 4; transform: rotate(2.6deg); }
.pin-4 { grid-column: 1 / span 4; grid-row: 6 / span 4; transform: rotate(3.1deg); }
.pin-5 { grid-column: 5 / span 5; grid-row: 6 / span 5; transform: rotate(-1.6deg); }
.pin-6 { grid-column: 10 / span 3; grid-row: 5 / span 3; transform: rotate(-3.2deg); }
.pin-7 { display: none; }
/* Alternate pin accent tones (washi tape look) */
.pin-2::before { width: 48px; height: 16px; border-radius: 2px; background: linear-gradient(135deg, rgba(131,57,65,0.85) 0%, rgba(196,123,133,0.75) 100%); top: -8px; box-shadow: 0 2px 4px rgba(43,28,31,0.25); }
.pin-4::before { width: 52px; height: 14px; border-radius: 1px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.75) 0 4px, rgba(233,215,199,0.85) 4px 8px); top: -6px; box-shadow: 0 2px 4px rgba(43,28,31,0.18); }
.pin-5::before { background: radial-gradient(circle at 30% 30%, #E8D0B8 0%, #B38F71 55%, #6B4A35 100%); }
.pin-6::before { width: 44px; height: 14px; border-radius: 1px; background: linear-gradient(135deg, #F1E4D4 0%, #D9BFA1 100%); top: -6px; box-shadow: 0 2px 4px rgba(43,28,31,0.2); }
/* Lookbook stamp in the corner */
.pinboard-stamp {
position: absolute;
right: clamp(16px, 3vw, 36px);
bottom: clamp(16px, 3vw, 36px);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
pointer-events: none;
transform: rotate(-4deg);
padding: 10px 14px;
border: 1.5px solid rgba(131,57,65,0.55);
border-radius: 2px;
color: rgba(131,57,65,0.75);
background: rgba(255,253,248,0.35);
z-index: 4;
}
.pinboard-stamp-l1 {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
line-height: 1;
letter-spacing: 0.01em;
}
.pinboard-stamp-l2 {
font-family: var(--font-body);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
margin-top: 4px;
}
/* ========================================
RECENT WORK — details strip (still life)
======================================== */
.process-details {
max-width: var(--content-xwide);
margin: 0 auto;
}
.work-details {
margin-top: var(--space-6);
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-10);
align-items: start;
}
.work-details-head {
padding-top: var(--space-3);
}
.work-details-label {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-5);
}
.work-details-label::before {
content: '';
width: 24px;
height: 1px;
background: var(--color-primary);
}
.work-details-head p {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.6rem);
line-height: 1.35;
color: var(--color-ink);
text-wrap: pretty;
max-width: 28ch;
}
.work-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.wd-tile {
margin: 0;
position: relative;
overflow: hidden;
background: var(--color-surface-alt);
aspect-ratio: 4 / 3;
box-shadow: var(--shadow-sm);
}
.wd-tile img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--transition);
}
.wd-tile:hover img { transform: scale(1.03); }
.wd-tile figcaption {
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-4) var(--space-4);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(43,28,31,0.7) 100%);
color: #FFF;
}
.wd-tile figcaption .n {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
opacity: 0.75;
}
.wd-tile figcaption .t {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.3rem;
line-height: 1;
}
.wd-tile figcaption .m {
font-family: var(--font-body);
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.78;
}
/* ========================================
REVIEWS — pull-quote + carousel
======================================== */
.reviews-new {
padding: clamp(var(--space-16), 10vw, var(--space-24)) 0;
background: var(--color-bg);
position: relative;
max-width: var(--content-xwide);
margin: 0 auto;
}
/* WATERMARK — disabled 2026-04-30. To re-enable the lipstick-palette decorative
backdrop on the reviews section, remove the surrounding comment markers around
the .reviews-new::before rule below. The image lives at assets/hero-cards.jpg. */
/*
.reviews-new::before {
content: '';
position: absolute; inset: 0;
background-image: url('./hero-cards.jpg');
background-size: cover;
background-position: center;
opacity: 0.07;
pointer-events: none;
}
*/
.reviews-hero {
max-width: var(--content-default);
margin: 0 auto var(--space-16);
padding: 0 var(--space-8);
text-align: center;
position: relative;
z-index: 1;
}
.reviews-hero .quote-mark {
font-family: var(--font-display);
font-size: 8rem;
color: var(--color-primary);
line-height: 0.7;
opacity: 0.25;
margin-bottom: -28px;
font-style: italic;
}
.reviews-hero blockquote {
font-family: var(--font-display);
font-weight: 300;
font-style: italic;
font-size: clamp(1.5rem, 0.8rem + 2vw, 2.4rem);
line-height: 1.35;
color: var(--color-ink);
margin-bottom: var(--space-6);
letter-spacing: -0.005em;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.reviews-hero cite {
font-family: var(--font-body);
font-size: 12px;
font-style: normal;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.reviews-hero cite::before,
.reviews-hero cite::after {
content: ''; width: 28px; height: 1px; background: var(--color-divider);
}
.reviews-carousel-wrap {
max-width: var(--content-xwide);
margin: 0 auto;
padding: 0 var(--space-8);
position: relative;
z-index: 1;
}
.reviews-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-divider);
}
.reviews-meta-left { display: flex; align-items: center; gap: var(--space-4); }
.reviews-meta-left .stars { display: flex; gap: 2px; }
.reviews-meta-left .rating-num {
font-family: var(--font-display);
font-size: 1.6rem;
font-style: italic;
color: var(--color-ink);
font-weight: 400;
}
.reviews-meta-left .rating-src {
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--color-text-muted);
text-transform: uppercase;
}
.reviews-arrows { display: flex; gap: var(--space-2); }
.review-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--color-divider);
background: transparent;
color: var(--color-ink);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.review-arrow:hover {
background: var(--color-primary); color: #FFF;
border-color: var(--color-primary);
}
.reviews-carousel {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.reviews-carousel::-webkit-scrollbar { display: none; }
.reviews-track {
display: flex;
gap: var(--space-5);
padding: var(--space-3) 0;
}
.review-card-new {
flex-shrink: 0;
min-width: 360px;
max-width: 380px;
background: var(--color-surface);
border: 1px solid var(--color-divider);
padding: var(--space-8);
display: flex;
flex-direction: column;
}
.review-card-new .stars { display: flex; gap: 2px; margin-bottom: var(--space-4); }
.review-card-new p {
font-family: var(--font-display);
font-size: 1.2rem;
font-style: italic;
font-weight: 400;
color: var(--color-ink);
line-height: 1.45;
margin-bottom: var(--space-6);
flex: 1;
}
.review-card-new cite {
font-family: var(--font-body);
font-size: 11px;
font-style: normal;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
padding-top: var(--space-4);
border-top: 1px solid var(--color-divider);
}
/* ========================================
INQUIRY — split panel with form
======================================== */
.inquiry-new {
padding: clamp(var(--space-16), 10vw, var(--space-24)) var(--space-8);
max-width: var(--content-xwide);
margin: 0 auto;
}
.inquiry-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 0;
border: 1px solid var(--color-divider);
background: var(--color-surface);
overflow: hidden;
}
.inquiry-panel {
position: relative;
padding: clamp(var(--space-8), 4vw, var(--space-12));
background: var(--color-ink) url('./lipstick-hand.jpg') center/cover;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 640px;
overflow: hidden;
}
.inquiry-panel::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(43,28,31,0.35) 0%, rgba(43,28,31,0.85) 100%);
z-index: 0;
}
.inquiry-panel > * { position: relative; z-index: 1; }
.inquiry-panel-top .eyebrow { color: #F3E8EC; }
.inquiry-panel-top .eyebrow::before { background: #F3E8EC; }
.inquiry-panel h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2.2rem, 1rem + 3vw, 3.4rem);
line-height: 1.05;
margin: var(--space-4) 0 var(--space-6);
color: #FFF;
}
.inquiry-panel h2 em { font-style: italic; color: #EFD4DC; }
.inquiry-panel-desc {
font-size: 14px;
line-height: 1.7;
opacity: 0.85;
max-width: 380px;
}
.inquiry-contact {
margin-top: var(--space-10);
display: grid;
gap: var(--space-4);
}
.inquiry-contact-item {
display: flex; align-items: center;
gap: var(--space-4);
font-size: 13px;
padding: var(--space-3) 0;
border-top: 1px solid rgba(255,255,255,0.18);
letter-spacing: 0.04em;
text-decoration: none;
color: #FFF;
}
.inquiry-contact-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.18); }
.inquiry-contact-item .ico {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.25);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.inquiry-contact-item .lbl {
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.7;
display: block;
margin-bottom: 2px;
}
.inquiry-contact-item .val {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
}
.inquiry-contact-item:hover .val { color: #EFD4DC; }
.inquiry-booking {
margin-top: var(--space-8);
padding: var(--space-4) var(--space-5);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 2px;
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
display: flex; align-items: center; gap: var(--space-3);
width: fit-content;
}
.inquiry-booking .pulse {
width: 8px; height: 8px; border-radius: 50%;
background: #B7E0A1; position: relative;
}
.inquiry-booking .pulse::after {
content: ''; position: absolute; inset: -4px; border-radius: 50%;
background: #B7E0A1; opacity: 0.4;
animation: ping 2s ease-out infinite;
}
@keyframes ping {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(2); opacity: 0; }
}
.inquiry-form-wrap {
padding: clamp(var(--space-8), 4vw, var(--space-12));
background: var(--color-surface);
}
.inquiry-form {
display: grid;
gap: var(--space-4);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.form-group .optional {
font-weight: 400;
text-transform: none;
color: var(--color-text-faint);
letter-spacing: 0;
margin-left: 4px;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], select, textarea {
width: 100%;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 14px;
border: none;
border-bottom: 1px solid var(--color-border);
background: transparent;
color: var(--color-ink);
border-radius: 0;
transition: border-color var(--transition);
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A7070' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 24px;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--color-primary);
}
textarea { resize: vertical; min-height: 80px; border: 1px solid var(--color-border); padding: 12px; }
input::placeholder, textarea::placeholder { color: var(--color-text-faint); }
.form-footnote {
font-size: 11px;
color: var(--color-text-faint);
font-family: var(--font-mono);
}
.btn-submit {
width: 100%;
padding: 18px;
justify-content: center;
margin-top: var(--space-3);
}
.form-success {
text-align: center;
padding: var(--space-12) var(--space-4);
}
.form-success svg { color: var(--color-primary); margin: 0 auto var(--space-4); }
.form-success h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.8rem; color: var(--color-ink); margin-bottom: var(--space-3); }
.form-success p { font-size: 14px; color: var(--color-text-muted); max-width: 360px; margin: 0 auto; }
.form-error { font-size: 13px; color: #A13544; text-align: center; margin-top: var(--space-2); }
/* ========================================
FOOTER — editorial
======================================== */
.site-footer-new {
background: var(--color-ink);
color: #D7C9C4;
padding: var(--space-20) var(--space-8) var(--space-8);
margin-top: var(--space-16);
}
.footer-grid {
max-width: var(--content-xwide);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
gap: var(--space-10);
padding-bottom: var(--space-16);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand-col .logo-name {
color: #FFF;
display: block;
margin-bottom: var(--space-4);
font-size: 13px;
}
.footer-brand-col .tagline {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 2rem;
line-height: 1.15;
color: #FFF;
margin-bottom: var(--space-6);
letter-spacing: -0.005em;
}
.footer-brand-col .tagline em { color: inherit; }
.footer-brand-col p {
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,0.65);
max-width: 320px;
}
.footer-col h5 {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: var(--space-5);
}
.footer-col ul { list-style: none; display: grid; gap: var(--space-3); }
.footer-col ul a {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: #FFF;
text-decoration: none;
transition: color var(--transition);
}
.footer-col ul a:hover { color: #EFD4DC; }
.footer-bottom {
max-width: var(--content-xwide);
margin: 0 auto;
padding-top: var(--space-6);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-6);
}
.footer-bottom p {
font-size: 11px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.45);
font-family: var(--font-mono);
}
.footer-socials {
display: flex; gap: var(--space-3);
}
.footer-socials a {
width: 40px; height: 40px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #FFF;
transition: background var(--transition), border-color var(--transition);
}
.footer-socials a:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}
/* ========================================
Instagram lightbox (kept minimal)
======================================== */
.insta-lightbox {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.insta-lightbox[hidden] { display: none; }
.insta-lightbox-backdrop {
position: absolute; inset: 0;
background: rgba(43, 28, 31, 0.85);
backdrop-filter: blur(8px);
}
.insta-lightbox-content {
position: relative;
width: 90vw; max-width: 540px; max-height: 90vh;
overflow-y: auto;
z-index: 1;
}
.insta-lightbox-close {
position: fixed; top: var(--space-6); right: var(--space-6);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
color: #FFF;
font-size: 1.4rem;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
cursor: pointer;
z-index: 1002;
}
.insta-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.insta-lightbox-embed .instagram-media {
margin: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Direct IG iframe lightbox: minimal chrome, taller box for portrait reels */
.ig-embed-iframe {
display: block;
width: 100%;
max-width: 540px;
height: min(90vh, 760px);
border: 0;
background: #fff;
border-radius: 4px;
margin: 0 auto;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
.hero-visual { max-width: 520px; margin: 0 auto; }
.hero-collage { gap: var(--space-3); }
.hc-pair { gap: var(--space-3); }
.about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
.about-photo-wrap { max-width: 440px; margin: 0 auto; }
.services-row { grid-template-columns: 1fr; }
.process-inner { grid-template-columns: 1fr; }
.work-mosaic { grid-template-columns: 1fr 1fr 1fr; }
.work-pinboard { grid-auto-rows: 64px; padding: var(--space-8) var(--space-6); }
.work-details { grid-template-columns: 1fr; gap: var(--space-6); }
.work-details-head p { max-width: none; }
.work-details-grid { grid-template-columns: 1fr 1fr; }
.inquiry-grid { grid-template-columns: 1fr; }
.inquiry-panel { min-height: 440px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.header-inner {
grid-template-columns: auto auto;
padding: var(--space-3) var(--space-5);
gap: var(--space-4);
}
.header-nav-main { display: none; }
.logo-text .logo-tagline { display: none; }
.logo-name { font-size: 11px; letter-spacing: 0.16em; }
.header-right { gap: var(--space-3); }
/* MOBILE: restore email/insta/phone icons in the header (per pre-rewrite version). */
.header-socials { display: flex; gap: var(--space-2); }
.header-socials svg { width: 14px; height: 14px; }
.nav-cta { padding: 8px 16px; font-size: 11px; }
.hero-new, .about-new, .work-new, .inquiry-new { padding-left: var(--space-5); padding-right: var(--space-5); }
.services-inner, .process-inner { padding-left: var(--space-5); padding-right: var(--space-5); }
.hero-title { font-size: clamp(2.5rem, 3rem + 4vw, 4rem); }
.hero-visual-tag { display: none; }
.hero-visual-caption { right: 8px; bottom: -20px; max-width: 180px; padding: var(--space-3); }
.hero-visual-caption .num { font-size: 1.8rem; }
.about-photo-badge { width: 100px; height: 100px; font-size: 0.75rem; right: -10px; top: -30px; }
.about-photo-framelabel { display: none; }
.about-stats { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
.about-stat .v { font-size: 2rem; }
.services-head { grid-template-columns: 1fr; align-items: start; }
.services-row { gap: var(--space-4); }
.service-card-new { padding: var(--space-6); min-height: auto; }
.process-step { grid-template-columns: auto 1fr; gap: var(--space-4); }
.process-step .step-meta { grid-column: 1/-1; padding-top: 0; margin-top: 4px; }
.work-head { grid-template-columns: 1fr; align-items: start; }
.work-mosaic { grid-template-columns: 1fr; gap: var(--space-5); }
.work-tile { aspect-ratio: 3 / 4; }
.work-pinboard {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 60px;
gap: 14px;
padding: var(--space-8) var(--space-7) var(--space-9);
}
.pin-1 { grid-column: 1 / span 6; grid-row: 1 / span 5; transform: rotate(-1.5deg); }
.pin-2 { grid-column: 1 / span 3; grid-row: 6 / span 4; transform: rotate(1.5deg); }
.pin-3 { grid-column: 4 / span 3; grid-row: 6 / span 4; transform: rotate(-2deg); }
.pin-4 { grid-column: 1 / span 3; grid-row: 10 / span 4; transform: rotate(2deg); }
.pin-5 { grid-column: 4 / span 3; grid-row: 10 / span 4; transform: rotate(-1deg); }
.pin-6 { grid-column: 1 / span 6; grid-row: 14 / span 4; transform: rotate(1deg); }
/* Hero pinboard at mobile — 2x3 grid like the design, with breathing room so rotated polaroids don't clip the cream paper */
.hero-pinboard {
padding: 1.75rem 1.5rem 2rem !important;
--pin-gap: 14px;
}
.hero-pinboard .pin-1 { grid-column: 1 / span 3; grid-row: 1 / span 1; transform: rotate(-2deg); }
.hero-pinboard .pin-2 { grid-column: 4 / span 3; grid-row: 1 / span 1; transform: rotate(1.5deg) translateY(8px); }
.hero-pinboard .pin-3 { grid-column: 1 / span 3; grid-row: 2 / span 1; transform: rotate(2deg) translateY(10px); }
.hero-pinboard .pin-4 { grid-column: 4 / span 3; grid-row: 2 / span 1; transform: rotate(-2.2deg) translateY(4px); }
.hero-pinboard .pin-5 { grid-column: 1 / span 3; grid-row: 3 / span 1; transform: rotate(2.5deg); }
.hero-pinboard .pin-6 { grid-column: 4 / span 3; grid-row: 3 / span 1; transform: rotate(-1.5deg) translateY(6px); }
.pin { padding: 8px 8px 28px; }
.work-details-grid { grid-template-columns: 1fr; }
.reviews-meta { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.reviews-carousel-wrap { padding: 0 var(--space-5); }
.review-card-new { min-width: calc(100vw - 80px); max-width: calc(100vw - 80px); padding: var(--space-6); }
.review-card-new p { font-size: 1.05rem; }
.inquiry-panel { padding: var(--space-8); min-height: 360px; }
.inquiry-form-wrap { padding: var(--space-8); }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-8); padding-bottom: var(--space-10); }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ========================================
ITERATION OVERRIDES (post-launch tweaks)
======================================== */
/* HERO — keep "tailored & brought" on a single line at any zoom (desktop)
and allow the grid track to shrink below the unbreakable segment's width
so it doesn't blow out the hero-copy column at narrow viewports. */
.hero-copy { min-width: 0; }
.hero-title { overflow-wrap: break-word; }
.hero-title .hero-line-tb {
display: inline-block;
white-space: nowrap;
}
/* At narrow widths the "tailored & brought" segment is wider than the column.
Drop the nowrap so it wraps naturally instead of forcing horizontal overflow
that gets clipped by body { overflow-x: hidden }. */
@media (max-width: 720px) {
.hero-title .hero-line-tb {
display: inline;
white-space: normal;
}
}
/* PINBOARD — enlarge photos a touch more than original */
.hero-pinboard {
width: 100% !important;
max-width: 560px !important;
}
/* HERO META — fit all 4 stats in one row, evenly spread across the full hero-copy width */
.hero-meta {
max-width: none !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
align-items: start;
column-gap: clamp(var(--space-4), 2vw, var(--space-6)) !important;
row-gap: 0 !important;
padding: var(--space-6) 0 !important;
}
.hero-meta-item .v { white-space: nowrap; }
@media (max-width: 720px) {
.hero-meta {
grid-template-columns: repeat(2, 1fr) !important;
row-gap: var(--space-4) !important;
}
}
/* Section labels — remove the (decorative) numbers; keep the rule line */
.section-label .num { display: none !important; }
/* Services head: 2-col like Recent Work; right column holds the inquiry link */
.services-head {
grid-template-columns: 1fr auto !important;
align-items: end !important;
gap: var(--space-8) !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
margin-bottom: var(--space-12) !important;
}
.services-head .view-all {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
transition: letter-spacing var(--transition);
white-space: nowrap;
}
.services-head .view-all:hover { letter-spacing: 0.22em; }
/* Services intro paragraph — sits below the 3 service cards, centered across the section, italicized */
.services-intro {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 1.2rem;
line-height: 1.5;
color: var(--color-text);
margin: var(--space-10) auto 0;
text-align: center;
}
/* Remove the dash mark before "In the details" label */
.work-details-label::before { display: none !important; }
.work-details-label { gap: 0 !important; }
/* REVIEWS — header to match other sections */
.reviews-new { padding-left: var(--space-8); padding-right: var(--space-8); }
.reviews-head {
max-width: var(--content-xwide);
margin: 0 auto var(--space-12);
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: var(--space-8);
}
.reviews-rating {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
color: inherit;
text-decoration: none;
transition: letter-spacing var(--transition);
white-space: nowrap;
}
.reviews-rating-line {
display: flex;
align-items: center;
gap: var(--space-3);
padding-bottom: 5px;
border-bottom: 1px solid currentColor;
}
.reviews-rating:hover .reviews-rating-src { letter-spacing: 0.22em; }
.reviews-rating .stars { display: flex; gap: 2px; }
.reviews-rating-num {
font-family: var(--font-display);
font-size: 1.4rem;
font-style: italic;
color: var(--color-ink);
line-height: 1;
}
.reviews-rating-src {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Empty placeholder reviews-meta-left now — keep arrows to the right */
.reviews-meta { justify-content: flex-end; }
@media (max-width: 720px) {
.services-head { grid-template-columns: 1fr !important; align-items: start !important; }
.reviews-head { grid-template-columns: 1fr; align-items: start; }
.reviews-rating { flex-wrap: wrap; }
}
/* "How we'll" stays on one line */
.section-h .nowrap { white-space: nowrap; display: inline-block; }
/* PROCESS — tighten the step-number column so 01/02 sit closer to the title */
.process-step {
grid-template-columns: 44px 1fr auto !important;
gap: var(--space-5) !important;
}
.process-step .step-num { padding-top: 6px; }
/* FOOTER — keep email on one line, fit within column width */
.footer-col ul a.footer-email {
white-space: nowrap;
font-size: clamp(0.78rem, 0.7rem + 0.4vw, 0.92rem);
letter-spacing: -0.01em;
}
@media (max-width: 480px) {
.footer-col ul a.footer-email { font-size: 0.85rem; }
}
/* Mobile: let hero meta wrap to 2x2 grid; tighten process step gutter */
@media (max-width: 900px) {
.hero-meta {
grid-template-columns: 1fr 1fr !important;
row-gap: var(--space-4) !important;
}
}
@media (max-width: 720px) {
.process-step { grid-template-columns: auto 1fr !important; gap: var(--space-3) !important; }
}
/* ====================================================================
POST-LAUNCH MOBILE TUNING (2026-05-12)
All rules in this block are MOBILE-ONLY (≤ 720px). Desktop is preserved
untouched. Addresses 9 items from on-device iPhone review.
==================================================================== */
/* Mobile header is ~62px tall (compared to ~75px on desktop). Override the
global scroll-padding-top (5rem = 80px from base.css) so #anchor scrolls
land snug under the sticky mobile header instead of leaving an 18px gap. */
@media (max-width: 720px) {
html { scroll-padding-top: 65px; }
}
/* 1. Header — phone icon is mobile-only (desktop header keeps insta + email).
The .header-socials container is already unhidden on mobile above. Use a
compound selector to beat .header-socials a's display: flex specificity. */
.header-socials a.header-social-mobile-only { display: none; }
@media (max-width: 720px) {
.header-socials a.header-social-mobile-only { display: flex; align-items: center; }
}
@media (max-width: 720px) {
/* ─────────────────────────────────────────────────────────────────
2. HERO — "tailored & brought" on one line at mobile.
Earlier the segment was unwrapped at mobile; restore nowrap and
shrink the hero title further so the segment fits the column. */
.hero-title { font-size: clamp(1.8rem, 1.4rem + 5vw, 2.6rem) !important; }
.hero-title .hero-line-tb {
display: inline-block !important;
white-space: nowrap !important;
}
/* ─────────────────────────────────────────────────────────────────
3. PINBOARD — polaroid feel on mobile: thicker white frame around each
photo, more breathing room between them on the cream pinboard, and
wider bottom strip so the date label sits comfortably in white space.
Bigger close-X for the lightbox below. */
.hero-pinboard {
--pin-gap: 22px;
padding: 7% 6% 8% !important;
}
.hero-pinboard .pin {
padding: 10px 10px 36px !important; /* polaroid frame: 10px top/sides, 36px bottom strip */
}
/* The img inside each pin was overflowing the bottom padding on mobile —
for replaced elements (img/video) absolute positioning with top/bottom
+ width/height:auto does NOT constrain the element; the browser falls
back to the intrinsic aspect ratio, making the img balloon past the
bottom and cover the white frame. Fix: use absolute positioning with
EXPLICIT calc() dimensions so the img is locked to the area enclosed by
the white frame, no matter the source's aspect ratio. */
.hero-pinboard .pin img {
position: absolute !important;
top: 10px !important;
left: 10px !important;
width: calc(100% - 20px) !important;
height: calc(100% - 46px) !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: cover !important;
display: block !important;
}
.hero-pinboard .pin-date {
bottom: 11px !important;
font-size: 0.85rem !important; /* up from 0.62rem — actually readable on a phone */
color: var(--color-ink) !important; /* was --color-text-muted (#8A7070), nearly invisible */
font-weight: 500 !important;
letter-spacing: 0.02em !important;
}
/* Subtle, polaroid-like rotation — keep below ±2° so they don't clip neighbours */
.hero-pinboard .pin-1 { transform: rotate(-1.5deg) !important; }
.hero-pinboard .pin-2 { transform: rotate(1.2deg) translateY(4px) !important; }
.hero-pinboard .pin-3 { transform: rotate(1.8deg) translateY(6px) !important; }
.hero-pinboard .pin-4 { transform: rotate(-1.8deg) translateY(2px) !important; }
.hero-pinboard .pin-5 { transform: rotate(2deg) !important; }
.hero-pinboard .pin-6 { transform: rotate(-1.2deg) translateY(4px) !important; }
/* Lightbox close-X: bigger and higher contrast so it's visible on dark embeds */
.insta-lightbox-close {
top: 14px !important;
right: 14px !important;
width: 52px !important;
height: 52px !important;
font-size: 2rem !important;
background: rgba(0, 0, 0, 0.6) !important;
border: 2px solid rgba(255, 255, 255, 0.85) !important;
color: #FFF !important;
}
/* ─────────────────────────────────────────────────────────────────
4. MARQUEE — speed to 7s on mobile and tighten the gap so all 8
services cycle through visibly instead of the loop appearing to
only show 2 of them. Smaller font size also helps fit more items
on screen at once at mobile widths. */
.hero-marquee-track {
animation-duration: 7s !important;
gap: var(--space-5) !important; /* was --space-12 (48px) → --space-5 (20px) */
}
.hero-marquee-item {
font-size: 1.05rem !important; /* down from 1.5rem */
gap: var(--space-5) !important; /* tighten text-to-✦ gap */
}
/* ─────────────────────────────────────────────────────────────────
5. ABOUT — center "Hi, I'm Elena" body text on mobile. */
.about-content .about-body,
.about-content .about-body p { text-align: center; }
.about-content .about-quote { text-align: center; }
/* ─────────────────────────────────────────────────────────────────
6. PROCESS — collapse 2-column to single column AND move the kit
photo to the very bottom (after the 4 numbered steps).
Trick: dissolve .process-content with `display: contents` so its
children (blurb + kit) become direct grid items, then we can
reorder them via grid-row. */
.process-inner {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto auto auto auto auto !important;
column-gap: 0 !important;
}
.process-inner > .process-content { display: contents !important; }
.process-inner > .section-label { grid-column: 1 !important; grid-row: 1 !important; }
.process-inner > .section-h { grid-column: 1 !important; grid-row: 2 !important; }
.process-inner > .process-inquiry {
grid-column: 1 !important;
grid-row: 3 !important;
justify-self: start !important;
align-self: start !important;
margin-bottom: var(--space-6) !important;
}
/* Blurb (was inside .process-content, now a direct grid child via contents) */
.process-blurb { grid-column: 1 !important; grid-row: 4 !important; }
.process-inner > .process-steps { grid-column: 1 !important; grid-row: 5 !important; }
/* Kit photo goes to the bottom */
.process-kit { grid-column: 1 !important; grid-row: 6 !important; margin-top: var(--space-8) !important; }
/* ─────────────────────────────────────────────────────────────────
7. REVIEWS — narrower review card, arrows positioned on the sides
of the carousel (flanking) instead of above. */
.reviews-carousel-wrap { position: relative; padding: 0 var(--space-6); }
.reviews-meta { display: contents !important; } /* unflatten so .reviews-arrows can be positioned absolutely */
.reviews-meta-left { display: none !important; }
.reviews-arrows {
position: absolute !important;
top: 50% !important;
left: 0 !important; right: 0 !important;
transform: translateY(-50%) !important;
display: flex !important;
justify-content: space-between !important;
pointer-events: none !important;
z-index: 10 !important;
padding: 0 var(--space-2) !important;
}
/* Arrow button styling on mobile:
- Translucent cream background instead of solid white so the chevron
stays visible (was solid white + :hover color: #FFF on tap → chevron
disappeared into the white circle).
- Disable iOS tap-highlight ring with -webkit-tap-highlight-color.
- Override the desktop :hover rule INSIDE the mobile @media so sticky-
hover after tap doesn't leave the arrow stuck on burgundy/white.
- :active gives a subtle dark-bg press feedback while held.
*/
.reviews-arrows .review-arrow {
pointer-events: auto !important;
background: rgba(255, 255, 255, 0.85) !important;
color: var(--color-ink) !important;
border-color: var(--color-border) !important;
-webkit-tap-highlight-color: transparent !important;
box-shadow: 0 2px 8px rgba(43, 28, 31, 0.08) !important;
}
.reviews-arrows .review-arrow:hover,
.reviews-arrows .review-arrow:focus {
background: rgba(255, 255, 255, 0.85) !important;
color: var(--color-ink) !important;
border-color: var(--color-border) !important;
}
.reviews-arrows .review-arrow:active {
background: var(--color-primary-light) !important;
transform: scale(0.95);
}
.review-card-new { min-width: calc(100vw - 110px); max-width: calc(100vw - 110px); }
/* ─────────────────────────────────────────────────────────────────
8. FORM — show the mobile-only collapsible details block; hide the
desktop optional fields. (HTML adds .form-optional-desktop on the
row-paired optional inputs and a
after the required fields.) */
.form-optional-desktop { display: none !important; }
.form-optional-mobile {
display: block !important;
border: none;
padding: 0;
margin-top: var(--space-2);
}
.form-optional-mobile summary {
list-style: none;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
cursor: pointer;
}
.form-optional-mobile summary::-webkit-details-marker { display: none; }
.form-optional-mobile summary::after {
content: '';
width: 24px; height: 24px;
border-radius: 50%;
border: 1.5px solid var(--color-primary);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238B4A5E' stroke-width='1.5'%3E%3Cline x1='6' y1='2' x2='6' y2='10'/%3E%3Cline x1='2' y1='6' x2='10' y2='6'/%3E%3C/svg%3E") center no-repeat;
margin-left: auto;
flex-shrink: 0;
}
.form-optional-mobile[open] summary::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238B4A5E' stroke-width='1.5'%3E%3Cline x1='2' y1='6' x2='10' y2='6'/%3E%3C/svg%3E");
}
.form-optional-mobile .form-optional-fields {
display: grid;
gap: var(--space-5);
padding-top: var(--space-3);
}
/* ─────────────────────────────────────────────────────────────────
9. FOOTER — keep horizontal columns on mobile. Brand collapses to
just the name, social/contact "Get in touch" links become icons. */
.footer-grid {
grid-template-columns: 1fr 1fr 1fr 1fr !important;
gap: var(--space-4) !important;
padding-bottom: var(--space-8) !important;
}
.footer-brand-col .tagline,
.footer-brand-col p:not(.logo-name) { display: none; }
.footer-col h5 { font-size: 10px; letter-spacing: 0.14em; }
.footer-col ul { font-size: 11px; }
.footer-col ul a { font-size: 11px; }
/* "Get in touch" column → swap text links for icon row to save horizontal space. */
.footer-col.footer-col-contact ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.footer-col.footer-col-contact ul li { list-style: none; }
.footer-col.footer-col-contact ul a {
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.85;
padding: 0;
}
.footer-col.footer-col-contact ul a .footer-link-text { display: none; }
.footer-col.footer-col-contact ul a .footer-mobile-icon { display: block; }
}
/* Hide the mobile-only details block on desktop (these rules are OUTSIDE the
@media block so they always apply; the @media block above re-shows them on
mobile). Also hide the mobile-only footer icons on desktop. */
.form-optional-mobile { display: none; }
.footer-col.footer-col-contact ul a .footer-mobile-icon { display: none; }
/* ====================================================================
POST-LAUNCH MOBILE TUNING ROUND 2 (2026-05-13)
Additional iPhone-only refinements (1-7); the only desktop change is
`.hero-title { text-align: center }` applied above at the base rule.
==================================================================== */
@media (max-width: 720px) {
/* 1. HERO eyebrow — drop the "Now booking 2026-2027" segment so the line
fits comfortably as "Makeup & Hair · Est. Toronto" on one line.
Also restore nowrap (previously dropped at <560) since the now-shorter
line easily fits. Tightened letter-spacing keeps it visually tight. */
.hero-eyebrow .eyebrow-booking { display: none; }
.hero-eyebrow {
white-space: nowrap !important;
letter-spacing: 0.18em !important;
font-size: 10px !important;
}
/* 2. Hero title — already centered globally via the base rule above. No
mobile-specific override needed. Same for hero-actions (was already
flex-column align-items: center). */
/* 3. MARQUEE — duration is now set further up in this @media block (7s);
previous override removed. */
/* 4. ABOUT stats — three stats on a single row on mobile, smaller font so
they breathe. Override the earlier mobile rule that forced 1 column. */
.about-stats {
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--space-3) !important;
text-align: center !important;
}
.about-stat .v { font-size: 1.4rem !important; }
.about-stat .k {
font-size: 9px !important;
letter-spacing: 0.14em !important;
line-height: 1.3 !important;
}
/* 5. REVIEWS rating — currently aligned to the right edge (carryover from
the desktop reviews-head grid). On mobile the head is stacked and the
rating should sit at the LEFT edge to match the rest of the page's
section labels and headings. */
.reviews-rating {
align-items: flex-start !important;
}
.reviews-head { align-items: flex-start !important; }
/* 6. REVIEWS arrows — sit just inside the viewport edges (not flush with
them) so the button circles aren't visually clipped by the edge of
the screen. Position:absolute resolves against the wrap's PADDING box,
so we negate the section's 32px outer padding and add ~8px inset for
clearance. */
.reviews-arrows {
left: calc(-1 * var(--space-8) + 8px) !important; /* 8px inset from viewport-left */
right: calc(-1 * var(--space-8) + 8px) !important; /* 8px inset from viewport-right */
padding: 0 !important;
}
/* The negative-offset arrows need their parent chain to NOT clip them.
The carousel itself uses scroll-snap horizontal scrolling — we still
want the cards to be clipped to the wrap's box, but the arrows live
OUTSIDE the carousel (siblings via display: contents). So only the
carousel-wrap needs overflow: visible for the arrows themselves. */
.reviews-carousel-wrap { overflow: visible !important; }
/* 7. FOOTER — drop the "Get in touch" column; redistribute remaining 3
columns evenly (Brand / Explore / Studio). Header/page already have
the social icons up top — no loss of contact entry points. */
.footer-col.footer-col-contact { display: none !important; }
.footer-grid {
grid-template-columns: 1fr 1fr 1fr !important;
}
/* 8. ABOUT stat label — "Average wear time" wraps to two lines at mobile's
narrow column width; swap to "Avg." on mobile so it fits on one line
alongside "Weddings styled" and "Google rating". The `!important` on
these two rules ensures they win over any later default-hide rules. */
.about-stat .k .k-full { display: none !important; }
.about-stat .k .k-short { display: inline !important; }
}
/* Outside the @media block: desktop shows the full word, hides the short form. */
.about-stat .k .k-short { display: none; }