/* Riviera Signal Editorial — trendsshopslink.com */

:root{
  --sapphire:#16489E;
  --sapphire-deep:#0F3A82;
  --marine:#0A7772;
  --marine-deep:#06514D;
  --turquoise:#16C7B2;
  --turquoise-ink:#0A4E4A;
  --saffron:#F1B934;
  --coral:#EE655C;
  --plum:#71366E;
  --plum-deep:#5C2C5A;
  --mint:#D8FFE9;
  --peach:#FFD9C8;
  --ink:#0B2E5E;
  --tile-teal:#0A7772;
  --tile-plum:#71366E;
  --tile-coral:#EE655C;
  --tile-saffron:#F1B934;
  --tile-turquoise:#16C7B2;
  --radius:18px;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--sapphire);
  color:var(--mint);
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
  font-weight:800;
}

p{margin:0 0 1em}

ul{margin:0;padding:0}

::selection{background:var(--saffron);color:var(--plum-deep)}

:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:6px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */

.site-header{position:relative;background:var(--sapphire)}

.micro-strip{
  background:var(--coral);
  color:var(--plum-deep);
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  padding:.45rem 16px;
  line-height:1.35;
}

.header-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  max-width:1180px;
  margin:0 auto;
}

.logo-module{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--saffron),var(--coral));
  flex:none;
  box-shadow:0 4px 14px rgba(11,46,94,.35);
}

.logo-module img{
  width:40px;
  height:40px;
  filter:drop-shadow(0 2px 3px rgba(11,46,94,.55));
}

.site-nav{display:none}

.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:46px;
  height:46px;
  padding:10px;
  background:var(--plum);
  border:2px solid var(--turquoise);
  border-radius:12px;
  cursor:pointer;
  flex:none;
}

.nav-toggle span{
  display:block;
  height:3px;
  border-radius:3px;
  background:var(--mint);
}

.route-line{
  height:5px;
  background:linear-gradient(90deg,var(--turquoise) 0%,var(--saffron) 55%,var(--coral) 100%);
}

/* Mobile dropdown menu (full width, below header) */
.site-nav.is-open{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--plum);
  border-top:4px solid var(--turquoise);
  border-bottom:4px solid var(--saffron);
  z-index:60;
  box-shadow:0 18px 30px rgba(5,20,50,.45);
}

.site-nav.is-open a{
  padding:16px 24px;
  color:var(--mint);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid rgba(216,255,233,.14);
}

.site-nav.is-open a:last-child{border-bottom:0}

.site-nav.is-open a:hover{background:rgba(22,199,178,.16);color:var(--peach)}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,var(--sapphire) 0%,var(--sapphire-deep) 48%,var(--plum) 100%);
}

.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:28px;
  padding:52px 20px 110px;
  max-width:1180px;
  margin:0 auto;
}

.hero h1{
  font-size:clamp(1.9rem,6.4vw,3.35rem);
  color:var(--mint);
  max-width:15ch;
  text-shadow:0 2px 10px rgba(5,20,50,.35);
}

.hero-para{
  color:var(--peach);
  font-size:1.05rem;
  max-width:52ch;
}

.hero-badges{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-badges li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(22,199,178,.14);
  border:1px solid rgba(22,199,178,.55);
  color:var(--mint);
  font-size:.88rem;
  font-weight:700;
  padding:.5rem .9rem;
  border-radius:999px;
}

.hero-badges li::before{
  content:"";
  width:9px;
  height:9px;
  background:var(--saffron);
  transform:rotate(45deg);
  border-radius:2px;
  flex:none;
}

.criteria-panel{
  background:var(--turquoise);
  color:var(--turquoise-ink);
  border-radius:var(--radius);
  padding:26px 26px 20px;
  box-shadow:0 16px 34px rgba(5,20,50,.4);
}

.criteria-panel h2{
  color:var(--sapphire-deep);
  font-size:1.28rem;
}

.criteria-panel ul{
  list-style:none;
  margin:0 0 18px;
}

.criteria-panel li{
  position:relative;
  padding-left:26px;
  margin-bottom:.55rem;
  font-weight:600;
}

.criteria-panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:11px;
  height:11px;
  background:var(--saffron);
  transform:rotate(45deg);
  border-radius:2px;
}

.criteria-panel .criteria-note{
  font-size:.85rem;
  font-style:italic;
  opacity:.85;
  margin:0;
  border-top:2px solid rgba(10,78,74,.25);
  padding-top:14px;
}

