/* Custom landing site styles for TentLab.io */
:root {
  /*
   * Global colour palette.  The background is now a neutral dark grey
   * rather than deep navy to provide a more cohesive feel throughout
   * the site.  Accent colours remain unchanged.
   */
  --bg: #1a1a1a;
  --text: #dbe6ee;
  --accent: #18b6ff;
  --button-bg: #18b6ff;
  --button-hover: #1498d4;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);

  /* Prevent horizontal scrolling on both mobile and desktop.  Hiding
     overflow on the x-axis ensures no element can extend the
     viewport width and cause sideways scrolling. */
  overflow-x: hidden;
}

/* Navigation bar */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Dark, semi‑opaque nav bar that blends with the new dark grey body
     while remaining slightly more prominent. */
  background: rgba(0, 0, 0, 0.8);
  /* Increase the nav height by adding more vertical padding.  This
     creates a more substantial header and gives the larger logo
     breathing room. */
  /* Reduce vertical padding to slim down the header bar.  A smaller
     padding decreases the overall height without affecting spacing
     between the logo and navigation buttons. */
  /* Further reduce vertical padding to slim down the header bar.
     This shrinks the overall height of the navigation so it takes
     up less space on the page. */
  /* Reduce vertical padding further to keep the header slim even with
     a larger logo.  Reducing the top/bottom padding lowers the
     overall header height so it doesn't overpower the page. */
  padding: 0.4rem 2rem;
  position: sticky;
  top: 0;
  /* Raise the navigation bar above any overlays such as the editor loading
     screen.  A high z‑index ensures the header always appears on top,
     even when scrolling the editor section with its own overlay. */
  z-index: 2000;
  /* Add a subtle shadow below the header to distinguish it from
     the content beneath. */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

nav .logo img {
  /* Further increase the logo height to make it more prominent.  A
     taller logo helps balance the new button‑style navigation
     links.  Width remains auto to preserve the aspect ratio. */
  /* Increase the logo height further for greater prominence.  A bigger
     logo balances the heavier button‑style navigation on the right. */
  /* Reduce logo height slightly on desktop to slim the header.  The
     width remains auto to preserve aspect ratio. */
  /* Increase the logo height for better visibility on the header.  A larger
     logo helps reinforce the TentLab brand. */
  height: 70px;
  width: auto;
  /* Remove any default margin around the logo to prevent it from
     increasing the header height.  This keeps the logo tight
     vertically while still scaling with its height. */
  margin-top: 0;
  margin-bottom: 0;
}

nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul li {
  /* Increase spacing between navigation links for better visual
     separation. */
  margin-left: 2rem;
}

