/* ==========================================================================
EQ Construction — Core Stylesheet
Charcoal / Orange / White — architectural, editorial, premium
========================================================================== */
/* -------------------------- Fonts -------------------------- */
/* Bricolage Grotesque: display/heading — geometric, architectural, bold
Inter: body/UI — clean, highly legible at small sizes */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&display=swap');
/* -------------------------- Design Tokens -------------------------- */
:root{
/* Brand palette (sampled from logo) */
--color-charcoal-950:#1c1a19;
--color-charcoal-900:#252221;
--color-charcoal-800:#332e2d;
--color-charcoal-700:#443d3c;
--color-charcoal-600:#5f5654;
--color-charcoal-500:#8a7f7d;
--color-orange-600:#d9701f;
--color-orange-500:#ef802a;
--color-orange-400:#f39a4f;
--color-orange-100:#fde7d3;
--color-white:#ffffff;
--color-off-white:#f6f4f2;
--color-line:rgba(255,255,255,0.12);
--color-line-dark:rgba(15,14,14,0.10);
/* Semantic */
--bg-body:var(--color-off-white);
--bg-dark:var(--color-charcoal-950);
--text-dark:var(--color-charcoal-950);
--text-muted:var(--color-charcoal-600);
--text-light:var(--color-off-white);
--text-light-muted:rgba(246,244,242,0.68);
--accent:var(--color-orange-500);
/* Type */
--font-display:'Bricolage Grotesque', 'Inter', sans-serif;
--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--fs-display-1:clamp(2.5rem, 1.5rem + 3.6vw, 5.5rem);
--fs-display-2:clamp(2.25rem, 1.4rem + 4vw, 5rem);
--fs-h1:clamp(2rem, 1.3rem + 3vw, 3.75rem);
--fs-h2:clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem);
--fs-h3:clamp(1.25rem, 1rem + 1vw, 1.75rem);
--fs-h4:clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
--fs-lead:clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
--fs-body:1rem;
--fs-small:0.875rem;
--fs-eyebrow:0.8rem;
/* Spacing scale */
--space-3xs:0.25rem;
--space-2xs:0.5rem;
--space-xs:0.75rem;
--space-sm:1rem;
--space-md:1.5rem;
--space-lg:2.5rem;
--space-xl:4rem;
--space-2xl:6rem;
--space-3xl:9rem;
--section-pad:clamp(4.5rem, 3.5rem + 4vw, 9rem);
--container-w:1320px;
--container-pad:clamp(1.25rem, 0.8rem + 2vw, 3rem);
--radius-sm:6px;
--radius-md:14px;
--radius-lg:28px;
--radius-pill:999px;
--ease-out:cubic-bezier(.16,.84,.44,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--dur-fast:0.3s;
--dur-med:0.6s;
--dur-slow:0.9s;
}
/* -------------------------- Reset -------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{
scroll-behavior:auto;
-webkit-text-size-adjust:100%;
/* Critical mobile-viewport fix: Swiper's carousel tracks (.swiper-wrapper)
are intentionally wider than the viewport (all slides laid out in a row),
clipped only via `overflow:hidden` on the immediate `.swiper` ancestor.
Mobile Chrome/Safari's "does this page fit width=device-width" viewport
heuristic can still pick up that wide, moved-off-screen content when
`overflow-x:hidden` is only set on — it then silently expands the
whole layout viewport (window.innerWidth balloons past the real device
width), which shoves the header/hamburger far off to the right and makes
the navbar look broken/missing on real phones. Setting overflow-x:hidden
AND a hard max-width on itself (the true viewport-fit boundary)
is what actually prevents that expansion — body-only was not enough. */
overflow-x:hidden;
max-width:100vw;
}
body{
margin:0;
background:var(--bg-body);
color:var(--text-dark);
font-family:var(--font-body);
font-size:var(--fs-body);
line-height:1.6;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
max-width:100vw;
position:relative;
}
img, svg, video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; color:var(--text-dark); }
p{ margin:0; }
::selection{ background:var(--color-orange-500); color:var(--color-white); }
/* -------------------------- Custom branded scrollbar -------------------------- */
html{
scrollbar-width:thin;
scrollbar-color:var(--color-orange-500) var(--color-charcoal-950);
}
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--color-charcoal-950); }
::-webkit-scrollbar-thumb{
background-color:var(--color-orange-500);
background-image:linear-gradient(180deg, var(--color-orange-400), var(--color-orange-600));
border-radius:999px;
border:2.5px solid var(--color-charcoal-950);
}
::-webkit-scrollbar-thumb:hover{ background-image:linear-gradient(180deg, var(--color-orange-400), var(--color-orange-500)); }
::-webkit-scrollbar-corner{ background:var(--color-charcoal-950); }
/* Quote modal dialog: fully scrollable, scrollbar hidden (Firefox + Chrome/
Safari/Edge). overflow-y stays auto so content is still reachable via
wheel, touch drag and keyboard — only the visible scrollbar track/thumb
is removed since it looked out of place on the modal's white surface. */
.quote-modal__dialog{
scrollbar-width:none;
-ms-overflow-style:none;
}
.quote-modal__dialog::-webkit-scrollbar{ display:none; width:0; height:0; }
/* Lenis smooth-scroll house-keeping */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
/* -------------------------- Layout helpers -------------------------- */
.container{
width:100%;
max-width:var(--container-w);
margin-inline:auto;
padding-inline:var(--container-pad);
}
.container-fluid-pad{ padding-inline:var(--container-pad); }
section{ position:relative; }
/* So a same-page anchor jump (e.g. footer "FAQ" link -> index.html#faq,
from another page) doesn't land the target section directly under the
fixed header. */
section[id]{ scroll-margin-top:110px; }
/* Same treatment for in-page anchors that land on a specific card rather
than a whole section (e.g. services.html#property-sketching jumping to
one .service-card) — otherwise the fixed header covers the target. */
[id].service-card{ scroll-margin-top:110px; }
.section{ padding-block:var(--section-pad); }
.section-pad-top{ padding-top:var(--section-pad); }
.section-pad-bottom{ padding-bottom:var(--section-pad); }
.bg-dark{ background:var(--bg-dark); color:var(--text-light); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4{ color:var(--text-light); }
.bg-white{ background:var(--color-white); }
.bg-off-white{ background:var(--bg-body); }
/* ==========================================================================
Section background texture — subtle, corner-anchored architectural
elements (blueprint linework or a faint dot-grid), never a full-bleed
image. Each section gets its own corner/rotation/scale so the page
doesn't read as one repeated pattern. Sits behind all section content
(z-index:0, pointer-events:none) and is clipped to the section itself.
========================================================================== */
.sec-pattern{ overflow:hidden; }
.sec-pattern::before{
content:'';
position:absolute;
z-index:0;
pointer-events:none;
background-repeat:no-repeat;
background-size:contain;
}
.sec-pattern > .container,
.sec-pattern > .container-fluid-pad{ position:relative; z-index:1; }
.sec-pattern--dark-tr::before{
top:-6%; right:-5%;
width:min(26vw, 400px); height:min(26vw, 400px);
background-image:url('../images/patterns/elevation-dark.svg');
background-position:top right;
opacity:0.09;
}
.sec-pattern--dark-bl::before{
bottom:-8%; left:-6%;
width:min(24vw, 380px); height:min(24vw, 380px);
background-image:url('../images/patterns/floorplan-dark.svg');
background-position:bottom left;
opacity:0.08;
transform:rotate(-3deg);
}
.sec-pattern--dark-tl::before{
top:-5%; left:-5%;
width:min(18vw, 300px); height:min(18vw, 300px);
background-image:url('../images/patterns/elevation-dark.svg');
background-position:top left;
opacity:0.07;
transform:rotate(4deg) scaleX(-1);
}
.sec-pattern--light-r::before{
top:6%; right:-7%;
width:min(24vw, 400px); height:min(24vw, 400px);
background-image:url('../images/patterns/floorplan-light.svg');
background-position:center right;
opacity:0.1;
transform:rotate(-3deg);
}
/* Faint dot-grid corner patch — pure CSS, used for variety on sections that
already sit next to a blueprint-patterned section. */
.sec-pattern--dots::before{
bottom:-4%; right:-2%;
width:min(24vw, 360px); height:min(24vw, 360px);
background-image:radial-gradient(rgba(35,31,32,0.35) 1.5px, transparent 1.6px);
background-size:20px 20px;
-webkit-mask-image:radial-gradient(circle at 70% 30%, #000 0%, transparent 72%);
mask-image:radial-gradient(circle at 70% 30%, #000 0%, transparent 72%);
opacity:0.16;
}
.bg-dark.sec-pattern--dots::before{
background-image:radial-gradient(rgba(255,255,255,0.5) 1.5px, transparent 1.6px);
opacity:0.1;
}
@media (max-width: 767px){
.sec-pattern::before{ width:min(46vw, 300px) !important; height:min(46vw, 300px) !important; }
}
.grid{ display:grid; gap:var(--space-lg); }
/* -------------------------- Type utilities -------------------------- */
.eyebrow{
display:inline-flex;
align-items:center;
gap:var(--space-2xs);
font-family:var(--font-body);
font-size:var(--fs-eyebrow);
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--accent);
}
.eyebrow::before{
content:'';
width:28px;
height:1px;
background:var(--accent);
display:inline-block;
}
.bg-dark .eyebrow, .eyebrow.on-dark{ color:var(--color-orange-400); }
.display-1{ font-size:var(--fs-display-1); }
.display-2{ font-size:var(--fs-display-2); }
h1, .h1{ font-size:var(--fs-h1); }
h2, .h2{ font-size:var(--fs-h2); }
h3, .h3{ font-size:var(--fs-h3); }
h4, .h4{ font-size:var(--fs-h4); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--text-muted); font-weight:400; }
.bg-dark .lead{ color:var(--text-light-muted); }
.text-muted{ color:var(--text-muted); }
.text-accent{ color:var(--accent); }
.text-italic{ font-style:italic; font-family:var(--font-display); }
.section-head{ max-width:720px; margin-bottom:var(--space-xl); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:var(--space-sm); }
.section-head h2{ margin-bottom:var(--space-sm); }
/* -------------------------- Buttons -------------------------- */
.btn{
--btn-fg:var(--color-white);
--btn-bg:var(--color-charcoal-950);
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2xs);
padding:1.05em 1.9em;
border-radius:var(--radius-pill);
font-family:var(--font-body);
font-weight:600;
font-size:0.95rem;
letter-spacing:0.01em;
background:var(--btn-bg);
color:var(--btn-fg);
border:1px solid transparent;
overflow:hidden;
isolation:isolate;
transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
white-space:nowrap;
}
.btn::before{
content:'';
position:absolute; inset:0;
background:var(--color-orange-500);
transform:translateY(101%);
transition:transform var(--dur-med) var(--ease-out);
z-index:-1;
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--color-white); }
.btn:active{ transform:scale(0.97); }
.btn-icon{ display:inline-flex; transition:transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn-icon{ transform:translate(3px,-3px); }
.btn-primary{ --btn-bg:var(--color-orange-500); --btn-fg:var(--color-white); }
.btn-primary::before{ background:var(--color-charcoal-950); }
.btn-outline{
--btn-bg:transparent;
--btn-fg:var(--text-dark);
border-color:var(--color-charcoal-950);
}
.btn-outline::before{ background:var(--color-charcoal-950); }
.btn-outline:hover{ border-color:var(--color-charcoal-950); }
.btn-outline-light{
--btn-bg:transparent;
--btn-fg:var(--color-white);
border-color:rgba(255,255,255,0.4);
}
.btn-outline-light::before{ background:var(--color-white); }
.btn-outline-light:hover{ color:var(--color-charcoal-950); }
.btn-sm{ padding:0.8em 1.5em; font-size:0.85rem; }
.btn-lg{ padding:1.25em 2.4em; font-size:1rem; }
.btn-block{ width:100%; }
.link-arrow{
display:inline-flex;
align-items:center;
gap:0.5em;
font-weight:600;
font-size:0.95rem;
color:currentColor;
position:relative;
}
.link-arrow .arrow{ transition:transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover .arrow{ transform:translateX(5px); }
.link-arrow::after{
content:'';
position:absolute; left:0; bottom:-4px;
width:100%; height:1px;
background:currentColor;
transform:scaleX(0.25);
transform-origin:left;
opacity:0.4;
transition:transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover::after{ transform:scaleX(1); }
/* -------------------------- Icon circle -------------------------- */
.icon-circle{
--size:56px;
width:var(--size); height:var(--size);
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--color-orange-100);
color:var(--color-orange-600);
flex-shrink:0;
}
.bg-dark .icon-circle{ background:rgba(239,128,42,0.12); color:var(--color-orange-400); }
/* -------------------------- Reveal / animation utility classes -------------------------- */
/* Base states for GSAP ScrollTrigger — JS toggles these via .is-visible */
[data-reveal]{ opacity:0; }
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; }
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* -------------------------- Misc -------------------------- */
.divider{ height:1px; width:100%; background:var(--color-line-dark); border:0; margin:0; }
.bg-dark .divider{ background:var(--color-line); }
.scroll-cue{
display:inline-flex;
flex-direction:column;
align-items:center;
gap:var(--space-2xs);
font-size:var(--fs-small);
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--text-light-muted);
writing-mode:vertical-rl;
}
.scroll-cue .line{
width:1px; height:64px;
background:rgba(255,255,255,0.3);
position:relative;
overflow:hidden;
}
.scroll-cue .line::after{
content:'';
position:absolute; top:-100%; left:0;
width:100%; height:100%;
background:var(--color-orange-500);
animation:scrollLine 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollLine{
0%{ top:-100%; }
50%{ top:0; }
100%{ top:100%; }
}
.container{ position:relative; }
/* ==========================================================================
Preloader
========================================================================== */
.preloader{
position:fixed; inset:0;
z-index:9999;
background:var(--color-charcoal-950);
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:var(--space-md);
transition:opacity var(--dur-med) var(--ease-in-out);
}
/* Faint radial glow behind the mark so the flat charcoal panel reads as
premium rather than a plain loading screen. */
.preloader::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(ellipse 60% 50% at 50% 45%, rgba(239,128,42,0.12) 0%, rgba(239,128,42,0) 70%);
pointer-events:none;
}
.preloader.is-hiding{ opacity:0; }
.preloader__logo{
position:relative;
width:min(180px, 34vw);
opacity:0;
transform:translateY(8px) scale(0.94);
animation:preloaderLogoIn 0.8s var(--ease-out) 0.1s forwards;
}
@keyframes preloaderLogoIn{
to{ opacity:1; transform:translateY(0) scale(1); }
}
.preloader__bar{
position:relative;
width:min(200px, 46vw);
height:3px;
background:rgba(255,255,255,0.12);
border-radius:var(--radius-pill);
overflow:hidden;
opacity:0;
animation:preloaderFadeIn 0.6s var(--ease-out) 0.35s forwards;
}
.preloader__bar-fill{
width:0%; height:100%;
background:linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400));
border-radius:inherit;
box-shadow:0 0 10px rgba(239,128,42,0.6);
}
.preloader__meta{
position:relative;
display:flex;
align-items:center;
gap:0.6rem;
font-family:var(--font-body);
font-size:var(--fs-eyebrow);
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--text-light-muted);
opacity:0;
animation:preloaderFadeIn 0.6s var(--ease-out) 0.45s forwards;
}
.preloader__meta .preloader__pct{
color:var(--color-orange-400);
font-weight:600;
letter-spacing:0.02em;
font-variant-numeric:tabular-nums;
}
.preloader__meta .dot{ color:var(--text-light-muted); opacity:0.5; }
@keyframes preloaderFadeIn{
to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.preloader__logo, .preloader__bar, .preloader__meta{ animation:none; opacity:1; transform:none; }
}
body.is-loading{ overflow:hidden; height:100vh; }
/* ==========================================================================
Header / Navigation
========================================================================== */
.site-header{
position:fixed; top:0; left:0; right:0;
z-index:1000;
padding-block:var(--space-md);
/* Always-on soft scrim (not just on dark hero pages) so the light logo
wordmark, nav links and hamburger stay legible over ANY page content —
including inner pages with a light/white top section. Scroll state
swaps this for a fully solid blurred bar. */
background:linear-gradient(180deg, rgba(15,14,14,0.62) 0%, rgba(15,14,14,0.28) 65%, rgba(15,14,14,0) 100%);
transition:background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
border-bottom:1px solid transparent;
}
.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-lg);
}
.site-header.is-scrolled{
background:rgba(15,14,14,0.88);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
padding-block:var(--space-xs);
border-color:var(--color-line);
}
.brand{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.brand img{ height:94px; width:auto; transition:height var(--dur-med) var(--ease-out); }
.site-header.is-scrolled .brand img{ height:80px; }
.brand--light{ display:block; }
.brand--dark{ display:none; }
.main-nav{ display:flex; align-items:center; gap:var(--space-2xl); }
.main-nav__list{ display:flex; align-items:center; gap:var(--space-lg); }
.main-nav__list li{ display:flex; align-items:center; }
.main-nav__list a,
.main-nav__list .main-nav__link{
display:inline-flex;
align-items:center;
font-family:var(--font-body);
font-size:0.85rem;
font-weight:500;
letter-spacing:0.01em;
line-height:1.4;
color:var(--text-light);
position:relative;
padding-block:0.3rem;
white-space:nowrap;
}
/* Explicitly lock nav typography in the scrolled state so every item
(including "Services") stays the same size as the resting state. */
.site-header.is-scrolled .main-nav__list a,
.site-header.is-scrolled .main-nav__list .main-nav__link{
font-size:0.85rem;
}
.main-nav__list a::after{
content:'';
position:absolute; left:0; bottom:0;
width:0; height:1px;
background:var(--color-orange-500);
transition:width var(--dur-fast) var(--ease-out);
}
.main-nav__list a:hover::after,
.main-nav__list a.is-active::after{ width:100%; }
.main-nav__list a.is-active{ color:var(--color-orange-400); }
.header-actions{ display:flex; align-items:center; gap:var(--space-md); }
.header-actions .btn{ padding:0.85em 1.6em; font-size:0.9rem; }
.hamburger{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
width:44px; height:44px;
border-radius:50%;
border:1px solid var(--color-line);
background:transparent;
flex-shrink:0;
}
.hamburger span{
width:18px; height:1.5px;
background:var(--color-white);
border-radius:2px;
transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hamburger.is-active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
/* ---- Services dropdown (desktop) ---- */
.main-nav__item.has-dropdown{ position:relative; }
.main-nav__link{ gap:0.4rem; cursor:pointer; }
.dropdown-caret{ transition:transform var(--dur-fast) var(--ease-out); flex-shrink:0; }
.has-dropdown:hover .dropdown-caret,
.has-dropdown:focus-within .dropdown-caret{ transform:translateY(1px) rotate(180deg); }
/* Invisible hover bridge: fills the visual gap between the nav item and the
dropdown panel below it. Pseudo-element boxes count as part of their host
element for :hover purposes, so the cursor never actually leaves
`.has-dropdown` while crossing this strip — that's what previously broke
the hover the moment the mouse moved off the "Services" text into the
gap. Sized to match the dropdown's own centered width so a diagonal move
toward a wide dropdown doesn't slip off the side of the bridge either. */
.main-nav__item.has-dropdown::after{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
width:max(140%, 260px);
height:1rem;
z-index:9;
}
.nav-dropdown{
position:absolute;
top:calc(100% + 0.5rem);
left:50%;
transform:translateX(-50%) translateY(6px);
min-width:248px;
background:var(--color-charcoal-950);
border:1px solid var(--color-line);
border-radius:var(--radius-md);
padding:0.5rem;
box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
z-index:10;
}
.nav-dropdown::before{
content:'';
position:absolute;
top:-6px; left:50%;
width:12px; height:12px;
transform:translateX(-50%) rotate(45deg);
background:var(--color-charcoal-950);
border-left:1px solid var(--color-line);
border-top:1px solid var(--color-line);
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav-dropdown li + li{ margin-top:0.2rem; }
.nav-dropdown a{
display:flex; align-items:center; gap:0.7rem;
padding:0.7rem 0.85rem;
border-radius:var(--radius-sm);
font-size:0.88rem;
font-weight:500;
color:var(--text-light-muted);
white-space:nowrap;
transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.nav-dropdown a i{ color:var(--color-orange-400); font-size:0.85rem; width:16px; text-align:center; flex-shrink:0; }
.nav-dropdown a:hover{ background:rgba(255,255,255,0.06); color:var(--text-light); padding-left:1.05rem; }
@media (max-width: 991px){
.main-nav__list, .header-actions .btn{ display:none; }
.hamburger{ display:flex; }
/* Logo reads small next to the hamburger at phone widths — bump it up a
little so the mark is clearly legible without crowding the hamburger. */
.brand img{ height:104px; }
.site-header.is-scrolled .brand img{ height:86px; }
}
@media (max-width: 380px){
/* Very narrow phones: pull back slightly so logo + hamburger always keep
comfortable breathing room and never risk touching. */
.brand img{ height:92px; }
.site-header.is-scrolled .brand img{ height:78px; }
}
@media (min-width: 992px){
.hamburger{ display:none; }
}
/* ==========================================================================
Mobile menu overlay
========================================================================== */
.mobile-menu{
position:fixed; inset:0;
z-index:1100;
background:var(--color-charcoal-950);
color:var(--text-light);
display:flex;
flex-direction:column;
justify-content:space-between;
padding:var(--space-lg) var(--container-pad) var(--space-xl);
clip-path:circle(0px at calc(100% - 40px) 40px);
transition:clip-path 0.7s var(--ease-in-out);
pointer-events:none;
}
.mobile-menu.is-open{
clip-path:circle(150% at calc(100% - 40px) 40px);
pointer-events:auto;
}
.mobile-menu__top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu .mobile-menu-logo{ height:60px; width:auto; }
.mobile-menu__close{
width:44px; height:44px;
border-radius:50%;
border:1px solid var(--color-line);
background:transparent;
color:var(--color-white);
display:flex; align-items:center; justify-content:center;
font-size:1.1rem;
}
.mobile-menu__list{ display:flex; flex-direction:column; gap:0.4rem; }
.mobile-menu__list a{
font-family:var(--font-display);
font-size:clamp(1.6rem, 6.6vw, 2.35rem);
font-weight:600;
color:var(--text-light);
display:inline-flex;
align-items:baseline;
gap:0.75rem;
}
.mobile-menu__list a .num{
font-family:var(--font-body);
font-size:0.9rem;
color:var(--color-orange-400);
font-weight:600;
}
/* ---- Services submenu (mobile) ---- */
.mobile-menu__item.has-submenu{ display:flex; flex-direction:column; }
.mobile-menu__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); }
.mobile-menu__row a{ display:inline-flex; align-items:baseline; gap:0.75rem; }
.mobile-submenu-toggle{
flex-shrink:0;
width:38px; height:38px;
border-radius:50%;
border:1px solid var(--color-line);
background:transparent;
color:var(--color-white);
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mobile-submenu-toggle svg{ transition:transform var(--dur-fast) var(--ease-out); }
.mobile-submenu-toggle.is-active{ background:var(--color-orange-500); border-color:var(--color-orange-500); }
.mobile-submenu-toggle.is-active svg{ transform:rotate(180deg); }
.mobile-submenu{
display:flex; flex-direction:column;
gap:0.15rem;
max-height:0;
overflow:hidden;
padding-left:0.2rem;
transition:max-height var(--dur-med) var(--ease-out), margin-top var(--dur-med) var(--ease-out);
margin-top:0;
}
.mobile-submenu.is-open{ max-height:320px; margin-top:0.6rem; }
.mobile-submenu a{
display:block;
font-family:var(--font-body);
font-size:1rem;
font-weight:500;
color:var(--text-light-muted);
padding-block:0.5rem;
}
.mobile-submenu a:hover{ color:var(--color-orange-400); }
.mobile-menu__foot{ display:flex; flex-direction:column; gap:var(--space-md); }
.mobile-menu__contact{ display:flex; flex-direction:column; gap:0.35rem; color:var(--text-light-muted); font-size:0.95rem; }
.mobile-menu__social{ display:flex; gap:var(--space-md); }
.mobile-menu__social a{ color:var(--text-light-muted); font-size:0.95rem; }
.mobile-menu__social a:hover{ color:var(--color-orange-400); }
/* ==========================================================================
Hero
========================================================================== */
.hero{
position:relative;
min-height:100svh;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:var(--color-charcoal-950);
color:var(--text-light);
overflow:hidden;
}
.hero__media{
position:absolute; inset:0;
z-index:0;
}
.hero__media .frame{
position:absolute; inset:0;
width:100%; height:100%;
overflow:hidden;
}
.hero__media picture, .hero__media .hero-art{
position:absolute; inset:0;
width:100%; height:112%;
top:-6%;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(20,18,17,0.32) 0%, rgba(20,18,17,0.08) 30%, rgba(20,18,17,0.42) 66%, rgba(15,13,13,0.88) 100%);
z-index:1;
}
.hero__grid-overlay{
position:absolute; inset:0;
z-index:1;
opacity:0.35;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size:64px 64px;
mix-blend-mode:overlay;
}
/* Floating accent card — small featured-project preview for visual depth */
.hero__accent-card{
position:absolute;
z-index:3;
right:var(--container-pad);
top:46%;
width:min(220px, 22vw);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:0 30px 60px -18px rgba(0,0,0,0.55);
transform:rotate(2.5deg);
border:1px solid rgba(255,255,255,0.14);
}
.hero__accent-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.hero__accent-card .cap{
position:absolute; left:0; right:0; bottom:0;
padding:0.85rem 1rem;
background:linear-gradient(0deg, rgba(15,13,13,0.85), rgba(15,13,13,0));
font-size:0.72rem;
font-weight:600;
letter-spacing:0.04em;
color:var(--color-white);
}
.hero__accent-card .cap span{ display:block; color:var(--text-light-muted); font-weight:500; font-size:0.68rem; margin-top:2px; }
@media (max-width: 991px){ .hero__accent-card{ display:none; } }
.hero__top{
position:relative; z-index:2;
padding-top:clamp(6rem, 4.4rem + 4.4vw, 8.5rem);
}
.hero__top .container{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg); }
.hero__tagline{
max-width:340px;
font-size:0.95rem;
color:var(--text-light-muted);
padding-bottom:0.4rem;
border-bottom:1px solid var(--color-line);
}
.hero__body{
position:relative; z-index:2;
padding-bottom:var(--space-xl);
}
.hero__heading{
font-size:var(--fs-display-1);
letter-spacing:-0.02em;
overflow:hidden;
color:var(--text-light);
}
.hero__heading .line{ overflow:hidden; display:block; }
.hero__heading .line span{ display:block; will-change:transform; }
.hero__heading em{
font-style:italic;
font-weight:400;
color:var(--color-orange-400);
}
.hero__foot{
position:relative; z-index:2;
border-top:1px solid var(--color-line);
}
.hero__foot .container{
display:grid;
grid-template-columns:1.4fr auto 1fr;
align-items:center;
gap:var(--space-lg);
padding-block:var(--space-md);
/* clear the fixed bottom-right Call/WhatsApp buttons */
padding-right:calc(var(--container-pad) + 6rem);
}
.hero__foot .container > *{ min-width:0; }
.hero__lead{ max-width:420px; color:var(--text-light-muted); font-size:1rem; }
.hero__journey{
display:flex;
align-items:center;
gap:0.5rem;
flex-wrap:wrap;
font-family:var(--font-body);
font-size:0.78rem;
font-weight:600;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--text-light-muted);
justify-content:flex-end;
text-align:right;
}
.hero__journey span.sep{ color:var(--color-orange-500); }
.hero__journey span.step{ transition:color var(--dur-fast); }
@media (max-width: 899px){
.hero__foot .container{ grid-template-columns:1fr; text-align:left; gap:var(--space-sm); padding-right:var(--container-pad); }
.hero__foot .container .btn{ justify-self:start; width:auto; }
.hero__journey{ justify-content:flex-start; text-align:left; padding-right:5rem; }
}
@media (max-width: 767px){
.hero__top .container{ flex-direction:column; align-items:flex-start; gap:var(--space-sm); }
.hero__tagline{ display:none; }
}
.hero .scroll-cue{ position:absolute; right:var(--container-pad); bottom:var(--space-xl); z-index:2; }
@media (max-width: 767px){ .hero .scroll-cue{ display:none; } }
.hero-art{
background:
radial-gradient(120% 90% at 78% 15%, rgba(239,128,42,0.30) 0%, rgba(239,128,42,0) 48%),
linear-gradient(160deg, #34302e 0%, #262221 55%, #1e1b1a 100%);
}
.hero-art .blueprint{
position:absolute;
right:-6%; top:-4%;
width:64%; height:auto;
opacity:0.9;
}
.hero-art .blueprint.two{
right:auto; left:-10%; top:38%;
width:40%;
opacity:0.45;
transform:scaleX(-1);
}
/* ==========================================================================
Generic placeholder / architectural media panels (used until real
project photography is dropped in — swap background-image / ![]()
)
========================================================================== */
.ph-panel{
position:relative;
overflow:hidden;
border-radius:var(--radius-md);
background:linear-gradient(155deg, #201d1c 0%, #131110 100%);
aspect-ratio:4/5;
}
.ph-panel img.blueprint{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:contain;
padding:10%;
opacity:0.85;
}
.ph-panel img.photo{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out);
}
.ph-panel.tone-warm{ background:linear-gradient(155deg, #2a2320 0%, #17130f 100%); }
.ph-panel.tone-light{ background:linear-gradient(155deg, #efe9e2 0%, #ddd3c6 100%); }
.ph-panel.tone-light img.blueprint{ opacity:0.7; }
.ph-panel.ratio-16-10{ aspect-ratio:16/10; }
.ph-panel.ratio-1-1{ aspect-ratio:1/1; }
.ph-panel.ratio-3-4{ aspect-ratio:3/4; }
.ph-panel.ratio-21-9{ aspect-ratio:21/9; }
.ph-panel::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
pointer-events:none;
}
.ph-panel .tag{
position:absolute; left:1.25rem; bottom:1.25rem; z-index:2;
display:inline-flex; align-items:center; gap:0.5rem;
font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
color:var(--text-light);
}
.ph-panel .tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--color-orange-500); }
/* ==========================================================================
About teaser
========================================================================== */
.about-section{ overflow:hidden; }
.about-grid{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:var(--space-2xl);
align-items:center;
}
.about-media{ position:relative; }
.about-media .ph-panel{ width:100%; }
.about-media .stat-card{
position:absolute;
left:-2rem; bottom:-2rem;
background:var(--color-charcoal-950);
color:var(--text-light);
border-radius:var(--radius-md);
padding:var(--space-md) var(--space-lg);
min-width:190px;
box-shadow:0 30px 60px -20px rgba(15,14,14,0.45);
}
.stat-card .num{
font-family:var(--font-display);
font-size:2.6rem;
font-weight:700;
color:var(--color-orange-400);
line-height:1;
display:flex; align-items:baseline; gap:0.15rem;
}
.stat-card .label{ font-size:0.82rem; color:var(--text-light-muted); margin-top:0.4rem; }
.about-copy p + p{ margin-top:var(--space-sm); }
.about-points{ display:grid; gap:var(--space-sm); margin-top:var(--space-lg); }
.about-point{ display:flex; align-items:flex-start; gap:var(--space-sm); }
.about-point .icon-circle{ --size:40px; font-size:0.9rem; }
.about-point h4{ margin-bottom:0.2rem; }
.about-point p{ color:var(--text-muted); font-size:0.92rem; }
.about-stats-row{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-md);
margin-top:var(--space-2xl);
padding-top:var(--space-xl);
border-top:1px solid var(--color-line-dark);
}
.about-stats-row .stat{ text-align:left; }
.about-stats-row .stat .num{
font-family:var(--font-display);
font-size:clamp(2rem, 1.5rem + 2vw, 3.2rem);
font-weight:700;
color:var(--text-dark);
display:flex; align-items:baseline; gap:0.1rem;
}
.about-stats-row .stat .num .suffix{ color:var(--color-orange-500); font-size:0.55em; }
.about-stats-row .stat .label{ margin-top:0.35rem; font-size:0.88rem; color:var(--text-muted); }
@media (max-width: 991px){
.about-grid{ grid-template-columns:1fr; }
.about-stats-row{ grid-template-columns:repeat(2, 1fr); row-gap:var(--space-lg); }
.about-media .stat-card{ left:1rem; bottom:-1.5rem; }
}
/* ==========================================================================
Services overview
========================================================================== */
.services-head-row{
display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg);
flex-wrap:wrap;
}
.services-slider{
overflow:visible !important;
margin-top:var(--space-xl);
}
.services-slider .swiper-wrapper{ align-items:stretch; }
.service-slide{
height:auto;
width:min(360px, 82vw);
}
.service-card{
position:relative;
display:block;
height:100%;
min-height:480px;
border-radius:var(--radius-md);
overflow:hidden;
color:var(--text-light);
}
.service-card img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out);
}
.service-card:hover img{ transform:scale(1.06); }
.service-card::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(0deg, rgba(15,13,13,0.92) 0%, rgba(15,13,13,0.45) 45%, rgba(15,13,13,0.15) 70%, rgba(15,13,13,0.35) 100%);
}
.service-card__body{
position:relative; z-index:2;
display:flex; flex-direction:column;
justify-content:space-between;
height:100%;
padding:var(--space-lg);
}
.service-card__top{ display:flex; align-items:flex-start; justify-content:space-between; }
.service-card__index{
font-family:var(--font-display);
font-size:0.95rem;
font-weight:600;
color:var(--text-light-muted);
}
.service-card__arrow{
width:44px; height:44px; border-radius:50%;
border:1px solid rgba(255,255,255,0.3);
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
flex-shrink:0;
}
.service-card:hover .service-card__arrow{ background:var(--color-orange-500); border-color:var(--color-orange-500); transform:rotate(45deg); }
.service-card__title{ margin-bottom:0.5rem; color:var(--text-light); }
.service-card__desc{ color:var(--text-light-muted); font-size:0.95rem; max-width:32ch; }
.services-slider-nav{
display:flex; align-items:center; gap:var(--space-sm);
}
.slider-arrow{
width:48px; height:48px; border-radius:50%;
border:1px solid var(--color-line-dark);
background:transparent;
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
color:var(--text-dark);
}
.slider-arrow:hover{ background:var(--color-charcoal-950); border-color:var(--color-charcoal-950); color:var(--color-white); }
.slider-arrow.swiper-button-disabled{ opacity:0.35; pointer-events:none; }
.services-slider-section .swiper-pagination{
position:static;
margin-top:var(--space-lg);
display:flex;
gap:0.4rem;
}
.services-slider-section .swiper-pagination-bullet{
width:28px; height:3px;
border-radius:2px;
background:var(--color-line-dark);
opacity:1;
transition:background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.services-slider-section .swiper-pagination-bullet-active{ background:var(--color-orange-500); width:44px; }
.services-slider-foot{
display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg);
margin-top:var(--space-lg);
flex-wrap:wrap;
}
/* ==========================================================================
Featured Projects
========================================================================== */
.projects-section{ overflow:hidden; }
.projects-head{
display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg);
margin-bottom:var(--space-xl);
flex-wrap:wrap;
}
.projects-bento{ display:flex; flex-direction:column; gap:var(--space-lg); }
.project-featured{
position:relative;
display:block;
border-radius:var(--radius-lg);
overflow:hidden;
aspect-ratio:20/9;
color:var(--text-light);
}
.project-featured img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out);
}
.project-featured:hover img{ transform:scale(1.05); }
.project-featured::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(90deg, rgba(15,13,13,0.82) 0%, rgba(15,13,13,0.35) 45%, rgba(15,13,13,0.05) 75%);
}
.project-featured__body{
position:relative; z-index:2;
height:100%;
padding:clamp(1.5rem, 1rem + 2vw, 3rem);
display:flex; flex-direction:column; justify-content:flex-end;
max-width:640px;
}
.project-featured__tag{
display:inline-flex; align-items:center; gap:0.5rem;
align-self:flex-start;
font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
color:var(--color-orange-400);
margin-bottom:1rem;
}
.project-featured__tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--color-orange-500); }
.project-featured h3{ font-size:clamp(1.6rem, 1.2rem + 2vw, 2.6rem); margin-bottom:0.5rem; color:var(--text-light); }
.project-featured .cat{ color:var(--text-light-muted); font-size:0.98rem; margin-bottom:1.5rem; }
.project-featured__arrow{
position:absolute; z-index:2;
right:clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
bottom:clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
width:60px; height:60px; border-radius:50%;
border:1px solid rgba(255,255,255,0.35);
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-featured:hover .project-featured__arrow{ background:var(--color-orange-500); border-color:var(--color-orange-500); transform:rotate(45deg); }
.projects-grid-row{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-lg);
}
.project-card{ display:block; }
.project-card .ph-panel{ width:100%; margin-bottom:var(--space-md); }
.project-card__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-sm); }
.project-card__meta h3{ font-size:1.2rem; margin-bottom:0.3rem; }
.project-card__meta .cat{ font-size:0.85rem; color:var(--text-muted); }
.project-card__arrow{
width:44px; height:44px; border-radius:50%;
border:1px solid var(--color-line-dark);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-card:hover .project-card__arrow{ background:var(--color-orange-500); border-color:var(--color-orange-500); color:var(--color-white); transform:rotate(45deg); }
.project-card:hover .ph-panel img{ transform:scale(1.05); }
@media (max-width: 991px){
.projects-grid-row{ grid-template-columns:repeat(2, 1fr); }
.project-featured{ aspect-ratio:4/5; }
.project-featured__body{ max-width:100%; }
}
@media (max-width: 575px){
.projects-grid-row{ grid-template-columns:1fr; }
}
/* ==========================================================================
FAQ (accordion)
========================================================================== */
.faq-section .section-head{ margin-inline:auto; text-align:center; }
.faq-list{
max-width:840px;
margin-inline:auto;
display:flex;
flex-direction:column;
gap:1rem;
}
.faq-item{
position:relative;
border:1px solid var(--color-line-dark);
border-radius:var(--radius-md);
background:var(--color-white);
padding:0;
overflow:hidden;
transition:border-color var(--dur-fast) var(--ease-out);
}
.faq-item.is-open{ border-color:rgba(239,128,42,0.4); }
.faq-item__summary{
width:100%;
border:0;
background:none;
appearance:none;
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-md);
padding:1.35rem 1.6rem;
font-family:var(--font-display);
font-size:1.05rem;
font-weight:600;
text-align:left;
color:var(--text-dark);
}
.faq-item__icon{
flex-shrink:0;
width:32px; height:32px;
border-radius:50%;
border:1px solid var(--color-line-dark);
display:flex; align-items:center; justify-content:center;
position:relative;
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.faq-item__icon::before,
.faq-item__icon::after{
content:'';
position:absolute;
background:var(--text-dark);
transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.faq-item__icon::before{ width:12px; height:1.6px; }
.faq-item__icon::after{ width:1.6px; height:12px; }
.faq-item.is-open .faq-item__icon{ background:var(--color-orange-500); border-color:var(--color-orange-500); }
.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after{ background:var(--color-white); }
.faq-item.is-open .faq-item__icon::after{ transform:rotate(90deg) scaleY(0); }
/* Grid-rows animation trick: animating 0fr -> 1fr on the track gives a
smooth height transition without needing to know the content's height
up front (unlike max-height, which has to guess a ceiling value). */
.faq-item__panel{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows var(--dur-med) var(--ease-out);
}
.faq-item.is-open .faq-item__panel{ grid-template-rows:1fr; }
.faq-item__panel-inner{ overflow:hidden; min-height:0; }
.faq-item__body{
padding:0 1.6rem 1.5rem;
max-width:64ch;
}
.faq-item__body p{ color:var(--text-muted); font-size:0.98rem; line-height:1.7; }
.faq-foot{
max-width:840px;
margin:var(--space-xl) auto 0;
text-align:center;
padding-top:var(--space-lg);
border-top:1px solid var(--color-line-dark);
}
.faq-foot p{ color:var(--text-muted); margin-bottom:0.9rem; }
/* ==========================================================================
Final CTA
========================================================================== */
.cta-section{
position:relative;
overflow:hidden;
background:#f3e9dc;
}
.cta-section__bg{
position:absolute; inset:0;
z-index:0;
}
.cta-section__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-section__bg::after{
content:'';
position:absolute; inset:0;
background:linear-gradient(100deg, rgba(255,251,246,0.96) 0%, rgba(255,251,246,0.88) 38%, rgba(255,251,246,0.55) 62%, rgba(255,251,246,0.3) 100%);
}
.cta-section .container{ position:relative; z-index:2; }
.cta-grid{
display:grid;
grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr);
gap:var(--space-2xl);
align-items:center;
}
.cta-copy{ min-width:0; }
.cta-copy h2{ margin-bottom:var(--space-md); }
.cta-actions{ display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; margin-top:var(--space-lg); }
.cta-contact-row{
display:flex; align-items:stretch; gap:var(--space-md);
margin-top:var(--space-2xl);
padding-top:var(--space-lg);
border-top:1px solid var(--color-line-dark);
flex-wrap:wrap;
min-width:0;
}
.cta-contact-row a{
display:flex; align-items:center; gap:0.85rem;
padding:0.6rem 1.25rem 0.6rem 0.6rem;
background:rgba(255,255,255,0.55);
border:1px solid var(--color-line-dark);
border-radius:var(--radius-pill);
color:var(--text-dark);
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
min-width:0;
}
.cta-contact-row a .icon-circle{ --size:42px; font-size:0.95rem; flex-shrink:0; }
.cta-contact-row__text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.cta-contact-row__text .label{
font-size:0.7rem;
font-weight:600;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--text-muted);
}
.cta-contact-row__text .value{ font-size:0.95rem; font-weight:600; color:var(--text-dark); overflow-wrap:break-word; }
.cta-contact-row a:hover{
background:var(--color-white);
border-color:var(--color-orange-400);
transform:translateY(-3px);
box-shadow:0 16px 32px -18px rgba(35,31,32,0.3);
}
.cta-contact-row a:hover .cta-contact-row__text .value{ color:var(--color-orange-600); }
.cta-fact-card{
background:var(--color-white);
border-radius:var(--radius-lg);
padding:var(--space-lg);
box-shadow:0 40px 80px -30px rgba(35,31,32,0.25);
transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
min-width:0;
}
.cta-fact-card:hover{
transform:translateY(-6px);
box-shadow:0 48px 90px -28px rgba(35,31,32,0.32);
}
.cta-fact-card__row{ display:flex; align-items:center; gap:var(--space-md); padding-block:var(--space-sm); }
.cta-fact-card__row + .cta-fact-card__row{ border-top:1px solid var(--color-line-dark); }
.cta-fact-card__row .icon-circle{ --size:48px; }
.cta-fact-card__row .num{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; line-height:1; }
.cta-fact-card__row .label{ font-size:0.85rem; color:var(--text-muted); margin-top:0.15rem; }
@media (max-width: 991px){
.cta-grid{ grid-template-columns:minmax(0, 1fr); }
.cta-fact-card{ max-width:380px; }
}
@media (max-width: 575px){
.cta-actions{ flex-direction:column; align-items:flex-start; }
.cta-contact-row{ flex-direction:column; align-items:stretch; }
.cta-contact-row a{ width:100%; }
.cta-contact-row__text{ min-width:0; }
.cta-contact-row__text .value{ overflow-wrap:break-word; }
}
/* ==========================================================================
Testimonials
========================================================================== */
.testimonials-section .section-head{ margin-bottom:var(--space-lg); }
.testimonials-head-row{
display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-lg);
flex-wrap:wrap;
margin-bottom:var(--space-xl);
}
.testimonials-slider{ padding-bottom:0.25rem; }
.testimonial-card{
height:100%;
background:var(--color-white);
border:1px solid var(--color-line-dark);
border-radius:var(--radius-md);
padding:var(--space-lg);
display:flex;
flex-direction:column;
gap:var(--space-md);
}
.testimonial-card__quote-icon{ color:var(--color-orange-500); font-size:1.75rem; line-height:1; }
.testimonial-card__stars{ display:flex; gap:0.2rem; color:var(--color-orange-500); font-size:0.85rem; }
.testimonial-card p{ font-size:1.05rem; line-height:1.6; color:var(--text-dark); flex:1; }
.testimonial-card__author{ display:flex; align-items:center; gap:0.75rem; }
.testimonial-card__avatar{
width:46px; height:46px; border-radius:50%;
background:var(--color-charcoal-950);
color:var(--color-white);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display);
font-weight:700;
font-size:0.95rem;
flex-shrink:0;
}
.testimonial-card__author .name{ font-weight:600; font-size:0.95rem; }
.testimonial-card__author .role{ font-size:0.85rem; color:var(--text-muted); }
.testimonials-section .swiper-pagination{
position:static;
margin-top:var(--space-lg);
display:flex;
gap:0.4rem;
}
.testimonials-section .swiper-pagination-bullet{
width:28px; height:3px; border-radius:2px;
background:var(--color-line-dark);
opacity:1;
transition:background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.testimonials-section .swiper-pagination-bullet-active{ background:var(--color-orange-500); width:44px; }
/* ==========================================================================
Newsletter band
========================================================================== */
.newsletter-section{
background:var(--color-charcoal-950);
color:var(--text-light);
}
.newsletter-grid{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-xl);
flex-wrap:wrap;
}
.newsletter-copy{ max-width:440px; }
.newsletter-copy h3{ color:var(--text-light); margin-bottom:0.4rem; }
.newsletter-copy p{ color:var(--text-light-muted); font-size:0.95rem; }
.newsletter-form{
display:flex;
align-items:center;
gap:0.6rem;
background:rgba(255,255,255,0.06);
border:1px solid var(--color-line);
border-radius:var(--radius-pill);
padding:0.4rem 0.4rem 0.4rem 1.75rem;
flex:1;
min-width:380px;
max-width:640px;
width:100%;
}
.newsletter-form input{
flex:1;
min-width:0;
width:100%;
background:transparent;
border:0;
outline:0;
color:var(--text-light);
font-family:var(--font-body);
font-size:1rem;
padding-block:0.75rem;
}
.newsletter-form input::placeholder{ color:var(--text-light-muted); }
.newsletter-form .btn{ flex-shrink:0; }
.newsletter-note{ font-size:0.8rem; color:var(--text-light-muted); margin-top:0.75rem; }
.newsletter-success{
display:none;
align-items:center; gap:0.6rem;
color:var(--color-orange-400);
font-size:0.95rem;
font-weight:600;
}
.newsletter-success.is-visible{ display:flex; }
@media (max-width: 767px){
.newsletter-form{ min-width:100%; }
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer{
position:relative;
padding-top:var(--section-pad);
border-top:1px solid var(--color-line);
overflow:hidden;
}
.site-footer::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, var(--color-orange-500) 22%, var(--color-orange-400) 50%, var(--color-orange-500) 78%, transparent);
opacity:0.85;
}
.footer-glow{
position:absolute;
top:-220px; right:-160px;
width:520px; height:520px;
border-radius:50%;
background:radial-gradient(circle, rgba(239,128,42,0.16) 0%, rgba(239,128,42,0) 70%);
pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }
.footer-top{
display:grid;
grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;
gap:var(--space-xl);
padding-bottom:var(--space-2xl);
}
.footer-brand img{ height:72px; margin-bottom:var(--space-md); }
.footer-brand p{ color:var(--text-light-muted); max-width:320px; font-size:0.95rem; line-height:1.65; }
.footer-social{ display:flex; gap:0.75rem; margin-top:var(--space-lg); }
.footer-social a{
width:42px; height:42px; border-radius:50%;
border:1px solid var(--color-line);
background:rgba(255,255,255,0.03);
display:flex; align-items:center; justify-content:center;
color:var(--text-light-muted);
font-size:0.95rem;
transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.footer-social a:hover{
background:var(--color-orange-500);
border-color:var(--color-orange-500);
color:var(--color-white);
transform:translateY(-4px);
box-shadow:0 14px 26px -12px rgba(239,128,42,0.55);
}
.footer-col h5{
position:relative;
font-family:var(--font-body); font-size:0.8rem; letter-spacing:0.09em; text-transform:uppercase;
color:var(--text-light); margin-bottom:var(--space-lg); font-weight:700;
padding-bottom:0.85rem;
}
.footer-col h5::after{
content:'';
position:absolute;
left:0; bottom:0;
width:28px; height:2px;
background:var(--color-orange-500);
border-radius:2px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:0.75rem; }
.footer-col a{ color:var(--text-light-muted); font-size:0.95rem; transition:color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); }
.footer-col a:hover{ color:var(--color-orange-400); }
.footer-col--contact ul{ gap:var(--space-md); }
.footer-contact-list .contact-item > a,
.footer-contact-list .contact-item{
display:flex; align-items:center; gap:0.85rem;
}
.footer-contact-list .contact-item > a{ color:var(--text-light-muted); }
.footer-contact-list .icon-circle{ --size:40px; font-size:0.85rem; flex-shrink:0; }
.contact-item__text{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.contact-item__text .label{
font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
color:var(--text-light-muted); opacity:0.75;
}
.contact-item__text .value{
font-size:0.92rem; font-weight:500; color:var(--text-light);
overflow-wrap:break-word;
transition:color var(--dur-fast) var(--ease-out);
}
.footer-contact-list .contact-item > a:hover .value{ color:var(--color-orange-400); }
.footer-bottom{
display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
padding-block:var(--space-lg);
border-top:1px solid var(--color-line);
font-size:0.85rem;
color:var(--text-light-muted);
flex-wrap:wrap;
}
.footer-bottom .legal-links{ display:flex; gap:var(--space-md); }
.footer-bottom a:hover{ color:var(--color-orange-400); }
.footer-to-top{
display:inline-flex; align-items:center; gap:0.55rem;
margin-left:auto;
padding:0.55rem 1rem;
border:1px solid var(--color-line);
border-radius:var(--radius-pill);
color:var(--text-light-muted);
font-size:0.82rem; font-weight:600;
transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-to-top i{ font-size:0.75rem; transition:transform var(--dur-fast) var(--ease-out); }
.footer-to-top:hover{
background:var(--color-orange-500);
border-color:var(--color-orange-500);
color:var(--color-white);
transform:translateY(-3px);
}
.footer-to-top:hover i{ transform:translateY(-2px); }
@media (max-width: 991px){
.footer-top{ grid-template-columns:1fr 1fr; row-gap:var(--space-xl); }
}
@media (max-width: 575px){
.footer-top{ grid-template-columns:1fr; }
.footer-bottom{ flex-direction:column; align-items:flex-start; }
.footer-to-top{ margin-left:0; }
}
/* ==========================================================================
Get a Quote — modal
========================================================================== */
.quote-modal{
position:fixed; inset:0;
z-index:2000;
display:flex;
align-items:center;
justify-content:center;
padding:var(--space-md);
visibility:hidden;
opacity:0;
transition:opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.quote-modal.is-open{
visibility:visible;
opacity:1;
transition:opacity var(--dur-fast) var(--ease-out);
}
.quote-modal__overlay{
position:absolute; inset:0;
background:rgba(15,13,13,0.72);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
.quote-modal__dialog{
position:relative;
z-index:1;
width:100%;
max-width:540px;
max-height:min(88vh, 780px);
max-height:min(88svh, 780px);
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
background:var(--color-white);
border-radius:var(--radius-lg);
padding:clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
box-shadow:0 40px 80px -20px rgba(0,0,0,0.5);
transform:translateY(16px) scale(0.98);
transition:transform var(--dur-med) var(--ease-out);
}
.quote-modal.is-open .quote-modal__dialog{ transform:translateY(0) scale(1); }
.quote-modal__close{
position:absolute; top:1.25rem; right:1.25rem;
width:38px; height:38px;
border-radius:50%;
border:1px solid var(--color-line-dark);
background:transparent;
display:flex; align-items:center; justify-content:center;
color:var(--text-dark);
transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.quote-modal__close:hover{ background:var(--color-charcoal-950); color:var(--color-white); transform:rotate(90deg); }
.quote-modal__dialog h3{ font-size:var(--fs-h3); margin-top:0.4rem; margin-bottom:0.6rem; }
.quote-modal__lead{ color:var(--text-muted); font-size:0.95rem; margin-bottom:var(--space-lg); max-width:420px; }
.quote-modal .form-row,
.contact-form-panel .form-row{ margin-bottom:var(--space-sm); }
.quote-modal .form-row--split,
.contact-form-panel .form-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); }
.quote-modal label,
.contact-form-panel label{
display:block;
font-size:0.8rem;
font-weight:600;
letter-spacing:0.03em;
color:var(--text-dark);
margin-bottom:0.4rem;
}
.quote-modal input,
.quote-modal select,
.quote-modal textarea,
.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea{
width:100%;
background:var(--color-off-white);
border:1px solid var(--color-line-dark);
border-radius:var(--radius-sm);
padding:0.75em 0.9em;
font-family:var(--font-body);
font-size:0.95rem;
color:var(--text-dark);
outline:0;
transition:border-color var(--dur-fast), background var(--dur-fast);
resize:vertical;
}
.quote-modal input:focus,
.quote-modal select:focus,
.quote-modal textarea:focus,
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus{ border-color:var(--color-orange-500); background:var(--color-white); }
.quote-modal input.has-error,
.quote-modal select.has-error,
.quote-modal textarea.has-error,
.contact-form-panel input.has-error,
.contact-form-panel select.has-error,
.contact-form-panel textarea.has-error{ border-color:#d64545; }
.quote-modal__note,
.contact-form-panel .form-note{
font-size:0.85rem;
color:#c0392b;
min-height:1.2em;
margin:0 0 0.75rem;
}
.quote-modal .btn-block{ margin-top:0.25rem; }
.quote-modal__success{
display:none;
text-align:center;
padding:var(--space-lg) var(--space-sm);
}
.quote-modal__success.is-visible{ display:block; }
.quote-modal__success-icon{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px;
border-radius:50%;
background:var(--color-orange-100);
color:var(--color-orange-600);
font-size:1.3rem;
margin-bottom:var(--space-md);
}
.quote-modal__success h3{ margin-bottom:0.5rem; }
.quote-modal__success p{ color:var(--text-muted); margin-bottom:var(--space-md); }
@media (max-width: 575px){
.quote-modal .form-row--split{ grid-template-columns:1fr; }
}
/* ==========================================================================
Floating Call / WhatsApp buttons
========================================================================== */
.float-actions{
position:fixed;
right:clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
bottom:clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
z-index:1500;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:0.85rem;
}
.float-actions__btn{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:56px; height:56px;
border-radius:50%;
color:var(--color-white);
font-size:1.35rem;
box-shadow:0 14px 30px -8px rgba(0,0,0,0.45);
transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.float-actions__btn:hover{ transform:translateY(-3px) scale(1.05); }
.float-actions__btn--whatsapp{ background:#25D366; }
.float-actions__btn--call{ background:var(--color-orange-500); }
.float-actions__tip{
position:absolute;
right:calc(100% + 0.75rem);
top:50%;
transform:translateY(-50%) translateX(6px);
white-space:nowrap;
background:var(--color-charcoal-950);
color:var(--color-white);
font-size:0.8rem;
font-weight:600;
padding:0.5em 0.9em;
border-radius:var(--radius-pill);
opacity:0;
pointer-events:none;
transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.float-actions__btn:hover .float-actions__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width: 767px){
.float-actions{ gap:0.65rem; }
.float-actions__btn{ width:50px; height:50px; font-size:1.2rem; }
.float-actions__tip{ display:none; }
}
/* ==========================================================================
Inner pages — shared inner-banner, breadcrumb, values grid, process rail.
Reused by every inner page (about/services/projects/blog/contact/legal)
to keep branding, typography and spacing consistent with the homepage.
.inner-banner replaces the old, taller .page-hero (photo background +
eyebrow + h1 + lead paragraph). Per explicit feedback the banner is now
deliberately minimal — centered breadcrumb + title only, no paragraph
copy, no large photo — with a faint architectural line-drawing centered
behind the text instead of a distracting full-bleed image, and a
noticeably shorter overall height.
========================================================================== */
.inner-banner{
position:relative;
overflow:hidden;
background:linear-gradient(165deg, var(--color-charcoal-950) 0%, #2a2523 100%);
color:var(--text-light);
padding-top:calc(96px + var(--space-2xl) + var(--space-sm));
padding-bottom:calc(var(--space-2xl) + var(--space-sm));
text-align:center;
border-bottom:1px solid var(--color-line);
display:flex;
align-items:center;
justify-content:center;
}
/* Photo layer — a real ![]()
(per page, set in HTML) rather than a CSS
background-image, so it sits alongside .inner-banner::before without the
custom-property/relative-url() gotcha noted below, and gets proper
lazy-loading + an (empty, decorative) alt. Sits behind .container and
behind the dark scrim in ::after. */
.inner-banner__bg{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
}
.inner-banner__bg img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
/* Dark scrim over the photo so title/breadcrumb text stays clearly
readable — brand-charcoal tinted rather than flat black so the photo
still reads as part of the same palette instead of just "dimmed". */
.inner-banner__bg::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(165deg, rgba(28,26,25,0.92) 0%, rgba(28,26,25,0.82) 45%, rgba(28,26,25,0.90) 100%);
}
/* Faint centered architectural sketch — reuses the same line-art assets as
the homepage's .sec-pattern system, just centered and even fainter than
those corner treatments since it sits directly behind the title. Now
sits under the photo layer on pages that have one (harmless either way
since it's almost fully transparent). */
.inner-banner::before{
content:'';
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
width:min(56vw, 720px);
height:min(56vw, 720px);
background-image:url('../images/patterns/elevation-light.svg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:0.05;
pointer-events:none;
z-index:0;
}
/* Modifiers for visual variety across inner pages — note: relative url()
values inside a CSS custom property resolve against the stylesheet where
the var() is CONSUMED, not where the property is set, so a per-page
inline `style="--x:url(...)"` silently 404s here. Explicit modifier
classes (defined in this stylesheet, so their url()s resolve correctly)
are the reliable way to vary the background art per page instead. */
.inner-banner--floorplan::before{ background-image:url('../images/patterns/floorplan-light.svg'); }
.inner-banner--compact{ padding-bottom:calc(var(--space-xl) + var(--space-sm)); }
.inner-banner--compact .breadcrumb{ margin-bottom:0; }
.inner-banner .container{ position:relative; z-index:1; width:100%; }
.breadcrumb{
display:flex; align-items:center; justify-content:center; gap:0.5rem;
font-size:0.85rem; font-weight:500;
color:var(--text-light-muted);
margin-bottom:var(--space-md);
}
.breadcrumb a{ color:var(--text-light-muted); transition:color var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover{ color:var(--color-orange-400); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .is-current{ color:var(--color-orange-400); }
.inner-banner h1{ color:var(--text-light); margin:0 auto; }
@media (max-width: 575px){
.inner-banner{ padding-top:calc(88px + var(--space-xl) + var(--space-sm)); padding-bottom:calc(var(--space-xl) + var(--space-sm)); }
.inner-banner--compact{ padding-bottom:calc(var(--space-lg) + var(--space-sm)); }
.inner-banner::before{ width:80vw; height:80vw; }
}
/* ---- Values / approach grid ---- */
.values-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-lg);
}
.value-card{
padding:var(--space-lg);
border:1px solid var(--color-line-dark);
border-radius:var(--radius-md);
background:var(--color-white);
transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.value-card:hover{
transform:translateY(-4px);
box-shadow:0 24px 48px -24px rgba(15,14,14,0.18);
border-color:rgba(239,128,42,0.3);
}
.value-card .icon-circle{ width:52px; height:52px; font-size:1.15rem; margin-bottom:var(--space-md); }
.value-card h3{ margin-bottom:0.5rem; }
.value-card p{ color:var(--text-muted); font-size:0.95rem; }
/* ---- Process rail (numbered steps) ---- */
.process-rail{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:var(--space-lg);
counter-reset:process;
}
.process-step{ position:relative; padding-top:var(--space-lg); }
.process-step::before{
counter-increment:process;
content:counter(process, decimal-leading-zero);
display:block;
font-family:var(--font-display);
font-size:1.75rem;
font-weight:700;
color:var(--color-orange-500);
margin-bottom:var(--space-sm);
}
.process-step h3{ margin-bottom:0.4rem; font-size:1.1rem; }
.process-step p{ color:var(--text-muted); font-size:0.92rem; }
.process-step + .process-step{ border-left:1px solid var(--color-line-dark); padding-left:var(--space-lg); }
/* ---- Simple "coming soon" page (used by blog.html) ---- */
.coming-soon{ text-align:center; max-width:620px; margin-inline:auto; padding-block:var(--space-2xl); }
.coming-soon .eyebrow{ margin-inline:auto; }
@media (max-width: 991px){
.values-grid{ grid-template-columns:repeat(2, 1fr); }
.process-rail{ grid-template-columns:repeat(2, 1fr); gap:var(--space-xl) var(--space-lg); }
.process-step + .process-step{ border-left:none; padding-left:0; }
.process-rail .process-step:nth-child(odd){ border-left:none; }
}
@media (max-width: 575px){
.values-grid{ grid-template-columns:1fr; }
.process-rail{ grid-template-columns:1fr; }
}
/* ---- Story editorial (About) — text-forward two-column layout, deliberately
NOT the homepage's image-left/copy-right about-grid pattern. Left column
is sticky on desktop; right column carries the running copy. ---- */
.story-editorial{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-2xl); align-items:start; }
.story-editorial__label{ position:sticky; top:calc(96px + var(--space-lg)); }
.story-editorial__label .eyebrow{ margin-bottom:var(--space-sm); }
.story-editorial__label h2{ font-size:var(--fs-h2); }
.story-editorial__copy p{ color:var(--text-muted); font-size:1.05rem; line-height:1.8; margin-bottom:var(--space-md); }
.story-editorial__copy p:first-child{ font-size:1.2rem; color:var(--text-dark); font-weight:500; line-height:1.6; }
.story-editorial__copy blockquote{
margin:var(--space-lg) 0;
padding-left:var(--space-md);
border-left:3px solid var(--color-orange-500);
font-family:var(--font-display);
font-size:1.3rem;
font-weight:600;
color:var(--text-dark);
line-height:1.5;
}
/* ---- Stat strip — dark full-bleed number band, distinct from the
homepage's light card-grid .about-stats-row. ---- */
.stat-strip{ background:var(--color-charcoal-950); color:var(--text-light); }
.stat-strip__row{ display:grid; grid-template-columns:repeat(4, 1fr); }
.stat-strip__item{ padding:var(--space-xl) var(--space-md); text-align:center; border-left:1px solid var(--color-line); }
.stat-strip__item:first-child{ border-left:none; }
.stat-strip__item .num{ font-family:var(--font-display); font-size:clamp(2rem, 4vw, 2.75rem); font-weight:700; color:var(--color-orange-400); }
.stat-strip__item .label{ margin-top:0.4rem; font-size:0.88rem; color:var(--text-light-muted); }
/* ---- Photo mosaic — 3-image band for a more "detailed/imagery-rich"
About page, distinct from the homepage's single portrait about-media. ---- */
.photo-mosaic{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:var(--space-md); height:520px; }
.photo-mosaic__item{ position:relative; overflow:hidden; border-radius:var(--radius-md); }
.photo-mosaic__item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.photo-mosaic__item:hover img{ transform:scale(1.05); }
.photo-mosaic__item--main{ grid-row:1 / 3; }
.photo-mosaic__cap{
position:absolute; left:0; right:0; bottom:0;
padding:var(--space-md);
background:linear-gradient(0deg, rgba(15,14,14,0.75) 0%, transparent 100%);
color:var(--text-light); font-size:0.85rem; font-weight:500;
}
@media (max-width: 991px){
.story-editorial{ grid-template-columns:1fr; gap:var(--space-lg); }
.story-editorial__label{ position:static; }
.stat-strip__row{ grid-template-columns:repeat(2, 1fr); }
.stat-strip__item:nth-child(3){ border-left:none; }
.stat-strip__item:nth-child(1), .stat-strip__item:nth-child(2){ border-bottom:1px solid var(--color-line); }
.photo-mosaic{ height:auto; grid-template-columns:1fr 1fr; grid-template-rows:180px 180px; }
.photo-mosaic__item--main{ grid-column:1 / 3; grid-row:1; }
.photo-mosaic__item:nth-child(2){ grid-row:2; }
.photo-mosaic__item:nth-child(3){ grid-row:2; }
}
@media (max-width: 575px){
.stat-strip__row{ grid-template-columns:1fr 1fr; }
.photo-mosaic{ grid-template-columns:1fr; grid-template-rows:200px 160px 160px; }
.photo-mosaic__item--main{ grid-column:1; grid-row:1; }
.photo-mosaic__item:nth-child(2){ grid-column:1; grid-row:2; }
.photo-mosaic__item:nth-child(3){ grid-column:1; grid-row:3; }
}
/* ---- Services page — static grid of .service-card (reused component),
deliberately NOT the homepage's Swiper carousel. Two densities: a larger
grid for the 4 flagship/core services, a denser grid for the 7 specialist
services below it. ---- */
.service-group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-lg); }
.service-group-head h2{ font-size:var(--fs-h2); }
.service-group-head .count{ color:var(--text-muted); font-size:0.9rem; white-space:nowrap; }
.service-showcase{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-md); }
.service-showcase--core{ grid-template-columns:repeat(4, 1fr); }
.service-showcase--core .service-card{ min-height:420px; }
.service-showcase--specialist{ grid-template-columns:repeat(4, 1fr); }
.service-showcase--specialist .service-card{ min-height:320px; }
.service-showcase--specialist .service-card__desc{ font-size:0.88rem; }
.services-page-intro{ max-width:720px; margin-bottom:var(--space-2xl); }
.services-page-intro .lead{ margin-top:var(--space-sm); }
@media (max-width: 1199px){
.service-showcase--core{ grid-template-columns:repeat(2, 1fr); }
.service-showcase--specialist{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 767px){
.service-showcase--core{ grid-template-columns:1fr; }
.service-showcase--specialist{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
.service-showcase--specialist{ grid-template-columns:1fr; }
}
/* ---- Projects gallery page — simple filterable image grid + lightbox.
Deliberately NOT per-project case-study pages: clicking a card opens the
image in a lightbox rather than navigating anywhere. ---- */
.project-gallery-filter{
display:flex;
flex-wrap:wrap;
gap:0.6rem;
margin-bottom:var(--space-xl);
}
.project-gallery-filter__btn{
font-family:var(--font-body);
font-size:0.85rem;
font-weight:600;
letter-spacing:0.02em;
color:var(--text-muted);
background:var(--color-white);
border:1px solid var(--color-line);
border-radius:100px;
padding:0.55rem 1.1rem;
cursor:pointer;
transition:all var(--dur-fast) var(--ease-out);
}
.project-gallery-filter__btn:hover{ color:var(--color-charcoal-950); border-color:var(--color-charcoal-950); }
.project-gallery-filter__btn.is-active{
background:var(--color-charcoal-950);
border-color:var(--color-charcoal-950);
color:var(--color-white);
}
.project-gallery-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:var(--space-md);
}
.gallery-card{
position:relative;
display:block;
overflow:hidden;
border-radius:var(--radius-md);
aspect-ratio:4/3.1;
cursor:pointer;
background:var(--color-charcoal-950);
}
.gallery-card img{
width:100%; height:100%;
object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out);
}
.gallery-card:hover img{ transform:scale(1.08); }
.gallery-card__overlay{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(20,17,15,0) 40%, rgba(20,17,15,0.88) 100%);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:var(--space-md);
color:var(--text-light);
}
.gallery-card__tag{
display:inline-flex; align-items:center; gap:0.4rem;
font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
color:var(--color-orange-400);
margin-bottom:0.35rem;
}
.gallery-card__tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--color-orange-500); }
.gallery-card h3{ font-size:1.15rem; color:var(--text-light); margin-bottom:0.15rem; }
.gallery-card .cat{ font-size:0.82rem; color:var(--text-light-muted); }
.gallery-card__zoom{
position:absolute; top:var(--space-sm); right:var(--space-sm);
width:38px; height:38px; border-radius:50%;
background:rgba(255,255,255,0.14);
backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
color:var(--text-light);
opacity:0; transform:scale(0.8);
transition:all var(--dur-fast) var(--ease-out);
}
.gallery-card:hover .gallery-card__zoom{ opacity:1; transform:scale(1); }
.gallery-card.is-hidden{ display:none; }
@media (max-width: 991px){
.project-gallery-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575px){
.project-gallery-grid{ grid-template-columns:1fr; gap:var(--space-sm); }
.gallery-card{ aspect-ratio:4/3; }
}
/* ---- Lightbox (used by the Projects gallery) ---- */
.lightbox{
position:fixed; inset:0;
z-index:1000;
display:flex; align-items:center; justify-content:center;
padding:var(--space-lg);
background:rgba(12,10,9,0.94);
opacity:0; visibility:hidden;
transition:opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-med) var(--ease-out); }
.lightbox__figure{
position:relative;
max-width:min(1100px, 90vw);
max-height:85vh;
display:flex;
flex-direction:column;
align-items:center;
transform:scale(0.96);
transition:transform var(--dur-med) var(--ease-out);
}
.lightbox.is-open .lightbox__figure{ transform:scale(1); }
.lightbox__figure img{
max-width:100%;
max-height:70vh;
object-fit:contain;
border-radius:var(--radius-sm);
box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.lightbox__caption{ text-align:center; margin-top:var(--space-sm); color:var(--text-light); }
.lightbox__caption h3{ font-size:1.15rem; color:var(--text-light); margin-bottom:0.2rem; }
.lightbox__caption .cat{ font-size:0.85rem; color:var(--text-light-muted); }
.lightbox__close, .lightbox__prev, .lightbox__next{
position:fixed;
width:44px; height:44px;
border-radius:50%;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.16);
color:var(--text-light);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:all var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover{
background:var(--color-orange-500); border-color:var(--color-orange-500);
}
.lightbox__close{ top:var(--space-md); right:var(--space-md); }
.lightbox__prev{ left:var(--space-md); top:50%; transform:translateY(-50%); }
.lightbox__next{ right:var(--space-md); top:50%; transform:translateY(-50%); }
@media (max-width: 575px){
.lightbox__prev, .lightbox__next{ width:38px; height:38px; }
.lightbox__close{ width:38px; height:38px; }
}
/* ---- Blog index — featured post + standard blog-card grid. ---- */
.blog-featured{
position:relative;
display:grid;
grid-template-columns:1.1fr 1fr;
align-items:stretch;
gap:var(--space-xl);
background:var(--color-off-white);
border-radius:var(--radius-lg);
overflow:hidden;
margin-bottom:var(--space-2xl);
}
.blog-featured__img{ position:relative; overflow:hidden; min-height:340px; }
.blog-featured__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.blog-featured:hover .blog-featured__img img{ transform:scale(1.05); }
.blog-featured__body{ display:flex; flex-direction:column; justify-content:center; padding:var(--space-xl) var(--space-xl) var(--space-xl) 0; }
.blog-featured__meta{ display:flex; align-items:center; gap:0.6rem; font-size:0.8rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-orange-600); margin-bottom:var(--space-sm); }
.blog-featured__meta .sep{ opacity:0.5; color:var(--text-muted); }
.blog-featured__meta .date{ color:var(--text-muted); text-transform:none; font-weight:500; letter-spacing:0; }
.blog-featured__body h2{ font-size:var(--fs-h2); margin-bottom:var(--space-sm); }
.blog-featured__body p{ color:var(--text-muted); margin-bottom:var(--space-md); }
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-lg); }
.blog-card{ display:flex; flex-direction:column; }
.blog-card__img{ position:relative; overflow:hidden; border-radius:var(--radius-md); aspect-ratio:16/11; margin-bottom:var(--space-md); }
.blog-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .blog-card__img img{ transform:scale(1.06); }
.blog-card__cat{
position:absolute; top:var(--space-sm); left:var(--space-sm);
background:rgba(20,17,15,0.72);
backdrop-filter:blur(4px);
color:var(--text-light);
font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
padding:0.35rem 0.7rem;
border-radius:100px;
}
.blog-card__date{ font-size:0.82rem; color:var(--text-muted); margin-bottom:0.4rem; }
.blog-card h3{ font-size:1.2rem; margin-bottom:0.5rem; }
.blog-card p{ color:var(--text-muted); font-size:0.92rem; margin-bottom:var(--space-sm); }
.blog-card .link-arrow{ margin-top:auto; }
@media (max-width: 991px){
.blog-featured{ grid-template-columns:1fr; }
.blog-featured__img{ min-height:280px; }
.blog-featured__body{ padding:var(--space-lg); }
.blog-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575px){
.blog-grid{ grid-template-columns:1fr; }
.blog-featured__body{ padding:var(--space-md); }
}
/* ---- Single blog post — clean reading layout, distinct from the index. ---- */
.post-header{ max-width:760px; margin:0 auto var(--space-xl); text-align:center; }
.post-header__meta{ display:flex; align-items:center; justify-content:center; gap:0.6rem; font-size:0.82rem; color:var(--text-muted); margin-bottom:var(--space-sm); }
.post-header__meta .cat{ color:var(--color-orange-600); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; font-size:0.78rem; }
.post-header h1{ font-size:var(--fs-h1); margin-bottom:var(--space-sm); }
.post-cover{ border-radius:var(--radius-lg); overflow:hidden; max-width:960px; margin:0 auto var(--space-2xl); }
.post-cover img{ width:100%; display:block; }
.post-body{ max-width:720px; margin:0 auto; }
.post-body p{ color:var(--text-dark); font-size:1.05rem; line-height:1.8; margin-bottom:var(--space-md); }
.post-body h2{ font-size:1.5rem; margin:var(--space-xl) 0 var(--space-sm); }
.post-body ul{ margin:0 0 var(--space-md); padding-left:1.3rem; color:var(--text-dark); }
.post-body ul li{ margin-bottom:0.5rem; line-height:1.7; }
.post-body blockquote{
border-left:3px solid var(--color-orange-500);
padding-left:var(--space-md);
margin:var(--space-lg) 0;
font-family:var(--font-display);
font-size:1.2rem;
color:var(--color-charcoal-950);
}
.post-foot{ max-width:720px; margin:var(--space-2xl) auto 0; padding-top:var(--space-lg); border-top:1px solid var(--color-line); display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); flex-wrap:wrap; }
@media (max-width: 575px){
.post-header h1{ font-size:2rem; }
}
/* ---- Contact page — form panel + info sidebar, distinct two-column layout. ---- */
.contact-grid{
display:grid;
grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
gap:var(--space-xl);
align-items:start;
}
.contact-form-panel{
min-width:0;
background:var(--color-off-white);
border-radius:var(--radius-lg);
padding:var(--space-xl);
}
.contact-form-panel h2{ font-size:var(--fs-h3); margin-bottom:0.4rem; }
.contact-form-panel .lead{ color:var(--text-muted); margin-bottom:var(--space-lg); }
.contact-form-panel__success{
display:none;
text-align:center;
padding:var(--space-2xl) var(--space-sm);
}
.contact-form-panel__success.is-visible{ display:block; }
.contact-form-panel__success-icon{
display:inline-flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background:var(--color-orange-100); color:var(--color-orange-600);
font-size:1.3rem; margin-bottom:var(--space-md);
}
.contact-form-panel__success p{ color:var(--text-muted); }
.contact-info-stack{ display:flex; flex-direction:column; gap:var(--space-md); min-width:0; }
.contact-info-card{
display:flex; align-items:flex-start; gap:var(--space-md);
background:var(--color-white);
border:1px solid var(--color-line-dark);
border-radius:var(--radius-md);
padding:var(--space-md) var(--space-lg);
min-width:0;
}
.contact-info-card > span:last-child{ min-width:0; flex:1; }
.contact-info-card .label{ display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.15rem; }
.contact-info-card .value{ display:block; font-size:1.02rem; font-weight:600; color:var(--text-dark); overflow-wrap:break-word; }
.contact-info-card a.value:hover{ color:var(--color-orange-600); }
.contact-visit-panel{
position:relative;
overflow:hidden;
border-radius:var(--radius-md);
background:linear-gradient(165deg, var(--color-charcoal-950) 0%, #2a2523 100%);
color:var(--text-light);
padding:var(--space-lg);
min-height:220px;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.contact-visit-panel::before{
content:'';
position:absolute;
top:50%; left:50%;
transform:translate(-50%, -50%);
width:80%; height:80%;
background-image:url('../images/patterns/floorplan-light.svg');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
opacity:0.08;
pointer-events:none;
}
.contact-visit-panel__eyebrow{ position:relative; z-index:1; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-orange-400); margin-bottom:0.4rem; }
.contact-visit-panel address{ position:relative; z-index:1; font-style:normal; font-size:1.15rem; font-weight:600; margin-bottom:0.5rem; }
.contact-visit-panel p{ position:relative; z-index:1; color:var(--text-light-muted); font-size:0.9rem; }
.contact-hours{ display:flex; flex-direction:column; gap:0.5rem; }
.contact-hours__row{ display:flex; align-items:center; justify-content:space-between; font-size:0.92rem; padding-bottom:0.5rem; border-bottom:1px solid var(--color-line-dark); }
.contact-hours__row:last-child{ border-bottom:0; padding-bottom:0; }
.contact-hours__row .day{ color:var(--text-dark); font-weight:600; }
.contact-hours__row .time{ color:var(--text-muted); }
.contact-map-section{ padding-top:0; }
.contact-map{
position:relative;
width:100%;
height:420px;
border-radius:var(--radius-lg);
overflow:hidden;
border:1px solid var(--color-line-dark);
filter:grayscale(0.15) contrast(1.05);
}
.contact-map iframe{ display:block; width:100%; height:100%; }
@media (max-width: 991px){
.contact-grid{ grid-template-columns:1fr; }
.contact-form-panel{ padding:var(--space-lg); }
.contact-map{ height:360px; }
}
@media (max-width: 575px){
.contact-form-panel{ padding:var(--space-md); }
.contact-info-card{ padding:var(--space-sm) var(--space-md); }
.contact-map{ height:280px; border-radius:var(--radius-md); }
}
/* ---- Legal pages (Privacy Policy / Terms) — sticky side nav + reading
column. Deliberately different structure to the single-column blog post
layout, even though both are "reading" pages. ---- */
.legal-layout{
display:grid;
grid-template-columns:240px 1fr;
gap:var(--space-2xl);
align-items:start;
}
.legal-toc{
position:sticky;
top:120px;
display:flex;
flex-direction:column;
gap:0.15rem;
border-left:2px solid var(--color-line-dark);
padding-left:var(--space-md);
}
.legal-toc a{
font-size:0.88rem;
color:var(--text-muted);
padding:0.4rem 0;
transition:color var(--dur-fast) var(--ease-out);
}
.legal-toc a:hover{ color:var(--color-orange-600); }
.legal-updated{ font-size:0.85rem; color:var(--text-muted); margin-bottom:var(--space-lg); }
.legal-content{ max-width:720px; min-width:0; }
.legal-content h2{ font-size:1.4rem; margin:var(--space-xl) 0 var(--space-sm); scroll-margin-top:120px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--text-dark); line-height:1.8; margin-bottom:var(--space-md); }
.legal-content ul{ margin:0 0 var(--space-md); padding-left:1.3rem; color:var(--text-dark); }
.legal-content ul li{ margin-bottom:0.5rem; line-height:1.7; }
.legal-content a{ color:var(--color-orange-600); text-decoration:underline; text-underline-offset:2px; overflow-wrap:break-word; }
@media (max-width: 991px){
.legal-layout{ grid-template-columns:1fr; }
.legal-toc{ position:static; display:grid; grid-template-columns:repeat(2, 1fr); border-left:0; padding-left:0; border-top:1px solid var(--color-line-dark); padding-top:var(--space-md); margin-bottom:var(--space-lg); gap:0.2rem 1rem; }
}
@media (max-width: 575px){
.legal-toc{ grid-template-columns:1fr; }
}
/* ---- Thank You page ---- */
.thankyou-panel{
max-width:640px;
margin:0 auto;
text-align:center;
}
.thankyou-panel__icon{
display:inline-flex; align-items:center; justify-content:center;
width:88px; height:88px; border-radius:50%;
background:var(--color-orange-100); color:var(--color-orange-600);
font-size:2.2rem; margin-bottom:var(--space-lg);
}
.thankyou-panel h1{ margin-bottom:var(--space-sm); }
.thankyou-panel .lead{ color:var(--text-muted); margin-bottom:var(--space-xl); }
.thankyou-panel .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:var(--space-2xl); }
.thankyou-next{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-md); text-align:left; margin-top:var(--space-xl); }
.thankyou-next__item{ border:1px solid var(--color-line-dark); border-radius:var(--radius-md); padding:var(--space-md); }
.thankyou-next__item .icon-circle{ margin-bottom:var(--space-sm); }
.thankyou-next__item h3{ font-size:1rem; margin-bottom:0.3rem; }
.thankyou-next__item p{ font-size:0.88rem; color:var(--text-muted); }
@media (max-width: 767px){
.thankyou-next{ grid-template-columns:1fr; }
}
/* ---- 404 page ---- */
.error-panel{
max-width:640px;
margin:0 auto;
text-align:center;
position:relative;
}
.error-panel__code{
font-family:var(--font-display);
font-size:clamp(5rem, 3rem + 8vw, 9rem);
font-weight:700;
line-height:1;
color:var(--color-charcoal-950);
opacity:0.06;
letter-spacing:-0.02em;
margin-bottom:-1.2rem;
}
.error-panel h1{ margin-bottom:var(--space-sm); position:relative; }
.error-panel .lead{ color:var(--text-muted); margin-bottom:var(--space-xl); }
.error-panel .btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.error-panel__links{ margin-top:var(--space-2xl); padding-top:var(--space-lg); border-top:1px solid var(--color-line-dark); }
.error-panel__links p{ font-size:0.85rem; color:var(--text-muted); margin-bottom:var(--space-sm); }
.error-panel__links .link-row{ display:flex; gap:var(--space-md); justify-content:center; flex-wrap:wrap; }
.error-panel__links .link-row a{ font-size:0.92rem; font-weight:600; color:var(--text-dark); }
.error-panel__links .link-row a:hover{ color:var(--color-orange-600); }
/* ---- Quote page — reassurance sidebar next to the request form. ---- */
.quote-reassure-panel{
min-width:0;
background:linear-gradient(165deg, var(--color-charcoal-950) 0%, #2a2523 100%);
border-radius:var(--radius-lg);
padding:var(--space-xl);
color:var(--text-light);
}
.quote-reassure-panel h3{ color:var(--text-light); margin-bottom:var(--space-md); }
.quote-reassure-list{ display:flex; flex-direction:column; gap:var(--space-md); margin-bottom:var(--space-lg); }
.quote-reassure-list__item{ display:flex; align-items:flex-start; gap:0.8rem; }
.quote-reassure-list__item .icon-circle{ --size:40px; flex-shrink:0; }
.quote-reassure-list__item h4{ font-size:0.98rem; color:var(--text-light); margin-bottom:0.15rem; }
.quote-reassure-list__item p{ font-size:0.85rem; color:var(--text-light-muted); }
.quote-reassure-panel__divider{ height:1px; background:var(--color-line); margin:var(--space-lg) 0; }
.quote-reassure-panel__contact{ display:flex; align-items:center; gap:0.8rem; margin-bottom:var(--space-sm); color:var(--text-light); min-width:0; }
.quote-reassure-panel__contact .icon-circle{ --size:40px; background:rgba(239,128,42,0.12); color:var(--color-orange-400); flex-shrink:0; }
.quote-reassure-panel__contact a{ color:var(--text-light); font-weight:600; font-size:0.95rem; overflow-wrap:break-word; min-width:0; }
.quote-reassure-panel__contact a:hover{ color:var(--color-orange-400); }