.hero-strips{
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-10px;
  pointer-events:none;
  z-index:0;
}

.hero-strips span{
  display:block;
  height:42px;
  transform:skewX(-10deg);
}

.hero-strips span:first-child{background:var(--coral);margin-bottom:5px}
.hero-strips span:last-child{background:var(--saffron);opacity:.95}

/* ---------- Cards ---------- */

.cards-section{
  background:var(--marine);
  padding:64px 0 74px;
}

.section-head{
  margin-bottom:34px;
}

.section-head h2{
  color:var(--mint);
  font-size:clamp(1.5rem,4vw,2.1rem);
}

.section-head p{
  color:var(--peach);
  max-width:72ch;
}

.cards-list{
  display:grid;
  gap:26px;
  list-style:none;
}

.card{
  border-radius:var(--radius);
  padding:26px 22px;
  display:grid;
  gap:20px;
  box-shadow:0 14px 30px rgba(4,18,38,.35);
  border-top:5px solid var(--accent);
  color:var(--mint);
}

.c-a{--accent:var(--turquoise);--score-ink:var(--sapphire-deep);background:linear-gradient(135deg,#16489E,#0F3A82)}
.c-b{--accent:var(--saffron);--score-ink:var(--ink);background:linear-gradient(135deg,#0A7772,#07635F)}
.c-c{--accent:var(--coral);--score-ink:var(--plum-deep);background:linear-gradient(135deg,#71366E,#5C2C5A)}
.c-d{--accent:var(--saffron);--score-ink:var(--ink);background:linear-gradient(135deg,#0A7772,#054F4B)}
.c-e{--accent:var(--turquoise);--score-ink:var(--sapphire-deep);background:linear-gradient(135deg,#16489E,#71366E)}

.card-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,18,38,.3);
  border:1px solid rgba(216,255,233,.14);
  border-radius:14px;
  padding:14px;
  min-height:150px;
}

.card-logo img{
  width:100%;
  max-width:230px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(4,18,38,.45));
}

.card-anj{
  display:inline-flex;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--mint);
  background:rgba(22,199,178,.14);
  border:1px solid rgba(22,199,178,.5);
  border-radius:999px;
  padding:.32rem .8rem;
  margin-bottom:14px;
}

.card-desc{
  color:var(--peach);
  font-size:.98rem;
  margin-bottom:16px;
}

.card-bullets{
  list-style:none;
  display:grid;
  gap:9px;
}

.card-bullets li{
  position:relative;
  padding-left:26px;
  font-size:.94rem;
}

.card-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:11px;
  height:11px;
  background:var(--accent);
  transform:rotate(45deg);
  border-radius:2px;
}

.card-side{
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid rgba(216,255,233,.18);
  padding-top:18px;
}

.score-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--peach);
  margin-bottom:4px;
}

.score-value{
  display:flex;
  align-items:baseline;
  gap:4px;
}

.score-value strong{
  font-size:2.6rem;
  font-weight:800;
  line-height:1;
  color:var(--accent);
}

.score-value span{
  font-size:.95rem;
  font-weight:700;
  color:var(--mint);
}

.card-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--saffron);
  color:var(--ink);
  font-weight:800;
  font-size:.98rem;
  text-decoration:none;
  padding:.9rem 1.6rem;
  border-radius:999px;
  white-space:nowrap;
  transition:transform .15s ease,background .15s ease,color .15s ease;
}

.card-cta:hover{
  background:var(--coral);
  color:var(--plum-deep);
  transform:translateY(-2px);
}

/* ---------- Footer ---------- */

.site-footer{background:var(--sapphire-deep)}

.footer-links{
  background:var(--sapphire);
  padding:26px 0;
}

.footer-links ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  justify-content:center;
}

.footer-links a{
  color:var(--mint);
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}

.footer-links a:hover{color:var(--peach);border-bottom-color:var(--saffron)}

.footer-resources{padding:52px 0 40px;background:var(--marine-deep)}

.resource-heading{
  color:var(--peach);
  font-size:clamp(1.25rem,3vw,1.7rem);
  text-align:center;
  margin-bottom:30px;
}

.resource-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-width:900px;
  margin:0 auto;
}

.resource-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:96px;
  border-radius:16px;
  padding:14px 18px;
  text-decoration:none;
  transition:transform .15s ease;
}

