/* Regra responsiva / animação */
@charset "UTF-8";
:root {
--ink:#000000;--accent:#e6e600;--paper:#ffffff;--muted:#b3b3b3;--line:#333333;--space:clamp(24px,5vw,88px)
}

/* Apresentação de * */
* {
box-sizing:border-box
}

/* Apresentação de body */
body {
margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;line-height:1.6
}

/* Apresentação de a */
a {
color:inherit;text-decoration:none
}

/* Apresentação de a:hover */
a:hover {
text-decoration:underline;text-underline-offset:5px
}

/* Apresentação de button,input,select,textarea */
button,input,select,textarea {
font:inherit
}

/* Apresentação de button,a,input,select,textarea */
button,a,input,select,textarea {
-webkit-tap-highlight-color:transparent
}

/* Apresentação de a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
outline:3px solid var(--accent);outline-offset:5px
}

/* Apresentação de .skip */
.skip {
position:absolute;top:-100px;z-index:9;background:var(--accent);color:var(--ink);padding:12px
}

/* Apresentação de .skip:focus */
.skip:focus {
top:0
}

/* Apresentação de header */
header {
min-height:100px;padding:20px var(--space);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px
}

/* Apresentação de .logo */
.logo {
width:150px;height:auto;display:block
}

/* Apresentação de nav */
nav {
display:flex;align-items:center;gap:28px;font-size:14px
}

/* Apresentação de nav a:last-child */
nav a:last-child {
border:1px solid var(--accent);border-radius:30px;padding:12px 20px
}

/* Apresentação de nav a[aria-current] */
nav a[aria-current] {
color:var(--accent)
}

/* Apresentação de .menu */
.menu {
display:none
}

/* Apresentação de section */
section {
padding:70px var(--space)
}

/* Apresentação de h1,h2,h3,p */
h1,h2,h3,p {
margin-top:0
}

/* Apresentação de h1 */
h1 {
font-size:clamp(54px,8.5vw,136px);line-height:.98;letter-spacing:-.065em;font-weight:600;margin:28px 0 38px
}

/* Apresentação de h2 */
h2 {
font-size:clamp(32px,4vw,64px);line-height:1.08;letter-spacing:-.045em;font-weight:500
}

/* Apresentação de h3 */
h3 {
font-size:23px;font-weight:500;line-height:1.2;margin:0
}

/* Apresentação de em */
em {
font-style:normal;color:var(--accent)
}

/* Apresentação de .eyebrow */
.eyebrow {
font-size:12px;letter-spacing:.16em
}

