:root {
  --ink:#2a2e37;
  --accent:#61a3b5;
  --line:#dfe2e5;
  --muted:#676c75;
  --white:#fff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font:15px/1.65 'Work Sans',Arial,sans-serif
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:500
}

h2 {
  font-size:38px;
  margin-bottom:24px
}

a {
  color:inherit;
  text-decoration:none
}

button,input,select,textarea {
  font:inherit
}

button {
  cursor:pointer;
  color:inherit
}

a,button,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}

input:focus,select:focus,textarea:focus {
  outline:2px solid var(--accent);
  outline-offset:3px
}

img {
  max-width:100%;
  display:block
}

[hidden] {
  display:none!important
}

.sr-only,.skip:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}

.skip:focus {
  position:absolute;
  z-index:20;
  background:#fff;
  padding:12px
}

.icon {
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0
}

header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:110px;
  padding:0 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  z-index:5
}

.logo {
  width:180px;
  height:auto;
  filter:brightness(0) invert(1)
}

nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px;
  font-weight:500
}

nav a {
  padding:10px 0
}

nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}

.nav-cta span {
  margin-left:9px
}

.hero {
  position:relative;
  min-height:680px;
  height:82vh;
  max-height:900px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  isolation:isolate;
  background:#434b47
}

.hero-photo {
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden
}

.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(15,23,23,.35),transparent 24%),linear-gradient(90deg,transparent 32%,rgba(16,25,25,.06) 48%,rgba(12,24,26,.48) 100%)
}

.hero-copy {
  width:43%;
  padding:125px 5% 55px 0;
  color:#fff
}

.hero h1 {
  font-size:clamp(55px,5.2vw,85px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.04;
  margin:0 0 34px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding:15px 23px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:500;
  transition:background .18s,border-color .18s
}

.button:hover {
  background:#4d8fa1;
  border-color:#4d8fa1
}

.outline {
  background:#fff;
  color:#397588
}

.outline:hover {
  color:#fff
}

.section {
  max-width:1440px;
  margin:auto;
  padding:70px 5%
}

.eyebrow {
  font-size:11px;
  letter-spacing:.22em;
  font-weight:600;
  margin-bottom:15px
}

.story {
  padding-top:52px;
  padding-bottom:48px
}

.story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6%;
  align-items:start
}

.story-heading h2 {
  font-size:32px;
  line-height:1.22;
  max-width:490px;
  margin:0
}

.story-grid>div:last-child {
  padding-left:9%;
  border-left:1px solid var(--line);
  margin-top:27px
}

.story-grid>div:last-child p {
  font-size:15px;
  line-height:1.7;
  margin-bottom:15px
}

.story-grid .intro {
  color:var(--muted);
  font-size:13px!important
}

.catalog {
  padding-top:35px;
  padding-bottom:45px;
  position:relative
}

.catalog:before {
  content:'';
  position:absolute;
  top:0;
  left:5%;
  right:5%;
  height:1px;
  background:var(--line)
}

.section-heading h2 {
  font-size:37px;
  margin-bottom:25px
}

.catalog-tools {
  display:flex;
  gap:25px;
  justify-content:space-between;
  align-items:center
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.filters button {
  padding:9px 18px;
  border:1px solid transparent;
  background:transparent;
  font-size:13px
}

.filters button.active {
  background:var(--accent);
  color:#fff
}

.filters button:hover:not(.active) {
  border-color:var(--line)
}

.search {
  display:flex;
  align-items:center;
  border-bottom:1px solid #b9bec4;
  width:205px;
  flex-shrink:0
}

.search input {
  font-size:12px;
  border:0;
  background:none;
  padding:10px 0;
  width:100%;
  min-width:0
}

.search>span:last-child {
  font-size:24px
}

.catalog-meta {
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:11px;
  color:var(--muted);
  padding:20px 0 15px;
  min-height:52px
}

.catalog-meta p {
  max-width:80%;
  margin:0
}

.catalog-meta #count {
  white-space:nowrap
}

.products {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 28px
}

.product {
  min-width:0
}

.product-image {
  width:100%;
  aspect-ratio:1.17;
  background:#fff;
  border:0;
  padding:0;
  position:relative;
  overflow:hidden;
  display:block
}

.product-image img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .35s
}

.product-image:hover img {
  transform:scale(1.035)
}

.arrow {
  position:absolute;
  bottom:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:var(--accent);
  color:#fff;
  border-radius:50%
}

.arrow .icon {
  width:16px;
  height:16px
}

.product-tag {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--muted);
  margin:16px 0 7px
}

.product h3 {
  font-size:20px;
  line-height:1.3;
  font-weight:500;
  margin:0 0 7px
}

.product h3 button {
  font:inherit;
  border:0;
  background:none;
  padding:0;
  text-align:left
}

.product h3 button:hover {
  color:#397588
}

.size-note {
  font-size:12px;
  color:var(--muted);
  margin:0
}

