/* Terms and Conditions accordion on contact page */
.terms-accordion {
  --terms-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --terms-quick-ease: cubic-bezier(0.4, 0, 0.2, 1);
  margin: 22px 0 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 54%),
    var(--section-dark-bg);
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.045);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.terms-accordion::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-orange));
  opacity: 0.55;
  transform: scaleY(0.36);
  transform-origin: top;
  transition: transform 520ms var(--terms-ease), opacity 320ms var(--terms-quick-ease);
}
.terms-accordion.is-expanded::before {
  opacity: 0.95;
  transform: scaleY(1);
}
.terms-accordion__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 58%),
    transparent;
  color: #fff;
  padding: 18px 20px 18px 22px;
  cursor: pointer;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  position: relative;
  transition: background 260ms var(--terms-quick-ease), color 260ms var(--terms-quick-ease);
}
.terms-accordion__button:hover {
  background:
    linear-gradient(90deg, rgba(91,190,255,0.105), rgba(255,145,77,0.03) 62%, rgba(255,255,255,0));
  color: #f7fbff;
}
.terms-accordion__button:active {
  background:
    linear-gradient(90deg, rgba(91,190,255,0.14), rgba(255,145,77,0.045) 62%, rgba(255,255,255,0));
}
.terms-accordion__button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: -5px;
}
.terms-accordion__label {
  transition: transform 320ms var(--terms-ease), color 260ms var(--terms-quick-ease);
}
.terms-accordion__button:hover .terms-accordion__label,
.terms-accordion__button[aria-expanded="true"] .terms-accordion__label {
  color: #ffffff;
  transform: translateX(3px);
}
.terms-accordion__indicator {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  transition: transform 440ms var(--terms-ease), border-color 300ms var(--terms-quick-ease), background 300ms var(--terms-quick-ease);
}
.terms-accordion__indicator-line {
  grid-area: 1 / 1;
  width: 13px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  color: #fff;
  transform-origin: center;
  transition: transform 440ms var(--terms-ease), opacity 260ms var(--terms-quick-ease), width 440ms var(--terms-ease);
}
.terms-accordion__indicator-line:first-child {
  transform: rotate(0deg);
}
.terms-accordion__indicator-line:last-child {
  transform: rotate(90deg);
}
.terms-accordion__button:hover .terms-accordion__indicator {
  border-color: rgba(91,190,255,0.45);
  background: rgba(91,190,255,0.10);
  transform: translateY(-1px);
}
.terms-accordion__button[aria-expanded="true"] {
  background:
    linear-gradient(90deg, rgba(91,190,255,0.12), rgba(255,145,77,0.045) 64%, rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,0.075);
}
.terms-accordion__button[aria-expanded="true"] .terms-accordion__indicator {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,145,77,0.46);
  transform: rotate(180deg);
}
.terms-accordion__button[aria-expanded="true"] .terms-accordion__indicator-line:first-child {
  width: 15px;
}
.terms-accordion__button[aria-expanded="true"] .terms-accordion__indicator-line:last-child {
  opacity: 0;
  transform: rotate(90deg) scaleX(0.18);
}
.terms-accordion__panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 8px 8px);
  transition: max-height 460ms var(--terms-ease), opacity 260ms var(--terms-quick-ease), clip-path 460ms var(--terms-ease);
  will-change: max-height, opacity, clip-path;
}
.terms-accordion__panel.is-open {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0 0 8px 8px);
}
.terms-accordion__content {
  padding: 22px 24px 26px;
  color: #d9e1e6;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.68;
  transform: translate3d(0, -10px, 0);
  opacity: 0;
  transition: transform 420ms var(--terms-ease), opacity 300ms var(--terms-quick-ease);
  will-change: transform, opacity;
}
.terms-accordion__panel.is-open .terms-accordion__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.terms-accordion__content h2 {
  margin: 22px 0 10px;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}
