/* ============================================================
MARQUE — Design Studio
Design system: paper + brass + ink. Editorial serif meets a
working grotesk. Catalog numbering is literal here — this
studio makes catalogs — so it appears as structure, not decor.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
--bg: #faf8f2; /* page background — paper */
--surface: #f1ebdc; /* card / panel surface */
--surface-2: #e8e0cb; /* deeper card surface */
--ink: #1c1912; /* primary text, dark accents */
--ink-dim: #000000; /* secondary / body text */
--brass: #93672e; /* accent — deep brass, AA on paper */
--brass-light:#b1854a; /* lighter brass for hovers, large text */
--brass-dim: #d9c09a; /* faint brass tint for washes */
--stone: #6f695a; /* captions, labels */
--line: rgba(28,25,18,0.12);
--line-strong:rgba(28,25,18,0.22);
--serif: "Fraunces", "Iowan Old Style", serif;
--sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--mono: "IBM Plex Mono", monospace;
--ease: cubic-bezier(.65,.05,.2,1);
--ease-soft: cubic-bezier(.4,.0,.2,1);
}
*{ box-sizing: border-box; }
html, body{
margin:0; padding:0; height:100%;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
body.scroll-unlocked{ overflow:auto; }
html.subpage, body.subpage{ overflow-y:auto; overflow-x:hidden; height:auto; }
h1,h2,h3{ font-family: var(--serif); font-weight:500; margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family: var(--sans); cursor:pointer; background:none; border:none; color:inherit; }
::selection{ background: var(--brass); color: var(--bg); }
.eyebrow{
font-family: var(--mono);
font-size: 18px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brass);
display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
content:""; width:22px; height:1px; background: var(--brass);
}
/* ============================== INTRO ============================== */
#intro{
position: fixed; inset:0; z-index: 500;
overflow:hidden;
background: var(--bg);
transition: opacity 1s var(--ease-soft), visibility 1s;
}
#intro.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
/* Returning visitor within the same session — see the inline script at the
top of . Instant, no fade, so there's nothing to flash. */
.intro-skip #intro{ display:none; }
.intro-skip #site{ opacity:1; transition:none; }
.intro-seal-stage{
position:absolute; inset:0; z-index:2;
display:flex; flex-direction:column; align-items:center; justify-content:center;
transition: opacity .6s var(--ease-soft), visibility .6s;
}
.intro-seal-stage.leaving{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-video{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
opacity:0;
transition: opacity 1.4s var(--ease-soft);
}
#intro.play .intro-video{ opacity:1; }
.intro-scrim{
position:absolute; inset:0; z-index:1;
background: linear-gradient(180deg, rgba(250,248,242,0.55) 0%, rgba(250,248,242,0.7) 55%, rgba(250,248,242,0.9) 100%);
}
.intro-video-stage{
position:absolute; inset:0; z-index:3;
background:#ffffff;
opacity:0; visibility:hidden; pointer-events:none;
transition: opacity .6s var(--ease-soft), visibility .6s;
}
.intro-video-stage.active{ opacity:1; visibility:visible; pointer-events:auto; }
.intro-logo-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
}
.intro-seal{ position:relative; z-index:2; width:150px; height:150px; }
.intro-seal svg{ width:100%; height:100%; transform: scale(0.4); opacity:0; }
#intro.play .intro-seal svg{
animation: seal-press 1.6s var(--ease) forwards;
}
.seal-ring{
fill:none; stroke: var(--brass); stroke-width:1.2;
stroke-dasharray: 440; stroke-dashoffset: 440;
}
#intro.play .seal-ring{ animation: seal-ring 1.4s var(--ease-soft) 0.15s forwards; }
#start-intro{
position:absolute; top:50%; left:50%;
z-index:2; width:92px; height:92px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family: var(--mono); font-size:12px; letter-spacing:0.18em;
text-transform:uppercase; color: var(--brass);
background:transparent; border:1px solid var(--line-strong);
opacity:0; cursor:pointer;
transition: background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft), transform .3s var(--ease-soft);
}
#intro.play #start-intro{ animation: seal-btn-in 0.5s var(--ease-soft) 1.05s forwards; }
#start-intro:hover{
background: var(--brass); color: var(--bg); border-color: var(--brass);
transform: translate(-50%,-50%) scale(1.06);
}
@keyframes seal-press{
0%{ transform: scale(2.2); opacity:0; }
55%{ transform: scale(0.92); opacity:1; }
70%{ transform: scale(1.04); }
100%{ transform: scale(1); opacity:1; }
}
@keyframes seal-ring{ to{ stroke-dashoffset:0; } }
@keyframes seal-btn-in{
from{ opacity:0; transform: translate(-50%,-50%) scale(0.7); }
to{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}
.intro-imprint{
position:absolute; inset:-40px; border-radius:50%;
border: 1px solid var(--brass); opacity:0; transform: scale(0.6);
}
#intro.play .intro-imprint{ animation: imprint-spread 0.9s var(--ease-soft) 1.15s forwards; }
@keyframes imprint-spread{
0%{ opacity:0.9; transform: scale(0.6); }
100%{ opacity:0; transform: scale(2.4); }
}
.intro-label{
position:relative; z-index:2;
margin-top:28px; font-family: var(--mono); font-size:11px;
letter-spacing:0.3em; color: var(--stone); opacity:0;
text-transform:uppercase; text-align:center;
}
#intro.play .intro-label{ animation: fade-up 0.7s var(--ease-soft) 1.3s forwards; }
@keyframes fade-up{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
#skip-intro{
position:absolute; z-index:6; bottom:36px; right:36px;
font-family: var(--mono); font-size:11px; letter-spacing:0.16em;
color: var(--stone); text-transform:uppercase;
border:1px solid var(--line-strong); padding:10px 16px; border-radius:2px;
transition: color .3s, border-color .3s;
background: var(--bg);
}
#skip-intro:hover{ color: var(--ink); border-color: var(--brass); }
/* ============================== SHELL ============================== */
#site{ position:fixed; inset:0; opacity:0; transition: opacity 1s var(--ease-soft); }
#site.visible{ opacity:1; }
.topbar{
position:fixed; top:0; left:0; right:0; z-index:200;
display:flex; align-items:center; justify-content:space-between;
padding: 28px 40px;
pointer-events:none;
border-radius:999px; background:transparent;
transition: background .4s var(--ease-soft), box-shadow .4s var(--ease-soft),
top .4s var(--ease-soft), left .4s var(--ease-soft), right .4s var(--ease-soft), padding .4s var(--ease-soft);
}
/* Slides 02–04 (Overview + the two service-group slides): small
contained pill behind the header row so the logo/nav stay legible
over the busier panel photography, without washing the whole page
like a full-width scrim. */
#site:has(.panel[data-panel="overview"].active) .topbar,
#site:has(.panel[data-panel="corporate-communication"].active) .topbar,
#site:has(.panel[data-panel="brand-print"].active) .topbar,
#site:has(.panel[data-panel="process"].active) .topbar{
top:18px; left:24px; right:24px;
padding:16px 28px;
background: rgba(250,248,242,0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 10px 26px rgba(28,25,18,0.12);
}
/* Subpages (About/Services/Contact) scroll normally, so the fixed
header needs its own permanent, fully-opaque background — otherwise
page content scrolls straight up through/behind it and reads as
merged with the logo/nav. Full-width bar (not the floating pill
used on the homepage service slides) so there's no gap at the very
top edge for scrolling text to sneak through. */
.subpage .topbar{
border-radius:0;
background: var(--bg);
box-shadow: 0 4px 20px rgba(28,25,18,0.08);
}
.topbar > *{ pointer-events:auto; }
.logo{
display:flex; align-items:center; gap:11px;
}
.logo-mark{ height:60px; width:auto; display:block; }
.logo-word{
font-family: var(--serif); font-size:19px; letter-spacing:0.02em; color: var(--ink);
}
.topbar-right{ display:flex; align-items:center; gap:38px; }
.site-nav{ display:flex; gap:30px; }
.site-nav a{
font-family: var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
color: var(--ink-dim); transition: color .3s;
}
.site-nav a:hover, .site-nav a.current{ color: var(--brass); }
@media (max-width:900px){ .site-nav{ display:none; } }
.menu-toggle{ width:34px; height:34px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; }
/* Desktop already shows the full .site-nav — the hamburger (and the
hidden full-screen sidebar it opens) is only needed once .site-nav
itself hides below 900px. */
@media (min-width:901px){ .menu-toggle{ display:none; } }
.menu-toggle span{ display:block; height:1px; background:var(--ink); transition: all .35s var(--ease); }
.menu-toggle span:nth-child(1){ width:26px; }
.menu-toggle span:nth-child(2){ width:18px; }
.menu-toggle.open span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); width:24px; }
.menu-toggle.open span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); width:24px; }
/* ---------- chip nav (catalog rail) ----------
Numbers only, no labels — a numbered rail in the spirit of the
catalog-page-number motif used elsewhere (process-step badges,
swatch-num). A hairline spine strings the badges together; the
active one fills solid brass and grows slightly. */
.chip-nav{
position:fixed; right:32px; top:50%; transform:translateY(-50%);
z-index:150; display:flex; flex-direction:column; align-items:center; gap:10px;
opacity:1; pointer-events:auto; transition: opacity .4s var(--ease-soft);
}
/* Hidden on slide 01 (Welcome) — the hero should read clean, with
nothing competing with the opening line. Reappears from slide 02 on. */
#site:has(.panel.panel-welcome.active) .chip-nav{
opacity:0; pointer-events:none;
}
.chip-nav::before{
content:""; position:absolute; left:50%; top:0; bottom:0;
width:1px; background: var(--line-strong); transform:translateX(-50%); z-index:-1;
}
.chip{
display:flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:50%;
background: var(--bg); border:1px solid var(--line-strong);
font-family: var(--serif); font-size:13px; color: var(--stone);
opacity:0.7;
transition: opacity .35s var(--ease), background .35s var(--ease),
border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.chip-num{ position:relative; top:-0.5px; }
.chip:hover{
opacity:1; border-color: var(--brass); color: var(--brass); transform: scale(1.12);
}
.chip.active{
opacity:1; background: var(--brass); border-color: var(--brass); color: var(--bg);
transform: scale(1.22);
animation: chip-glow 2s ease-in-out infinite;
}
@keyframes chip-glow{
0%, 100%{ box-shadow: 0 8px 20px rgba(147,103,46,0.35), 0 0 0 0 rgba(147,103,46,0.5); }
50%{ box-shadow: 0 8px 20px rgba(147,103,46,0.45), 0 0 0 7px rgba(147,103,46,0); }
}
/* ---------- full overlay menu (mobile) ---------- */
.full-menu{
position:fixed; inset:0; z-index:190; background: var(--surface);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transform: translateY(-8px);
transition: all .5s var(--ease);
}
.full-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.full-menu ul{ list-style:none; margin:0; padding:0; text-align:center; }
.full-menu li{ margin:14px 0; }
.full-menu a{ font-family: var(--serif); font-size:clamp(26px,5vw,44px); color: var(--ink-dim); transition: color .3s; }
.full-menu a:hover{ color: var(--brass); }
.full-menu-pages{ margin-top:24px !important; padding-top:24px !important; border-top:1px solid var(--line); }
.full-menu-pages a{ font-size: clamp(15px,3vw,18px) !important; font-family: var(--mono) !important; letter-spacing:0.1em; text-transform:uppercase; color: var(--stone) !important; }
/* ============================== TRACK / PANELS ============================== */
.track{
position:relative;
height:100%; width:100%;
overflow:hidden;
}
.panel{
position:absolute; inset:0;
height:100vh; height:100dvh; width:100%;
display:flex; align-items:center;
padding: 140px 80px 0;
background: var(--bg);
opacity:0;
transform: scale(1.08);
transition: opacity 0.85s var(--ease-soft), transform 0.85s var(--ease-soft);
pointer-events:none;
z-index:1;
}
.panel.active{
opacity:1; transform: scale(1) translateY(0);
pointer-events:auto; z-index:3;
}
.panel.leaving{
opacity:0;
transition-duration: 0.7s;
z-index:2;
}
.panel.leaving.exit-up{ transform: scale(0.86) translateY(-10%); }
.panel.leaving.exit-down{ transform: scale(0.86) translateY(10%); }
.panel.enter-from-below{ opacity:0; transform: scale(1.16) translateY(10%); }
.panel.enter-from-above{ opacity:0; transform: scale(1.16) translateY(-10%); }
.panel-inner{ max-width:1180px; margin:0 auto; width:100%; position:relative; z-index:1; }
/* ---- background image system (used on homepage panels + subpage heroes) ---- */
.panel-bg, .section-bg{
position:absolute; inset:0; z-index:0;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.panel-video{
position:absolute; inset:0; z-index:0;
width:100%; height:100%;
object-fit: cover; object-position: center;
}
.panel-scrim{
position:absolute; inset:0; z-index:0;
background: linear-gradient(180deg, rgba(250,248,242,0.96) 0%, rgba(250,248,242,0.92) 45%, rgba(250,248,242,0.96) 100%);
}
.panel-welcome .panel-scrim{
background: linear-gradient(180deg, rgba(250,248,242,0.92) 0%, rgba(250,248,242,0.85) 45%, rgba(250,248,242,0.92) 100%);
}
.section-scrim{
position:absolute; inset:0; z-index:0;
background: linear-gradient(180deg, rgba(250,248,242,0.96) 0%, rgba(250,248,242,0.92) 45%, rgba(250,248,242,0.96) 100%);
}
.section-content{ position:relative; z-index:1; }
.panel-index{
position:absolute; left:40px; top:36px;
font-family: var(--mono); font-size:12px; color: var(--stone); letter-spacing:0.1em;
}
.panel-index b{ color: var(--brass); }
.scroll-cue{
position:absolute; bottom:40px; left:80px;
font-family: var(--mono); font-size:10px; letter-spacing:0.2em; color: var(--stone);
text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.scroll-cue::after{
content:""; width:1px; height:34px; background: linear-gradient(var(--brass), transparent);
animation: cue-run 1.8s ease-in-out infinite;
}
@keyframes cue-run{ 0%{ opacity:0.2; } 50%{ opacity:1; } 100%{ opacity:0.2; } }
/* ---- Welcome ---- */
/* Reserves room for .scroll-cue (bottom:40px, ~34px tall) so the
vertically-centered text block can't grow tall enough on shorter
viewports (small/scaled laptop screens) to overlap it. */
.panel-welcome{ padding-bottom:104px; }
.panel-welcome h1{
font-size: clamp(48px, 9vw, 128px); line-height:0.96; letter-spacing:-0.01em;
color: var(--ink);
}
.panel-welcome h1 em{ font-style:normal; color: var(--brass); }
.panel-welcome .tagline{
margin-top:26px; max-width:520px; font-size:17px; line-height:1.6; color: var(--ink-dim);
}
.welcome-meta{
margin-top:56px; display:flex; gap:56px; font-family:var(--mono); font-size:11px; color:var(--stone); letter-spacing:0.08em;
}
.welcome-meta b{ display:block; color:var(--ink); font-family:var(--sans); font-size:13px; margin-bottom:4px; letter-spacing:0; }
/* ---- Panel watermark (slide 02 / 08 accent numeral) ---- */
.panel-watermark{
position:absolute; top:50%; right:20px; transform:translateY(-50%);
z-index:0; font-family:var(--serif); font-weight:600;
font-size:clamp(200px,30vw,460px); line-height:1;
color: rgba(28,25,18,0.05); pointer-events:none; user-select:none;
}
@media (max-width:900px){ .panel-watermark{ display:none; } }
/* ---- Slide entrance stagger (overview stats / service cards) ---- */
@keyframes fade-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
.panel[data-panel="overview"] .stat,
.service-group-card{ opacity:0; }
.panel[data-panel="overview"].active .stat,
.panel.active .service-group-card{ animation: fade-rise .6s var(--ease-soft) forwards; }
.panel[data-panel="overview"].active .stat:nth-child(1){ animation-delay:.08s; }
.panel[data-panel="overview"].active .stat:nth-child(2){ animation-delay:.16s; }
.panel[data-panel="overview"].active .stat:nth-child(3){ animation-delay:.24s; }
.panel[data-panel="overview"].active .stat:nth-child(4){ animation-delay:.32s; }
.panel.active .service-group-card:nth-child(1){ animation-delay:.22s; }
.panel.active .service-group-card:nth-child(2){ animation-delay:.30s; }
.panel.active .service-group-card:nth-child(3){ animation-delay:.38s; }
/* ---- Content reveal (slides 02–09): heading/copy/CTA choreography ---- */
.panel:not(.panel-welcome) .overview-grid .eyebrow,
.panel:not(.panel-welcome) h2,
.panel:not(.panel-welcome) .service-desc,
.panel:not(.panel-welcome) .overview-copy > p,
.panel:not(.panel-welcome) .btn-primary.enquire-trigger,
.panel:not(.panel-welcome) .swatch-card,
.panel:not(.panel-welcome) .contact-details,
.panel:not(.panel-welcome) .mini-enquire{
opacity:0;
}
.panel:not(.panel-welcome).active .overview-grid .eyebrow{ animation: fade-rise .6s var(--ease-soft) .05s forwards; }
.panel:not(.panel-welcome).active h2{ animation: fade-rise .65s var(--ease-soft) .14s forwards; }
.panel:not(.panel-welcome).active .service-desc,
.panel:not(.panel-welcome).active .overview-copy > p{ animation: fade-rise .65s var(--ease-soft) .28s forwards; }
.panel:not(.panel-welcome).active .btn-primary.enquire-trigger{ animation: fade-rise .55s var(--ease-soft) .44s forwards; }
.panel:not(.panel-welcome).active .swatch-card{ animation: fade-rise .7s var(--ease-soft) .22s forwards; }
.panel:not(.panel-welcome).active .contact-details{ animation: fade-rise .65s var(--ease-soft) .28s forwards; }
.panel:not(.panel-welcome).active .mini-enquire{ animation: fade-rise .65s var(--ease-soft) .36s forwards; }
/* ---- Overview ---- */
.overview-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:start; }
.overview-grid h2{ font-size: clamp(30px,4vw,46px); line-height:1.15; max-width:9ch; margin-top:20px; }
.overview-copy p{ font-size:16px; line-height:1.75; color: var(--ink-dim); max-width:52ch; }
.principles{ margin-top:34px; display:flex; flex-direction:column; gap:18px; }
.principle{ display:flex; gap:16px; align-items:baseline; border-top:1px solid var(--line); padding-top:14px; }
.principle b{ font-family:var(--serif); font-size:18px; color:var(--brass); min-width:120px; }
.principle span{ color:var(--stone); font-size:14px; line-height:1.6; }
/* ---- Service panels ---- */
.service-title{ font-size: clamp(38px,5.2vw,66px); line-height:1.02; margin-top:20px; }
.service-desc{ margin-top:22px; font-size:16px; line-height:1.75; color:var(--ink-dim); max-width:46ch; }
/* ---- Service group slides (Corporate Communication / Brand & Print) ----
Each slide groups three related services into one panel instead of a
dedicated slide per service — a compact numbered-card row rather than
the full-bleed single-service layout above. */
.service-group-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
margin-top:34px;
}
.service-group-card{
background:var(--bg); padding:0 26px 28px;
border:1px solid var(--line-strong); border-radius:3px; overflow:hidden;
display:flex; flex-direction:column;
position:relative; z-index:1;
transition: background .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-group-card:hover{
background:var(--surface); border-color:var(--brass); transform:translateY(-6px);
box-shadow: 0 18px 36px rgba(28,25,18,0.14); z-index:2;
}
.service-group-img{
position:relative; aspect-ratio:4/3; overflow:hidden;
margin:0 -26px 24px;
}
.service-group-img img{
width:100%; height:100%; object-fit:cover; object-position:center 78%; display:block;
transition: transform .7s var(--ease-soft);
}
.service-group-card:hover .service-group-img img{ transform:scale(1.09); }
.service-group-img::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(28,25,18,0) 55%, rgba(28,25,18,0.4) 100%);
opacity:0; transition:opacity .4s var(--ease);
}
.service-group-card:hover .service-group-img::after{ opacity:1; }
.service-group-num{
position:absolute; top:14px; left:14px; z-index:1;
width:34px; height:34px; border-radius:50%;
background:rgba(250,248,242,0.92);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:12px; color:var(--ink);
transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.service-group-card:hover .service-group-num{
background:var(--brass); color:var(--bg); transform:scale(1.1) rotate(-6deg);
}
.service-group-card h3{ font-size:20px; margin-top:0; }
.service-group-card p{ margin-top:10px; font-size:13.5px; line-height:1.65; color:var(--ink-dim); }
.mini-enquire-link{
margin-top:20px; align-self:flex-start;
font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--brass); display:inline-flex; align-items:center; gap:6px;
transition: gap .3s var(--ease), color .3s;
}
.mini-enquire-link:hover{ gap:10px; color:var(--brass-light); }
.swatch-card{
aspect-ratio: 4/5; border-radius:2px; position:relative; overflow:hidden;
background: var(--surface-2); border:1px solid var(--line-strong);
display:flex; align-items:flex-end; padding:26px;
}
.swatch-card::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, var(--brass-dim), transparent 65%);
opacity:0.6;
}
.swatch-num{ font-family:var(--serif); font-size:80px; color: rgba(28,25,18,0.09); position:relative; }
/* ---- Contact page map embed ----
flex:1 (rather than a fixed aspect-ratio) so it grows to fill
whatever space is left in the right-hand column after the address
details — keeping its bottom edge level with the form column
alongside it. */
.contact-map{
flex:1; min-height:240px; border-radius:2px; overflow:hidden;
border:1px solid var(--line-strong);
}
.contact-map iframe{ width:100%; height:100%; display:block; filter: grayscale(20%) contrast(1.03); }
/* ---- Contact ----
Top-anchored (instead of the default vertically-centered panel) so the
heading keeps a fixed, guaranteed gap under the floating topbar no
matter how tall the right-hand column (details + mini form) gets. */
.panel[data-panel="contact"]{ align-items:flex-start; padding-top:140px; padding-bottom:36px; }
/* Same reasoning for the two service-group slides — the 3-card grid
(each card now with its own photo) got tall enough on some screens
to overflow. Rather than top-anchoring (which read as "stuck to the
header"), keep the default centered alignment from .panel — the
compact mode below already keeps this content short enough to fit
without overflowing on realistic viewport heights, so centering no
longer risks it touching either edge. overflow-y:auto stays purely
as a defensive fallback for anything shorter than that. */
.panel[data-panel="corporate-communication"],
.panel[data-panel="brand-print"],
.panel[data-panel="process"]{
overflow-y:auto; -webkit-overflow-scrolling:touch;
}
/* On a shorter actual browser viewport (real window chrome — title bar,
tabs, bookmarks — regularly eats 150px+ before the page even starts),
scale everything down instead of leaning on the scroll fallback above,
so the row of 3 cards fits in view without needing to scroll at all. */
@media (max-height:820px){
.panel[data-panel="corporate-communication"],
.panel[data-panel="brand-print"]{ padding-top:104px; padding-bottom:28px; }
.panel[data-panel="corporate-communication"] .service-title,
.panel[data-panel="brand-print"] .service-title{ margin-top:6px; }
.panel[data-panel="corporate-communication"] .service-desc,
.panel[data-panel="brand-print"] .service-desc{ margin-top:12px; }
.panel[data-panel="corporate-communication"] .service-group-grid,
.panel[data-panel="brand-print"] .service-group-grid{ margin-top:20px; gap:28px; }
.panel[data-panel="corporate-communication"] .service-group-img,
.panel[data-panel="brand-print"] .service-group-img{ aspect-ratio:16/9; margin-bottom:14px; }
.panel[data-panel="corporate-communication"] .service-group-card,
.panel[data-panel="brand-print"] .service-group-card{ padding-bottom:18px; }
.panel[data-panel="corporate-communication"] .service-group-card h3,
.panel[data-panel="brand-print"] .service-group-card h3{ font-size:17px; }
.panel[data-panel="corporate-communication"] .service-group-card p,
.panel[data-panel="brand-print"] .service-group-card p{ margin-top:6px; font-size:12.5px; line-height:1.5; }
.panel[data-panel="corporate-communication"] .mini-enquire-link,
.panel[data-panel="brand-print"] .mini-enquire-link{ margin-top:12px; }
}
.contact-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:center; }
.contact-grid h2{ font-size: clamp(26px,3.6vw,48px); line-height:1.12; max-width:19ch; }
.contact-grid .service-desc{ margin-top:16px; font-size:14px; }
.contact-grid .enquire-trigger{ margin-top:22px; }
.contact-side{ display:flex; flex-direction:column; gap:18px; }
.contact-details{ display:flex; flex-direction:column; gap:20px; border-left:1px solid var(--line); padding-left:26px; }
.contact-details div b{ display:block; font-family:var(--mono); font-size:14px; letter-spacing:0.14em; color:var(--stone); text-transform:uppercase; margin-bottom:4px; }
.contact-details div span{ font-size:15px; color:var(--ink); }
.mini-enquire{ border-left:1px solid var(--line); padding-left:26px; }
.mini-enquire .eyebrow{ margin-bottom:10px; font-size:10px; }
.mini-form-fields{ gap:7px; }
.mini-form-fields input, .mini-form-fields textarea{ padding:8px 11px; font-size:12px; }
.mini-form-fields textarea{ min-height:34px; }
.mini-form-fields button{ margin-top:2px; padding:9px 18px; font-size:10px; align-self:flex-start; }
.btn-primary{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
background: var(--brass); color: var(--bg); padding:15px 26px; border-radius:2px;
transition: background .3s, transform .3s;
}
.btn-primary:hover{ background: var(--ink); transform: translateY(-1px); }
/* ---------- prev/next controls ---------- */
.nav-btn{
position:fixed; left:40px; z-index:150;
font-family: var(--mono); font-size:11px; letter-spacing:0.14em; color: var(--stone);
display:flex; align-items:center; gap:8px; text-transform:uppercase;
transition: color .3s, opacity .3s;
}
.nav-btn:hover{ color: var(--brass); }
.nav-btn:disabled{ opacity:0.3; pointer-events:none; }
#prevBtn{ bottom:100px; }
#nextBtn{ bottom:40px; }
.nav-btn .arrow{ display:inline-block; transition: transform .3s; }
#nextBtn:hover .arrow{ transform: translateY(2px); }
#prevBtn:hover .arrow{ transform: translateY(-2px); }
/* ============================== MODAL ============================== */
.modal{
position:fixed; inset:0; z-index:400;
display:flex; align-items:center; justify-content:center;
background: rgba(20,17,11,0.55); backdrop-filter: blur(6px);
opacity:0; visibility:hidden; transition: all .4s var(--ease-soft);
padding: 24px;
}
.modal.open{ opacity:1; visibility:visible; }
.modal-inner{
width:100%; max-width:480px; background: var(--surface);
border:1px solid var(--line-strong); border-radius:3px; padding:44px;
position:relative; transform: translateY(14px); transition: transform .4s var(--ease-soft);
box-shadow: 0 30px 60px rgba(28,25,18,0.18);
}
.modal.open .modal-inner{ transform: translateY(0); }
.modal-close{ position:absolute; top:18px; right:20px; font-size:22px; color:var(--stone); }
.modal-close:hover{ color: var(--ink); }
.modal-inner h3{ font-size:26px; color: var(--ink); }
.modal-inner > p{ color:var(--stone); font-size:14px; margin-top:10px; line-height:1.6; }
.form-fields{ display:flex; flex-direction:column; gap:14px; }
.form-fields input, .form-fields select, .form-fields textarea{
background: var(--bg); border:1px solid var(--line-strong); color: var(--ink);
font-family: var(--sans); font-size:14px; padding:13px 14px; border-radius:2px; width:100%;
transition: border-color .3s;
}
.form-fields input::placeholder, .form-fields textarea::placeholder{ color: var(--stone); }
.form-fields input:focus, .form-fields select:focus, .form-fields textarea:focus{
outline:none; border-color: var(--brass);
}
.form-fields textarea{ resize:vertical; min-height:80px; font-family:var(--sans); }
.form-fields button{ margin-top:6px; }
#enquireForm{ margin-top:28px; }
.form-success{ margin-top:20px; padding:16px; border:1px solid var(--brass-dim); background: rgba(147,103,46,0.08); border-radius:2px; color: var(--brass); font-size:14px; }
.hidden{ display:none !important; }
/* ============================== MULTI-PAGE LAYOUT ============================== */
.page-main{ padding-top:118px; }
.page-hero{
position:relative; overflow:hidden;
padding: 30px 80px 70px;
}
.page-hero .section-content{ max-width:1180px; margin:0 auto; }
.page-hero h1{ font-size:clamp(40px,7vw,80px); line-height:1.02; max-width:14ch; margin-top:20px; }
.page-hero p{ margin-top:22px; font-size:17px; line-height:1.7; color:var(--ink-dim); max-width:58ch; }
.content-section{
padding: 64px 80px; max-width:1180px; margin:0 auto;
border-top:1px solid var(--line);
}
.content-section > .section-head{ margin-bottom:36px; }
.content-section h2{ font-size:clamp(28px,4vw,42px); line-height:1.15; max-width:16ch; margin-top:20px; }
/* ---- about page ---- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.about-grid p{ font-size:16px; line-height:1.75; color:var(--ink-dim); max-width:52ch; }
.about-grid p + p{ margin-top:16px; }
/* "Our story" + "The person behind it" — photo on the left, copy on the
right. Still a .about-grid underneath (same mobile stacking), this
just narrows the left column for the image and adds the media block. */
.about-media-grid{ grid-template-columns: 0.85fr 1.15fr; }
.about-media{
position:relative; aspect-ratio:4/5; overflow:hidden;
border-radius:3px; background:var(--surface);
}
.about-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.about-media-grid h2 + p{ margin-top:18px; }
/* "Our story" specifically: content on the left, image on the right —
flips via `order` (desktop only, since this is a grid-item property
and the mobile breakpoint collapses to a single column where DOM
order already puts the image on top, unaffected by this). */
@media (min-width:901px){
.about-media-reverse{ grid-template-columns: 1.15fr 0.85fr; align-items:stretch; }
.about-media-reverse .about-media{ order:2; aspect-ratio:4/3; height:auto; max-height:100%; align-self:start; }
.about-media-reverse > div:last-child{ order:1; }
}
.stat-row{ display:flex; gap:60px; flex-wrap:wrap; margin-top:8px; }
.stat b{ display:block; font-family:var(--serif); font-size:clamp(32px,4vw,48px); color:var(--brass); line-height:1; }
.stat span{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); }
.panel[data-panel="overview"] .stat{
position:relative; padding-top:18px;
transition: transform .35s var(--ease);
}
.panel[data-panel="overview"] .stat::before{
content:""; position:absolute; top:0; left:0; width:26px; height:2px;
background:var(--brass); transition: width .35s var(--ease), background .35s var(--ease);
}
.panel[data-panel="overview"] .stat:hover{ transform:translateY(-5px); }
.panel[data-panel="overview"] .stat:hover::before{ width:48px; background:var(--brass-light); }
.process-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.process-step{ background:var(--bg); padding:32px 26px;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
position: relative;
}
.process-step:hover{
background: var(--surface);
transform: translateY(-6px);
}
.process-step .eyebrow{
margin-bottom:14px;
font-size: 13px;
}
.process-step .eyebrow::before{
width: 22px;
transition: width 0.3s var(--ease);
}
.process-step:hover .eyebrow::before{
width: 40px;
background: var(--brass-light);
}
.process-step h3{ font-size:19px; margin-top:4px; }
.process-step p{ margin-top:10px; font-size:13px; line-height:1.6; color:var(--stone); }
.process-step .eyebrow{ margin-bottom:14px; }
.process-step h3{ font-size:19px; margin-top:4px; }
.process-step p{ margin-top:10px; font-size:13px; line-height:1.6; color:var(--stone); }
/* ---- slide 05 (Our Process) — scroll-driven story ----
See the large CSS block further down ("SLIDE 05 — SCROLL-DRIVEN
PROCESS STORY") for the pinned/scrubbed story itself. This part
just keeps the heading (still used by both the story and the
mouse-parallax "heading reacts to cursor" effect) and the small
topic icons, which are now reused inside the story's progress-bar
step buttons instead of a static always-visible timeline. */
.process-heading{ margin-top:20px; font-size:clamp(30px,3.6vw,46px); max-width:18ch; position:relative; z-index:1; will-change: transform; }
/* .node-icon sizing lives with .process-story-step further down — the
icons are now plain ![]()
files (icons/process/*.svg), so there's no
internal SVG structure left here to animate or recolor via CSS. */
/* ============================================================
SLIDE 05 — AUTO-LOOPING PROCESS CAROUSEL
Stages sit stacked on top of each other (absolute) and
cross-fade automatically on a timer run by script.js, which
toggles .is-active — looping back to Discover after Deliver.
No-JS fallback: .process-story:not(.js-ready) shows the first
stage statically via :first-child, so the slide is never blank
even before script.js runs (or if it fails to for any reason).
Icons and illustrations are plain ![]()
tags (see index.html) —
swap the files in icons/process/ to use your own artwork.
============================================================ */
.process-story{
position:relative; z-index:1;
max-width:1180px; margin:-10px auto 0; width:100%;
display:flex; flex-direction:column;
}
.process-stage-stack{ position:relative; margin-top:24px; height:340px; }
.process-stage{
position:absolute; inset:0;
.process-stage-art img{ margin-top:-90px; }
display:grid; grid-template-columns:minmax(0,420px) 1fr;
align-items:center; gap:56px;
opacity:0; transform:translateY(20px) scale(0.985);
transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
pointer-events:none;
}
.process-story:not(.js-ready) .process-stage:first-child,
.process-stage.is-active{
opacity:1; transform:translateY(0) scale(1);
pointer-events:auto;
}
.process-stage-index{
display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
color:var(--brass); text-transform:uppercase; margin-bottom:10px;
}
.process-stage-copy h3{ font-size:26px; margin-top:0; }
.process-stage-copy p{ margin-top:12px; font-size:15px; line-height:1.75; color:var(--stone); max-width:42ch; }
.process-stage-art img{ display:block; width:100%; height:auto; max-width:470px; }
/* ---- progress bar (5 segments, one per stage — "stories" style: past
segments sit full, the current one fills over its dwell time, future
ones stay empty) + step buttons ---- */
.process-story-progress{ position:relative; z-index:1; margin-top:44px; }
.process-story-bar{ display:flex; gap:6px; }
.process-story-segment{ position:relative; flex:1; height:2px; background:var(--line-strong); overflow:hidden; }
.process-story-segment-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--brass); }
.process-story-steps{ display:flex; justify-content:space-between; margin-top:18px; }
.process-story-step{
display:flex; flex-direction:column; align-items:center; gap:8px;
opacity:0.55;
transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.process-story-step:hover{ opacity:0.8; }
.process-story:not(.js-ready) .process-story-step:first-child,
.process-story-step.active{ opacity:1; transform:translateY(-2px); }
.process-story-step .node-icon{ width:22px; height:22px; display:block; }
.process-story-step span{
font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--stone);
}
.process-story-step.active span{ color:var(--brass); }
@media (max-width:900px){
.process-stage-stack{ height:480px; }
.process-stage{ grid-template-columns:1fr; gap:20px; align-content:start; }
.process-stage-art{ order:-1; }
.process-stage-art img{ max-width:220px; margin:0 auto; }
.process-story-steps span{ display:none; }
}
/* ============================================================
SLIDE 05 — PREMIUM MOUSE PARALLAX
A quiet "creative desk" layer of low-opacity line-art objects
behind the heading/timeline, plus a soft cursor-follow light.
Movement itself is written by script.js (rAF + lerp easing for
translate3d); everything here only defines look, depth-layer
sizing/opacity and the idle floating loop that runs even when
the mouse never moves. Desktop (mouse) gets both idle float +
pointer parallax; touch devices keep idle float only — the
pointer-parallax listener is simply never attached on touch
(see script.js), so no extra CSS gating is needed here.
============================================================ */
.process-float-layer{
position:absolute; inset:0; z-index:0;
overflow:hidden; pointer-events:none;
}
.float-obj{
position:absolute;
color: var(--stone);
will-change: transform;
transform: translate3d(0,0,0);
}
.float-inner{ will-change: transform; }
.float-icon{ display:block; }
/* Layer 1 — foreground: largest, most opaque, moves the most (20px) */
.float-obj.layer-1{ opacity:0.16; }
.float-obj.layer-1 .float-icon{ width:58px; height:58px; }
/* Layer 2 — mid-ground (15px) */
.float-obj.layer-2{ opacity:0.13; color: var(--line-strong); }
.float-obj.layer-2 .float-icon{ width:50px; height:50px; }
/* Layer 3 — background-adjacent, smallest + faintest (10px) */
.float-obj.layer-3{ opacity:0.10; color: var(--brass); }
.float-obj.layer-3 .float-icon{ width:42px; height:42px; }
/* Gentle idle float — always running, independent of the mouse.
Three time-offset variants so objects don't bob in unison. */
@keyframes drift-a{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-4px,0);} }
@keyframes drift-b{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-3px,0);} }
@keyframes drift-c{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-2px,0);} }
.float-inner.float-a{ animation: drift-a 8s var(--ease-soft) infinite; }
.float-inner.float-b{ animation: drift-b 9.5s var(--ease-soft) infinite .8s; }
.float-inner.float-c{ animation: drift-c 7s var(--ease-soft) infinite 1.6s; }
/* Soft cursor-follow light reflection — desktop only (script.js adds
.active on first real mouse movement so it never flashes on load
or lingers on touch devices). Large, very low opacity, soft-light
blend so it reads as a reflection rather than a spotlight. */
.process-cursor-glow{
position:absolute; top:0; left:0; z-index:0;
width:560px; height:560px; margin:-280px 0 0 -280px;
border-radius:50%; pointer-events:none;
background: radial-gradient(circle, rgba(154,120,60,0.5) 0%, rgba(154,120,60,0) 70%);
mix-blend-mode: soft-light;
opacity:0;
transition: opacity .6s var(--ease-soft);
will-change: transform;
}
.process-cursor-glow.active{ opacity:0.55; }
@media (max-width:900px){
/* Keep the desk feeling without cluttering small screens — drop the
faintest layer and shrink the rest slightly; idle float continues. */
.float-obj.layer-3{ display:none; }
.float-obj.layer-1 .float-icon{ width:44px; height:44px; }
.float-obj.layer-2 .float-icon{ width:38px; height:38px; }
.process-cursor-glow{ display:none; }
}
/* ---- services page ---- */
/* Fixed, low-opacity backdrop video — added only on pages that include a
.page-fixed-bg video (currently just services.html). :has() detects it
automatically so no other page's background needs touching. It stays
truly fixed (doesn't scroll with the page) since every actual content
surface (cards, topbar, etc.) already paints its own opaque background
on top, so text never has to compete with it for contrast. */
body:has(.page-fixed-bg){ background:transparent; }
.page-fixed-bg{
position:fixed; inset:0; z-index:0;
width:100%; height:100%; object-fit:cover; object-position:center;
opacity:0.09; pointer-events:none;
}
.services-grid{
display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
gap:44px;
position:relative; z-index:1;
}
.service-card-full{
background:var(--bg); padding:56px 48px; display:flex; flex-direction:column;
border:1px solid var(--line-strong); border-radius:3px; overflow:hidden;
transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.service-card-full:hover{
border-color:var(--brass); transform:translateY(-4px); box-shadow: 0 18px 36px rgba(28,25,18,0.12);
}
.service-card-img{ position:relative; aspect-ratio:16/10; overflow:hidden; margin:-56px -48px 28px; }
/* These product photos have a title baked into the top of the shot (same
source images used on the homepage) — this crop is shorter/wider than
the one used there, so it needs to sit further down to clear that text. */
.service-card-img img{ width:100%; height:100%; object-fit:cover; object-position:center 88%; display:block; transition: transform .7s var(--ease-soft); }
.service-card-full:hover .service-card-img img{ transform:scale(1.06); }
.service-card-full h3{ font-size:clamp(26px,3vw,36px); line-height:1.05; margin-top:8px; }
.service-card-full .service-sub{ margin-top:12px; }
.service-card-full p{ margin-top:18px; font-size:15px; line-height:1.72; color:var(--ink-dim); max-width:44ch; }
.service-card-full ul{ margin:20px 0 24px; padding:0; list-style:none; display:grid; gap:8px; }
.service-card-full li{ font-size:13px; color:var(--stone); padding-left:16px; position:relative; }
.service-card-full li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:1px; background:var(--brass); }
/* Pushed to the bottom of the card's own flex box — always the same
position relative to the card, regardless of how long the paragraph
or list above it is, instead of just trailing wherever the content ends.
(The real breathing room above it comes from the list's own
margin-bottom above — padding-top on the button itself doesn't create
any visible gap, since padding only affects the button's own box.) */
.service-card-full > .btn-primary{ margin-top:auto; align-self:flex-start; }
/* ---- contact page ----
Unlike about/services (several stacked .content-section blocks meant
to scroll through normally), contact.html has just this one — so it
reads better vertically centered in the leftover space below the hero
instead of sitting flush at the top with empty room underneath. Scoped
via :has() to this page's specific grid so about/services (which
reuse the same .page-main/.content-section classes) are untouched. */
.page-main:has(.contact-page-grid){
min-height:100vh; box-sizing:border-box;
display:flex; flex-direction:column;
}
.content-section:has(.contact-page-grid){
flex:1; display:flex; flex-direction:column; justify-content:center;
}
/* align-items:stretch (not the grid default "start") so both columns
share the same height — the map then flex-grows to fill the right
column, landing its bottom edge level with the form's. */
.contact-page-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:stretch; }
.contact-form-block{
background: var(--surface); border:1px solid var(--line-strong); border-radius:3px; padding:40px;
}
.contact-form-block h3{ font-size:22px; }
.contact-form-block > p{ color:var(--stone); font-size:14px; margin-top:8px; line-height:1.6; }
.contact-side{ display:flex; flex-direction:column; gap:26px; }
.contact-side .contact-details{ border-left:1px solid var(--line); padding-left:28px; }
/* ---- footer ---- */
.site-footer{
border-top:1px solid var(--line); padding:44px 80px; max-width:1180px; margin:0 auto;
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;
}
.site-footer .logo{ opacity:0.9; }
.footer-links{ display:flex; gap:26px; }
.footer-links a{
font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--stone); transition:color .3s;
}
.footer-links a:hover{ color:var(--brass); }
.footer-meta{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--stone); }
/* ============================== RESPONSIVE ============================== */
/* Tablet + phone (shared). A single vh-based breakpoint used to let
tall panel content collide with the floating topbar and get clipped
on short mobile viewports (overflow:hidden, no way to scroll to it) —
panels now top-align, clear the topbar deliberately, and can scroll
internally as a safety net if content still runs long. */
@media (max-width: 900px){
.panel{
padding: 0 28px;
align-items:flex-start;
padding-top:112px;
padding-bottom:40px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.panel[data-panel="contact"]{ padding-top:112px; padding-bottom:28px; }
.panel-welcome{ padding-bottom:88px; }
.overview-grid, .service-panel .panel-inner, .contact-grid{ grid-template-columns:1fr; gap:34px; }
.swatch-card{ display:none; }
.chip-nav{ display:none; }
.contact-details{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
.mini-enquire{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
.welcome-meta{ flex-wrap:wrap; gap:28px 40px; }
.nav-btn{ left:auto; right:28px; }
#prevBtn{ bottom:96px; } #nextBtn{ bottom:36px; }
.logo-word{ display:none; }
.page-main{ padding-top:100px; }
.page-hero, .content-section, .site-footer{ padding-left:28px; padding-right:28px; }
.about-grid, .contact-page-grid{ grid-template-columns:1fr; gap:34px; }
/* The map's flex:1 relies on the desktop grid row stretching .contact-side
to match the form's height — once the columns stack here there's no
such row to grow into, so give it a fixed height instead. */
.contact-map{ flex:none; aspect-ratio:4/3; }
.stat-row{ gap:32px 40px; }
.site-footer{ flex-direction:column; align-items:flex-start; }
/* Process story: the pinned/scrubbed treatment is desktop-only (see
the min-width:901px rules further up + the JS width gate), so this
just sizes the plain stacked-stage fallback for touch screens. */
.process-stage{ grid-template-columns:1fr; gap:20px; padding-block:24px; }
.process-stage-art{ order:-1; }
.process-stage-art img{ max-width:220px; margin:0 auto; }
.process-story-steps span{ display:none; }
/* Tablet: two columns read better than a long single column here —
only phones (below) collapse these all the way to one. */
.process-list, .services-grid, .service-group-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Phone only. Tablets keep the roomier tablet-tier spacing above;
phones get smaller chrome, single-column grids, and tighter gaps
so the tallest panel (Contact: heading + form + details stacked)
fits within a short viewport instead of relying on scroll. */
@media (max-width: 600px){
.intro-label{ padding:0 24px; }
.panel{ padding-left:20px; padding-right:20px; padding-top:92px; padding-bottom:28px; }
.panel[data-panel="contact"]{ padding-top:92px; padding-bottom:20px; }
.panel-welcome{ padding-bottom:76px; }
.scroll-cue{ left:20px; }
.contact-grid{ gap:22px; }
.contact-side{ gap:16px; }
.topbar{ padding:16px 16px; }
.logo-mark{ height:36px; }
.menu-toggle{ width:30px; height:30px; }
.process-list, .services-grid, .service-group-grid{ grid-template-columns:1fr; }
.overview-grid h2, .contact-grid h2, .page-hero h1, .content-section h2{ max-width:none; }
.page-hero{ padding:20px 20px 40px; }
.content-section{ padding:44px 20px; }
.service-card-full{ padding:32px 22px; }
.services-grid{ gap:28px; }
.contact-form-block{ padding:26px 20px; }
.modal{ padding:16px; }
.modal-inner{ padding:28px 22px; }
.site-footer{ padding:32px 20px; }
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}