:root{
  --bg:#000;
  --fg:#fff;


  /* accent (subtle, used sparingly) */
  --accent: #6FAFB3;
  --accent-muted: rgba(111,175,179,0.25);
  --accent-faint: rgba(111,175,179,0.12);
  --text-primary: #E6E6E6;
  --text-secondary: #B8B8B8;
  /*--accent: #8C8576;
  --accent-muted: rgba(140, 133, 118, 0.55);
  --accent-faint: rgba(140, 133, 118, 0.25);*/

  /* site margins */
  --mx: 2.5rem;   /* left/right */
  --my: 0.05rem;  /* top */

  /* logo size */
  --logo-width: 18rem;

  /* menu vertical offset (menu only) */
  --menu-offset-y: 2rem;

  /* 1–4: type system */
  --page-max: 1200px;

  --h1-size: 2.2rem;
  --h1-weight: 600;
  --h1-tracking: 0.02em;
  --h1-gap: 1.1rem;
  --header-height: 10rem;
  --font-brand: "Comfortaa", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --text-size: 1.1rem;
  --text-leading: 1.6;
  
  --list-indent: 1.2rem;
  --list-item-gap: 0.9rem;

  /* NEW: content breathing room from the logo edge,
     scales with screen size so large monitors feel balanced */
  --page-pad-left: clamp(2rem, 8vw, 8.5rem);
  --page-pad-right: 2.5rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}

body{
  min-height:100vh;
  /*background:var(--bg);
  color:var(--fg);*/
    
  background: #000;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: var(--text-leading);
}

/* Header wrapper */
.site-header{
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events:none;
}
.site-header a{pointer-events:auto;}

/* Logo */
.site-logo{
  position: fixed;
  top: var(--my);
  left: var(--mx);
  transform: none;
}
.site-logo img{
  width: var(--logo-width);
  height: auto;
  display:block;
}