.terms-accordion__content h2:first-child {
  margin-top: 0;
}
.terms-accordion__content p {
  margin: 0 0 14px;
}
.terms-accordion__content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.terms-accordion__content li {
  margin-bottom: 7px;
}
.terms-accordion__content hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 20px 0;
}
/* Large grid item for contact page */
.contact-grid-item {
  background: var(--section-dark-bg);
  min-height: 220px;
  border-radius: 12px;
  margin-top: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Enquire now title on contact page */
.enquire-title.boulder {
  font-family: 'BoulderLocal', 'Playfair Display', serif !important;
  font-size: 1.7em;
  color: #fff;
  margin-top: 32px;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
/* Services quote box under main title */
.services-quote-box {
  background: var(--section-light-bg);
  border-radius: 10px;
  padding: 16px 22px;
  margin: 18px 0 32px 0;
  text-align: left;
  font-size: 1.08em;
  color: var(--muted);
  max-width: 520px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.services-quote-box .contact-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.18s;
}
.services-quote-box .contact-link:hover {
  color: var(--accent-blue);
}
.service-header.accent-purple {
  color: #a259e6 !important; /* A readable, vibrant purple */
}
.service-header.accent-green {
  color: #3ecf4a !important; /* A readable, vibrant green */
}
/* Service headers using LazyDog font */
.service-header.lazydog {
  font-family: 'LazyDog' !important;
  font-size: 2.1em;
  color: var(--accent-orange);
  margin-top: 38px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.service-header.accent-blue {
  color: var(--accent-blue) !important;
}

.service-section {
  margin-bottom: 38px;
}

.service-details {
  min-height: 48px;
  background: var(--section-light-bg);
  border-radius: 8px;
  padding: 18px 18px 18px 18px;
  color: var(--muted);
  font-size: 1.08em;
}

/* =====================
   Services / Rates layout
   ===================== */
.rates-effective {
  color: var(--muted);
  font-size: 1em;
  margin: 0 0 34px 0;
  letter-spacing: 0.3px;
}

.rates-group {
  margin-bottom: 48px;
}

/* Main section headers — Boulder font */
.rates-main-header.boulder {
  font-family: 'BoulderLocal', 'Playfair Display', serif !important;
  font-size: 2.3em;
  letter-spacing: 0.6px;
  margin: 0 0 22px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  color: var(--accent-orange);
}
.rates-main-header.accent-blue { color: var(--accent-blue) !important; }
.rates-main-header.accent-orange { color: var(--accent-orange) !important; }
.rates-main-header.accent-green { color: #3ecf4a !important; }
.rates-main-header.accent-purple { color: #a259e6 !important; }

.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.rate-card {
  background: var(--section-light-bg);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 22px 22px 24px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
}

.rate-card--compact {
  justify-content: flex-start;
}

/* Sub headers — LazyDog font */
.rate-subheader.lazydog {
  font-family: 'LazyDog' !important;
  font-size: 1.55em;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.rate-duration {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.5em;
  color: var(--muted);
  font-weight: 400;
  display: inline-block;
}

.rate-price {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 14px;
}
.rate-price span {
  font-size: 0.65em;
  font-weight: 400;
  color: var(--muted);
}

.rate-intro {
  color: #e9eef2;
  font-weight: 600;
  margin: 0 0 8px 0;
  font-size: 0.98em;
}

.rate-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 1em;
  line-height: 1.55;
}
.rate-list li {
  margin-bottom: 4px;
}

.rate-note {
  color: var(--muted);
  font-style: italic;
  margin: 10px 0 0 0;
  font-size: 0.96em;
}

/* Included checklist */
.included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px 28px;
}
.included-list li {
  position: relative;
  padding-left: 30px;
  color: #e9eef2;
  font-size: 1.06em;
  line-height: 1.5;
}
.included-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-green, #3ecf4a);
  font-weight: 700;
}

.rates-disclaimer {
  color: var(--muted);
  font-style: italic;
  font-size: 0.98em;
  margin: 8px 0 20px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 18px;
}
/* =====================
   Desktop / Larger Screens
   ===================== */

:root{
  --bg:#0f0f10;
  --muted:#9aa0a6;
  --accent:#ffd166;
  --section-dark-bg: rgba(255,255,255,0.02);
  --section-light-bg: rgba(255,255,255,0.045);
  --accent-blue:#0cc0df;
  --accent-orange:#ff914d;
  --glass: rgba(255,255,255,0.06);
  --container:1200px;
}

*{box-sizing:border-box}
html{height:100%;overflow-y:auto;overflow-x:hidden}
body{min-height:100vh;overflow-x:hidden}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#e9eef2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}

h1,h2,h3{margin:0;color:inherit;font-family:'BoulderLocal', 'Playfair Display', serif !important}

/* Local heading font (Boulder) */
@font-face{
  font-family: 'BoulderLocal';
  src: url('Fonts/Boulder-Regular.13ca443f4a8ae9874f248b11.7448865cf2ccd35af366eede31f28f13.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'LazyDog';
  src: url('Fonts/Lazydog.cbc654ce48ffa209e8b8698295c5d75d.fba574ef4dc01d71937608b6f764e2e7.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Sidebar layout: top third logo, middle third nav, bottom third socials */
.sidebar-nav-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 0 0;
}

/* keep equal spacing around the central nav links */
.sidebar-segments {
  /* make segments a full-height column so we can distribute space between them */
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  /* padding at top/bottom moves logo up and socials down equally */
  padding: 60px 0;
}

@media (max-width: 600px) {
  /* reduce the extra padding on narrow screens */
  .sidebar-segments {
    padding: 40px 0;
  }
}
.sidebar-nav-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

/* ensure the nav segment takes available space so the links can be centered vertically */
.sidebar-nav-segment {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sidebar-nav-custom a {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  font-family: 'LazyDog', 'BoulderLocal', 'Playfair Display', serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.18s;
}
.sidebar-nav-custom a:hover {
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 2;
}
.sidebar-nav-custom .cta {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .sidebar-nav-container {
    padding: 8px 0 0 0;
    align-items: flex-start;
  }
  .sidebar-nav-custom {
    gap: 24px;
  }
  .sidebar-nav-custom a {
    font-size: 16px;
  }
}
.sidebar-logo-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0 0 0;
}
.logo-custom {
  height: 140px;
  width: auto;
  display: block;
}

/* clickable logo hover animation */
.sidebar-logo-segment a img,
.sidebar-logo-container a img {
  transition: transform .28s ease, box-shadow .28s ease;
}
.sidebar-logo-segment a:hover img,
.sidebar-logo-container a:hover img {
  transform: scale(1.03);
  box-shadow:0 20px 40px rgba(2,6,23,0.6);
}

@media (max-width: 600px) {
  .sidebar-logo-container {
    padding: 0;
    align-items: center;
    justify-content: center;
    height: 100vh;
    display: flex;
  }
  .logo-custom {
    height: 90px;
    margin: auto;
  }
}
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 200px;
  background: var(--section-dark-bg);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
}
#sidebar .sidebar-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#sidebar .sidebar-logo {
  height: 140px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 32px 0 0 0;
}
#sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  flex: 1;
}
#sidebar .sidebar-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: 32px;
}

/* centered logo placeholder (styles defined below) */

/* Sidebar replacement for header */
#main-header{display:none;} /* hide old top header */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:200px;background:var(--section-dark-bg);padding:36px 16px;display:flex;flex-direction:column;align-items:center;/* center children horizontally */z-index:100;}
#sidebar .brand{
  display:block;
  text-decoration:none;
  color:inherit;
  margin-bottom: 32px;
  text-align:center;
}
#sidebar .brand img{
  height:140px;
  display:block;
  opacity:1;
  transform:none;
  margin:0 auto;
  /* horizontal centering is handled by flex container */
}
#sidebar nav{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:40px;width:100%;}
#sidebar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  font-family: 'LazyDog', 'BoulderLocal', 'Playfair Display', serif;
}
#sidebar nav a:hover{color:#fff;}
#sidebar .cta{
  margin-top: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}