.more {
  text-align:center;
  margin:35px 0 0
}

.catalog-note {
  text-align:center;
  color:var(--muted);
  font-size:11px;
  margin:16px 0 0
}

.signature {
  max-width:1296px;
  margin:25px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:5%;
  padding:35px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.signature-image {
  height:300px;
  overflow:hidden
}

.signature-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 66%;
  transform:scale(1.18)
}

.signature-copy {
  border-left:1px solid var(--line);
  padding:10px 7%
}

.signature-copy h2 {
  font-size:35px;
  margin-bottom:17px
}

.signature-copy p {
  font-size:14px;
  line-height:1.7
}

.signature-copy p:last-child {
  font-size:12px;
  color:var(--muted);
  margin:0
}

.request {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:7%;
  padding-top:55px;
  padding-bottom:65px
}

.request h2 {
  font-size:44px;
  margin-bottom:10px
}

.request-copy>p {
  font-size:16px;
  color:var(--muted)
}

form {
  border-left:1px solid var(--line);
  padding-left:9%
}

form label {
  display:block;
  font-size:11px;
  margin-bottom:18px
}

form input,form select,form textarea {
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid #b1b6bc;
  border-radius:0;
  background:#fff;
  padding:10px 0;
  color:var(--ink);
  font-size:13px
}

form select {
  height:43px
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}

.optional {
  color:var(--muted)
}

.single-size {
  font-size:12px;
  color:var(--muted);
  padding-bottom:12px
}

.form-note {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 16px
}

.submit {
  min-width:270px
}

.text-link {
  border:0;
  border-bottom:1px solid var(--accent);
  background:transparent;
  padding:0 0 4px;
  font-size:12px
}

.text-link:hover {
  color:#397588
}

#form-status {
  font-size:12px;
  margin:12px 0
}

.small {
  font-size:11px;
  color:var(--muted)
}

footer {
  background:#2a2e37;
  color:#fff;
  padding:45px 5% 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  align-items:start
}

footer img {
  width:125px;
  filter:brightness(0) invert(1)
}

footer a {
  font-size:13px
}

footer a:hover {
  text-decoration:underline
}

footer p {
  font-size:12px;
  color:#c5c9d0;
  line-height:1.8;
  margin:13px 0
}

.footer-bottom {
  grid-column:1/-1;
  border-top:1px solid #50555f;
  padding-top:20px;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.1em
}

.footer-bottom a {
  font-size:10px
}

.footer-bottom .icon {
  width:14px
}

dialog {
  padding:0;
  border:0;
  width:92vw;
  max-width:1050px;
  max-height:90vh;
  background:#fff;
  color:var(--ink)
}

dialog::backdrop {
  background:rgba(20,25,30,.65)
}

.close-dialog {
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  background:#fff;
  border-radius:50%;
  font-size:26px;
  z-index:1
}

.dialog-grid {
  display:grid;
  grid-template-columns:1fr 1fr
}

.dialog-grid>div:first-child {
  min-width:0
}

#detail-image {
  width:100%;
  aspect-ratio:1;
  object-fit:contain
}

#thumbnails {
  display:flex;
  gap:12px;
  padding:15px
}

#thumbnails button {
  padding:0;
  border:1px solid var(--line);
  width:66px;
  background:white
}

#thumbnails img {
  aspect-ratio:1;
  object-fit:contain
}

.detail-copy {
  padding:50px 35px 30px
}

.detail-copy h2 {
  font-size:32px
}

.detail-copy .eyebrow {
  font-size:10px;
  letter-spacing:.13em
}

.detail-copy>p {
  font-size:13px;
  line-height:1.75
}

#detail-description {
  white-space:pre-line
}

#detail-sizes {
  font-size:12px
}

.detail-copy .button {
  margin-top:16px
}


@media(min-width:1440px) {
  .signature {
  max-width:1296px
}

.hero-copy {
  padding-right:7%;
  width:44%
}

.hero h1 {
  font-size:80px
}


}


@media(max-width:1439px) {
  .signature {
  margin-left:5%;
  margin-right:5%
}


}


@media(max-width:1000px) {
  header {
  height:95px
}

.logo {
  width:155px
}

nav {
  gap:25px
}

.hero {
  min-height:610px;
  height:72vh
}

.hero-copy {
  width:46%;
  padding-right:5%;
  padding-top:100px
}

.hero h1 {
  font-size:55px
}

.hero-photo img {
  object-position:45% 40%
}

.story-heading h2 {
  font-size:28px
}

.catalog-tools {
  flex-wrap:wrap;
  gap:15px
}

.search {
  width:220px
}

.products {
  gap:30px 22px
}

.product h3 {
  font-size:18px
}

.signature-image {
  height:265px
}

.signature-copy h2 {
  font-size:30px
}

.request {
  gap:5%
}

.submit {
  min-width:0;
  width:100%
}


}