.resource-tile img{
  width:100%;
  max-width:260px;
  height:auto;
  max-height:84px;
  object-fit:contain;
}

.resource-tile:hover{transform:translateY(-3px)}

.t-18{background:var(--tile-teal)}
.t-1{background:var(--tile-plum)}
.t-2{background:var(--tile-coral)}
.t-3{background:var(--tile-saffron)}
.t-4{background:var(--tile-turquoise)}
.t-5{background:var(--tile-plum)}

.footer-risk{
  text-align:center;
  color:var(--peach);
  font-weight:600;
  max-width:62ch;
  margin:34px auto 0;
  padding:0 20px;
}

.transparency{
  max-width:980px;
  margin:0 auto;
  padding:0 20px 0;
}

.transparency > h2{
  text-align:center;
  color:var(--mint);
  font-size:1.25rem;
  letter-spacing:.14em;
  margin:52px 0 24px;
}

.transparency-bands{
  display:grid;
  gap:18px;
}

.tband{
  border-radius:var(--radius);
  padding:28px 26px;
}

.tband h3{font-size:1.1rem;margin-bottom:12px}

.tband p{font-size:.94rem;margin-bottom:12px}
.tband p:last-child{margin-bottom:0}

.tband-1{background:var(--coral);color:var(--plum-deep)}
.tband-1 h3{color:var(--plum-deep)}
.tband-2{background:var(--turquoise);color:var(--turquoise-ink)}
.tband-2 h3{color:var(--sapphire-deep)}

.tband-links{
  margin-top:14px;
  font-weight:700;
}

