:root { --ink:#252c34; --deep:#161d25; --paper:#f7f5f1; --accent:#f5741b; --accent-dark:#c94e0b; --muted:#66707a; --line:rgba(37,44,52,.16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.site-header { position:absolute; inset:0 0 auto; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:98px; padding:0 5vw; border-bottom:1px solid rgba(255,255,255,.25); color:#fff; } .logo-link { display:block; width:178px; padding:6px 8px; border-radius:3px; background:#fff; } .logo-link img { display:block; width:100%; height:auto; } nav { display:flex; gap:34px; font-size:13px; font-weight:700; } nav a { opacity:.86; } nav a:hover { opacity:1; } .header-cta { justify-self:end; display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; }
.hero { position:relative; min-height:800px; height:96vh; max-height:980px; overflow:hidden; color:#fff; background:var(--deep); } .hero-image { position:absolute; inset:0; background:url("assets/nsp-shopfitting-hero.png") center/cover no-repeat; filter:saturate(.68) contrast(1.08); } .hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,19,26,.98),rgba(13,19,26,.84) 36%,rgba(13,19,26,.16) 71%,rgba(13,19,26,.38)),linear-gradient(0deg,rgba(13,19,26,.8),transparent 46%); } .hero-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000,transparent 64%); } .hero-content { position:absolute; z-index:1; top:50%; left:7vw; max-width:760px; transform:translateY(-42%); } .hero-logo { display:block; width:210px; max-width:48vw; margin:0 0 32px; padding:6px 9px; background:#fff; } .eyebrow,.kicker { margin:0 0 23px; text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:800; } .eyebrow { display:flex; gap:12px; align-items:center; color:rgba(255,255,255,.72); } .eyebrow span { width:28px; height:2px; background:var(--accent); } h1,h2 { margin:0; letter-spacing:-.055em; font-family:Georgia,"Times New Roman",serif; font-weight:400; } .hero h1 { font-size:clamp(70px,7.4vw,118px); line-height:.88; } h1 em,h2 em { color:var(--accent); font-style:normal; } .hero-intro { max-width:570px; margin:34px 0 0; color:rgba(255,255,255,.76); font-size:18px; line-height:1.65; } .hero-actions { display:flex; align-items:center; gap:28px; margin-top:40px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; padding:0 22px; font-size:13px; font-weight:800; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button-light { color:var(--deep); background:#fff; } .button-accent { color:#fff; background:var(--accent); } .text-link { display:inline-flex; align-items:center; gap:5px; padding-bottom:5px; border-bottom:1px solid; font-size:13px; font-weight:700; } .light { color:#fff; } .hero-proof { position:absolute; z-index:2; right:0; bottom:0; display:flex; background:rgba(22,29,37,.92); backdrop-filter:blur(12px); } .hero-proof div { display:flex; align-items:center; gap:13px; min-width:180px; height:128px; padding:22px 28px; border-left:1px solid rgba(255,255,255,.16); } .hero-proof strong { color:var(--accent); font-family:Georgia,serif; font-size:34px; font-weight:400; } .hero-proof span { color:rgba(255,255,255,.58); text-transform:uppercase; letter-spacing:.12em; font-size:9px; line-height:1.5; } .image-note { position:absolute; z-index:2; right:25px; bottom:145px; margin:0; color:rgba(255,255,255,.62); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.intro-band { display:grid; grid-template-columns:1.4fr .5fr 1fr; align-items:center; gap:40px; min-height:180px; padding:45px 7vw; color:#fff; background:var(--accent); } .intro-band p { max-width:670px; margin:0; letter-spacing:-.03em; font-family:Georgia,serif; font-size:clamp(26px,2.4vw,40px); line-height:1.15; } .intro-band .intro-side { max-width:370px; letter-spacing:0; font-family:Arial,sans-serif; font-size:13px; line-height:1.7; } .intro-rule { height:1px; background:rgba(255,255,255,.5); }
.section { padding:130px 7vw; } .services { display:grid; grid-template-columns:.85fr 1.45fr; gap:8vw; } .section-heading { position:sticky; top:50px; align-self:start; } .kicker { color:var(--muted); } .kicker-light { color:rgba(255,255,255,.65); } .section-heading h2,.about h2,.process-heading h2,.contact h2 { font-size:clamp(48px,5vw,78px); line-height:.96; } .section-heading > p:last-child { max-width:470px; margin:34px 0 0; color:var(--muted); font-size:15px; line-height:1.8; } .service-list { border-top:1px solid var(--line); } .service-row { display:grid; grid-template-columns:44px 60px .7fr 1fr; align-items:center; gap:22px; min-height:170px; border-bottom:1px solid var(--line); } .service-number { align-self:start; margin-top:35px; color:#8a9299; font-size:10px; } .service-icon { display:grid; width:50px; height:50px; place-items:center; border:1px solid rgba(245,116,27,.46); border-radius:50%; color:var(--accent); font-size:23px; } .service-row h3 { margin:0; letter-spacing:-.02em; font-size:21px; } .service-row p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.work-section { padding:130px 7vw; color:#fff; background:var(--deep); } .work-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:60px; } .work-heading h2 { font-size:clamp(48px,5vw,76px); } .work-heading > p { max-width:430px; margin:0 0 8px; color:rgba(255,255,255,.58); font-size:14px; line-height:1.7; } .projects { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; } .project-card { min-width:0; border:1px solid rgba(255,255,255,.14); background:#202936; } .project-art { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; height:370px; overflow:hidden; color:rgba(255,255,255,.75); } .project-art::before { position:absolute; inset:10%; border:1px solid rgba(255,255,255,.26); content:""; transform:perspective(500px) rotateX(55deg); } .project-art span:last-child { letter-spacing:.25em; font-size:11px; font-weight:900; } .project-icon { color:var(--accent); font-size:68px; } .art-one { background:radial-gradient(circle at 60% 35%,#4c5967,#202936 48%,#161d25); } .art-two { background:radial-gradient(circle at 65% 30%,#6a5a4c,#2e3036 45%,#161d25); } .project-copy { padding:34px; } .project-copy > div:first-child { margin-bottom:24px; } .project-copy p { margin:0; color:rgba(255,255,255,.58); font-size:13px; line-height:1.7; } .project-copy > div p { margin-bottom:9px; font-size:9px; letter-spacing:.13em; text-transform:uppercase; } .project-copy h3 { margin:0 0 8px; letter-spacing:-.03em; font-family:Georgia,serif; font-size:33px; font-weight:400; } .project-copy span { color:var(--accent); font-size:11px; } .project-copy a { display:inline-flex; margin-top:23px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.35); font-size:11px; font-weight:700; }
.about { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:10vw; } .about-logo { width:225px; margin-top:42px; border:1px solid var(--line); } .about-copy { padding-top:40px; } .about-copy p { color:var(--muted); font-size:14px; line-height:1.8; } .about-copy .lead { margin-top:0; color:var(--ink); letter-spacing:-.02em; font-family:Georgia,serif; font-size:26px; line-height:1.45; } .about-copy ul { margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--line); list-style:none; } .about-copy li { padding:13px 0; color:var(--ink); font-size:13px; font-weight:700; } .about-copy li::first-letter { color:var(--accent); }
.process-section { padding:120px 7vw; background:#e7e8e8; } .process-heading { margin-bottom:60px; } .process-heading h2 { max-width:760px; } .process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .process-grid article { position:relative; min-height:255px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .process-grid article > span { position:absolute; top:28px; right:28px; color:#7c838a; font-size:10px; } .process-grid b { display:block; margin:34px 0 42px; color:var(--accent); font-size:26px; } .process-grid h3 { margin:0 0 13px; font-size:18px; } .process-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.contact { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:650px; padding:100px 7vw; overflow:hidden; color:#fff; text-align:center; background:#1b222c; } .contact-lines { position:absolute; width:580px; height:580px; border:1px solid rgba(245,116,27,.28); border-radius:50%; } .contact-lines::before,.contact-lines::after { position:absolute; border:1px solid rgba(245,116,27,.18); border-radius:50%; content:""; } .contact-lines::before { inset:60px; } .contact-lines::after { inset:130px; } .contact > :not(.contact-lines) { position:relative; z-index:1; } .contact-logo { width:180px; margin-bottom:30px; background:#fff; } .contact h2 { font-size:clamp(58px,6vw,94px); } .contact > p:not(.kicker) { max-width:560px; margin:28px auto 34px; color:rgba(255,255,255,.6); font-size:14px; line-height:1.7; } footer { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; min-height:130px; padding:28px 5vw; color:#fff; background:#10161d; } .footer-logo { display:block; width:172px; padding:5px 7px; background:#fff; } .footer-logo img { display:block; width:100%; } footer p { margin:0; color:rgba(255,255,255,.6); text-align:center; font-size:10px; } footer p:last-child { text-align:right; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; height:84px; } nav { display:none; } .hero { min-height:760px; height:92vh; } .hero-content { top:47%; left:6vw; right:6vw; } .hero h1 { font-size:clamp(58px,12vw,92px); } .hero-intro { font-size:16px; } .hero-proof { right:0; left:0; } .hero-proof div { flex:1; min-width:0; height:105px; padding:18px; } .hero-proof strong { font-size:28px; } .image-note { bottom:117px; } .intro-band,.services,.about { grid-template-columns:1fr; } .intro-band { gap:22px; } .section-heading { position:static; } .projects { grid-template-columns:1fr; } .process-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .site-header { padding:0 20px; } .logo-link { width:132px; } .header-cta { padding:10px 12px; border:1px solid rgba(255,255,255,.8); font-size:11px; } .hero { min-height:800px; } .hero-content { top:44%; left:24px; right:24px; } .hero-logo { width:160px; margin-bottom:25px; } .eyebrow { font-size:9px; letter-spacing:.14em; } .hero h1 { font-size:58px; } .hero-intro { margin-top:25px; font-size:15px; line-height:1.55; } .hero-actions { flex-direction:column; align-items:flex-start; gap:20px; margin-top:28px; } .hero-proof div { gap:8px; padding:13px 10px; } .hero-proof div:last-child { display:none; } .hero-proof span { font-size:8px; } .image-note { right:14px; bottom:116px; font-size:7px; } .intro-band { padding:40px 24px; } .intro-band p { font-size:27px; } .section,.work-section,.process-section { padding:85px 24px; } .section-heading h2,.about h2,.process-heading h2 { font-size:48px; } .service-row { grid-template-columns:36px 1fr; gap:10px 16px; min-height:auto; padding:24px 0; } .service-number { grid-row:1 / 3; margin-top:4px; } .service-icon { display:none; } .service-row h3 { font-size:20px; } .service-row p { font-size:12px; } .work-heading { display:block; } .work-heading > p { margin-top:22px; } .project-art { height:270px; } .project-copy { padding:26px; } .about { gap:35px; } .about-copy { padding-top:0; } .about-copy .lead { font-size:22px; } .about-logo { width:180px; margin-top:30px; } .process-grid { grid-template-columns:1fr; } .process-grid article { min-height:220px; } .contact { min-height:570px; padding:80px 24px; } .contact h2 { font-size:55px; } .contact-lines { width:420px; height:420px; } footer { grid-template-columns:1fr; justify-items:center; padding:42px 24px; } footer p,footer p:last-child { text-align:center; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }

.project-cover { display:flex; cursor:pointer; background:#10161d; }
.project-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.project-cover::after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(16,22,29,.75),transparent 55%); }
.project-cover:hover img { transform:scale(1.04); filter:brightness(.82); }
.project-cover span { z-index:1; align-self:flex-end; margin:0 0 28px 30px; color:#fff; letter-spacing:.14em; font-size:10px; font-weight:800; }
.project-copy .case-study-link { display:flex; width:max-content; color:var(--accent); border-color:rgba(245,116,27,.5); }

/* Project labels and the matching before/after carousels. */
.project-cover { isolation:isolate; } .project-cover > img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6) saturate(.8); transition:transform .45s ease,filter .45s ease; } .project-cover::before { display:none; } .project-cover::after { z-index:0; } .project-cover span { z-index:1; } .project-cover:hover > img { transform:scale(1.04); filter:brightness(.7) saturate(.92); }
.project-cover .project-category { position:absolute; top:15px; left:15px; margin:0; padding:7px 9px; color:#fff; background:var(--accent); letter-spacing:.12em; text-transform:uppercase; font-size:8px; line-height:1; font-weight:800; }
.construction-heading { margin:94px 0 30px; padding-top:38px; border-top:1px solid rgba(255,255,255,.18); } .construction-heading .kicker { margin-bottom:12px; } .construction-heading h3 { margin:0; font-family:Georgia,serif; font-size:clamp(30px,3vw,46px); font-weight:400; letter-spacing:-.035em; }
.construction-projects .project-card { flex-basis:min(560px,48vw); }
.projects-scroll-hint { margin:2px 0 0; color:rgba(255,255,255,.58); letter-spacing:.14em; text-align:center; text-transform:uppercase; font-size:9px; font-weight:800; }
.contact-phone { position:relative; z-index:1; margin-top:18px; color:rgba(255,255,255,.76); border-bottom:1px solid rgba(255,255,255,.36); padding-bottom:4px; letter-spacing:.08em; font-size:12px; font-weight:800; }
@media (max-width:900px) { .construction-projects .project-card { flex-basis:78vw; } }

/* Gun Hill gallery: identical before/after image cards. */
.after-grid { grid-template-columns:repeat(4,1fr); grid-template-rows:none; }
.after-grid figure,.after-grid figure:first-child,.after-grid figure:nth-child(4) { aspect-ratio:3 / 4; grid-column:auto; grid-row:auto; }
@media (max-width:900px) { .after-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; } }
@media (max-width:620px) { .after-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; } .after-grid figure,.after-grid figure:first-child,.after-grid figure:nth-child(4),.after-grid figure:last-child { aspect-ratio:3 / 4; grid-column:auto; grid-row:auto; } }