.sidebar-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: auto;
  margin-bottom: 32px;
  width: 100%;
}

/* Sidebar socials at bottom */
.sidebar-socials a svg {
  stroke: var(--muted);
  transition: stroke 0.18s;
}
.sidebar-socials a:hover svg {
  stroke: #fff;
}

/* add video-like hover animation to social icons */
.sidebar-socials a {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sidebar-socials a:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 2;
}

/* retain previous header-inner styles for when header exists */
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;transition:padding .32s cubic-bezier(.2,.9,.3,1)}

/* Header: soft gradient panel with subtle blur to avoid a hard rectangle over content */
#main-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background: linear-gradient(to bottom, rgba(8,8,9,0.08) 0%, rgba(8,8,9,0.06) 40%, rgba(8,8,9,0.02) 80%, rgba(8,8,9,0));
  -webkit-backdrop-filter: blur(6px) saturate(105%);
  backdrop-filter: blur(6px) saturate(105%);
  overflow:visible;
}

/* very subtle feather under the header to blend into the page */
#main-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:16px;pointer-events:none;z-index:61;
  background: linear-gradient(to bottom, rgba(8,8,9,0.12), rgba(8,8,9,0.06) 50%, rgba(8,8,9,0));
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{height:44px;display:block}
.brand-text{font-weight:700;letter-spacing:0.2px;font-family:'BoulderLocal', 'Playfair Display', serif;font-size:18px}
.brand-text span{display:inline-block}
.accent-blue{color:var(--accent-blue)}
.accent-orange{color:var(--accent-orange)}
.brand-films{font-family:'LazyDog', 'BoulderLocal', serif;letter-spacing:0.6px;font-size:18px}

