/* =========================================================
   HAASDND GLOBAL STYLESHEET
   Hosted on Azure and linked in Squarespace Header Code Injection.

   Naming
     hdd-[component]                 a block, e.g. hdd-services
     hdd-[component]__[element]      a part of it, e.g. hdd-services__tab
     hdd-[component]--[modifier]     a variation, e.g. hdd-card--interactive
     is-[state]                      set by script, e.g. is-open

   Contents
     1. Design tokens
     2. Shared components
        2a. Section
        2b. Card
        2c. Button
        2d. Text link
        2e. Focus
     3. Services block
        3a. Category tabs
        3b. Panel header
        3c. Service list and connector
        3d. Service card
        3e. Brief and detail
        3f. Previous / next
        3g. Footer and status
     4. Animations
     5. Responsive
     6. Reduced motion
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   Change these to restyle every component on the site.
   ========================================================= */
:root {
  /* Color */
  --hdd-ink: #1D2433;
  /* headings, selected states, buttons */
  --hdd-text: #4A5163;
  /* body text */
  --hdd-muted: #7A8194;
  /* notes, labels */
  --hdd-line: #DCE3E6;
  /* card borders */
  --hdd-line-hover: #C6D3D6;
  /* card borders on hover */
  --hdd-connector: #CBD6D9;
  /* connector lines */
  --hdd-accent: #2F6F73;
  /* deep teal: prices, links, open states */
  --hdd-accent-soft: #E3EFEE;
  /* light teal tint */
  --hdd-on-accent: #FFFFFF;
  /* text on teal or ink */
  --hdd-section: #EEF3F3;
  /* section background */
  --hdd-card: #FFFFFF;
  /* card background */

  /* Type */
  --hdd-font: inherit;
  /* inherits the site font */

  /* Shape */
  --hdd-radius-section: 20px;
  --hdd-radius-card: 16px;
  --hdd-radius-control: 14px;
  --hdd-radius-pill: 999px;

  /* Depth: hover shadows use a blur larger than their negative
     spread, so cards look like they move toward the viewer */
  --hdd-shadow: 0 1px 2px rgba(29, 36, 51, .05), 0 2px 4px -2px rgba(29, 36, 51, .06);
  --hdd-shadow-hover: 0 4px 8px -4px rgba(29, 36, 51, .08), 0 16px 28px -10px rgba(29, 36, 51, .18);
  --hdd-shadow-open: 0 4px 8px -4px rgba(47, 111, 115, .12), 0 20px 36px -12px rgba(47, 111, 115, .30);
  --hdd-lift: translateY(-2px);

  /* Motion */
  --hdd-ease: cubic-bezier(.2, .8, .2, 1);
  --hdd-fast: .2s;
  --hdd-medium: .3s;
  --hdd-slow: .45s;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Offside&family=Plaster&display=swap');
.offside-regular {
  font-family: "Offside", sans-serif;
  font-weight: 400;
  font-style: normal;
}
H1,
H2,
H3 {
  font-family: "Offside", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
   2. SHARED COMPONENTS
   ========================================================= */

/* ---------- 2a. Section: soft rounded background ---------- */
.hdd-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px;
  font-family: var(--hdd-font);
  color: var(--hdd-text);
  background: var(--hdd-section);
  border-radius: var(--hdd-radius-section);
  box-sizing: border-box;
}

.hdd-section *,
.hdd-section *::before,
.hdd-section *::after {
  box-sizing: inherit;
}

/* ---------- 2b. Card ---------- */
.hdd-card {
  background: var(--hdd-card);
  border: 1px solid var(--hdd-line);
  border-radius: var(--hdd-radius-card);
  box-shadow: var(--hdd-shadow);
  transition:
    border-color var(--hdd-fast) ease,
    background-color var(--hdd-fast) ease,
    box-shadow var(--hdd-medium) ease,
    transform var(--hdd-medium) var(--hdd-ease);
}

/* A card that is clickable: lifts toward the viewer on hover */
.hdd-card--interactive {
  cursor: pointer;
}

.hdd-card--interactive:hover {
  border-color: var(--hdd-accent);
  box-shadow: var(--hdd-shadow-hover);
  transform: var(--hdd-lift);
}

/* Resets so a <button> can be a card. :where() keeps this at zero
   specificity, so component classes can set their own font sizes. */
:where(button.hdd-card) {
  appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* ---------- 2c. Button: dark pill ---------- */
.hdd-btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hdd-on-accent);
  text-decoration: none;
  background: var(--hdd-ink);
  border: 0;
  border-radius: var(--hdd-radius-pill);
  cursor: pointer;
  transition: background-color var(--hdd-fast) ease;
}

.hdd-btn:hover {
  color: var(--hdd-on-accent);
  background: var(--hdd-accent);
}

/* ---------- 2d. Text link with arrow ---------- */
.hdd-text-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  margin: -8px -4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--hdd-accent);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.hdd-text-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform .25s var(--hdd-ease);
}

.hdd-text-link--forward:hover svg {
  transform: translateX(3px);
}

.hdd-text-link--back:hover svg {
  transform: translateX(-3px);
}

/* ---------- 2e. Focus ---------- */
.hdd-card--interactive:focus-visible,
.hdd-btn:focus-visible,
.hdd-text-link:focus-visible {
  outline: 2px solid var(--hdd-accent);
  outline-offset: 2px;
}


/* =========================================================
   3. SERVICES BLOCK
   Markup is built by the services script inside
   <div id="hdd-services" class="hdd-services hdd-section">
   ========================================================= */

/* ---------- 3a. Category tabs ---------- */
.hdd-services__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hdd-services__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hdd-ink);
  border-radius: var(--hdd-radius-control);
}

.hdd-services__tab-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--hdd-muted);
}

.hdd-services__tab[aria-selected="true"] {
  color: var(--hdd-on-accent);
  background: var(--hdd-ink);
  border-color: var(--hdd-ink);
}

.hdd-services__tab[aria-selected="true"] .hdd-services__tab-count {
  color: rgba(255, 255, 255, .72);
}

/* ---------- 3b. Panel header ---------- */
.hdd-services__panel {
  padding-top: 32px;
}

.hdd-services__panel:focus {
  outline: none;
}

.hdd-services__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hdd-ink);
}

.hdd-services__lead {
  max-width: 60ch;
  margin: 8px 0 24px;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- 3c. Service list and connector ---------- */
.hdd-services__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
}

.hdd-services__item {
  position: relative;
}

/* Vertical line between items */
.hdd-services__connector {
  position: absolute;
  top: 0;
  bottom: -10px;
  /* bridges the gap to the next card */
  left: -22px;
  width: 2px;
  background: var(--hdd-connector);
}

.hdd-services__item:first-child .hdd-services__connector {
  top: 50%;
}

.hdd-services__item:last-child .hdd-services__connector {
  bottom: 50%;
}

.hdd-services__item:only-child .hdd-services__connector {
  display: none;
}

/* Node dot */
.hdd-services__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--hdd-section);
  border: 2px solid var(--hdd-accent);
  border-radius: 50%;
  transition: background-color .25s ease, transform .25s var(--hdd-ease);
}

/* Short branch from line to card */
.hdd-services__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  background: var(--hdd-connector);
}

.hdd-services__item:hover::before,
.hdd-services__item.is-open::before {
  background: var(--hdd-accent);
}

.hdd-services__item.is-open::before {
  transform: scale(1.15);
}

/* ---------- 3d. Service card ---------- */
.hdd-services__card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.hdd-services__item:hover .hdd-services__card {
  border-color: var(--hdd-line-hover);
  box-shadow: var(--hdd-shadow-hover);
  transform: var(--hdd-lift);
}

.hdd-services__item.is-open .hdd-services__card {
  border-color: var(--hdd-accent);
  box-shadow: var(--hdd-shadow-open);
  transform: var(--hdd-lift);
}

/* Title column: name and price */
.hdd-services__head {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 22px;
  transition:
    flex-basis var(--hdd-slow) var(--hdd-ease),
    background-color .35s ease;
}

.hdd-services__item.is-open .hdd-services__head {
  flex-basis: 35%;
  background: var(--hdd-accent);
}

.hdd-services__name {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--hdd-ink);
  transition: color .35s ease;
}

.hdd-services__price {
  font-size: 14px;
  color: var(--hdd-muted);
  transition: color .35s ease;
}

.hdd-services__price-amount {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hdd-accent);
  transition: color .35s ease;
}

.hdd-services__item.is-open .hdd-services__name,
.hdd-services__item.is-open .hdd-services__price-amount {
  color: var(--hdd-on-accent);
}

.hdd-services__item.is-open .hdd-services__price {
  color: rgba(255, 255, 255, .8);
}

/* ---------- 3e. Brief and detail ---------- */
.hdd-services__body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  transition: height var(--hdd-slow) var(--hdd-ease);
}

/* Brief: short line + Learn more */
.hdd-services__brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
  padding: 20px 22px;
  transition: opacity .25s ease;
}

.hdd-services__item.is-open .hdd-services__brief {
  opacity: 0;
  pointer-events: none;
}

.hdd-services__brief-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* Detail: slides in from the right */
.hdd-services__detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 22px 26px;
  background: var(--hdd-card);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--hdd-slow) var(--hdd-ease),
    visibility 0s linear var(--hdd-slow);
}

.hdd-services__item.is-open .hdd-services__detail {
  transform: none;
  visibility: visible;
  transition: transform var(--hdd-slow) var(--hdd-ease), visibility 0s;
}

.hdd-services__detail-text {
  max-width: 62ch;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hdd-ink);
}

.hdd-services__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

/* ---------- 3f. Previous / next ---------- */
.hdd-services__pager {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.hdd-services__pager-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  padding: 12px 16px;
  border-radius: var(--hdd-radius-control);
}

.hdd-services__pager-btn--next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.hdd-services__pager-label {
  font-size: 13px;
  color: var(--hdd-muted);
}

.hdd-services__pager-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--hdd-ink);
}

/* ---------- 3g. Footer and status ---------- */
.hdd-services__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 20px 22px;
}

.hdd-services__note {
  max-width: 56ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hdd-muted);
}

.hdd-services__status {
  margin: 0;
  padding: 28px 22px;
  font-size: 15px;
  color: var(--hdd-muted);
}

.hdd-services__status a {
  font-weight: 600;
  color: var(--hdd-accent);
}


/* =========================================================
   4. ANIMATIONS
   ========================================================= */
.is-entering {
  animation: hdd-rise .4s var(--hdd-ease) both;
}

@keyframes hdd-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   5. RESPONSIVE
   ========================================================= */

/* Wide screens: every category on one row */
@media (min-width:960px) {
  .hdd-services__tabs {
    grid-template-columns: repeat(var(--hdd-tab-count, 7), 1fr);
  }
}

/* Phones */
@media (max-width:700px) {
  .hdd-section {
    padding: 18px;
  }

  .hdd-services__tabs {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hdd-services__tab {
    padding: 12px;
    font-size: 14px;
  }

  .hdd-services__panel {
    padding-top: 26px;
  }

  .hdd-services__list {
    padding-left: 22px;
  }

  .hdd-services__connector {
    left: -18px;
  }

  .hdd-services__item::before {
    left: -23px;
  }

  .hdd-services__item::after {
    left: -11px;
    width: 11px;
  }

  .hdd-services__card {
    flex-direction: column;
  }

  .hdd-services__head,
  .hdd-services__item.is-open .hdd-services__head {
    flex-basis: auto;
    padding: 16px 18px 4px;
  }

  .hdd-services__item.is-open .hdd-services__head {
    padding-bottom: 16px;
  }

  .hdd-services__brief {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 18px 18px;
  }

  .hdd-services__detail {
    padding: 18px;
  }
}


/* =========================================================
   6. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce) {

  .hdd-section *,
  .hdd-section *::before,
  .hdd-section *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }
}