/* Keep the Edwinstowe and Best One galleries as equal tiles at every width. */
.edwinstowe-page .after-grid { grid-template-columns:repeat(3,1fr) !important; grid-template-rows:none !important; }
.best-one-page .after-grid { grid-template-columns:repeat(4,1fr) !important; grid-template-rows:none !important; }
.edwinstowe-page .before-grid figure,.edwinstowe-page .after-grid figure,.edwinstowe-page .after-grid figure:first-child,.edwinstowe-page .after-grid figure:nth-child(4),.edwinstowe-page .after-grid figure:last-child,.best-one-page .before-grid figure,.best-one-page .after-grid figure,.best-one-page .after-grid figure:first-child,.best-one-page .after-grid figure:nth-child(4),.best-one-page .after-grid figure:last-child { aspect-ratio:1 / 1 !important; grid-column:auto !important; grid-row:auto !important; }
@media (max-width:900px) { .edwinstowe-page .before-grid,.edwinstowe-page .after-grid,.best-one-page .before-grid,.best-one-page .after-grid { grid-template-columns:repeat(2,1fr) !important; grid-template-rows:none !important; } }

/* Keep these project galleries as even image tiles at every screen size. */
.edwinstowe-page .after-grid { grid-template-columns:repeat(3,1fr); grid-template-rows:none; }
.best-one-page .after-grid { grid-template-columns:repeat(4,1fr); grid-template-rows:none; }
.edwinstowe-page .before-grid figure,.edwinstowe-page .after-grid figure,.edwinstowe-page .after-grid figure:first-child,.edwinstowe-page .after-grid figure:nth-child(4),.edwinstowe-page .after-grid figure:last-child,.best-one-page .before-grid figure,.best-one-page .after-grid figure,.best-one-page .after-grid figure:first-child,.best-one-page .after-grid figure:nth-child(4),.best-one-page .after-grid figure:last-child { aspect-ratio:1 / 1; grid-column:auto; grid-row:auto; }
@media (max-width:900px) { .edwinstowe-page .before-grid,.edwinstowe-page .after-grid,.best-one-page .before-grid,.best-one-page .after-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; } }

