:root {
  --ink:#000000;
  --paper:#ffffff;
  --muted:#000000b3;
  --line:#00000026
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:15px Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
.top {
  background:var(--ink);
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:11px;
  letter-spacing:2px
}
header {
  height:100px;
  margin:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.logo {
  font-size:27px;
  font-weight:700;
  letter-spacing:-1.6px
}
.logo span {
  font-weight:400
}
.logo small {
  display:block;
  font-size:9px;
  letter-spacing:4.8px;
  font-weight:400;
  margin-top:5px
}
nav {
  display:flex;
  gap:32px;
  font-size:13px
}
.contact-link {
  border-bottom:1px solid;
  padding-bottom:8px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  min-height:620px;
  margin:36px 5% 60px;
  gap:40px
}
.copy {
  padding:65px 0 20px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.5px;
  font-weight:bold;
  text-transform:uppercase
}
.eyebrow:before {
  content:' ';
  display:inline-block;
  width:26px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-right:12px
}
h1 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(54px,6vw,90px);
  letter-spacing:-4px;
  line-height:1.05;
  margin:30px 0
}
h1 em {
  font-weight:400;
  color:#057485
}
p {
  color:var(--muted);
  line-height:1.8
}
.copy p {
  max-width:345px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
  background:var(--ink);
  color:#fff;
  padding:19px 24px;
  font-size:12px;
  border:1px solid var(--ink)
}
.copy .btn {
  margin-top:25px
}
.footnote {
  font-size:10px;
  margin-top:38px;
  color:var(--muted);
  letter-spacing:1px
}
.hero-visual {
  position:relative;
  overflow:hidden;
  min-height:540px;
  background:#000000;
  border-radius:160px 4px 4px 4px
}
.hero-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  filter:saturate(.55)
}
.image-label {
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  display:flex;
  justify-content:space-between;
  background:#ffffffe8;
  padding:18px;
  font-size:12px;
  backdrop-filter:blur(8px)
}
.image-label small {
  display:block;
  color:var(--muted);
  margin-top:7px
}
.vertical {
  position:absolute;
  top:35px;
  right:25px;
  writing-mode:vertical-rl;
  font-size:10px;
  letter-spacing:3px
}
.promise {
  display:flex;
  justify-content:space-between;
  padding:26px 5%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font:19px Georgia,serif
}
.promise span {
  font:10px Arial,sans-serif;
  letter-spacing:2px;
  color:var(--muted);
  align-self:center
}
.section {
  padding:85px 5%
}
.heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:35px
}
h2 {
  font:44px Georgia,serif;
  letter-spacing:-1.6px;
  margin:18px 0 0
}
.tabs {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}
.tabs button {
  border:1px solid var(--line);
  background:none;
  border-radius:30px;
  padding:10px 20px;
  font-size:11px;
  color:var(--ink)
}
.tabs button[aria-pressed=true] {
  background:var(--ink);
  color:white
}
.products {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.product[hidden] {
  display:none
}
.product figure {
  margin:0;
  position:relative;
  background:#0574850d;
  aspect-ratio:1/1;
  overflow:hidden
}
.product img {
  height:100%;
  width:100%;
  object-fit:cover;
  transition:transform .5s;
  filter:saturate(.65)
}
.product:hover img {
  transform:scale(1.04)
}
.tag {
  position:absolute;
  left:15px;
  top:15px;
  background:var(--paper);
  padding:7px 10px;
  font-size:9px;
  letter-spacing:1px
}
.product h3 {
  font:24px Georgia,serif;
  margin:20px 0 7px
}
.product p {
  font-size:12px;
  margin:0
}
.product a {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.concept {
  font-size:11px;
  margin-top:25px
}
.story {
  background:#057485;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding:70px 8%;
  align-items:center
}
.story img {
  width:100%;
  height:410px;
  object-fit:cover;
  filter:saturate(.45);
  border-radius:3px 120px 3px 3px
}
.story h2 {
  font-size:49px;
  line-height:1.12;
  margin:26px 0
}
.story p {
  max-width:390px
}
.text-link {
  display:inline-block;
  border-bottom:1px solid;
  padding:12px 0;
  font-size:12px;
  margin-top:12px
}
.reach {
  padding:85px 5%;
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:center
}
.reach h2 {
  font-size:48px
}
.reach p {
  max-width:550px
}
.reach .btn {
  white-space:nowrap
}
footer {
  padding:45px 5% 22px;
  background:var(--ink);
  color:#ffffff
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:35px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff30;
  padding-top:22px;
  font-size:10px;
  color:#ffffffb3
}
.menu {
  display:none
}
.dialog {
  border:0;
  padding:35px;
  max-width:480px;
  background:var(--paper);
  color:var(--ink)
}
.dialog::backdrop {
  background:#000000c0
}
.dialog h2 {
  font-size:32px
}
.dialog button {
  margin-top:15px
}
.dialog p {
  font-size:14px
}
:focus-visible {
  outline:3px solid #057485;
  outline-offset:5px
}
@media(max-width:760px) {
  header {
    height:80px
  }
  .logo {
    font-size:24px
  }
  nav {
    display:none;
    position:absolute;
    top:115px;
    left:0;
    right:0;
    padding:25px;
    background:var(--paper);
    z-index:5
  }
  nav.open {
    display:flex;
    flex-direction:column
  }
  .menu {
    display:block;
    background:none;
    border:1px solid var(--line);
    padding:9px
  }
  .contact-link {
    display:none
  }
  .hero {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:0
  }
  .copy {
    padding-top:40px
  }
  h1 {
    letter-spacing:-2px;
    font-size:64px
  }
  .hero-visual {
    min-height:430px
  }
  .footnote {
    margin-top:25px
  }
  .promise {
    font-size:16px;
    gap:20px
  }
  .promise span {
    display:none
  }
  .section {
    padding:60px 5%
  }
  .heading {
    display:block
  }
  h2 {
    font-size:38px
  }
  .tabs {
    margin-top:25px
  }
  .products {
    grid-template-columns:1fr
  }
  .product figure {
    aspect-ratio:1.15
  }
  .story {
    grid-template-columns:1fr;
    gap:35px;
    padding:45px 5%
  }
  .story img {
    height:330px
  }
  .story h2 {
    font-size:41px
  }
  .reach {
    display:block;
    padding:60px 5%
  }
  .reach h2 {
    font-size:40px
  }
  .reach .btn {
    margin-top:20px
  }
  .footer-top,.footer-bottom {
    align-items:start;
    gap:25px;
    flex-direction:column
  }
}
/* Video hero and brand palette */
.logo span,nav a:hover,.product a:hover {
  color:#057485
}
.btn {
  background:#057485;
  border-color:#057485
}
.btn:hover {
  background:#000000;
  border-color:#000000
}
.top {
  background:#057485
}
header {
  border-color:#00000026
}
.hero {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:720px;
  min-height:min(850px,calc(100svh - 135px));
  margin:0;
  gap:0;
  overflow:hidden;
  background:#000000;
  color:#ffffff;
  padding:70px 8% 110px
}
.hero-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3
}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#000000e8 0%,#000000a6 48%,#00000040 100%),linear-gradient(0deg,#000000b3,transparent 45%)
}
.hero .copy {
  padding:0;
  max-width:720px
}
.hero h1 {
  font-size:clamp(64px,7vw,108px);
  margin:26px 0;
  line-height:1;
  letter-spacing:-4px
}
.hero h1 em {
  color:#ffffff;
  font-style:italic;
  text-decoration:underline;
  text-decoration-color:#057485;
  text-decoration-thickness:6px;
  text-underline-offset:12px
}
.hero p {
  color:#ffffffd9;
  max-width:390px
}
.hero .eyebrow {
  color:#ffffff
}
.hero .eyebrow:before {
  background:#057485;
  height:3px;
  width:36px
}
.hero .btn {
  margin-top:18px
}
.hero .btn:hover {
  background:#ffffff;
  color:#000000;
  border-color:#ffffff
}
.hero-bottom {
  position:absolute;
  bottom:30px;
  left:8%;
  right:8%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ffffff40;
  padding-top:22px;
  font-size:10px;
  letter-spacing:1.5px
}
.video-control {
  color:#ffffff;
  background:#00000066;
  border:1px solid #ffffff80;
  padding:10px 15px;
  font-size:11px;
  letter-spacing:.3px
}
.promise {
  background:#000000;
  color:#ffffff;
  border:0
}
.promise span {
  color:#ffffffb3
}
.story {
  color:#ffffff
}
.story p {
  color:#ffffffd9
}
.tabs button[aria-pressed=true] {
  background:#057485;
  border-color:#057485
}
.tag {
  color:#057485
}
.footer-bottom {
  color:#ffffffb3
}
footer .logo span {
  color:#ffffff
}
.story :focus-visible,.hero :focus-visible {
  outline-color:#ffffff
}
@media(max-width:760px) {
  .hero {
    min-height:720px;
    min-height:calc(100svh - 115px);
    padding:55px 6% 130px
  }
  .hero h1 {
    font-size:clamp(54px,12vw,78px);
    letter-spacing:-2px
  }
  .hero-video {
    object-position:60% center
  }
  .hero-shade {
    background:linear-gradient(90deg,#000000d9,#00000080),linear-gradient(0deg,#000000b3,transparent)
  }
  .hero-bottom {
    left:6%;
    right:6%;
    flex-wrap:wrap;
    gap:15px;
    bottom:22px
  }
  .hero-bottom>a {
    display:none
  }
  .hero-bottom>span {
    font-size:9px
  }
  .hero h1 em {
    text-decoration-thickness:4px;
    text-underline-offset:8px
  }
  .story {
    background:#057485
  }
  nav.open {
    z-index:10
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .product img {
    transition:none
  }
}
/* Contact strip */
.top {
  background:#000000;
  color:#ffffff;
  min-height:46px;
  padding:8px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  font-size:11px;
  letter-spacing:0
}
.top-details,.top-actions,.top-detail,.top-action,.top-socials {
  display:flex;
  align-items:center
}
.top-details {
  gap:25px;
  color:#ffffffb3
}
.top-detail {
  gap:8px
}
.top-detail svg {
  flex-shrink:0;
  color:#ffffff
}
.top-actions {
  gap:22px
}
.top-action {
  gap:7px;
  font-size:11px;
  color:#ffffff;
  white-space:nowrap
}
.top-action:is(button) {
  border:0;
  background:transparent;
  padding:0
}
.top-action:hover {
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:4px
}
.top-socials {
  gap:7px;
  border-left:1px solid #ffffff40;
  padding-left:20px
}
.social-button {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:1px solid #ffffff40;
  color:#ffffff;
  background:transparent;
  border-radius:50%
}
.social-button:hover {
  background:#057485;
  border-color:#057485
}
.top :focus-visible {
  outline-color:#ffffff
}
.hero {
  min-height:min(850px,calc(100svh - 146px))
}
@media(max-width:1000px) {
  .top-details {
    gap:14px
  }
  .top-actions {
    gap:14px
  }
  .top-socials {
    padding-left:14px
  }
}
@media(max-width:760px) {
  .top {
    padding:10px 5%;
    flex-wrap:wrap;
    gap:10px
  }
  .top-details {
    width:100%;
    justify-content:space-between;
    gap:10px;
    font-size:10px
  }
  .top-actions {
    width:100%;
    justify-content:space-between;
    gap:10px
  }
  .top-socials {
    margin-left:auto
  }
  .top-action {
    font-size:10px
  }
  .social-button {
    width:26px;
    height:26px
  }
  nav {
    top:auto;
    transform:translateY(100%);
    bottom:0
  }
  header {
    position:relative;
    z-index:10
  }
  .hero {
    min-height:calc(100svh - 170px)
  }
}
@media(max-width:370px) {
  .top-details {
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
  .top-actions {
    gap:8px
  }
  .top-socials {
    gap:5px;
    padding-left:8px
  }
}
/* Main navigation */
header {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px
}
header nav {
  justify-content:center;
  gap:28px;
  font-size:12px
}
header nav a {
  white-space:nowrap
}
.whatsapp-support {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#057485;
  color:#ffffff;
  border:1px solid #057485;
  padding:13px 17px;
  font-size:12px;
  white-space:nowrap
}
.whatsapp-support:hover {
  background:#000000;
  border-color:#000000
}
.sandals-section {
  margin:0 5% 75px;
  padding:38px;
  border-top:2px solid #057485;
  border-bottom:1px solid #00000026;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px
}
.sandals-section h2 {
  font-size:38px
}
.sandals-section .btn {
  flex-shrink:0
}
.sandals-section p {
  margin-bottom:0
}
section[id] {
  scroll-margin-top:24px
}
@media(max-width:1100px) {
  header {
    gap:15px
  }
  header nav {
    gap:16px;
    font-size:11px
  }
  .whatsapp-support {
    font-size:11px;
    padding:11px
  }
  .logo {
    font-size:24px
  }
}
@media(min-width:761px) and (max-width:950px) {
  header {
    height:auto;
    min-height:125px;
    padding:16px 0;
    grid-template-columns:1fr auto
  }
  header nav {
    grid-row:2;
    grid-column:1/-1;
    justify-content:center;
    gap:24px
  }
  .whatsapp-support {
    grid-column:2;
    grid-row:1
  }
}
@media(max-width:760px) {
  header {
    display:flex;
    gap:12px;
    height:auto;
    min-height:85px;
    padding:15px 0;
    flex-wrap:wrap
  }
  header .logo {
    margin-right:auto
  }
  .whatsapp-support {
    padding:10px;
    font-size:10px
  }
  .whatsapp-support svg {
    width:16px;
    height:16px
  }
  header nav {
    justify-content:flex-start;
    gap:24px;
    left:-5.56%;
    right:-5.56%;
    padding:25px 7%;
    font-size:13px
  }
  header .menu {
    padding:9px;
    font-size:11px
  }
  .sandals-section {
    display:block;
    margin-bottom:50px;
    padding:28px 0
  }
  .sandals-section .btn {
    margin-top:25px
  }
  .sandals-section h2 {
    font-size:34px
  }
}
@media(max-width:390px) {
  header .logo {
    font-size:21px
  }
  header .logo small {
    font-size:8px;
    letter-spacing:3px
  }
  .whatsapp-support {
    gap:5px;
    font-size:9px;
    padding:9px 7px
  }
  header {
    gap:8px
  }
}
/* Navigation overlay on the hero */
.hero-shell {
  position:relative;
  background:#000000
}
.hero-shell>header {
  position:absolute;
  inset:0 0 auto;
  z-index:10;
  width:100%;
  margin:0;
  padding:0 5%;
  height:110px;
  border:0;
  color:#ffffff;
  background:linear-gradient(180deg,#000000d9 0%,#00000080 55%,#00000000 100%)
}
.hero-shell header .logo span {
  color:#ffffff
}
.hero-shell header nav a:hover {
  color:#ffffff;
  text-decoration:underline;
  text-decoration-color:#057485;
  text-decoration-thickness:2px;
  text-underline-offset:8px
}
.hero-shell header :focus-visible {
  outline-color:#ffffff
}
.hero-shell .hero {
  min-height:780px;
  min-height:max(760px,calc(100svh - 46px));
  padding-top:165px
}
.hero-shell header .whatsapp-support {
  background:#057485;
  border-color:#057485
}
.hero-shell header .whatsapp-support:hover {
  background:#ffffff;
  border-color:#ffffff;
  color:#000000
}
.hero-shell header .menu {
  color:#ffffff;
  border-color:#ffffff80
}
@media(min-width:761px) and (max-width:950px) {
  .hero-shell>header {
    height:145px;
    padding:16px 5%;
    align-content:start;
    row-gap:25px
  }
  .hero-shell .hero {
    padding-top:190px
  }
}
@media(max-width:760px) {
  .hero-shell>header {
    height:auto;
    min-height:100px;
    padding:20px 5% 30px;
    align-content:start
  }
  .hero-shell .hero {
    min-height:760px;
    min-height:max(700px,calc(100svh - 90px));
    padding-top:150px
  }
  .hero-shell header nav {
    left:0;
    right:0;
    background:#000000f2;
    color:#ffffff;
    transform:translateY(100%)
  }
  .hero-shell header nav a {
    color:#ffffff
  }
  .hero-shell .hero-bottom {
    bottom:25px
  }
}
/* Typography and fixed navigation */
body {
  font-family:"Segoe UI",Arial,sans-serif
}
button {
  font-family:inherit
}
h1,h2,.story h2,.reach h2,.sandals-section h2,.product h3,.promise {
  font-family:"Segoe UI",Arial,sans-serif
}
h1,h2 {
  font-weight:600
}
h1 {
  letter-spacing:-3px
}
h1 em {
  font-style:normal
}
.product h3 {
  font-weight:500
}
.promise {
  font-weight:500
}
.hero-shell>header {
  position:fixed;
  top:var(--header-offset,46px);
  bottom:auto;
  transition:background .2s,box-shadow .2s
}
.hero-shell>header.is-scrolled {
  background:#000000;
  box-shadow:0 4px 20px #00000026
}
header nav {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:16px;
  font-weight:500;
  gap:28px
}
.whatsapp-support {
  font-size:14px
}
section[id] {
  scroll-margin-top:130px
}
.top {
  position:relative;
  z-index:11
}
@media(max-width:1100px) {
  header nav {
    font-size:14px;
    gap:18px
  }
  .whatsapp-support {
    font-size:12px
  }
}
@media(min-width:761px) and (max-width:950px) {
  header nav {
    font-size:15px
  }
  section[id] {
    scroll-margin-top:165px
  }
}
@media(max-width:760px) {
  header nav {
    font-size:17px
  }
  .whatsapp-support {
    font-size:11px
  }
  .hero-shell header nav {
    max-height:calc(100svh - 180px);
    overflow-y:auto
  }
  section[id] {
    scroll-margin-top:120px
  }
}
@media(max-width:390px) {
  .whatsapp-support {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-shell>header {
    transition:none
  }
}
/* Hero text spacing */
.hero-shell .hero {
  height:auto;
  overflow:hidden;
  padding-top:175px;
  padding-bottom:140px
}
.hero-shell .hero .copy {
  position:relative;
  width:100%;
  max-width:800px;
  flex-shrink:0
}
.hero-shell .hero h1 {
  font-size:clamp(54px,6.5vw,94px);
  line-height:1.22;
  letter-spacing:-2px;
  font-weight:600;
  margin:26px 0 32px
}
.hero-shell .hero h1 em {
  display:inline-block;
  line-height:1.22;
  text-decoration:none;
  border-bottom:5px solid #057485;
  padding-bottom:5px
}
.hero-shell .hero .eyebrow {
  line-height:1.6
}
.hero-shell .hero p {
  line-height:1.85;
  margin:0 0 25px;
  max-width:430px
}
.hero-shell .hero .btn {
  margin-top:0;
  line-height:1.5
}
.hero-bottom {
  line-height:1.6
}
.hero-shell .hero-bottom {
  bottom:28px
}
@media(min-width:761px) and (max-width:950px) {
  .hero-shell .hero {
    padding-top:200px
  }
}
@media(max-width:760px) {
  .hero-shell .hero {
    padding-top:150px;
    padding-bottom:115px
  }
  .hero-shell .hero h1 {
    font-size:clamp(44px,10vw,68px);
    line-height:1.24;
    letter-spacing:-1px;
    margin:22px 0 28px
  }
  .hero-shell .hero h1 em {
    line-height:1.24;
    border-bottom-width:4px;
    padding-bottom:4px
  }
  .hero-shell .hero p {
    font-size:14px;
    line-height:1.8
  }
  .hero-shell .hero .copy {
    max-width:100%
  }
  .hero-shell .hero-bottom {
    bottom:24px
  }
}

/* Modern collection showcase */
.collection-modern {
  padding: 100px 5% 80px;
  background: #ffffff;
}
.collection-modern .heading {
  align-items: flex-end;
  gap: 35px;
  margin-bottom: 45px;
}
.collection-modern .eyebrow { color: #057485; }
.collection-modern h2 {
  margin-top: 24px;
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.12;
  letter-spacing: -2.5px;
  font-weight: 600;
}
.collection-modern h2 span { color: #057485; }
.collection-intro { margin: 22px 0 0; font-size: 14px; }
.collection-modern .tabs {
  padding: 5px;
  gap: 4px;
  background: #0574850a;
  border: 1px solid #05748520;
  border-radius: 40px;
}
.collection-modern .tabs button {
  padding: 12px 24px;
  font-size: 13px;
  border: 0;
  font-weight: 500;
}
.collection-modern .tabs button:hover { background: #05748515; }
.collection-modern .tabs button[aria-pressed="true"] {
  color: #ffffff;
  background: #057485;
}
.collection-bar {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  margin-bottom: 10px;
  border-top: 1px solid #00000026;
  font-size: 10px;
  letter-spacing: 2px;
}
.collection-bar > :last-child { color: #057485; }
.collection-modern .products { gap: 28px; }
.collection-modern .product { position: relative; min-width: 0; }
.product-index {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #00000080;
}
.collection-modern .product figure {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: #0574850d;
  isolation: isolate;
}
.collection-modern .product img {
  filter: saturate(.8);
  transition: transform .6s ease;
}
.collection-modern .product:hover img { transform: scale(1.045); }
.collection-modern .product .product-image-link { display: block; }
.collection-modern .tag {
  top: 18px;
  left: 18px;
  padding: 9px 13px;
  border-radius: 30px;
  background: #fffffff2;
  color: #000000;
  font-size: 9px;
  letter-spacing: 1.4px;
}
.product-discover {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  padding: 15px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffffed;
  border-radius: 8px;
  color: #000000;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.product-discover > span { color: #057485; font-size: 20px; }
.collection-modern .product-title-link { padding-top: 20px; gap: 12px; }
.collection-modern .product h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -.8px;
  line-height: 1.3;
}
.collection-modern .product-title-link > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border: 1px solid #05748540;
  border-radius: 50%;
  color: #057485;
}
.collection-modern .product p { margin-top: 8px; font-size: 13px; }
.collection-modern .concept {
  border-top: 1px solid #00000015;
  padding-top: 22px;
  margin-top: 38px;
  max-width: 100%;
}
@media (max-width: 1000px) {
  .collection-modern .heading { display: block; }
  .collection-modern .tabs { display: inline-flex; margin-top: 28px; }
  .collection-modern .products { gap: 18px; }
}
@media (max-width: 760px) {
  .collection-modern { padding: 65px 5% 50px; }
  .collection-modern h2 { letter-spacing: -1.5px; }
  .collection-modern .products { grid-template-columns: 1fr; gap: 34px; }
  .collection-modern .product figure { aspect-ratio: 1 / 1; }
  .collection-modern .tabs button { padding: 11px 22px; }
  .collection-modern .product h3 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-modern .product img { transition: none; }
}

/* About / brand story — matches the collection showcase */
.story-modern {
  margin: 0 5% 85px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(35px, 5vw, 80px);
  align-items: center;
  background: #0574850a;
  color: #000000;
  border: 1px solid #05748520;
  border-radius: 22px;
}
.story-visual {
  position: relative;
  align-self: stretch;
  min-height: 610px;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
  background: #000000;
}
.story-modern .story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.65);
  border-radius: 0;
}
.story-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #00000040, transparent 40%, #000000a6);
  pointer-events: none;
}
.story-image-label {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 1.6;
}
.story-image-note {
  position: absolute;
  bottom: 28px;
  left: 26px;
  right: 26px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: #ffffff;
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: -1px;
}
.story-image-note > :last-child { font-size: 38px; font-weight: 300; }
.story-content { padding: 30px 30px 30px 0; min-width: 0; }
.story-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.story-modern .eyebrow { color: #057485; line-height: 1.6; }
.story-number { font-size: 9px; letter-spacing: 1.5px; color: #00000080; }
.story-modern h2 {
  font-size: clamp(38px, 4.5vw, 66px);
  font-weight: 600;
  letter-spacing: -2.5px;
  line-height: 1.15;
  margin: 32px 0 26px;
}
.story-modern h2 span { color: #057485; }
.story-modern .story-lead {
  color: #000000;
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 20px;
  max-width: none;
}
.story-modern .story-description {
  color: #000000b3;
  font-size: 14px;
  line-height: 1.9;
  max-width: 440px;
  margin: 0;
}
.story-details {
  border-top: 1px solid #05748526;
  margin-top: 30px;
  padding-top: 21px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.story-details > div > span { font-size: 10px; color: #057485; letter-spacing: 1px; }
.story-modern .story-details p {
  color: #000000;
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 0;
}
.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  margin-top: 30px;
  font-size: 13px;
  font-weight: 500;
}
.story-cta span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #ffffff;
  background: #057485;
  border-radius: 50%;
  font-size: 20px;
}
.story-cta:hover { color: #057485; }
.story-cta:hover span { background: #000000; }
.story-modern :focus-visible { outline-color: #057485; }
@media (max-width: 1050px) {
  .story-modern { gap: 30px; }
  .story-content { padding-right: 10px; }
  .story-topline { align-items: flex-start; flex-direction: column; gap: 10px; }
  .story-visual { min-height: 600px; }
}
@media (max-width: 760px) {
  .story-modern {
    margin: 0 5% 55px;
    padding: 14px;
    grid-template-columns: 1fr;
    gap: 10px;
    border-radius: 18px;
  }
  .story-visual { min-height: 380px; }
  .story-content { padding: 25px 10px 20px; }
  .story-topline { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .story-modern h2 { font-size: clamp(37px, 9vw, 54px); letter-spacing: -1.5px; margin: 25px 0; }
  .story-modern .story-lead { font-size: 18px; }
  .story-image-label { top: 20px; left: 20px; }
  .story-image-note { left: 20px; right: 20px; bottom: 20px; font-size: 28px; }
}

/* Slippers and sandals showcase */
.sandals-modern {
  display: block;
  margin: 0 5% 90px;
  padding: 65px 0 0;
  border-top: 1px solid #00000026;
  border-bottom: 0;
}
.sandals-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 40px;
}
.sandals-modern .eyebrow { color: #057485; }
.sandals-modern h2 {
  margin: 24px 0 0;
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.12;
  letter-spacing: -2.5px;
  font-weight: 600;
}
.sandals-modern h2 span { color: #057485; }
.sandals-heading > p { margin: 0; font-size: 14px; line-height: 1.9; }
.sandals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.sandals-card {
  display: block;
  min-width: 0;
  border: 1px solid #05748520;
  border-radius: 16px;
  overflow: hidden;
  background: #05748508;
}
.sandals-card-image {
  position: relative;
  aspect-ratio: 1.3;
  overflow: hidden;
  background: #0574850d;
}
.sandals-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7);
  transition: transform .6s ease;
}
.sandals-card:hover img { transform: scale(1.045); }
.sandals-card-label {
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 10px 14px;
  color: #000000;
  background: #fffffff2;
  border-radius: 30px;
  font-size: 9px;
  letter-spacing: 1.5px;
}
.sandals-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
}
.sandals-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
}
.sandals-card p { margin: 10px 0 0; font-size: 12px; }
.sandals-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #057485;
  color: #ffffff;
  font-size: 24px;
}
.sandals-card:hover .sandals-arrow { background: #000000; }
.sandals-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding-top: 24px;
}
.sandals-bottom .concept { margin: 0; font-size: 11px; }
.sandals-bottom > a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  color: #057485;
  font-size: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #057485;
}
@media (max-width: 900px) {
  .sandals-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .sandals-grid { gap: 20px; }
  .sandals-card-body { padding: 20px; }
  .sandals-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
}
@media (max-width: 760px) {
  .sandals-modern { margin-bottom: 55px; padding-top: 45px; }
  .sandals-modern h2 { letter-spacing: -1.5px; }
  .sandals-grid { grid-template-columns: 1fr; gap: 25px; }
  .sandals-card-image { aspect-ratio: 1.1; }
  .sandals-card h3 { font-size: 26px; }
  .sandals-card-label { top: 18px; left: 18px; }
  .sandals-arrow { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sandals-card-image img { transition: none; }
}

/* Newsletter signup */
.newsletter {
  margin: 0 5% 80px;
  padding: 55px;
  gap: 55px;
  background: #057485;
  border-radius: 20px;
  color: #ffffff;
}
.newsletter .eyebrow { color: #ffffff; }
.newsletter h2 { font-size: clamp(34px, 3.5vw, 49px); line-height: 1.18; letter-spacing: -1.5px; }
.newsletter h2 span { font-weight: 400; }
.newsletter-copy { flex: 1; }
.newsletter-copy > p { max-width: 410px; margin: 20px 0 0; font-size: 14px; color: #ffffffd9; }
.newsletter-form { flex: 1; min-width: 0; max-width: 500px; }
.newsletter-form label { display: block; margin-bottom: 12px; font-size: 12px; }
.newsletter-input-row { display: flex; padding: 5px; background: #ffffff; border-radius: 9px; gap: 8px; }
.newsletter-input-row input { width: 100%; min-width: 0; border: 0; background: transparent; color: #000000; padding: 14px; font: inherit; font-size: 14px; border-radius: 5px; }
.newsletter-input-row button { flex-shrink: 0; display: flex; align-items: center; gap: 25px; border: 0; border-radius: 5px; background: #000000; color: #ffffff; padding: 14px 20px; font-size: 12px; }
.newsletter-input-row button:hover { background: #057485; }
.newsletter-form #newsletter-note { font-size: 10px; line-height: 1.7; color: #ffffffcc; margin: 13px 0 0; }
.newsletter-form #newsletter-status { color: #ffffff; font-size: 12px; margin: 12px 0 0; line-height: 1.7; }
.newsletter :focus-visible { outline-color: #ffffff; }
.newsletter-input-row input:focus-visible { outline: 2px solid #057485; outline-offset: -2px; }
/* Three-column footer */
.footer-modern { padding: 65px 5% 25px; background: #000000; color: #ffffff; scroll-margin-top: 130px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: clamp(35px, 7vw, 100px); padding-bottom: 55px; }
.footer-brand .logo { display: inline-block; font-size: 32px; }
.footer-brand > p { color: #ffffffb3; font-size: 13px; line-height: 1.9; margin: 25px 0 20px; max-width: 350px; }
.footer-about-link { font-size: 12px; border-bottom: 1px solid #ffffff40; padding-bottom: 8px; display: inline-block; }
.footer-modern h3 { font-size: 15px; font-weight: 500; margin: 0 0 25px; }
.footer-contact dl { margin: 0; }
.footer-contact dl > div { margin-bottom: 18px; }
.footer-contact dt { color: #ffffff80; font-size: 10px; letter-spacing: 1px; margin-bottom: 7px; }
.footer-contact dd { margin: 0; color: #ffffffcc; font-size: 13px; line-height: 1.7; }
.footer-whatsapp { padding: 10px 0; border: 0; border-bottom: 1px solid #057485; background: transparent; color: #ffffff; font-size: 12px; }
.footer-modern .footer-menu { display: flex; position: static; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: transparent; transform: none; }
.footer-menu h3 { margin-bottom: 17px; }
.footer-menu a { display: flex; justify-content: space-between; gap: 25px; padding: 10px 0; font-size: 13px; color: #ffffffb3; }
.footer-menu a span { color: #ffffff80; }
.footer-modern a:hover, .footer-whatsapp:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.footer-modern .footer-bottom { gap: 20px; line-height: 1.7; }
.footer-modern :focus-visible { outline-color: #ffffff; }
@media (max-width: 1000px) {
  .newsletter { padding: 38px; gap: 35px; }
  .footer-grid { gap: 35px; }
}
@media (max-width: 760px) {
  .newsletter { display: block; margin-bottom: 55px; padding: 30px 22px; }
  .newsletter h2 { font-size: 34px; }
  .newsletter-form { margin-top: 30px; max-width: none; }
  .newsletter-input-row button { padding: 12px; gap: 12px; }
  .newsletter-input-row input { padding: 12px 8px; font-size: 13px; }
  .footer-modern { padding-top: 45px; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; padding-bottom: 35px; }
  .footer-brand > p { max-width: none; }
  .footer-contact, .footer-menu { border-top: 1px solid #ffffff26; padding-top: 28px !important; }
  .footer-modern .footer-menu { width: 100%; }
  .footer-modern h3 { margin-bottom: 20px; }
}

/* Refined newsletter panel */
.newsletter {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  margin: 15px 5% 85px;
  padding: 0;
  overflow: hidden;
  background: #000000;
  border: 1px solid #000000;
  border-radius: 22px;
}
.newsletter-copy {
  position: relative;
  padding: 54px clamp(28px, 4vw, 62px) 60px;
  overflow: hidden;
  background: radial-gradient(ellipse at 100% 100%, #05748570, transparent 65%), #000000;
}
.newsletter-copy::after {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  right: -150px;
  bottom: -190px;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  box-shadow: 0 0 0 40px #ffffff08, 0 0 0 80px #ffffff05;
  pointer-events: none;
}
.newsletter-edition {
  display: block;
  margin-bottom: 60px;
  color: #ffffff80;
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 2px;
}
.newsletter-copy .eyebrow { color: #ffffffcc; font-size: 10px; }
.newsletter-copy .eyebrow::before { height: 3px; background: #057485; }
.newsletter h2 {
  margin: 22px 0 24px;
  font-size: clamp(36px, 4.1vw, 60px);
  line-height: 1.16;
  letter-spacing: -2px;
  font-weight: 600;
}
.newsletter h2 span { color: #ffffff; font-weight: 400; }
.newsletter-copy > p {
  position: relative;
  max-width: 340px;
  margin: 0;
  color: #ffffffb3;
  font-size: 13px;
  line-height: 1.9;
}
.newsletter-signup {
  padding: 54px clamp(28px, 4vw, 62px);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  color: #000000;
}
.newsletter-mail-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  color: #057485;
  background: #0574850d;
  border: 1px solid #05748520;
  border-radius: 16px;
}
.newsletter-signup h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.8px;
}
.newsletter-signup-intro { margin: 0 0 30px; color: #000000b3; font-size: 13px; }
.newsletter-signup .newsletter-form { flex: none; width: 100%; max-width: none; margin: 0; }
.newsletter-form label { color: #000000; font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.newsletter-input-row {
  padding: 5px;
  gap: 5px;
  border: 1px solid #00000026;
  border-radius: 10px;
  background: #ffffff;
}
.newsletter-input-row:focus-within { border-color: #057485; box-shadow: 0 0 0 3px #05748515; }
.newsletter-input-row input { padding: 15px 12px; font-size: 13px; }
.newsletter-input-row input::placeholder { color: #00000080; }
.newsletter-input-row button {
  background: #057485;
  border-radius: 6px;
  padding: 15px 20px;
  gap: 20px;
  font-weight: 500;
}
.newsletter-input-row button span { font-size: 18px; }
.newsletter-input-row button:hover { background: #000000; }
.newsletter-form #newsletter-note { color: #00000080; font-size: 10px; line-height: 1.8; margin-top: 15px; }
.newsletter-form #newsletter-status { color: #057485; font-size: 12px; }
.newsletter-form #newsletter-status:empty { margin: 0; }
.newsletter-signup :focus-visible { outline-color: #057485; }
@media (max-width: 1000px) {
  .newsletter { gap: 0; padding: 0; }
  .newsletter-copy, .newsletter-signup { padding: 40px 28px; }
  .newsletter-input-row button { padding: 14px; gap: 12px; }
}
@media (max-width: 760px) {
  .newsletter { display: grid; grid-template-columns: 1fr; padding: 0; margin-bottom: 55px; border-radius: 18px; }
  .newsletter-copy, .newsletter-signup { padding: 34px 25px; }
  .newsletter-edition { margin-bottom: 35px; }
  .newsletter h2 { font-size: clamp(34px, 9vw, 48px); letter-spacing: -1.5px; }
  .newsletter-copy > p { max-width: none; }
  .newsletter-mail-icon { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 22px; }
  .newsletter-signup h3 { font-size: 25px; }
  .newsletter-signup-intro { margin-bottom: 24px; }
  .newsletter-input-row input { padding: 13px 8px; }
}
@media (max-width: 380px) {
  .newsletter-input-row { flex-direction: column; }
  .newsletter-input-row button { justify-content: space-between; }
}
/* Compact, shared content layout */
main {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}
main .collection-modern {
  padding-top: 70px;
  padding-bottom: 60px;
}
main .sandals-modern {
  padding-top: 45px;
  margin-bottom: 65px;
}
main .story-modern {
  margin-bottom: 65px;
}
main .newsletter {
  margin-top: 0;
  margin-bottom: 65px;
}
.footer-modern {
  padding: 55px max(5%, calc((100% - 1116px) / 2)) 25px;
}
.footer-modern .footer-grid {
  gap: clamp(30px, 4vw, 65px);
  padding-bottom: 40px;
}
@media (max-width: 760px) {
  main .collection-modern {
    padding-top: 50px;
    padding-bottom: 45px;
  }
  main .sandals-modern {
    padding-top: 35px;
    margin-bottom: 45px;
  }
  main .story-modern,
  main .newsletter {
    margin-bottom: 45px;
  }
  .footer-modern {
    padding: 40px 5% 22px;
  }
  .footer-modern .footer-grid {
    gap: 30px;
    padding-bottom: 30px;
  }
}
/* Slightly wider shared layout */
main {
  max-width: 1360px;
}
.footer-modern {
  padding-inline: max(5%, calc((100% - 1224px) / 2));
}
@media (max-width: 760px) {
  .footer-modern {
    padding-inline: 5%;
  }
}
/* Header WhatsApp support button */
.hero-shell header .whatsapp-support {
  gap: 10px;
  padding: 12px 20px;
  color: #ffffff;
  background: #ffffff0d;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-shell header .whatsapp-support svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.hero-shell header .whatsapp-support:hover {
  color: #ffffff;
  background: #057485;
  border-color: #057485;
  box-shadow: 0 4px 18px #00000026;
}
.hero-shell header .whatsapp-support:active {
  box-shadow: none;
}
@media (max-width: 1100px) {
  .hero-shell header .whatsapp-support {
    padding: 11px 16px;
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .hero-shell header .whatsapp-support {
    padding: 9px 12px;
    gap: 7px;
    font-size: 10px;
  }
  .hero-shell header .whatsapp-support svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 390px) {
  .hero-shell header .whatsapp-support {
    padding: 9px;
    gap: 5px;
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shell header .whatsapp-support {
    transition: none;
  }
}

/* Editable header media */
.header-brand-image{display:block;max-width:190px;max-height:52px;width:auto;height:auto;object-fit:contain}.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}.top-socials:not(:has(a)){display:none}@media(max-width:760px){.header-brand-image{max-width:125px;max-height:38px}.hero-poster{object-position:60% center}}

.hero-shell.no-hero{min-height:110px}.hero-shell.no-hero>header{background:#000000}@media(min-width:761px) and (max-width:950px){.hero-shell.no-hero{min-height:145px}}

.hero-shell.no-hero.no-nav{min-height:0}