@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
:root { --ink:#252522; --text:#1d1d1b; --paper:#fff; --cyan:#159bd2; --line:#d9dfe2; --pad:clamp(1.25rem,7.1vw,6rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; background:var(--paper); color:var(--text); font-family:'Open Sans',Arial,sans-serif; line-height:1.55; }
img { display:block; max-width:100%; }
a { color:inherit; }
button { font:inherit; }
[hidden] { display:none !important; }
.skip-link { position:fixed; z-index:40; top:.5rem; left:.5rem; background:#111; color:#fff; padding:.75rem 1rem; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:30; min-height:5rem; padding:.7rem var(--pad); display:flex; align-items:center; justify-content:space-between; gap:2rem; background:var(--ink); color:#fff; box-shadow:0 6px 20px #0002; }
.brand { flex:none; display:block; width:8.1rem; }
.brand img { width:100%; max-height:3.7rem; object-fit:contain; object-position:left center; }
.site-header nav { display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem); }
.site-header nav a { font-size:.86rem; text-decoration:none; white-space:nowrap; }
.site-header nav a:hover,.site-header nav a:focus-visible { color:#62c3ed; }
.clients-menu { display:flex; align-items:center; gap:.7rem; }
.clients-menu details { position:relative; }
.clients-menu summary { cursor:pointer; list-style:none; font-size:.86rem; white-space:nowrap; }
.clients-menu summary::-webkit-details-marker { display:none; }
.clients-menu summary span { color:#62c3ed; margin-left:.15rem; }
.clients-menu summary:hover,.clients-menu summary:focus-visible { color:#62c3ed; }
.category-menu { position:absolute; z-index:10; top:calc(100% + 1rem); right:0; width:11rem; padding:.45rem; background:var(--ink); border:1px solid #5b5b59; box-shadow:0 12px 28px #0004; }
.category-menu a { display:block; padding:.55rem .65rem; }
.category-menu a[aria-current="page"] { color:#62c3ed; }
.site-header nav .contact-link { padding:.75rem 1rem; border:1px solid var(--cyan); }
.contact-link span { padding-left:.5rem; }
.index-main,.gallery-main { max-width:1500px; margin:auto; padding:clamp(4rem,8vw,7rem) var(--pad) clamp(5rem,9vw,8rem); }
.index-main { min-height:calc(100svh - 10rem); }
.eyebrow { margin:0 0 clamp(2.5rem,6vw,5rem); color:#0c82b6; font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; }
h1 { margin:0 0 clamp(2.5rem,6vw,5rem); font-size:clamp(4.5rem,9.4vw,8.4rem); font-weight:300; line-height:1.02; letter-spacing:-.065em; }
h1 em { color:var(--cyan); font-style:normal; }
.category-status { margin:-1.5rem 0 1.5rem; color:#0c82b6; font-size:1rem; font-weight:600; }
.client-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; }
.client-card { aspect-ratio:1; min-width:0; display:grid; place-items:center; padding:.7rem; border:1px solid var(--line); background:#fff; transition:border-color .2s ease,box-shadow .2s ease; }
.client-card[href]:hover,.client-card[href]:focus-visible { border-color:var(--cyan); box-shadow:0 8px 28px rgba(19,148,204,.09); }
.client-card[href]:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.client-card img { width:100%; height:100%; object-fit:contain; }
.gtd-card img { width:80%; height:80%; }
.client-card-placeholder,.artwork-placeholder { border:1px dashed var(--line); background:#f7f9fa; }
footer { min-height:7rem; display:flex; align-items:center; justify-content:flex-end; gap:1rem; padding:1.5rem var(--pad); background:var(--ink); color:#fff; font-size:.85rem; text-align:right; }
.gallery-main .eyebrow { margin-bottom:2rem; }
.gallery-head { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4rem); min-height:10rem; }
.gallery-head img { max-width:min(34rem,60vw); max-height:9rem; object-fit:contain; object-position:left center; }
.gallery-head .charity-logo { max-height:9rem; }
.gallery-links { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.back-link { flex:none; color:#007cad; font-size:.85rem; font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.35rem; }
.back-link:hover,.back-link:focus-visible { color:#1d1d1b; }
.tile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem; }
.artwork-placeholder { aspect-ratio:1; }
.artwork { border:1px solid var(--line); padding:0; margin:0; background:#f7f9fa; cursor:zoom-in; min-height:0; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; }
.artwork img { width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.artwork[href] { cursor:pointer; }
.artwork:hover img,.artwork:focus-visible img { transform:scale(1.035); }
.artwork:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.artwork.wide { grid-column:auto; aspect-ratio:1; }
.artwork.on-blue { background:#00a7db; }
.artwork.on-cyan { background:#dbf2f6; }
.artwork.on-yellow { background:#ffdb18; }
.artwork.padded img { padding:1rem; }
.lightbox { width:min(96vw,1200px); height:94vh; max-height:94vh; border:0; padding:3.5rem 1rem 1rem; background:#171717; color:#fff; }
.lightbox::backdrop { background:rgba(0,0,0,.88); }
.lightbox img { width:100%; height:100%; object-fit:contain; }
.lightbox-close { position:absolute; top:.7rem; right:1rem; border:0; padding:.35rem; background:transparent; color:#fff; cursor:pointer; font-weight:700; }
@media(max-width:1100px) { .client-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { html { scroll-padding-top:5.5rem; } .site-header { min-height:4.5rem; } .brand { width:6.8rem; } .site-header nav { gap:1rem; } .site-header nav a,.clients-menu summary { font-size:.78rem; } .site-header nav > a:first-child,.site-header nav .contact-link { display:none; } .client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .tile-grid { grid-template-columns:1fr; } .gallery-head { align-items:flex-start; flex-direction:column-reverse; } .gallery-head img { max-width:85vw; max-height:7rem; } .artwork,.artwork.wide { grid-column:auto; aspect-ratio:1; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }