/* ===========================================================
   TobesAV - shared styles
   Full-width technical/editorial dark theme. Black surfaces,
   condensed display type, monospace labels, one red accent,
   an asymmetric index/content grid for rhythm, a faint column
   guide and aperture motif for texture. Static - no scroll
   motion, no canvas/particle effects.
   =========================================================== */

:root{
  --bg:        #0a0a0a;
  --surface:   #111111;
  --border:    rgba(255,255,255,.16);
  --border-soft: rgba(255,255,255,.08);

  --text:      #f4f3ef;
  --muted:     #8f8e89;
  --muted-2:   #5c5b57;

  --accent:    #ff3b1f;

  --edge:  clamp(18px,4vw,56px);
  --idx:   clamp(120px,16vw,220px);

  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Big Shoulders Display", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--font); color:var(--text); line-height:1.6;
  background:var(--bg); -webkit-font-smoothing:antialiased; min-height:100vh;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
ul, ol{ list-style:none }

/* Full-width wrapper - edge padding only, no centering max-width */
.wrap{ width:100%; padding:0 var(--edge) }

/* Faint full-height column guide, purely decorative, static */
.grid-overlay{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  display:grid; grid-template-columns:repeat(12,1fr); padding:0 var(--edge) }
.grid-overlay i{ border-left:1px solid #fff; height:100%; font-style:normal }
.grid-overlay i:last-child{ border-right:1px solid #fff }

/* Type */
h1,h2,h3{ font-weight:700; letter-spacing:-.01em; color:var(--text) }
.lead{ color:var(--muted) }
.mono{ font-family:var(--font-mono) }

/* Nav */
.site-header{ position:relative; z-index:5; border-bottom:1px solid var(--border-soft) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:0; padding-bottom:0;
  padding-left:max(var(--edge), 40px); padding-right:max(var(--edge), 40px) }
.brand{ display:inline-flex; align-items:center }
.brand-mark{ height:66px; width:auto; display:block; flex-shrink:0 }
.nav-right{ display:flex; align-items:center; gap:28px }
.nav-links{ display:flex; gap:26px }
.nav-links a{ color:var(--muted); font-family:var(--font-mono); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em }
.nav-links a:hover, .nav-links a.active{ color:var(--text) }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:34px; height:34px;
  background:transparent; border:1px solid var(--border); color:var(--text); cursor:pointer }
.nav-toggle svg{ width:16px; height:16px }
.mobile-panel{ display:none }

/* Buttons - sharp, mono, uppercase */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.8rem;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em;
  padding:.95em 1.5em; border:1px solid var(--border); cursor:pointer; color:var(--text);
  background:transparent; transition:background .15s, border-color .15s, color .15s }
.btn:hover{ border-color:var(--text) }
.btn-primary{ background:var(--accent); color:#0a0a0a; border-color:var(--accent) }
.btn-primary:hover{ background:var(--accent); filter:brightness(1.1); border-color:var(--accent) }
.link{ color:var(--accent); border-bottom:1px solid rgba(255,59,31,.4) }
.link:hover{ border-color:var(--accent) }

/* Index / content split - the repeating structural rhythm used across the site */
.split{ position:relative; display:grid; grid-template-columns:var(--idx) 1fr; gap:clamp(20px,3vw,48px);
  z-index:2 }
.split .idx{ padding-top:6px }
.split .body{ min-width:0 }

/* Page header */
.page-hero{ position:relative; padding:56px 0 32px; border-bottom:1px solid var(--border-soft); overflow:hidden }
.page-hero h1{ font-family:var(--font-display); font-size:clamp(2.8rem,7.2vw,6.4rem);
  text-transform:uppercase; line-height:.96; letter-spacing:.005em }
.page-hero h1 .out{ color:transparent; -webkit-text-stroke:1.5px var(--text) }
.page-hero p.lead{ margin-top:20px; max-width:52ch; font-size:1.02rem }
.page-hero .cbtns{ display:flex; gap:12px; margin-top:28px }

/* Aperture motif - decorative iris graphic, hero only, static */
.aperture{ position:absolute; top:-18%; right:-6%; z-index:0; pointer-events:none; opacity:.5 }
.aperture svg{ width:clamp(280px,32vw,520px); height:auto }

/* Section */
.section{ position:relative; padding:clamp(56px,7vw,96px) 0; border-top:1px solid var(--border-soft); overflow:hidden }
.section-head{ margin-bottom:clamp(28px,3.5vw,44px) }
.section-head h2{ font-family:var(--font-display); font-size:clamp(1.8rem,4.4vw,2.6rem);
  text-transform:uppercase; margin-top:10px; line-height:1 }
.section-head p{ margin-top:12px; max-width:52ch; color:var(--muted) }

/* Simple list rows (home packages overview) */
.list-rows{ display:flex; flex-direction:column }
.list-row{ display:flex; flex-direction:column; gap:8px;
  padding:18px 0; border-top:1px solid var(--border-soft) }
.list-row:last-child{ border-bottom:1px solid var(--border-soft) }
.list-row .lr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px }
.list-row .name{ font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em }
.list-row .name .price{ color:var(--accent); font-size:1.1rem }
.list-row .meta{ color:var(--muted); font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em }
.list-row .lr-desc{ color:var(--muted); font-size:.92rem; max-width:62ch; line-height:1.55 }

/* Package comparison grid - full width, one column per package */
.pkg-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border);
  border-left:1px solid var(--border) }