/* Menu */
.top-menu{
  position: fixed;
  top: calc(var(--my) + var(--menu-offset-y));
  right: var(--mx);
  display:flex;
  gap: 1.6rem;
  font-family: var(--font-brand);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.top-menu a{color:var(--fg);text-decoration:none;}

/* --------------------
   Page layout (IMPROVED)
   - Container is centered
   - Left padding creates intentional offset from logo
   - Scales nicely on larger screens
   -------------------- */
.page{
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;

  padding-left: var(--page-pad-left);
  padding-right: var(--page-pad-right);

  /* Ensure content never scrolls under fixed header */
  padding-top: calc(var(--header-height) + 1.5rem);
  padding-bottom: 3rem;
}

/* --------------------
   Title (h1)
   -------------------- */
.page h1{
  font-family: var(--font-brand);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  margin: 0 0 2rem 0;    /*margin: 0 0 var(--h1-gap) 0;*/
}

/* --------------------
   Body text (p)
   -------------------- */
.page p{
  font-size: var(--text-size);
  line-height: var(--text-leading);
  margin: 0 0 1rem 0;
  opacity: 0.95;
  max-width: none;
}

.page .list-lead{
  margin: 0 0 var(--list-item-gap) 0;
  font-weight: normal;
  line-height: var(--text-leading);
  font-size: var(--text-size);
  opacity: 0.95;
  max-width: 75ch;

}

/* --------------------
   Bullets (ul/li)
   -------------------- */
.page ul{
  margin: 0 0 2rem 0;
  padding-left: var(--list-indent);
  max-width: 75ch;
}

.page li{
  margin: 0 0 var(--list-item-gap) 0;
  line-height: var(--text-leading);
  font-weight: 400; 
  color:var(--text-primary);/* rgba(255,255,255,0.92);*/
}
.page strong{
  font-weight: 600;
}
.page li::marker{
  color: rgba(255,255,255,0.5);
}

/* Footer (match page rhythm + centered container) */
.site-footer{
  position: relative;
  margin-top: 1.6rem;
  padding: 1rem var(--page-pad-right) 1.2rem;

  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;

  /* match page left offset so it lines up with content */
  padding-left: var(--page-pad-left);
  border-top: none;

  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.85;
}
.site-footer::before{
  content: "";
  display: block;
  height: 1px;
  background: var(--accent-faint);
  margin: 0 var(--page-pad-right) 1rem 0;
}

.site-footer p{
  margin: 0 0 0.8rem 0;
}
.site-footer strong{
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.footer-copy{
  margin-top: 1.1rem;
  opacity: 0.8;
}

/* Page content links */
.page a{
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.page a:visited{ color: var(--fg); }
.page a:hover{ text-decoration-thickness: 2px; }

/* Menu underline (cycle + hover) */
.top-menu a{
  position: relative;
  text-decoration: none;
}
.top-menu a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 1px;
  background: rgba(255,255,255,0.75);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.9;
  pointer-events:none;
  animation: menuUnderline 10s ease-in-out infinite;
}
@keyframes menuUnderline{
  0%, 74%, 100% { transform: scaleX(0); }
  82%, 90%      { transform: scaleX(1); }
}
.top-menu a:nth-child(1)::after{ animation-delay: 0s; }
.top-menu a:nth-child(2)::after{ animation-delay: 2s; }
.top-menu a:nth-child(3)::after{ animation-delay: 4s; }
.top-menu a:nth-child(4)::after{ animation-delay: 6s; }
.top-menu a:nth-child(5)::after{ animation-delay: 8s; }
.top-menu a:hover::after{
  animation: none;
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .top-menu a::after{ animation: none; }
}

/* Mobile */
@media (max-width: 640px){
  :root{
    --mx: 1.25rem;
    --my: 1.1rem;
    --logo-width: 14rem;
    --header-height: 12.5rem;
    --h1-size: 1.6rem;
    --menu-offset-y: 0.9rem;

    /* tighten padding on small screens */
    --page-pad-left: 1.25rem;
    --page-pad-right: 1.25rem;
  }
  .top-menu{gap:1rem;font-size:0.75rem;}
}


/* ====================
   Services (collapsible)
   ==================== */

.services h2{
  margin: 2.2rem 0 0.9rem 0;
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.services-section + .services-section{
  margin-top: 1.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Responsive grid: 2 columns when there is room, otherwise 1 */
.service-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
}

/* Service item */
.service-item{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease;
}

/* Make summary feel like a control */
.service-item > summary{
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-family: var(--font-brand);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  user-select: none;
}

.service-item > summary::-webkit-details-marker{ display:none; }

/* Chevron / caret */
.service-item > summary::before{
  content: "▼";
  display: inline-block;
  font-size: 0.75rem;
  transform-origin: 50% 55%;
  transform: rotate(-90deg);
  color: var(--accent);
  opacity: 0.95;
  transition: transform 180ms ease;
}

.service-item[open] > summary::before{
  transform: rotate(0deg);
}

.service-item > summary:hover{
  background: var(--accent-faint);
}

/* Body */
.service-body{
  padding: 0 1rem 1rem 1.75rem; /* indent to align with summary text after caret */
}

.service-body ul{
  margin: 0.55rem 0 0 0;
  padding-left: 1.1rem;
  max-width: none;
}

.service-body li{
  margin: 0 0 0.65rem 0;
  color:#AFAFAF;/* rgba(255,255,255,0.90);*/
}

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


/* Service anchor line */
.service-anchor{
  margin: 0.9rem 0 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-secondary);/* rgba(255,255,255,0.92);*/
  opacity: 0.95;
}
.services-footer{
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--accent-faint);
  margin-bottom: 3.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 70ch;
}


/* Accent interactions (Services only) */
.services .service-item:hover{
  border-color: rgba(111,175,179,0.45);
}

.services .service-item > summary:focus-visible{
  outline: 2px solid rgba(111,175,179,0.75);
  outline-offset: 2px;
  border-radius: 12px;
}

.services .service-item[open]{
  border-color: rgba(111,175,179,0.35);
  background: rgba(111,175,179,0.06);
}

.services .service-item[open] > summary{
  background: rgba(111,175,179,0.08);
}
.services li,
.services p {
  color: var(--text-primary);
}

.service-body .sub-list{
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  padding-left: 1.2rem;   /* extra indent */
}

.service-body .sub-list li{
  margin-bottom: 0.4rem;
  color: var(--text-secondary); /* slightly quieter */
}

.service-body .sub-list li::marker{
  color: var(--accent-muted);
}


/* ====================
   Accent (non-services pages)
   - Keep it subtle, consistent with Services page
   ==================== */

.page-kicker{
  margin: 0 0 1.4rem 0;
  font-family: var(--font-brand);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  opacity: 0.95;
  max-width: 75ch;
}

.accent{ color: var(--accent); }

.page:not(.services) li::marker{
  color: var(--accent-muted);
}