/* Graphics4us theme — layered over the Miniport grid (main.css) */
:root{
	--ink:#15131f; --muted:#555268; --paper:#f2f3f7; --white:#fff;
	--blue:#2a3bd6; --pink:#ff5a7a; --yellow:#ffcf33;
}
html{ scroll-behavior:smooth; scroll-padding-top:4rem; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body, input, textarea, select{
	font-family:'Hanken Grotesk', system-ui, sans-serif;
	font-weight:400; font-size:17px; line-height:1.6; color:var(--muted);
}
a{ color:var(--blue); text-decoration:underline; text-underline-offset:.2em; }
a:hover{ color:var(--pink) !important; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
b, strong{ color:var(--ink); font-weight:600; }

h1,h2,h3{ font-family:'Bricolage Grotesque', 'Hanken Grotesk', sans-serif; color:var(--ink); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:800; margin-bottom:.5em; }
h2{ font-size:clamp(2rem, 4vw, 3rem); margin-bottom:.4em; }
h3{ font-size:1.4rem; letter-spacing:-.02em; margin-bottom:.35em; }

/* Sections: left-aligned, flat colour, no gradients */
.wrapper{ background:none; box-shadow:none; text-shadow:none !important; text-align:left; padding:7rem 0; }
.wrapper header p{ font-size:1.2rem; max-width:34em; margin-bottom:3rem; }
.wrapper footer{ margin-top:4rem; }
.wrapper footer p{ color:var(--ink); font-weight:600; margin-bottom:1rem; }
.wrapper.style1{ background:var(--paper); }
.wrapper.style2{ background:var(--white); }
.wrapper.style3{ background:var(--paper); }
.wrapper.style4{ background:var(--ink); color:#b9b6c9; }
.wrapper.style4 h2{ color:#fff; }
.wrapper.style4 a{ color:var(--yellow); }

/* Nav */
#nav{ background:var(--white); box-shadow:0 1px 0 rgba(21,19,31,.12); height:3.5rem; line-height:3.5rem; text-align:left; }
#nav .container{ display:flex; align-items:center; justify-content:space-between; height:100%; }
#nav .wordmark{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.3rem; letter-spacing:-.03em; color:var(--ink); text-decoration:none; }
#nav ul{ display:flex; gap:.25rem; margin:0; }
#nav ul a{ display:block; height:2.25rem; line-height:2.25rem; padding:0 1rem; border-radius:0; color:var(--ink); font-weight:600; text-decoration:none; background:none; }
#nav ul a:hover{ color:var(--ink) !important; background:var(--yellow); }
#nav ul a.active{ background:var(--ink); color:#fff; }
#nav ul a.active:before{ display:none; }

/* Hero */
#top{ padding:9rem 0 7rem; }
#top p{ font-size:1.3rem; line-height:1.55; max-width:30em; margin-bottom:2rem; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; list-style:none; padding:0; margin:0; }
.actions li{ padding:0; margin:0; }

/* Buttons */
input[type=submit], .button{
	background:var(--ink); background-image:none; color:#fff !important;
	border:0; border-radius:0; box-shadow:none; font-weight:600; font-size:1rem;
	padding:0 1.6em; height:3em; line-height:3em; text-decoration:none; cursor:pointer;
	transition:transform .15s ease, box-shadow .15s ease;
}
.button.large{ font-size:1.05rem; height:3.2em; line-height:3.2em; }
.button:hover, input[type=submit]:hover{ background:var(--ink); color:#fff !important; transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--pink); }
.button:active{ transform:none; box-shadow:none; }
.button.alt{ background:transparent; color:var(--ink) !important; box-shadow:inset 0 0 0 2px var(--ink); }
.button.alt:hover{ background:transparent; color:var(--ink) !important; box-shadow:inset 0 0 0 2px var(--ink), 5px 5px 0 var(--yellow); }
.wrapper.style4 input[type=submit]{ background:var(--yellow); color:var(--ink) !important; }
.wrapper.style4 input[type=submit]:hover{ background:var(--yellow); color:var(--ink) !important; box-shadow:5px 5px 0 var(--pink); }

/* Hero artwork: three plates printed slightly out of register, then snapped into place */
.registration{ display:block; width:100%; max-width:26rem; margin:0 auto; overflow:visible; }
.registration .s1, .registration .s2, .registration .s3{ mix-blend-mode:multiply; }
@keyframes snap-a{ from{ transform:translate(-26px,14px); } to{ transform:none; } }
@keyframes snap-b{ from{ transform:translate(22px,-18px); } to{ transform:none; } }
@keyframes snap-c{ from{ transform:translate(10px,26px); } to{ transform:none; } }
.registration .s1{ animation:snap-a 1s cubic-bezier(.2,.8,.2,1) .1s both; }
.registration .s2{ animation:snap-b 1s cubic-bezier(.2,.8,.2,1) .25s both; }
.registration .s3{ animation:snap-c 1s cubic-bezier(.2,.8,.2,1) .4s both; }
@media (prefers-reduced-motion:reduce){ .registration *{ animation:none !important; } }
@media (max-width:980px){ .registration{ max-width:18rem; margin:3rem 0 0; } }

/* Services */
.service{ border-top:3px solid var(--ink); padding-top:1.5rem; margin-bottom:2rem; }
.service svg{ display:block; width:2.75rem; height:2.75rem; margin-bottom:1.25rem; }
.service ul{ list-style:none; margin:1.25rem 0 0; padding:0; color:var(--ink); font-weight:600; }
.service li{ padding:.35rem 0; border-top:1px solid rgba(21,19,31,.15); }

/* Portfolio */
.piece{ margin:0 0 3rem; }
.piece img{ display:block; width:100%; height:auto; transition:transform .2s ease, box-shadow .2s ease; }
.piece:hover img{ transform:translate(-5px,-5px); box-shadow:8px 8px 0 var(--blue); }
.row > div:nth-child(3n+2) .piece:hover img{ box-shadow:8px 8px 0 var(--pink); }
.row > div:nth-child(3n) .piece:hover img{ box-shadow:8px 8px 0 var(--yellow); }
.piece figcaption{ padding-top:1.1rem; }
.piece figcaption h3{ margin-bottom:.15em; }
.piece figcaption p{ margin:0; }

/* Contact form */
label{ display:block; color:#fff; font-weight:600; font-size:.95rem; margin:0 0 .4rem; }
.wrapper.style4 form input[type=text], .wrapper.style4 form input[type=email], .wrapper.style4 form textarea{
	width:100%; background:#242133; border:0; border-bottom:3px solid #4a4660; border-radius:0; color:#fff; padding:.8em 1em; }
.wrapper.style4 form input:focus, .wrapper.style4 form textarea:focus{ background:#2c283e; border-bottom-color:var(--yellow); outline:0; }
.wrapper.style4 ::placeholder{ color:#8a86a0; }
textarea{ min-height:9rem; }
.elsewhere{ margin-top:3rem; padding-top:2rem; border-top:1px solid #3a3650; }
.elsewhere p{ color:#fff; margin-bottom:1rem; }
.social{ display:flex; flex-wrap:wrap; gap:1.5rem; list-style:none; padding:0; margin:0; }
.social li{ padding:0; }

#copyright{ list-style:none; padding:0; margin:3rem 0 0; font-size:.9rem; color:#8a86a0; }
#copyright li{ display:inline-block; margin:0 1.5rem 0 0; padding:0; border:0; }
#copyright a{ color:#8a86a0; }

@media (max-width:736px){
	.wrapper{ padding:4.5rem 0; }
	#top{ padding:6.5rem 0 4rem; }
	#nav ul a{ padding:0 .6rem; }
}
@media (max-width:480px){ #nav .wordmark{ display:none; } #nav .container{ justify-content:center; } }