.nav a{color:var(--muted);text-decoration:none;margin-left:22px;font-weight:600;transition:color .18s ease}
.nav a:hover{color:#fff}
.nav .cta{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:6px;color:#fff}

/* removed height-based small-logo resize to avoid layout jitter */
#main-header.shrink .header-inner{padding:10px 0}

/* Centered large logo at top that shrinks into the header */

.logo-center{position:fixed;left:50%;top:72px;transform:translateX(-50%);z-index:220;pointer-events:none;transform-origin:center center;will-change:transform,opacity;transition:transform .42s cubic-bezier(.2,.9,.3,1),opacity .32s ease}
.logo-lg{height:220px;display:block;transform-origin:center center;transition:transform .42s cubic-bezier(.2,.9,.3,1),opacity .32s ease}
.logo-sm{height:44px;display:block;opacity:0;transform:translateY(-6px) scale(.92);transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.3,1);will-change:transform,opacity}

/* When header shrinks, show the small logo and hide/move the centered large logo */
#main-header.shrink ~ main .logo-center,
#main-header.shrink + main .logo-center,
#main-header.shrink .logo-center{
  opacity:0;transform:translateX(-50%) translateY(-22px) scale(.72);
}

#main-header.shrink .logo-sm{transform:translateY(0) scale(1);opacity:1}

/* keep header small logo hidden by default; JS will reveal it when big logo moves */
.brand .logo-sm{opacity:0;transform:translateY(-6px) scale(.92);transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.3,1);will-change:transform,opacity}

/* ensure hero sits below the large logo (handled in main .hero rule below) */