.jays-page .before-grid,.jays-page .after-grid { grid-template-columns:repeat(3,1fr); }
.jays-page .before-grid figure,.jays-page .after-grid figure { aspect-ratio:3 / 4; }
@media (max-width:620px) { .jays-page .before-grid,.jays-page .after-grid { grid-template-columns:repeat(2,1fr); } .jays-page .before-grid figure:first-child,.jays-page .after-grid figure:first-child { grid-column:span 2; } }

/* Selected work: scroll across on any device, expand the project in focus on desktop. */
.projects { display:flex; gap:18px; overflow-x:auto; padding:0 0 18px; scroll-snap-type:x mandatory; scrollbar-color:var(--accent) rgba(255,255,255,.12); }
.projects .project-card { display:block; flex:0 0 clamp(280px,27vw,410px); scroll-snap-align:start; transition:flex-basis .35s ease; }
.projects .project-card:first-child { flex-basis:min(560px,48vw); }
@media (hover:hover) and (min-width:901px) { .projects:has(.project-card:hover) .project-card { flex-basis:clamp(280px,27vw,410px); } .projects:has(.project-card:hover) .project-card:hover { flex-basis:min(560px,48vw); } }
@media (max-width:900px) { .projects .project-card,.projects .project-card:first-child { flex-basis:78vw; } }