nav ul li a {
  /* Style the navigation links to look like 3D buttons.  Add
     padding for a larger clickable area, a gradient background to
     suggest depth, rounded corners for a softer appearance and a
     shadow underneath to lift the buttons off the dark header. */
  color: #fff;
  text-decoration: none;
  /* Increase weight for better legibility on coloured buttons */
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-block;
  padding: 0.4rem 1rem;
  /* Use a vertical gradient to give the impression of a raised
     button.  The top colour is slightly lighter than the bottom
     colour to enhance the 3D effect. */
  /* Create a more refined 3D button using a richer gradient and
     subtle inner highlights.  The top colour is lighter and the
     bottom darker to enhance depth.  A border and inset shadows
     produce a crisp edge and inner glow, giving a modern button
     appearance. */
  /* Adjust the gradient colours to slightly lighter values so that
     the white text stands out more clearly. */
  background: linear-gradient(to bottom, #62dcff, #1aa7db);
  border: 1px solid #1aa7db;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  /* Add a subtle text shadow to make the white label stand out
     against the bright button background. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

nav ul li a:hover {
  /* Darken the button on hover and subtly move it down to mimic a
     pressed state. */
  /* Darken the gradient slightly on hover to simulate the button being
     pressed.  Move it down by 1px and reduce the drop shadow to
     enhance the pressed effect.  The inset shadows remain to
     maintain the edge highlights. */
  background: linear-gradient(to bottom, #1aa7db, #0c7bb5);
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ------------------------------------------------------------------
 * Mobile navigation
 *
 * For screens up to 768px, hide the standard nav links and display
 * a hamburger icon.  Clicking the hamburger toggles a pop‑up menu
 * that lists the navigation links vertically.  The hamburger is
 * animated into an X when active.
 */

/* Hamburger icon used on mobile screens.  Hidden on desktop.  The three
   spans form the lines of the icon and are animated when the menu
   is toggled. */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  /* Provide a right margin equal to the top padding on mobile so the
     hamburger isn’t flush against the edge of the screen.  Without
     this the icon appears too far right. */
  margin-right: 0.8rem;
}
.hamburger span {
  height: 3px;
  width: 24px;
  background: var(--accent);
  margin: 4px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Animate the hamburger into a close (X) icon when active */
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu styles.  Hidden by default; becomes visible when the
   `active` class is applied via JavaScript.  Covers the full width
   beneath the header and stacks the links vertically. */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  padding: 1rem 2rem;
  z-index: 99;
}
.mobile-menu a {
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.mobile-menu a:last-child {
  border-bottom: none;
}
.mobile-menu.active {
  display: flex;
}

/* Responsive rules for navigation.  On screens up to 768px the
   primary nav links are hidden and the hamburger icon is shown.
   The header padding is reduced to conserve vertical space. */
@media (max-width: 768px) {
  nav ul.nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  nav {
    padding: 0.8rem 1rem;
  }
}

/* ------------------------------------------------------------------
 * Footer styles
 *
 * The footer comprises three sections: a newsletter sign‑up CTA, a
 * middle bar with social icons and quick links, and a bottom bar
 * for a tagline or copyright.  Colours and spacing mirror the
 * site’s dark theme while using the accent colour for emphasis.
 */
footer {
  background: #0e0e0e;
  color: var(--text);
  width: 100%;
}

/* Newsletter CTA at the top of the footer */
.newsletter {
  text-align: center;
  padding: 3rem 1rem;
  background: rgba(0, 0, 0, 0.85);
}
.newsletter h2 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  color: #fff;
}
.newsletter p {
  margin: 0 auto 2rem;
  max-width: 550px;
  font-size: 1.1rem;
  color: var(--text);
}
/* Signup form styling.  This replaces the previous newsletter-form
   styles.  It centres the input and button and constrains the
   overall width on desktop. */
.signup {
  /* Arrange the input and button in a row and centre the entire sign‑up
     widget.  Add padding, a dark background, rounded corners and a
     subtle shadow to lift it off the page. */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* Allow the sign‑up form to be wider on desktop for greater
     prominence. */
  max-width: 550px;
  margin: 0 auto;
  padding: 0.7rem;
  background: #0b0b0b;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  gap: 0;
}
.signup input[type="email"] {
  /* Allow the input to take up available space within the sign‑up
     container. */
  flex: 1 1 auto;
  /* Increase padding for a larger, easier to interact field */
  padding: 1rem 1.2rem;
  border: none;
  /* Round only the left corners to create a pill shape when paired
     with the button. */
  border-radius: 6px 0 0 6px;
  font-size: 1.05rem;
  background: #222;
  color: #fff;
  outline: none;
}

/* Placeholder colour for the signup input */
.signup input[type="email"]::placeholder {
  color: #888;
}
.signup button {
  /* Match the 3D button style used in the navigation bar.  Rounded
     only on the right side to complement the input’s left rounding. */
  background: linear-gradient(to bottom, #62dcff, #1aa7db);
  border: 1px solid #1aa7db;
  border-radius: 0 6px 6px 0;
  padding: 1rem 2rem;
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}
.signup button:hover {
  /* Darken the button on hover to simulate a pressed effect */
  background: linear-gradient(to bottom, #1aa7db, #0c7bb5);
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* 3D viewer container for editor and home preview */
.viewer {
  width: 100%;
  height: 600px;
  background: transparent;
  margin: 2rem 0;
}

/* Smaller height on mobile for the home page preview */
@media (max-width: 768px) {
  .viewer {
    height: 400px;
  }
}

/* Info tiles container and tiles */
.info-tiles {
  /* Display the info tiles in a responsive grid.  Cards will wrap
     gracefully on smaller screens while expanding on larger
     displays.  Increase the gap slightly to give each card more
     breathing room. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}
.info-tile {
  /* Style each tile as a card with a subtle gradient and border to
     give depth.  A rounded rectangle and drop shadow lift the card
     off the dark background.  Increase padding for better
     legibility. */
  background: linear-gradient(180deg, #0f2c4d, #0a2036);
  border: 1px solid #123054;
  padding: 1.5rem 1.75rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  cursor: default;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.info-tile h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
}
.info-tile p {
  /* Show the description by default in the editor preview.  Limit the
     line length for better readability and adjust font size and
     colour for contrast. */
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #c8d7e6;
}
/* Apply a lift and colour shift on hover to convey interactivity. */
.info-tile:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, #123054, #0e2036);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

/* Hide mobile-only elements by default.  They will be shown via
   media queries when the viewport is small. */
.mobile-controls {
  display: none;
}
.mobile-close {
  display: none;
}

/* Mobile-specific styles.  These rules apply only on small screens
   (up to 768px wide) and restructure the editor preview for a
   phone-friendly layout.  They also restore collapsible info tiles
   and introduce toggle buttons for the customize tree and
   inspector panels. */
@media (max-width: 768px) {
  /* Display the info tiles in two columns on mobile. */
  .info-tiles {
    grid-template-columns: repeat(2, 1fr);
    /* Add horizontal margins so the tiles don't hug the edges of the
       screen.  This also reduces the vertical margin slightly to
       conserve space on smaller devices. */
    margin: 1rem;
    gap: 1rem;
  }
  /* Collapse info tile descriptions on mobile.  Clicking a tile will
     toggle the .active class to expand it. */
  .info-tiles .info-tile p {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.4s ease;
  }
  .info-tiles .info-tile.active p {
    max-height: 200px;
    margin-top: 0.4rem;
  }
  /* Make the tiles slightly smaller on mobile by reducing their
     internal padding. */
  .info-tiles .info-tile {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
  /* Stack the editor columns vertically so the 3D model appears
     above the menus.  The canvas consumes most of the viewport
     height on mobile. */
  .demo-main {
    flex-direction: column;
  }
  .demo-canvas {
    /* Occupy roughly 55% of the viewport height.  Adjust to suit
       the desired emphasis on the 3D model. */
    flex: none;
    height: 55vh;
  }
  /* Hide the sidebar and inspector by default on mobile.  They
     become off‑canvas panels that slide in when toggled. */
  /* Configure the customise and inspector panels as bubble pop‑ups.
     They appear centred with limited height and width. */
  .demo-sidebar,
  .demo-inspector {
    /* Hide panels by default on mobile.  When visible they become
       floating pop‑ups centred within the viewport.  Adjust the
       top offset to leave space for the nav and toolbar so they
       don't overlap. */
    display: none;
    position: fixed;
    /* Position the floating panels lower in the viewport on mobile so they
       do not overlap the top navigation and toolbar.  A 25% top offset
       leaves sufficient room at the top. */
    top: 25%;
    left: 5%;
    right: 5%;
    bottom: auto;
    width: auto;
    max-width: 90%;
    max-height: 70vh;
    background: #0b2238;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    padding: 1rem 1.2rem;
    z-index: 1500;
  }
  .demo-sidebar.mobile-visible,
  .demo-inspector.mobile-visible {
    display: block;
  }
  /* Insert a mobile-only close button at the top of panels. */
  .demo-sidebar .mobile-close,
  .demo-inspector .mobile-close {
    display: block;
    background: none;
    border: none;
    color: #dfeaff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    margin-bottom: 0.5rem;
  }
  /* Show the mobile control buttons for toggling panels. */
  .mobile-controls {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem;
  }
  .mobile-toggle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #123054;
    color: #dfeaff;
    border: 1px solid #0e2036;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: center;
  }
  .mobile-toggle:hover {
    background: #0e2036;
  }
  /* Hide the mobile controls on desktop. */

  /* Allow vertical page scrolling on mobile while interacting with the
     3D preview.  Without this, OrbitControls consume all touch events
     and prevent the page from scrolling.  Setting the touch-action to
     pan-y lets vertical swipes scroll the page while horizontal
     swipes still rotate the model. */
  .demo-canvas model-viewer {
    touch-action: pan-y !important;
  }
}

/* Preview section styling */
.preview {
  text-align: center;
  /* Reduce vertical padding around the home page preview section.  The
     previous 3rem top and bottom margins created large gaps above
     and below the tent.  A smaller padding tightens the layout and
     brings the preview closer to the surrounding content. */
  padding: 1.5rem 1rem;
}
.preview h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.preview p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Middle footer section with social icons and nav links */
.footer-links {
  background: #111;
  padding: 2rem 1rem;
  text-align: center;
}
.footer-links .social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.footer-links .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.footer-links .social-icons img {
  width: 36px;
  height: 36px;
  /* Show social icons in their original shape rather than cropping them into circles.
     Removing the full border radius allows the icons' native silhouettes to be visible.
     A small corner radius softens the edges slightly without masking the logo. */
  /* Do not clip or round the social icons.  Let each icon display
     using its native shape so no circular cropping occurs. */
  border-radius: 0;
  object-fit: contain;
  transition: transform 0.2s ease;
}
.footer-links .social-icons a:hover img {
  /* Slightly enlarge icons on hover to provide feedback */
  transform: scale(1.1);
}
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-nav li a {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}
.footer-nav li a:hover {
  color: var(--accent);
}

/* Bottom footer bar */
.footer-bottom {
  background: #0b0b0b;
  padding: 1rem 1rem;
  text-align: center;
  color: #777;
  font-size: 0.9rem;
  border-top: 1px solid #222;
}

/* Centre and anchor the hero call‑to‑action near the bottom of the hero.
   The new hero-cta button uses absolute positioning to sit over the
   hero background image.  It is centred horizontally and offset
   from the bottom to avoid overlapping the image’s shadow. */
/* Hero call‑to‑action positioning
   --------------------------------
   Position the button centrally across the hero section and move it
   upward so it aligns roughly with the bottom of the text block.  It
   uses absolute positioning relative to the hero container, which is
   set to position:relative.  The left 50% and translateX(-50%) centre
   it horizontally.  The bottom percentage sets how far it sits
   above the bottom edge of the hero; increasing this value moves the
   button upward.  Adjust responsive values for mobile below. */
.hero-cta {
  position: absolute;
  /* Centre the button horizontally within the hero.  Setting left
     to 50% and translating −50% ensures the button is centred
     regardless of the hero’s internal padding. */
  left: 50%;
  transform: translateX(-50%);
  /* Move the button up from the bottom to align with the end of the
     hero text.  A larger percentage raises the button higher. */
  bottom: 22%;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero-cta {
    /* On mobile, centre the button horizontally at 50% and adjust
       the bottom offset so it sits below the text group */
    left: 50%;
    bottom: 15%;
  }
}

/* Prevent the hero call‑to‑action from shifting on hover.  The base
   .btn:hover rule applies a translateY(1px) for all buttons to
   simulate a pressed state, but that causes the hero button to
   ‘wiggle’ because it already uses transform for centring.  Override
   the transform so it keeps only the horizontal centring on hover. */
.hero-cta:hover,
.hero-cta.btn:hover {
  transform: translateX(-50%);
}

/* Style links and separators within the bottom footer bar */
.footer-bottom a {
  color: var(--text);
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.2s ease;
}
.footer-bottom a:hover {
  color: var(--accent);
}
.footer-separator {
  margin: 0 0.5rem;
  color: #555;
}

/* Position the legal links on their own line above the copyright */
.footer-bottom .legal-links {
  margin-bottom: 0.5rem;
}

/* Responsive adjustments for the newsletter form on small screens */
@media (max-width: 600px) {
  /* On small screens, centre the entire newsletter section and restrict its
     width so it doesn’t span edge‑to‑edge.  Setting max‑width to 90% and
     centring it ensures the sign‑up block sits neatly in the middle of
     the viewport.  Reduce vertical padding to keep the section compact. */
  /* On mobile screens, reduce the width of the newsletter box
     itself and centre it within the footer.  A fixed width
     percentage (rather than max‑width) ensures the box stays
     narrower than the viewport.  The auto margins horizontally
     centre it. */
  .newsletter {
    /* On mobile screens, centre the newsletter and limit its width so
       the form doesn’t run edge‑to‑edge.  Use a percentage width
       combined with a sensible max‑width to control the size on
       different devices.  A single margin declaration centres the
       block horizontally. */
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 0;
  }
  /* Stack the email field and button vertically.  Allow the form to take up
     the full width of its parent (which is constrained by the newsletter
     container) and eliminate extra margins so the fields are aligned
     perfectly down the centre. */
  .signup {
    /* Stack the form fields vertically and centre the form within
       the newsletter container on mobile.  Constrain the form’s
       width so it doesn’t run edge‑to‑edge, then centre it using
       auto margins.  Apply a dark background, padding and rounded
       corners for a cohesive card‑like appearance. */
    flex-direction: column;
    width: 90%;
    max-width: 350px;
    margin: 0 auto;
    padding: 0.5rem;
    background: #0b0b0b;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    gap: 0.5rem;
  }
  .signup input[type="email"],
  .signup button {
    width: 100%;
    border-radius: 6px;
  }

  /* Remove the flex basis that applies on larger screens.  When the
     form is stacked vertically, the original flex:1 1 250px on the
     input causes it to become tall.  Reset flex to none on
     mobile so the fields use their natural height. */
  .signup input[type="email"] {
    flex: none;
  }
  .signup button {
    flex: none;
  }
}

/* Hero section */

/* Hero section now uses an image tag as a backdrop instead of
   background-image, allowing the full artwork to be visible on all
   screen sizes.  The overlay ensures the headline and button remain
   legible. */
/*
 * Hero banner using the new hero image.  The banner scales to fill
 * most of the viewport height.  A semi‑transparent overlay darkens
 * the image slightly so that white text remains clear.  The
 * content within the banner is centred both vertically and
 * horizontally.
 */
.hero {
  position: relative;
  width: 100%;
  height: 80vh;
  background-image: url('newhero.png');
  /* Ensure the entire hero image remains visible across all screen sizes.
     Using `contain` prevents the right‑side illustration from being cropped
     off when the viewport narrows.  The image anchors to the right so
     the tent and starburst stay on the right while leaving a dark
     area on the left for the copy. */
  background-size: contain;
  background-position: right center;
  /* Prevent the hero image from tiling when it doesn’t cover the entire
     container.  Without this the artwork repeats vertically on tall
     screens. */
  background-repeat: no-repeat;
  /* Use flexbox to position the hero content on the left and leave room
     for the background artwork on the right.  Align the content to
     the left side so the tent graphic doesn't overlap the headline. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Horizontal padding adds breathing room from the viewport edge.
     Only the left padding is specified to avoid shifting the button
     centring calculation. */
  padding-left: 8%;
  text-align: left;
  overflow: hidden;
}


/* Dark overlay on hero background */
.hero::after {
  /* Disabled overlay.  Remove the dark overlay so that no shadow
     covers the hero image.  The pseudo‑element still exists but
     doesn’t render anything. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
}

/* Hero text container */
.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  /* Constrain the hero copy to half of the hero width so it never
     overlaps the tent artwork.  The max‑width of 50% leaves the
     remaining half for the illustration on wide screens. */
  max-width: 50%;
  padding: 0 20px;
  /* Left‑align all inner text instead of centring */
  text-align: left;
}

.hero-content h1 {
  /* Scale the heading text with the viewport.  The clamp() function
     ensures the heading never shrinks below 2rem on small devices and
     never exceeds 3.5rem on very large screens. */
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 1rem;
  /* Constrain the width of the headline so it wraps sooner and
     doesn’t encroach on the tent graphic.  Using ch units ensures
     the measurement responds to font changes while keeping the
     heading within roughly 18 characters per line. */
  max-width: 18ch;
}

.hero-content p {
  /* Scale the subheading text relative to the viewport size.  The
     clamp() range keeps the text from becoming too small or too
     large while still being responsive. */
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 2rem;
  /* Limit the width of the tagline so it doesn’t stretch across the
     entire left column and overlap the hero artwork at certain
     breakpoints.  Using ch units provides a character‑based measure
     that adapts gracefully to font size changes. */
  max-width: 32ch;
}

/* Style the bullet list used in the hero copy.  By default it uses
   disc bullets and aligns neatly with the rest of the text.  The
   max‑width matches the tagline to prevent the list from stretching
   too far across the hero. */
.hero-content ul.hero-bullets {
  /* Provide a small top margin so the list doesn’t butt up against
     the heading after removing the lead‑in sentence */
  margin: 0.5rem 0 2rem 1rem;
  padding-left: 1rem;
  list-style-type: disc;
  max-width: 32ch;

  /* Increase the font size of the hero bullet list so it’s easier to
     read on all screen sizes.  A larger rem value makes the text
     more prominent without overwhelming the layout. */
  font-size: 1.4rem;
}
.hero-content ul.hero-bullets li {
  margin: 0.2rem 0;
}

/* Responsive adjustments for hero banner */
/*
 * Mobile adjustments for the hero section.  On narrow screens the hero
 * height is reduced and padding is increased around the text to
 * minimise the top and bottom empty space.  The tent illustration is
 * nudged further right via background‑position so that the copy
 * doesn’t overlap it.  Text remains left‑aligned and constrained to
 * half the banner width.  The call‑to‑action uses responsive sizing via
 * clamp(), so no explicit override is necessary here.
 */
@media (max-width: 768px) {
  .hero {
    /* Reduce the hero height further on mobile so there’s less empty
       space above and below the content.  45vh provides enough
       vertical room to display the tent artwork while keeping the
       overall layout compact. */
    height: 45vh;
    /* Reduce vertical padding.  1rem top/bottom keeps the copy from
       touching the edges without creating excessive whitespace. */
    padding: 1rem 1rem;
    /* Use a smaller left margin (about 5%) so the copy sits closer
       to the edge, as requested. */
    padding-left: 5%;
    /* Anchor the text to the left */
    justify-content: flex-start;
    /* Centre the items vertically on mobile so the copy sits on the
       centre line of the hero. */
    align-items: center;
    /* Move the background artwork further to the right so the text never
       overlaps the tent */
    background-position: 80% center;
  }
  .hero-content {
    /* Maintain the 50% width cap and left alignment for the copy */
    max-width: 50%;
    text-align: left;
  }

  /* Further tweak typography on mobile.  Reduce the size of the
     headline and constrain its width so it doesn’t wrap awkwardly or
     encroach on the tent. */
  .hero-content h1 {
    /* Reduce the headline size further on mobile and limit its line
       length so that it wraps naturally without spilling over the
       tent artwork. */
    font-size: 1.8rem;
    max-width: 17ch;
  }
  .hero-content p {
    /* Constrain the tagline width further on mobile */
    max-width: 28ch;
  }

  /* Constrain the bullet list width further on mobile so it stays
     within the same column as the headline and tagline. */
  .hero-content ul.hero-bullets {
    max-width: 28ch;
    margin-bottom: 2rem;
  }
}

.btn {
  /* Apply the same 3D styling used for navigation and other buttons
     across the site to ensure visual consistency.  A vertical
     gradient with a lighter top and darker bottom gives the button
     depth, while a subtle border, rounded corners and shadows
     complete the raised effect. */
  background: linear-gradient(to bottom, #62dcff, #1aa7db);
  border: 1px solid #1aa7db;
  border-radius: 6px;
  color: #fff;
  /* Responsive padding and font sizing.  The values scale smoothly
     with the viewport to maintain comfortable click targets on
     mobile without being overly large on desktop. */
  padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(1.6rem, 3vw, 2rem);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  /* Make the text bold like the header navigation buttons */
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
  /* Centre the button within its parent container without it
     expanding to full width.  fit-content ensures the button
     width matches its content, and auto margins centre it. */
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.btn:hover {
  /* Darken the gradient and move the button down slightly on hover to
     simulate a pressed state.  Maintain the inset shadows so the
     edges remain defined. */
  background: linear-gradient(to bottom, #1aa7db, #0c7bb5);
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Promo image section (displays the untinted hero artwork) */
.promo {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* ------------------------------------------------------------------
 * Catalog grid and product card styles
 *
 * The catalog page displays products in a responsive grid.  Each
 * product card includes an image, title, price and a hidden panel
 * with more details and an "Order Now" button.  Cards expand to
 * reveal the info panel when clicked, while collapsing any other
 * open panels.  The styling echoes the dark theme and accent
 * colours used throughout the site.
 */
/* Catalog grid: two columns on all screen sizes.  Using
   repeat(2, 1fr) ensures two cards per row.  A max width constrains
   the overall grid on larger screens while allowing the cards to
   scale down evenly on smaller devices. */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.product-card {
  background: #111;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.product-card h3 {
  font-size: 1.3rem;
  margin: 1rem;
  color: #fff;
}

.product-card .price {
  font-size: 1.6rem;
  margin: 0 1rem 1rem;
  color: var(--accent);
  font-weight: 700;
}

.product-card .info-panel {
  display: none;
  padding: 1rem;
  background: #0b0b0b;
  border-top: 1px solid #222;
}

.product-card .info-panel ul {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
  list-style-type: disc;
  color: var(--text);
}

.product-card .info-panel li {
  margin: 0.3rem 0;
}

.product-card .info-panel .order-btn {
  margin-top: 0.5rem;
  display: inline-block;
}

/* Reduce gaps between cards on smaller screens */
@media (max-width: 600px) {
  .catalog-grid {
    gap: 1rem;
  }
}

/*
 * The promo image (your orange event‑kit artwork) is displayed
 * below the hero.  It scales down on smaller screens so the
 * entire picture remains in view and doesn’t require scrolling.
 * The max‑width prevents the image from overwhelming the page on
 * desktop displays, while the percentage width ensures it grows
 * and shrinks fluidly with the viewport.
 */
.promo-image {
  /* On wide screens, the promo image should take up only a
     moderate portion of the viewport so the user doesn’t have to
     scroll excessively.  The max‑width keeps the image from
     dominating the layout on larger monitors.  On very small
     screens the percentage width will shrink the image accordingly. */
  /* Make the promo art significantly smaller so it doesn’t dominate
     the page.  The image takes up half the available width and
     remains responsive on smaller screens. */
  /* Reduce the width further so the orange promotional artwork never
     dominates the page.  Forty percent of the available width
     coupled with a sensible max‑width keeps the image contained on
     large monitors while still looking good on mobile. */
  /* Show the orange promotional artwork at a modest size.  The
     width scales with the viewport (up to 85% of the available
     width on small devices) but never exceeds 450px on larger
     screens.  This ensures the entire image is visible without
     forcing users to scroll excessively. */
  /* Scale the orange promotional artwork with the viewport.  On
     smaller screens the image will expand to fill the container
     width, but on larger displays it will never exceed 450px in
     width.  This keeps the promo art from dominating the page.
     The auto margins centre the image within its container. */
  width: 100%;
  /* Limit the promo artwork to 380px on large screens so it
     occupies roughly one third of the viewport width and stays
     proportionate to the rest of the layout. */
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Slider styles */
.slider-container {
  /* The slider maintains a margin on all sides so that content never
     touches the viewport edges.  Padding provides internal spacing.
     A max-width is omitted so the slider can scale with the
     available width while respecting the 5% margins via padding. */
  margin: 5% auto;
  padding: 5%;
  box-sizing: border-box;
  /* Allow slides to peek into view by removing overflow clipping */
  position: relative;
  overflow: visible;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.slider {
  /* Horizontal scroll with snap points */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
  padding-bottom: 1rem;
}

.slide {
  /* Each slide takes up roughly three‑quarters of the container
     width so that a portion of the next and previous items remains
     visible.  This value strikes a balance between letting the
     product image be large enough to appreciate while still
     signalling to the user that more items are available. */
  flex: 0 0 75%;
  user-select: none;
  scroll-snap-align: center;
  border-radius: 8px;
  overflow: hidden;
}

.slide img {
  width: 100%;
  display: block;
}

.slider-buttons {
  text-align: center;
  margin-top: 1rem;
}

.slider-buttons button {
  background: var(--button-bg);
  color: #fff;
  border: none;
  padding: 0.4rem 1rem;
  margin: 0 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.slider-buttons button:hover {
  background: var(--button-hover);
}

/* Product info section displayed below catalog slider when a card is clicked */
.product-info {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  border-radius: 6px;
  display: none;
}

.product-info h2 {
  margin-top: 0;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.product-info p {
  margin: 0.5rem 0 1rem;
  font-size: 1.05rem;
}

.product-info .cta-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: var(--button-bg);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}
.product-info .cta-btn:hover {
  background: var(--button-hover);
}

/* Contact page */
.contact-wrapper {
  max-width: 800px;
  margin: 3rem auto;
  text-align: center;
  padding: 0 20px;
}

.contact-wrapper h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-wrapper p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Styling for the editor disclaimer on the contact page.  Use a slightly
   smaller font size and muted color to differentiate it from the main
   body copy. */
.editor-disclaimer {
  font-size: 0.95rem;
  color: #ccc;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* ----------------------------------------------------------------
 * Contact form styling
 *
 * The contact form uses a dark background and white text to blend
 * with the rest of the site.  Inputs and textarea are full width
 * with rounded corners, and the button reuses the existing .btn
 * styling.  The form fields stack vertically with consistent
 * spacing.
 */
.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.contact-form .form-group {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-form label {
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #fff;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #1f1f1f;
  color: #fff;
  font-size: 1rem;
}
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: #1f1f1f;
  color: #fff;
  font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='5 7 10 12 15 7' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa;
}
.contact-form .btn {
  margin-top: 0.5rem;
}

/* Contact options (call/text) wrapper.  Spaces the buttons evenly and
   centers them under the form for a cohesive layout. */
.contact-options {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons within contact options reuse the site’s primary button style.  We
   rely on the .btn class for the gradient and shadows; however, ensure
   anchors behave like buttons by removing underline and aligning text. */
.contact-options .btn {
  text-decoration: none;
  text-align: center;
  /* Override the default .btn margins and width so the buttons
     align neatly in a row when placed inside .contact-options.  The
     original .btn class centres buttons using auto margins, which
     causes uneven spacing when multiple buttons share a flex
     container. */
  margin: 0;
  width: auto;
}

.contact-icons a {
  margin: 0 1rem;
  font-size: 2.4rem;
  color: var(--accent);
  text-decoration: none;
  vertical-align: middle;
  transition: color 0.2s;
}

.contact-icons a:hover {
  color: var(--button-hover);
}

/* Editor page */
.editor-wrapper {
  max-width: 800px;
  margin: 3rem auto;
  text-align: center;
  padding: 0 20px;
}

.editor-wrapper h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.editor-wrapper p {
  font-size: 1.1rem;
}