/* Hero */
.hero{padding:320px 0 80px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.hero-inner{text-align:center;max-width:920px;margin:0 auto}

/* Uniform section spacing: ensure consistent gaps between site sections */
.section{padding:80px 0}
.hero-title{font-family:'Playfair Display',serif;font-size:44px;line-height:1.02;margin-bottom:18px;color:#fff}
.hero-sub{color:var(--muted);font-size:18px;margin-bottom:26px}
.hero-cta .button{margin:0 8px}

/* Repeated tail on hero title: show as single long line on wide screens, wrap on small screens */
.hero-title .hero-loop{white-space:nowrap;display:inline-block;margin-left:8px;opacity:0.95}
/* Phone/mobile layout removed for fresh start */

/* Buttons */
.button{display:inline-block;background:#fff;color:#0b0b0b;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.button:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.45)}
.button.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.06)}

/* Sections */
.section-light{background:var(--section-light-bg)}
.section-dark{background:var(--section-dark-bg)}
.section-title{font-size:20px;font-weight:700;margin-bottom:12px}
.muted{color:var(--muted);margin-bottom:20px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px}
.card{background:var(--glass);padding:20px;border-radius:12px;backdrop-filter:blur(6px);min-height:130px}
.card h3{font-size:16px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}

/* Rates */
.rates-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:22px}
.rate-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent);padding:22px;border-radius:12px;min-height:140px}
.rate-card h3{font-size:16px;margin-bottom:8px}
.rate-card .rate-price{font-size:20px;font-weight:800;color:var(--accent);margin-top:12px}


/* Portfolio grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.thumb{display:block;height:220px;border-radius:12px;background-color:#111;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);transition:transform .28s ease,box-shadow .28s ease}
.thumb[style]{background-image:var(--bg)}
.thumb:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}

/* Gallery grid used in new layout */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:20px;}
.grid-item{position:relative;background:#111;border-radius:12px;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;aspect-ratio:1/1;}
.grid-item:hover{transform:scale(1.03);box-shadow:0 10px 30px rgba(0,0,0,0.5);}
/* Labelled selection tiles act as links — show a pointer cursor explicitly. */
.grid-item[data-link]{cursor:pointer;}
.grid-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.45), 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000;
  font-family: 'BoulderLocal', 'Playfair Display', serif;
  font-size: 1.5em;
  text-align: center;
  pointer-events: none;
}
/* shape helpers */
.grid-item.wide{grid-column: span 2;aspect-ratio:2/0.973;} /* two squares side by side */
.grid-item.tall{grid-row: span 2;aspect-ratio:1/2.055;} /* two squares stacked */
.grid-item.large{grid-column: span 2;grid-row: span 2;aspect-ratio:2/2;} /* big square (2x2) */

/* keep existing video grid styles for reuse if needed */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px;align-items:start}
.video-card{background:transparent;border-radius:12px;overflow:visible;position:relative;transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s ease;will-change:transform}
.video-wrapper{position:relative;padding-top:56.25%;background:#000;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);overflow:hidden}
.video-wrapper iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;transition:transform .28s ease}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#fff;text-align:center}
.video-overlay .play{display:none !important}
.video-overlay .play:before{display:none !important;content:''}
.video-overlay .video-title{margin-top:10px;background:rgba(0,0,0,0.45);padding:6px 10px;border-radius:6px;font-size:13px;color:var(--muted)}
.video-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.video-card:hover .video-wrapper iframe{transform:scale(1.03)}