/* Apresentação de .hero */
.hero {
position:relative;min-height:690px;background-image:linear-gradient(90deg,#000000ee,#00000022),url('../brand/extracted/grafismo-original.jpg');background-position:center;background-size:cover
}

/* Apresentação de .hero h1 */
.hero h1 {
font-size:clamp(64px,10.5vw,165px);max-width:1100px
}

/* Apresentação de .hero-bottom,.section-title,.project-caption */
.hero-bottom,.section-title,.project-caption {
display:flex;justify-content:space-between;gap:30px;align-items:center
}

/* Apresentação de .hero-index */
.hero-index {
display:block;margin-top:48px;font-size:11px;color:var(--muted)
}

/* Apresentação de .button */
.button {
display:inline-block;background:var(--accent);color:var(--ink);padding:16px 25px;border:0;border-radius:30px;font-weight:600;cursor:pointer
}

/* Apresentação de .button:hover */
.button:hover {
background:#e6e600;text-decoration:none
}

/* Apresentação de .intro */
.intro {
padding-bottom:50px;border-bottom:1px solid var(--line)
}

/* Apresentação de .lead */
.lead {
font-size:clamp(19px,2vw,26px);max-width:760px;line-height:1.45;color:#cccccc
}

/* Apresentação de .projects */
.projects {
display:grid;grid-template-columns:1fr 1fr;gap:50px 28px
}

/* Apresentação de .project:first-child */
.project:first-child {
grid-column:1/-1
}

/* Apresentação de .picture */
.picture {
background:#eeeeee;overflow:hidden
}

/* Apresentação de .picture img */
.picture img {
display:block;width:100%;aspect-ratio:1.65;object-fit:contain;transition:transform .35s
}

/* Apresentação de .project:first-child .picture img */
.project:first-child .picture img {
aspect-ratio:2.1
}

/* Apresentação de .project:hover img */
.project:hover img {
transform:scale(1.025)
}

/* Apresentação de .project-caption */
.project-caption {
margin-top:18px
}

/* Apresentação de .project-caption span */
.project-caption span {
font-size:13px;color:var(--muted)
}

/* Apresentação de .statement */
.statement {
background:var(--accent);color:var(--ink)
}

/* Apresentação de .statement h2 */
.statement h2 {
font-size:clamp(48px,7vw,110px)
}

/* Apresentação de .statement p:not(.eyebrow) */
.statement p:not(.eyebrow) {
max-width:600px;font-size:21px
}

/* Apresentação de .statement .button */
.statement .button {
background:var(--ink);color:var(--paper)
}

/* Apresentação de .text-link */
.text-link {
display:inline-block;border-bottom:1px solid;padding:8px 0
}

/* Apresentação de .split */
.split {
display:grid;grid-template-columns:1fr 1fr;gap:70px
}

/* Apresentação de .split p */
.split p {
max-width:650px
}

/* Apresentação de .split a */
.split a {
overflow-wrap:anywhere
}

/* Apresentação de .rows article */
.rows article {
display:grid;grid-template-columns:50px 1fr 1fr;gap:30px;padding:40px 0;border-top:1px solid var(--line)
}

/* Apresentação de .rows h2 */
.rows h2 {
font-size:34px
}

/* Apresentação de .rows article>span */
.rows article>span {
color:var(--accent)
}

/* Apresentação de .filters */
.filters {
display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px
}

/* Apresentação de .filters button,.copy,.menu */
.filters button,.copy,.menu {
background:transparent;color:var(--paper);border:1px solid var(--line);padding:10px 20px;border-radius:25px;cursor:pointer
}

/* Apresentação de .filters [aria-pressed=true] */
.filters [aria-pressed=true] {
background:var(--accent);color:var(--ink)
}

/* Apresentação de [hidden] */
[hidden] {
display:none!important
}

/* Apresentação de .gallery */
.gallery {
display:grid;gap:30px
}

/* Apresentação de .gallery img */
.gallery img {
width:100%;height:auto
}

/* Apresentação de .small */
.small {
font-size:13px;color:var(--muted);margin-top:24px
}

/* Apresentação de form */
form {
display:grid;grid-template-columns:1fr 1fr;gap:24px
}

/* Apresentação de label */
label {
display:block;font-size:14px
}

/* Apresentação de input,select,textarea */
input,select,textarea {
width:100%;display:block;margin-top:8px;border:1px solid #777777;background:#141414;color:var(--paper);border-radius:4px;padding:14px;min-width:0
}

/* Apresentação de textarea */
textarea {
resize:vertical
}

/* Apresentação de .full */
.full {
grid-column:1/-1
}

/* Apresentação de form .button */
form .button {
justify-self:start
}

/* Apresentação de .status */
.status {
color:var(--accent)
}

/* Apresentação de footer */
footer {
border-top:1px solid var(--line);padding:50px var(--space);display:grid;grid-template-columns:2fr 1.5fr 1fr;gap:30px;font-size:13px;color:var(--muted)
}

/* Apresentação de footer a */
footer a {
display:block;margin-bottom:12px
}

/* Apresentação de footer .logo */
footer .logo {
margin-bottom:20px
}

/* Apresentação de .swatches */
.swatches {
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0
}

/* Apresentação de .swatches div */
.swatches div {
padding:35px;border:1px solid var(--line)
}

/* Apresentação de .brand-sample */
.brand-sample {
max-width:350px;width:100%
}

/* Apresentação de .prose */
.prose {
max-width:950px
}

/* Apresentação de .prose h2 */
.prose h2 {
font-size:32px
}

/* Regra responsiva / animação */
@media(max-width:900px) {

/* Apresentação de header */
header {
flex-wrap:wrap
}

/* Apresentação de .menu */
.menu {
display:block
}

/* Apresentação de nav */
nav {
width:100%;flex-wrap:wrap;gap:18px
}

/* Apresentação de .js nav */
.js nav {
display:none
}

/* Apresentação de .js nav.open */
.js nav.open {
display:flex
}

/* Apresentação de .split */
.split {
grid-template-columns:1fr;gap:30px
}

/* Apresentação de .rows article */
.rows article {
grid-template-columns:35px 1fr
}

/* Apresentação de .rows article>p */
.rows article>p {
grid-column:2
}

/* Apresentação de .hero */
.hero {
min-height:590px
}

/* Apresentação de .hero-bottom */
.hero-bottom {
align-items:flex-start;flex-direction:column
}

/* Apresentação de .projects */
.projects {
gap:35px 18px
}

/* Apresentação de .project-caption */
.project-caption {
align-items:flex-start;flex-direction:column;gap:8px
}

}

/* Regra responsiva / animação */
@media(max-width:560px) {

/* Apresentação de section */
section {
padding:48px var(--space)
}

/* Apresentação de .projects,.swatches */
.projects,.swatches {
grid-template-columns:1fr
}

/* Apresentação de .project:first-child */
.project:first-child {
grid-column:auto
}

/* Apresentação de .project:first-child .picture img */
.project:first-child .picture img {
aspect-ratio:1.65
}

/* Apresentação de .section-title */
.section-title {
display:block
}

/* Apresentação de form */
form {
grid-template-columns:1fr
}

/* Apresentação de .full */
.full {
grid-column:1
}

/* Apresentação de footer */
footer {
grid-template-columns:1fr
}

/* Apresentação de .hero */
.hero {
min-height:650px
}

/* Apresentação de .logo */
.logo {
width:125px
}

}

/* Regra responsiva / animação */
@media(prefers-reduced-motion:reduce) {

/* Apresentação de * */
* {
transition:none!important;scroll-behavior:auto!important
}

}

/* Apresentação de footer a */
footer a {
overflow-wrap:anywhere
}

/* Apresentação de form .button */
form .button {
font-size:14px
}

/* Apresentação de a.contact-link */
/* Contactos: símbolo e nome sempre juntos. */
a.contact-link {
display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 0
}

/* Apresentação de footer a.contact-link */
footer a.contact-link {
display:flex;margin-bottom:8px
}

/* Apresentação de .contact-icon */
.contact-icon {
width:21px;height:21px;flex:0 0 21px;object-fit:contain
}

/* Apresentação de .contact-link span */
.contact-link span {
min-width:0;overflow-wrap:anywhere
}

/* Apresentação de .contact-link:hover .contact-icon */
.contact-link:hover .contact-icon {
filter:brightness(1.25)
}

/* Apresentação de .form-actions */
/* Acções dos formulários agrupadas sem colunas vazias. */
.form-actions {
display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px
}

/* Apresentação de .form-actions .button */
.form-actions .button {
margin:0;padding:13px 20px;white-space:nowrap
}

/* Apresentação de form .status:empty */
form .status:empty {
display:none
}

/* Apresentação de form .status */
form .status {
margin:0
}

/* Apresentação de form .small.full */
form .small.full {
margin:0
}

/* Apresentação de form .form-actions */
form .form-actions {
margin-top:0
}

/* Apresentação de .projects */
/* Cards adaptados à proporção original, em colunas fluidas. */
.projects {
display:block;columns:280px 3;column-gap:28px
}

/* Apresentação de .projects .project */
.projects .project {
display:inline-block;width:100%;break-inside:avoid;margin:0 0 34px;vertical-align:top
}

/* Apresentação de .projects .picture */
.projects .picture {
background:transparent;border-radius:6px
}

/* Apresentação de .projects .picture img,.projects .project:first-child .picture img */
.projects .picture img,.projects .project:first-child .picture img {
aspect-ratio:auto;width:100%;height:auto;object-fit:contain
}

/* Apresentação de .projects .project:hover img */
.projects .project:hover img {
transform:none
}

/* Apresentação de .projects .project-caption */
.projects .project-caption {
display:block;margin-top:14px
}

/* Apresentação de .projects .project-caption h3 */
.projects .project-caption h3 {
font-size:22px;margin-bottom:6px
}

/* Apresentação de .projects .project-caption span */
.projects .project-caption span {
display:block
}

/* Regra responsiva / animação */
@media(max-width:600px) {

/* Apresentação de .projects */
.projects {
columns:1;column-gap:0
}

}

/* Apresentação de .projects .packaging-card .picture */
.projects .packaging-card .picture {
background:#fff
}


/* Seta vectorial: aspecto consistente sem emoji do sistema. */
.inline-arrow{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}

/* Play vectorial: evita a apresentação como emoji no Safari/iOS. */
.ui-play{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.15em;flex-shrink:0}.featured-play .ui-play,.motion-play .ui-play{width:20px;height:20px;margin-left:2px}