.pkg{ padding:28px clamp(16px,1.6vw,26px); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:16px; min-width:0 }
.pkg .num{ font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.05em }
.pkg h3{ font-family:var(--font-display); font-size:1.7rem; text-transform:uppercase; letter-spacing:.01em }
.pkg .price{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--accent); letter-spacing:.01em }
.pkg .meta{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }
.pkg ul{ margin-top:4px; display:flex; flex-direction:column; gap:9px }
.pkg li{ position:relative; padding-left:16px; font-size:.86rem; color:var(--text); line-height:1.45 }
.pkg li::before{ content:"//"; position:absolute; left:0; color:var(--muted-2); font-family:var(--font-mono); font-size:.74rem }

/* Add-ons / terms as plain rows */
.row-list{ display:flex; flex-direction:column }
.row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-top:1px solid var(--border-soft) }
.row:last-child{ border-bottom:1px solid var(--border-soft) }
.row .name{ font-size:.94rem; font-weight:500 }
.row .note{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); text-align:right; text-transform:uppercase; letter-spacing:.03em }

/* Contact tiles - full-width bands, one per contact method */
.contact-tiles{ display:flex; flex-direction:column; border-top:1px solid var(--border) }
.c-tile{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--border); transition:padding-left .15s }
.c-tile:hover{ padding-left:14px }
.c-tile .t{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em }
.c-tile .v{ font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.6rem); text-transform:uppercase }

/* Q&A list - answered items read normally; .todo items are drafts still needing a real answer */
.qa-list{ display:flex; flex-direction:column }
.qa-item{ padding:20px 0; border-top:1px solid var(--border-soft) }
.qa-item:last-child{ border-bottom:1px solid var(--border-soft) }
.qa-item .q{ font-weight:600; font-size:1.02rem; color:var(--text) }
.qa-item .a{ margin-top:8px; color:var(--muted); font-size:.94rem; line-height:1.6; max-width:60ch }
.qa-item.todo .a{ color:var(--muted-2); font-style:italic }
.qa-item .tag{ margin-left:10px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent); font-style:normal; font-weight:600 }

/* Footer */
footer{ position:relative; z-index:2; padding:26px 0 40px; border-top:1px solid var(--border-soft) }
.foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-mono); font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
  padding-left:max(var(--edge), 40px); padding-right:max(var(--edge), 40px) }
.foot a{ color:var(--muted) }
.foot a:hover{ color:var(--text) }

/* Accessibility */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--surface); color:var(--text);
  padding:10px 16px; font-weight:600; border:1px solid var(--border) }
.skip-link:focus{ left:14px; top:14px }

/* Responsive */
@media (max-width:900px){
  .pkg-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:780px){
  .split{ grid-template-columns:1fr; gap:14px }
  .grid-overlay{ display:none }
  .aperture{ display:none }
}
@media (max-width:640px){
  .nav-links{ display:none }
  .nav-toggle{ display:flex }
  .mobile-panel.open{ display:block; padding-top:12px; padding-bottom:6px }
  .mobile-panel a{ display:block; padding:10px 0; color:var(--muted); font-family:var(--font-mono);
    font-size:.82rem; text-transform:uppercase; letter-spacing:.05em }
  .mobile-panel a.active, .mobile-panel a:hover{ color:var(--text) }
  .pkg-grid{ grid-template-columns:1fr }
  .list-row, .row, .c-tile{ flex-direction:column; gap:4px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}