.elementor-13255 .elementor-element.elementor-element-309533f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.pp-tooltip.pp-tooltip-{{ID}} .pp-tooltip-content{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}/* Start custom CSS */<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hammock 1 vs Hammock 2 — Elementor Blocks</title>

  <!-- ================================================================
       BLOCK 0 — SHARED CSS
       Paste this CSS once in Elementor Site Settings > Custom CSS,
       or keep it in a single HTML widget above all article blocks.
       Every rule is scoped to .nhh to avoid affecting the rest of the site.
  ================================================================= -->
  <style>
    .nhh,
    .nhh * { box-sizing: border-box; }

    .nhh {
      --ink: #17201d;
      --ink-soft: #3e4b46;
      --paper: #fffdf8;
      --cream: #f4eee4;
      --cream-2: #e9dfd1;
      --forest: #173f35;
      --forest-2: #0f2d26;
      --sage: #b9cbbb;
      --terracotta: #a94f35;
      --terracotta-dark: #783421;
      --gold: #e2b563;
      --white: #ffffff;
      --line: #c8beb0;
      --shadow: 0 18px 42px rgba(23, 32, 29, .12);
      color: var(--ink) !important;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 17px;
      line-height: 1.72;
      text-rendering: optimizeLegibility;
    }

    .nhh h1,
    .nhh h2,
    .nhh h3,
    .nhh h4,
    .nhh p,
    .nhh li,
    .nhh th,
    .nhh td,
    .nhh a,
    .nhh span,
    .nhh strong,
    .nhh blockquote { opacity: 1 !important; }

    .nhh h1,
    .nhh h2,
    .nhh h3,
    .nhh h4 {
      margin: 0 0 18px;
      color: inherit !important;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-weight: 850 !important;
      line-height: 1.12;
      letter-spacing: -.035em;
    }

    .nhh h1 { max-width: 980px; font-size: clamp(2.45rem, 6vw, 5.7rem); }
    .nhh h2 { max-width: 900px; font-size: clamp(2rem, 4.2vw, 3.65rem); }
    .nhh h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.02em; }
    .nhh h4 { font-size: 1.04rem; letter-spacing: -.01em; }
    .nhh p { margin: 0 0 18px; color: inherit !important; font-weight: 520; }
    .nhh p:last-child { margin-bottom: 0; }
    .nhh strong { color: inherit !important; font-weight: 800; }
    .nhh a:not(.nhh-btn) { color: var(--terracotta-dark) !important; font-weight: 750; text-decoration-thickness: 2px; text-underline-offset: 3px; }
    .nhh ul,
    .nhh ol { margin: 0; padding-left: 1.25rem; }
    .nhh li { margin: 0 0 10px; color: inherit !important; font-weight: 540; }
    .nhh li::marker { color: var(--terracotta); font-weight: 900; }

    .nhh-section { position: relative; overflow: hidden; margin: 0; padding: clamp(58px, 8vw, 108px) 24px; }
    .nhh-wrap { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto; }
    .nhh-narrow { width: min(850px, 100%); }
    .nhh-lead { max-width: 850px; font-size: clamp(1.08rem, 1.8vw, 1.32rem); line-height: 1.7; }
    .nhh-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 20px;
      color: var(--terracotta-dark) !important;
      font-size: .78rem;
      font-weight: 850 !important;
      letter-spacing: .15em;
      line-height: 1.2;
      text-transform: uppercase;
    }
    .nhh-kicker::before { width: 28px; height: 3px; background: currentColor; content: ""; }
    .nhh-label {
      display: inline-block;
      margin-bottom: 12px;
      color: var(--terracotta-dark) !important;
      font-size: .76rem;
      font-weight: 850 !important;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .nhh-theme--paper { color: var(--ink) !important; background: var(--paper); }
    .nhh-theme--cream { color: var(--ink) !important; background: var(--cream); }
    .nhh-theme--forest { color: var(--white) !important; background: var(--forest); }
    .nhh-theme--charcoal { color: var(--white) !important; background: var(--ink); }
    .nhh-theme--terracotta { color: var(--white) !important; background: var(--terracotta-dark); }
    .nhh-theme--forest .nhh-kicker,
    .nhh-theme--charcoal .nhh-kicker,
    .nhh-theme--terracotta .nhh-kicker,
    .nhh-theme--forest .nhh-label,
    .nhh-theme--charcoal .nhh-label,
    .nhh-theme--terracotta .nhh-label { color: var(--gold) !important; }
    .nhh-theme--forest a:not(.nhh-btn),
    .nhh-theme--charcoal a:not(.nhh-btn),
    .nhh-theme--terracotta a:not(.nhh-btn) { color: #ffe0a5 !important; }

    .nhh-grid { display: grid; gap: 24px; }
    .nhh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nhh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nhh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nhh-grid--aside { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: start; }

    .nhh-card {
      height: 100%;
      padding: clamp(24px, 3.6vw, 38px);
      color: var(--ink) !important;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
    }
    .nhh-card--flat { box-shadow: none; }
    .nhh-card--cream { background: #f7f1e7; }
    .nhh-card--forest { color: var(--white) !important; background: var(--forest-2); border-color: #43685e; }
    .nhh-card--dark { color: var(--white) !important; background: var(--ink); border-color: #3b4944; }
    .nhh-card--accent { color: var(--white) !important; background: var(--terracotta-dark); border-color: #c97458; }
    .nhh-card--forest .nhh-label,
    .nhh-card--dark .nhh-label,
    .nhh-card--accent .nhh-label { color: var(--gold) !important; }
    .nhh-card--forest li::marker,
    .nhh-card--dark li::marker,
    .nhh-card--accent li::marker { color: var(--gold); }

    .nhh-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .nhh-btn {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      padding: 14px 22px;
      color: #ffffff !important;
      background: var(--terracotta-dark) !important;
      border: 2px solid var(--terracotta-dark);
      border-radius: 999px;
      font-size: .94rem;
      font-weight: 850 !important;
      line-height: 1.15;
      text-align: center;
      text-decoration: none !important;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .nhh-btn:hover,
    .nhh-btn:focus-visible { color: #ffffff !important; background: #5f281a !important; border-color: #5f281a; transform: translateY(-2px); }
    .nhh-btn--light { color: var(--forest-2) !important; background: #ffffff !important; border-color: #ffffff; }
    .nhh-btn--light:hover,
    .nhh-btn--light:focus-visible { color: var(--forest-2) !important; background: #f3e9d9 !important; border-color: #f3e9d9; }
    .nhh-btn--outline { color: var(--forest-2) !important; background: transparent !important; border-color: var(--forest-2); }
    .nhh-btn--outline:hover,
    .nhh-btn--outline:focus-visible { color: #ffffff !important; background: var(--forest-2) !important; border-color: var(--forest-2); }
    .nhh-theme--forest .nhh-btn--outline,
    .nhh-theme--charcoal .nhh-btn--outline,
    .nhh-theme--terracotta .nhh-btn--outline { color: #ffffff !important; border-color: #ffffff; }
    .nhh-theme--forest .nhh-btn--outline:hover,
    .nhh-theme--charcoal .nhh-btn--outline:hover,
    .nhh-theme--terracotta .nhh-btn--outline:hover { color: var(--forest-2) !important; background: #ffffff !important; }

    .nhh-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 0; }
    .nhh-pill { padding: 8px 13px; color: var(--forest-2) !important; background: #e3eadf; border: 1px solid #9db5a1; border-radius: 999px; font-size: .83rem; font-weight: 800 !important; }
    .nhh-theme--forest .nhh-pill,
    .nhh-theme--charcoal .nhh-pill,
    .nhh-theme--terracotta .nhh-pill { color: #ffffff !important; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.35); }

    .nhh-number {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      margin-bottom: 18px;
      color: #ffffff !important;
      background: var(--terracotta-dark);
      border-radius: 50%;
      font-size: .9rem;
      font-weight: 900 !important;
    }
    .nhh-icon {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      margin-bottom: 18px;
      color: var(--forest-2) !important;
      background: var(--gold);
      border-radius: 14px;
      font-size: 1.15rem;
      font-weight: 900 !important;
    }

    .nhh-note {
      margin-top: 26px;
      padding: 22px 24px;
      color: var(--ink) !important;
      background: #fff5dd;
      border: 1px solid #dbb76a;
      border-left: 6px solid var(--terracotta-dark);
      border-radius: 12px;
    }
    .nhh-theme--forest .nhh-note,
    .nhh-theme--charcoal .nhh-note,
    .nhh-theme--terracotta .nhh-note { color: #ffffff !important; background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.3); border-left-color: var(--gold); }

    .nhh-quote {
      margin: 28px 0 0;
      padding: clamp(24px, 4vw, 38px);
      color: #ffffff !important;
      background: var(--forest-2);
      border: 0;
      border-left: 8px solid var(--gold);
      border-radius: 18px;
      font-size: clamp(1.25rem, 2.6vw, 2rem);
      font-weight: 800 !important;
      line-height: 1.35;
    }
    .nhh-quote--light { color: var(--ink) !important; background: #f8efd9; border-left-color: var(--terracotta); }

    .nhh-table-wrap { overflow-x: auto; margin-top: 30px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
    .nhh-table { width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; color: var(--ink) !important; background: #ffffff; }
    .nhh-table th,
    .nhh-table td { padding: 17px 18px; border: 1px solid #d8d0c4; color: var(--ink) !important; font-size: .94rem; line-height: 1.45; text-align: left; vertical-align: top; }
    .nhh-table thead th { color: #ffffff !important; background: var(--forest-2); font-weight: 850 !important; }
    .nhh-table tbody th { width: 26%; background: #efe7da; font-weight: 820 !important; }
    .nhh-table tbody tr:nth-child(even) td { background: #fbf7f0; }
    .nhh-table-caption { margin-top: 13px; color: var(--ink-soft) !important; font-size: .85rem; font-weight: 560 !important; }

    .nhh-meta { display: flex; flex-wrap: wrap; gap: 12px; }
    .nhh-meta-item { flex: 1 1 200px; padding: 20px; color: var(--ink) !important; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; }
    .nhh-meta-item span { display: block; margin-bottom: 4px; color: var(--terracotta-dark) !important; font-size: .73rem; font-weight: 850 !important; letter-spacing: .1em; text-transform: uppercase; }

    .nhh-choice { position: relative; overflow: hidden; }
    .nhh-choice::after { position: absolute; right: -45px; bottom: -55px; width: 160px; height: 160px; background: rgba(226,181,99,.15); border-radius: 50%; content: ""; }

    .nhh-checklist { list-style: none; padding: 0 !important; }
    .nhh-checklist li { position: relative; padding-left: 31px; }
    .nhh-checklist li::before { position: absolute; top: .18em; left: 0; display: grid; width: 21px; height: 21px; place-items: center; color: #ffffff; background: var(--forest); border-radius: 50%; content: "✓"; font-size: .7rem; font-weight: 900; }
    .nhh-card--forest .nhh-checklist li::before,
    .nhh-card--dark .nhh-checklist li::before,
    .nhh-card--accent .nhh-checklist li::before { color: var(--forest-2); background: var(--gold); }

    .nhh-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; margin-top: 34px; }
    .nhh-vs-mark { align-self: center; display: grid; width: 62px; height: 62px; place-items: center; color: #ffffff !important; background: var(--terracotta-dark); border: 5px solid var(--paper); border-radius: 50%; box-shadow: 0 8px 22px rgba(0,0,0,.17); font-weight: 900 !important; }

    .nhh-faq { display: grid; gap: 14px; margin-top: 30px; }
    .nhh-faq details { color: var(--ink) !important; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(23,32,29,.07); }
    .nhh-faq summary { padding: 20px 54px 20px 22px; color: var(--ink) !important; cursor: pointer; font-size: 1.02rem; font-weight: 820 !important; line-height: 1.4; list-style: none; }
    .nhh-faq summary::-webkit-details-marker { display: none; }
    .nhh-faq summary::after { position: absolute; right: 22px; color: var(--terracotta-dark); content: "+"; font-size: 1.45rem; font-weight: 900; }
    .nhh-faq summary { position: relative; }
    .nhh-faq details[open] summary::after { content: "−"; }
    .nhh-faq details p { padding: 0 22px 22px; color: var(--ink-soft) !important; }

    .nhh-share { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .nhh-share a { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 18px; color: #ffffff !important; background: var(--forest-2); border: 2px solid #ffffff; border-radius: 999px; font-size: .9rem; font-weight: 850 !important; text-decoration: none !important; }
    .nhh-share a:hover,
    .nhh-share a:focus-visible { color: var(--forest-2) !important; background: var(--gold); border-color: var(--gold); }

    .nhh-hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(226,181,99,.18), transparent 35%), linear-gradient(120deg, rgba(255,255,255,.03), transparent 55%); content: ""; }
    .nhh-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(28px, 6vw, 70px); align-items: center; }
    .nhh-hero-visual { display: grid; min-height: 420px; place-items: center; padding: 28px; color: #ffffff !important; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.28); border-radius: 30px; box-shadow: 0 28px 60px rgba(0,0,0,.22); text-align: center; }
    .nhh-hero-visual strong { display: block; font-size: clamp(1.5rem, 3vw, 2.4rem); }
    .nhh-hero-visual small { display: block; margin-top: 10px; color: #f6e6c9 !important; font-size: .92rem; font-weight: 650; }

    @media (max-width: 900px) {
      .nhh-grid--3,
      .nhh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nhh-grid--aside,
      .nhh-hero-grid { grid-template-columns: 1fr; }
      .nhh-hero-visual { min-height: 300px; }
    }

    @media (max-width: 680px) {
      .nhh { font-size: 16px; }
      .nhh-section { padding: 54px 18px; }
      .nhh-grid--2,
      .nhh-grid--3,
      .nhh-grid--4,
      .nhh-vs { grid-template-columns: 1fr; }
      .nhh-vs-mark { position: relative; z-index: 2; margin: -8px auto; }
      .nhh-card { padding: 24px 20px; border-radius: 18px; }
      .nhh-btns,
      .nhh-share { align-items: stretch; flex-direction: column; }
      .nhh-btn,
      .nhh-share a { width: 100%; }
      .nhh-table th,
      .nhh-table td { padding: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .nhh-btn { transition: none; }
    }
  </style>
</head>
<body>/* End custom CSS */