@media(max-width:650px) {
  html {
  scroll-padding-top:18px
}

header {
  height:87px;
  padding:0 6%;
  align-items:center
}

.logo {
  width:133px
}

nav {
  gap:15px;
  font-size:11px
}

nav>a:first-child {
  display:none
}

.nav-cta span {
  display:none
}

.hero {
  height:78svh;
  min-height:610px;
  max-height:800px;
  align-items:flex-end;
  justify-content:flex-start
}

.hero-photo img {
  object-position:48% 36%
}

.hero:after {
  background:linear-gradient(180deg,rgba(12,20,22,.45),transparent 28%,rgba(12,20,22,.08) 45%,rgba(12,20,22,.68) 100%)
}

.hero-copy {
  padding:0 6% 42px;
  width:100%
}

.hero h1 {
  font-size:46px;
  line-height:1.04;
  margin-bottom:23px;
  max-width:350px
}

.hero h1 br:nth-child(2) {
  display:none
}

.button {
  padding:13px 20px;
  font-size:12px
}

.section {
  padding-left:6%;
  padding-right:6%
}

.story {
  padding-top:35px;
  padding-bottom:35px
}

.story-grid {
  grid-template-columns:1fr;
  gap:22px
}

.story-heading h2 {
  font-size:27px;
  max-width:100%
}

.eyebrow {
  font-size:10px
}

.story-grid>div:last-child {
  margin:0;
  padding:0;
  border:0
}

.story-grid>div:last-child p {
  font-size:14px
}

.story-grid .intro {
  font-size:12px!important
}

.catalog {
  padding-top:28px;
  padding-bottom:30px
}

.section-heading h2 {
  font-size:29px;
  margin-bottom:21px
}

.catalog-tools {
  display:block
}

.filters {
  gap:3px
}

.filters button {
  font-size:11px;
  padding:8px 10px
}

.search {
  width:100%;
  margin-top:17px
}

.catalog-meta {
  font-size:10px;
  padding:17px 0;
  gap:12px
}

.products {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:27px 14px
}

.product-image {
  aspect-ratio:1
}

.product-tag {
  font-size:8px;
  margin-top:10px
}

.product h3 {
  font-size:16px
}

.size-note {
  font-size:10px
}

.arrow {
  width:26px;
  height:26px;
  bottom:7px;
  right:7px
}

.arrow .icon {
  width:13px;
  height:13px
}

.catalog-note {
  font-size:10px
}

.more {
  margin-top:26px
}

.signature {
  grid-template-columns:1fr;
  gap:25px;
  padding:28px 0;
  margin:15px 6% 0
}

.signature-image {
  height:220px
}

.signature-copy {
  border:0;
  padding:0
}

.signature-copy h2 {
  font-size:29px
}

.signature-copy p {
  font-size:13px
}

.request {
  grid-template-columns:1fr;
  gap:25px;
  padding-top:35px;
  padding-bottom:40px
}

.request h2 {
  font-size:35px
}

.request-copy>p {
  font-size:14px;
  margin:0
}

form {
  border:0;
  padding:0
}

.field-row {
  gap:18px
}

form label {
  font-size:10px
}

form input,form select,form textarea {
  font-size:12px
}

.submit {
  width:100%
}

.form-note {
  font-size:10px
}

footer {
  padding:35px 6% 20px;
  grid-template-columns:.7fr 1.3fr;
  gap:20px
}

footer img {
  width:95px
}

footer a {
  font-size:11px
}

footer p {
  font-size:10px
}

.footer-bottom {
  gap:20px;
  font-size:8px
}

.footer-bottom a {
  font-size:9px
}

.dialog-grid {
  grid-template-columns:1fr
}

.detail-copy {
  padding:28px 23px
}

.detail-copy h2 {
  font-size:29px
}

dialog {
  width:94vw;
  max-height:92vh
}


}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

* {
  transition:none!important
}


}



/* Integrazione WordPress / Contact Form 7 */
body.jaar-landing{padding:0;max-width:none}
body.admin-bar header{top:32px}
.jaar-landing .request > .wpcf7 {min-width:0;width:100%}
.jaar-landing .wpcf7 form{margin:0}
.jaar-landing .wpcf7 form p{margin:0 0 16px}
.jaar-landing .wpcf7 label{display:block}
.jaar-landing .wpcf7 input[type=submit]{background:#61a3b5;color:#fff;cursor:pointer;width:auto}
.jaar-landing .wpcf7 input[type=checkbox]{width:auto;display:inline-block;margin-right:8px}
.jaar-landing .wpcf7-list-item{margin:0}
.jaar-landing .wpcf7-not-valid-tip{color:#a52a2a;font-size:14px}
.jaar-landing .wpcf7-response-output{margin:20px 0!important;padding:12px!important}
.jaar-landing .form-note a{text-decoration:underline}
@media(max-width:782px){body.admin-bar header{top:46px}}