.edwinstowe-page .before-grid,.edwinstowe-page .after-grid { grid-template-columns:repeat(3,1fr); }
.edwinstowe-page .before-grid figure,.edwinstowe-page .after-grid figure { aspect-ratio:1 / 1; }
@media (max-width:620px) { .edwinstowe-page .before-grid,.edwinstowe-page .after-grid { grid-template-columns:repeat(2,1fr); } }

.best-one-page .before-grid,.best-one-page .after-grid { grid-template-columns:repeat(4,1fr); }
.best-one-page .before-grid figure,.best-one-page .after-grid figure { aspect-ratio:1 / 1; }
@media (max-width:620px) { .best-one-page .before-grid,.best-one-page .after-grid { grid-template-columns:repeat(2,1fr); } }

.case-page { background:#f7f5f1; }
.case-header { display:flex; align-items:center; justify-content:space-between; min-height:92px; padding:16px 5vw; background:#fff; }
.case-logo { display:block; width:178px; } .case-logo img { display:block; width:100%; }
.back-link { color:var(--ink); border-bottom:1px solid rgba(37,44,52,.3); padding-bottom:4px; font-size:12px; font-weight:700; }
.case-hero { position:relative; min-height:650px; height:74vh; overflow:hidden; color:#fff; background:var(--deep); }
.case-hero > img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(.8) contrast(1.05); }
.case-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,22,29,.84),rgba(16,22,29,.22) 72%),linear-gradient(0deg,rgba(16,22,29,.56),transparent 54%); }
.case-hero-copy { position:absolute; left:7vw; bottom:12%; z-index:1; } .case-hero-copy h1 { font-size:clamp(72px,9vw,140px); line-height:.83; } .case-hero-copy > p:last-child { margin:24px 0 0; color:rgba(255,255,255,.72); letter-spacing:.14em; text-transform:uppercase; font-size:10px; font-weight:800; }
.case-intro { display:grid; grid-template-columns:1fr 1fr; gap:10vw; padding:130px 7vw; } .case-intro h2,.gallery-heading h2 { font-size:clamp(48px,5vw,76px); line-height:.96; } .case-intro-copy { padding-top:36px; } .case-intro-copy p { color:var(--muted); font-size:14px; line-height:1.82; } .case-intro-copy .lead { color:var(--ink); margin-top:0; letter-spacing:-.02em; font-family:Georgia,serif; font-size:26px; line-height:1.45; } .case-intro-copy .button { margin-top:22px; }
.gallery-section { padding:0 7vw 130px; } .gallery-heading { max-width:740px; margin-bottom:70px; } .gallery-heading > p:last-child { max-width:530px; margin:30px 0 0; color:var(--muted); font-size:14px; line-height:1.8; } .gallery-block { padding:52px 0; border-top:1px solid var(--line); } .gallery-label { display:flex; align-items:baseline; gap:25px; margin-bottom:34px; } .gallery-label > span { color:var(--accent); font-size:11px; font-weight:800; } .gallery-label p { margin:0 0 7px; color:var(--muted); letter-spacing:.18em; text-transform:uppercase; font-size:10px; font-weight:800; } .gallery-label h3 { margin:0; letter-spacing:-.025em; font-family:Georgia,serif; font-size:31px; font-weight:400; } .photo-grid { display:grid; gap:16px; } .photo-grid figure { margin:0; overflow:hidden; background:#d9dbdc; } .photo-grid img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .photo-grid figure:hover img { transform:scale(1.025); } .before-grid { grid-template-columns:repeat(4,1fr); } .before-grid figure { aspect-ratio:3 / 4; } .after-gallery { margin-top:38px; } .after-grid { grid-template-columns:1.25fr .75fr .75fr; grid-template-rows:310px 310px; } .after-grid figure:first-child { grid-row:span 2; } .after-grid figure:nth-child(4) { grid-column:span 2; }
.case-summary { display:flex; align-items:end; justify-content:space-between; gap:70px; padding:80px 7vw; color:#fff; background:var(--deep); } .case-summary > p { max-width:730px; margin:0; letter-spacing:-.035em; font-family:Georgia,serif; font-size:clamp(28px,3vw,44px); line-height:1.18; } .summary-points { display:flex; flex-direction:column; min-width:190px; gap:12px; color:rgba(255,255,255,.7); font-size:11px; font-weight:700; } .summary-points span::before { margin-right:10px; color:var(--accent); content:"/"; }
.review-section { position:relative; max-width:980px; margin:auto; padding:130px 7vw; text-align:center; } .review-mark { margin-bottom:-18px; color:rgba(245,116,27,.2); font-family:Georgia,serif; font-size:160px; line-height:1; } .review-section .kicker { color:var(--accent-dark); } .review-section blockquote { margin:0; letter-spacing:-.035em; font-family:Georgia,serif; font-size:clamp(29px,3.5vw,47px); line-height:1.2; } .review-name { margin:30px 0 0; color:var(--ink); font-size:13px; font-weight:800; } .review-name span { color:var(--muted); font-weight:400; } .review-note { margin:24px 0 0; color:#8a9299; font-size:10px; font-style:italic; }
.case-cta { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:550px; padding:80px 7vw; color:#fff; text-align:center; background:#202936; } .case-cta img { width:185px; margin-bottom:28px; background:#fff; } .case-cta h2 { font-size:clamp(52px,6vw,88px); line-height:.92; } .case-cta .button { margin-top:34px; }
@media (max-width:900px) { .case-intro { grid-template-columns:1fr; gap:35px; } .case-intro-copy { padding-top:0; } .before-grid { grid-template-columns:repeat(2,1fr); } .after-grid { grid-template-columns:1fr 1fr; grid-template-rows:340px 260px 260px; } .after-grid figure:first-child { grid-row:span 2; } .after-grid figure:nth-child(4) { grid-column:auto; } .after-grid figure:last-child { grid-column:span 2; } .case-summary { align-items:start; flex-direction:column; } }
@media (max-width:620px) { .case-header { min-height:76px; padding:13px 20px; } .case-logo { width:132px; } .back-link { font-size:10px; } .case-hero { min-height:540px; height:72vh; } .case-hero-copy { right:24px; left:24px; bottom:11%; } .case-hero-copy h1 { font-size:68px; } .case-intro { padding:85px 24px; } .case-intro h2,.gallery-heading h2 { font-size:47px; } .case-intro-copy .lead { font-size:22px; } .gallery-section { padding:0 24px 85px; } .gallery-heading { margin-bottom:46px; } .gallery-block { padding:40px 0; } .gallery-label h3 { font-size:26px; } .before-grid { gap:10px; } .after-grid { grid-template-columns:1fr; grid-template-rows:auto; gap:10px; } .after-grid figure,.after-grid figure:first-child,.after-grid figure:nth-child(4),.after-grid figure:last-child { aspect-ratio:3 / 4; grid-column:auto; grid-row:auto; } .case-summary { padding:65px 24px; gap:35px; } .review-section { padding:85px 24px; } .review-mark { font-size:120px; } .case-cta { min-height:480px; padding:70px 24px; } }

/* Gun Hill gallery: four matching portrait cards after the completed fit-out. */
.after-grid { grid-template-columns:repeat(4,1fr); grid-template-rows:none; }
.after-grid figure,.after-grid figure:first-child,.after-grid figure:nth-child(4) { aspect-ratio:3 / 4; grid-column:auto; grid-row:auto; }
@media (max-width:900px) { .after-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; } }
@media (max-width:620px) { .after-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:none; } .after-grid figure,.after-grid figure:first-child,.after-grid figure:nth-child(4),.after-grid figure:last-child { aspect-ratio:3 / 4; grid-column:auto; grid-row:auto; } }