.tband-links a{
  color:var(--sapphire-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

.final-line{
  background:var(--coral);
  color:var(--plum-deep);
  text-align:center;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:18px 16px;
  margin:40px -20px 0;
}

/* ---------- Cookie banner ---------- */

.cookie-banner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:80;
  background:var(--plum);
  border:2px solid var(--turquoise);
  border-radius:16px;
  padding:20px 20px 16px;
  color:var(--mint);
  box-shadow:0 18px 44px rgba(5,20,50,.5);
}

.cookie-banner p{margin:0 0 14px;font-size:.92rem}

.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cookie-actions button{
  font:inherit;
  font-weight:800;
  border:none;
  border-radius:999px;
  padding:.7rem 1.5rem;
  cursor:pointer;
}

.cookie-actions button:first-child{background:var(--saffron);color:var(--ink)}
.cookie-actions button:last-child{background:transparent;color:var(--peach);border:2px solid var(--peach);padding:.58rem 1.3rem}

.cookie-more{
  display:inline-block;
  margin-top:12px;
  color:var(--peach);
  font-size:.88rem;
  text-underline-offset:3px;
}

/* ---------- Internal pages ---------- */

.page-main{
  padding:54px 20px 70px;
}

.page-main .wrap{
  max-width:920px;
}

.page-main h1{
  color:var(--mint);
  font-size:clamp(1.7rem,4.6vw,2.6rem);
  margin-bottom:.35em;
}

.page-lead{
  color:var(--peach);
  font-size:1.05rem;
  max-width:60ch;
}

.page-section{
  margin-top:38px;
  border-top:2px solid rgba(22,199,178,.28);
  padding-top:26px;
}

.page-section h2{
  color:var(--peach);
  font-size:1.3rem;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.page-section h2::before{
  content:"";
  width:12px;
  height:12px;
  background:var(--turquoise);
  transform:rotate(45deg) translateY(.4em);
  flex:none;
  margin-top:6px;
  border-radius:2px;
}

.page-section p{color:var(--mint);max-width:66ch}

.page-section ul{list-style:none}
.page-section li{
  position:relative;
  padding-left:26px;
  margin-bottom:.5rem;
  color:var(--mint);
  max-width:62ch;
}

.page-section li::before{
  content:"";
  position:absolute;
  left:0;
  top:.42em;
  width:10px;
  height:10px;
  background:var(--coral);
  transform:rotate(45deg);
  border-radius:2px;
}

/* Contact form */

.contact-form{
  margin-top:26px;
  display:grid;
  gap:16px;
  max-width:560px;
  background:rgba(4,18,38,.3);
  border:1px solid rgba(22,199,178,.35);
  border-radius:var(--radius);
  padding:24px;
}

.contact-form label{
  display:grid;
  gap:6px;
  font-weight:700;
  color:var(--peach);
  font-size:.92rem;
}

.contact-form input,
.contact-form textarea{
  font:inherit;
  color:var(--mint);
  background:rgba(4,18,38,.45);
  border:2px solid rgba(22,199,178,.5);
  border-radius:10px;
  padding:.75rem .9rem;
  width:100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(216,255,233,.5)}

.contact-form textarea{min-height:130px;resize:vertical}

.contact-form button{
  font:inherit;
  font-weight:800;
  background:var(--saffron);
  color:var(--ink);
  border:none;
  border-radius:999px;
  padding:.9rem 1.6rem;
  cursor:pointer;
  justify-self:start;
}

.contact-form button:hover{background:var(--coral);color:var(--plum-deep)}

/* ---------- Transition pages ---------- */

.transition-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(150deg,var(--sapphire),var(--plum));
}

.transition-card{
  max-width:560px;
  text-align:center;
  background:var(--marine);
  border:3px solid var(--turquoise);
  border-radius:var(--radius);
  padding:44px 30px;
  box-shadow:0 22px 50px rgba(5,20,50,.5);
}

.transition-card h1{color:var(--mint);font-size:1.7rem}

.transition-card p{
  color:var(--peach);
  margin-bottom:26px;
}

.transition-fallback{
  display:inline-flex;
  background:var(--saffron);
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  padding:.9rem 1.8rem;
  border-radius:999px;
}

.transition-fallback:hover{background:var(--coral);color:var(--plum-deep)}

.transition-note{
  font-size:.8rem;
  color:var(--mint);
  opacity:.75;
  margin:22px 0 0;
}

/* ---------- Thank you ---------- */

.thankyou{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(150deg,var(--sapphire),var(--plum));
}

.thankyou-card{
  max-width:520px;
  text-align:center;
  background:var(--marine);
  border:3px solid var(--turquoise);
  border-radius:var(--radius);
  padding:46px 30px;
}

.thankyou-card h1{color:var(--mint)}

.thankyou-card p{color:var(--peach)}

.thankyou-card .back-link{
  display:inline-flex;
  margin-top:10px;
  background:var(--saffron);
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  padding:.85rem 1.7rem;
  border-radius:999px;
}

.thankyou-card .back-link:hover{background:var(--coral);color:var(--plum-deep)}

/* ---------- Responsive ---------- */

@media (min-width:480px){
  .resource-grid{grid-template-columns:repeat(3,1fr)}
  .card-bullets{grid-template-columns:repeat(2,1fr);gap:9px 22px}
}

@media (min-width:768px){
  .card-side{
    justify-content:flex-end;
    border-top:0;
    border-left:1px solid rgba(216,255,233,.18);
    padding:0 0 0 24px;
    flex-direction:column;
    align-items:stretch;
    text-align:right;
    gap:16px;
  }
  .card-side .card-cta{justify-self:end}
  .transparency-bands{grid-template-columns:1fr 1fr}
  .cookie-banner{left:auto;right:20px;bottom:20px;max-width:420px}
}

@media (min-width:1024px){
  .nav-toggle{display:none}

  .site-nav{
    display:flex;
    align-items:center;
    gap:26px;
    margin-left:auto;
  }

  .site-nav a{
    color:var(--mint);
    text-decoration:none;
    font-weight:700;
    font-size:.95rem;
    border-bottom:3px solid transparent;
    padding-bottom:4px;
    white-space:nowrap;
  }

  .site-nav a:hover{color:var(--peach);border-bottom-color:var(--turquoise)}

  .hero-inner{
    grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
    align-items:stretch;
    gap:40px;
    padding-top:64px;
  }

  .criteria-panel{
    align-self:stretch;
    transform:rotate(-1.6deg);
    margin:8px 6px 16px 18px;
  }

  .hero h1{max-width:14ch}

  .card{
    grid-template-columns:250px 1fr 220px;
    align-items:center;
    gap:28px;
    padding:30px;
  }

  .card-logo{min-height:150px;padding:20px}
  .card-logo img{max-width:230px}
  .card-side{text-align:right}

  .resource-grid{grid-template-columns:repeat(6,1fr);gap:16px}
  .resource-tile{min-height:104px}
  .resource-tile img{max-height:88px}
}

@media (min-width:1200px){
  .wrap{padding:0 28px}
  .header-main{padding:16px 28px}
  .hero-inner{padding-left:28px;padding-right:28px}
  .transparency{padding-left:28px;padding-right:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}