/* About */
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:18px;}
.lead{font-size:18px;color:#e6eef3;margin-bottom:12px}
.about-image{border-radius:12px;/* right column for photos, height determined by its contents */
  overflow:hidden; /* crop any oversized photo */
}

.about-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:12px;
  /* enlarge slightly by default */
  .about-container {
    margin-left: 125px; /* Sidebar width for mobile */
    padding: 20px 18px 20px 12px; /* Add extra right padding */
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;margin-top:18px}
.contact-form label{display:block;margin-bottom:16px;line-height:1.45;font-family:'LazyDog', 'BoulderLocal', 'Playfair Display', serif;letter-spacing:0.35px}
.contact-form label > input:not([type="checkbox"]),.contact-form label > textarea,.contact-form label > select{margin-top:9px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:#121214;color:inherit}
.contact-form input::placeholder,.contact-form textarea::placeholder{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:var(--muted)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:2px solid var(--accent-blue);outline-offset:2px;border-color:transparent}
.contact-form select option{background:#121214;color:#e9eef2}

/* Project Enquiry Form */
.contact-form .form-section{background:var(--section-light-bg);border-radius:10px;padding:20px 22px;margin-bottom:14px}
.form-section-header.boulder{font-family:'BoulderLocal', 'Playfair Display', serif !important;font-size:1.55em;color:var(--accent-orange);font-weight:400;letter-spacing:0.6px;margin:0 0 14px 0;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.07)}
.form-section-header.accent-blue{color:var(--accent-blue) !important}
.form-section-header.accent-orange{color:var(--accent-orange) !important}
.form-section-header.accent-green{color:#3ecf4a !important}
.form-section-header.accent-purple{color:#a259e6 !important}
.form-row-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.form-row-two{grid-template-columns:1fr}}
.form-check-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.form-check-row:last-of-type{border-bottom:none}
.form-check-label{display:flex !important;align-items:center;gap:10px;cursor:pointer;font-size:1em;color:#e9eef2;flex:1;margin-bottom:0 !important}
.form-check-label input[type="checkbox"]{width:18px !important;height:18px !important;flex-shrink:0;cursor:pointer;accent-color:var(--accent-orange)}
.form-price{font-family:'LazyDog', 'BoulderLocal', 'Playfair Display', serif;color:var(--accent);font-weight:600;font-size:0.88em;white-space:nowrap;margin-left:14px;letter-spacing:0.35px}
.form-additional-hours{display:none;padding-top:10px}
.approval-check-row{justify-content:flex-start}
.approval-check-row .form-check-label em{font-style:italic;color:var(--muted)}
.bot-field-wrapper{display:none}
.form-submit-row{margin-top:20px}
.form-validation-message{margin:0 0 12px;color:#ffd2c0;background:rgba(255,145,77,0.12);border:1px solid rgba(255,145,77,0.28);border-radius:10px;padding:12px 14px;line-height:1.5}
.form-status{margin:0 0 22px}
.form-error{background:rgba(255,145,77,0.12);border:1px solid rgba(255,145,77,0.28);border-radius:10px;padding:28px;text-align:center}
.form-error h3{font-family:'BoulderLocal','Playfair Display',serif !important;color:var(--accent-orange);font-size:1.65em;margin:0 0 12px}
.form-error p{color:#e9eef2;line-height:1.65;margin:0}
.contact-service-note p{color:var(--muted);line-height:1.65;margin:0 0 18px}
.contact-logo-grid{margin-top:24px}
.contact-grid-item img{width:100%;height:100%;object-fit:contain;display:block;border-radius:12px;padding:20px}
@media (max-width:600px){.form-check-row{align-items:flex-start;flex-direction:column;gap:5px}.form-price{margin-left:28px;white-space:normal}.contact-form .form-section{padding:16px 14px}.contact-grid-item{min-height:160px}}

@media (max-width:600px){
  .terms-accordion__button{padding:15px 14px;font-size:0.98rem}
  .terms-accordion__content{padding:16px 14px 18px;font-size:0.95rem}
  .terms-accordion__content ul{padding-left:20px}
}

@media (prefers-reduced-motion: reduce){
  .terms-accordion::before,
  .terms-accordion__button,
  .terms-accordion__label,
  .terms-accordion__indicator,
  .terms-accordion__indicator-line,
  .terms-accordion__panel,
  .terms-accordion__content{transition:none;animation:none}
}

/* Confirmation Modal */
.confirm-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}
.confirm-modal-overlay.active{display:flex}
.confirm-modal{background:#1b1b1d;border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:32px;max-width:440px;width:100%;box-shadow:0 28px 70px rgba(0,0,0,0.65)}
.confirm-modal h3{font-family:'BoulderLocal','Playfair Display',serif !important;color:#fff;font-size:1.55em;margin:0 0 12px}
.confirm-modal p{color:var(--muted);margin:0 0 26px;line-height:1.65}
.confirm-modal-actions{display:flex;gap:12px;justify-content:flex-end}

/* Form success state */
.form-success{background:var(--section-light-bg);border-radius:10px;padding:36px;text-align:center}
.form-success h3{font-family:'BoulderLocal','Playfair Display',serif !important;color:#3ecf4a;font-size:1.8em;margin:0 0 12px}
.form-success p{color:var(--muted);line-height:1.65;margin:0}

.vis{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}

/* Footer */
.site-footer{padding:36px 0;text-align:center;border-top:1px solid rgba(255,255,255,0.03);margin-top:40px;color:var(--muted);margin-left:260px}
.site-footer strong{font-weight:700;font-family:'BoulderLocal', 'Playfair Display', serif}

@media (max-width: 600px) {
  .site-footer {
    /* Align footer with the main content panel (sidebar is fixed at 125px on
       mobile). Using the same offset as the content containers keeps the footer
       inside the main panel width instead of spanning 100vw under the sidebar. */
    margin-left: 125px;
    width: auto;
    box-sizing: border-box;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* grid container offset to avoid sidebar */
.grid-container{margin-left:200px;padding:40px 20px;}

/* overlay for section zoom/content */
#section-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.95);visibility:hidden;opacity:0;transform:scale(0);transition:transform .4s ease,opacity .4s ease,visibility .4s;z-index:200;}
#section-overlay.active{visibility:visible;opacity:1;transform:scale(1);}
#section-overlay .overlay-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw;max-height:90vh;overflow-y:auto;padding:40px;background:var(--section-light-bg);border-radius:12px;}
#section-overlay .close{position:absolute;top:16px;right:16px;font-size:24px;color:#fff;background:transparent;border:none;cursor:pointer;}

/* =====================
   Mobile / Smaller Screens (max-width: 600px)
   Index Page (index.html)
   ===================== */
@media (max-width: 600px) {
  /* Home Page (index.html) styles */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .grid-container {
    margin-left: 125px;      /* Aligns grid to the left edge */
    margin-right: 0;     /* Aligns grid to the right edge */
    padding: 8px 8px;    /* Adjust padding as needed */
    width: 70vw;        /* Full viewport width */
    box-sizing: border-box;
    /* Add more properties as needed */
  }
  .grid-item {
    aspect-ratio: 1 / 1 !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    min-width: 0;
    min-height: 80px;
    border-radius: 12px;
    overflow: hidden;
  }
  .grid-item.tall {
    aspect-ratio: 1 / 2 !important;
    grid-column: span 1 !important;
    grid-row: span 2 !important;
    min-width: 0;
    min-height: 80px;
    border-radius: 12px;
    overflow: hidden;
  }
  .grid-item.wide {
    aspect-ratio: 2 / 1 !important;
    grid-column: span 2 !important;
    grid-row: span 1 !important;
    min-width: 0;
    min-height: 80px;
    border-radius: 12px;
    overflow: hidden;
  }
  .grid-item.large {
    aspect-ratio: 1 / 1 !important;
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    min-width: 0;
    min-height: 80px;
    border-radius: 12px;
    overflow: hidden;
  }
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
  }
  .grid-label {
    font-size: 13px;
    left: 70px;
    bottom: 40px;
  }
  #sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: 125px;
    padding: 20px 8px;
    background: var(--section-dark-bg);
    z-index: 100;
    height: 100vh !important;
  }
}


/* =====================
   Desktop / Larger Screens
   Services Page (services.html)
   ===================== */
.services-container {
  margin-left: 200px; /* Sidebar width */
  padding: 0 32px;
  max-width: 900px;
  box-sizing: border-box;
  margin-top: 0;
}

/* =====================
   Mobile / Smaller Screens (max-width: 600px)
   Services Page (services.html)
   ===================== */
@media (max-width: 600px) {
  .services-container {
      margin-left: 125px; /* Sidebar width for mobile */
      padding: 20px 18px 20px 12px; /* Add extra right padding */
      max-width: 100vw;
      box-sizing: border-box;
      margin-top: 0;
    }
}

/* =====================
   Desktop / Larger Screens
   Contact Page (contact.html)
   ===================== */
.contact-container {
  margin-left: 200px; /* Sidebar width */
  padding: 40px 32px;
  max-width: 900px;
  box-sizing: border-box;
}

/* =====================
   Mobile / Smaller Screens (max-width: 600px)
   Contact Page (contact.html)
   ===================== */
@media (max-width: 600px) {
  .contact-container {
    margin-left: 125px; /* Sidebar width for mobile */
    padding: 20px 12px;
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Keep long enquiry-form values (emails, handles, URLs) inside the panel */
  .contact-container,
  .contact-info,
  .contact-info a {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* 16px controls stop iOS Safari from auto-zooming (and shifting the page)
     when a field gains focus on small screens */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px;
  }
  /* Full-width submit gives a comfortable tap target on phones */
  .contact-form .button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* =====================
   Desktop / Larger Screens
   About Us Page (about.html)
   ===================== */
.about-container {
  margin-left: 200px; /* Sidebar width */
  padding: 40px 32px;
  max-width: 900px;
  box-sizing: border-box;
}

/* =====================
   Mobile / Smaller Screens (max-width: 600px)
   About Us Page (about.html)
   ===================== */
@media (max-width: 600px) {
  .about-container {
  margin-left: 125px; /* Sidebar width for mobile */
  padding: 12px 12px;
  max-width: 100vw;
  box-sizing: border-box;
}
}

/* =====================
   Desktop / Larger Screens
   Our Works Page (works.html)
   ===================== */
.works-container {
  margin-left: 200px; /* Sidebar width */
  padding: 40px 32px;
  width: calc(100vw - 220px); /* Full-page width excluding sidebar + some padding */
  max-width: none;
  box-sizing: border-box;
}

/* =====================
   Mobile / Smaller Screens (max-width: 600px)
   Our Works Page (works.html)
   ===================== */
@media (max-width: 600px) {
  .works-container {
    margin-left: 125px; /* Sidebar width for mobile */
    padding: 20px 12px;
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Services container h2, h3 */
.services-container h2, .services-container h3 {
  font-family: 'LazyDog', 'BoulderLocal', 'Playfair Display', serif !important;
}

/* Contact page link colors */
.contact-container a {
  color: #4ecbff !important; /* Lighter blue for better contrast */
  text-decoration: underline;
  transition: color 0.2s;
}
.contact-container a:hover {
  color: #82e0ff !important; /* Even lighter blue on hover */
}

/* Contact info labels */
.contact-info strong {
  font-family: 'LazyDog', 'BoulderLocal', 'Playfair Display', serif !important;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Mobile scroll: single native document scroller.
   The page scrolls on the document itself (not a fixed-height inner box),
   so iOS keeps native edge bounce/elasticity and pull-to-refresh works.
   The fixed sidebar stays out of this flow, so there is still only one
   vertical scroll context and no second scrollbar. */
@media (max-width: 600px) {
  html, body {
    height: auto;             /* grow with content; no clipped inner scroller */
    min-height: 100%;
    overscroll-behavior-y: auto;        /* restore bounce + pull-to-refresh */
    -webkit-overflow-scrolling: touch;  /* iOS momentum scrolling */
  }
  body {
    overflow-y: visible;      /* body is not a separate scroll container */
  }
  main {
    min-height: calc(100vh - 80px); /* fill viewport so footer sits at bottom, no blank space */
    box-sizing: border-box;
  }
  .site-footer {
    position: relative;
    bottom: 0;
    /* width:auto so it fills the space beside the fixed sidebar without the
       100% (= full main width) value pushing it back under the sidebar or
       causing horizontal overflow. margin-left is set in the rule above. */
    width: auto;
    margin-bottom: 0;
  }
}

/* Style Harry and Noah's names in the contact info with the LazyDog font */
.contact-name {
  font-family: 'LazyDog', 'BoulderLocal', 'Playfair Display', serif !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

/* Smooth hover animation for YouTube videos on the works page */
.works-videos {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.works-video-item {
  position: relative;
}

.works-videos iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}
.works-videos iframe:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  z-index: 2;
}

@media (max-width: 900px) {
  .works-videos {
    display: grid;
    grid-template-columns: 1fr;
  }
}