/* ===========================================================
   TobesAV - shared styles
   Full-width technical/editorial dark theme. Black surfaces,
   condensed display type, Poppins small 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-vals: 10,10,10;
  --bg:        rgb(var(--bg-vals));
  --surface:   #111111;
  --border:    rgba(255,255,255,.16);
  --border-soft: rgba(255,255,255,.08);

  /* Contrast against --bg (#0a0a0a): text 17.8:1, muted 9.0:1, muted-2 5.6:1.
     Keep muted-2 at or above 4.5:1 so small print stays WCAG AA legible. */
  --text:      #f4f3ef;
  --muted:     #b0afa9;
  --muted-2:   #8a8983;

  /* 5.56:1 on --bg, and black text on it is also 5.56:1, so it works as both a
     text colour and a button fill. Keep any replacement at or above 4.5:1. */
  --accent-vals: 255,59,31;
  --accent:       rgb(var(--accent-vals));
  /* Deep brick, used for .btn-primary hover. White text on it is 6.58:1. */
  --accent-hover: rgb(161,43,26);
  --hover-tint:   rgba(255,255,255,.07);

  /* Accent tint behind the recommended tier. Red text sits on this, so the alpha
     is contrast-bound: at .21 the accent is 4.52:1 and --muted-2 4.59:1, and above
     that both drop under AA. Do not raise the hover value past .21. */
  --featured-opacity: .15;
  --featured-hover-opacity: .21;

  --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;
  /* Small-label face. Was JetBrains Mono; now Poppins, so it is no longer
     monospaced - anything relying on fixed-width digits needs tabular-nums. */
  --font-label:   "Poppins", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0 }
/* Offset for the sticky header (66px logo + 1px border), so anchor jumps and
   main.js's scrollIntoView on the ?package= flow don't land under it. */
html{ scroll-behavior:smooth; scroll-padding-top:67px }
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) }

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

/* Nav */
.site-header{ position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border-soft);
  background-color:rgba(var(--bg-vals),.7); backdrop-filter:blur(3px); overflow:hidden }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:0; padding-bottom:0;
  padding-left:var(--edge); padding-right:var(--edge) }
.brand{ display:inline-flex; align-items:center }
.brand-mark{ height:66px; width:auto; display:block; flex-shrink:0; padding:10px 0 }
.nav-right{ display:flex; align-items:center; gap:28px }
.nav-links{ display:flex; gap:26px }
.nav-links a{ display:inline-block; color:var(--muted); font-family:var(--font-label); font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em; background-image:linear-gradient(var(--text) 0 0);
  background-position:0 100%; background-size:0 2px; background-repeat:no-repeat;
  transition:
    color 0.3s,
    background-size 0.3s ease,
    background-position 0s 0.3s ease }
.nav-links a:hover:not(.active){ color:var(--text); background-position:100% 100%; background-size:100% 2px }
.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:18px; height:18px; transition:width 0.3s ease, height 0.3s ease }
.nav-toggle:hover{ background-color:var(--hover-tint); svg{ width:20px; height:20px } }
.mobile-panel{ display:none }

/* Buttons - sharp, uppercase */
/* Buttons use Inter rather than the label face, a decision made when that face
   was JetBrains Mono and uppercase monospace at this size flattened word shapes.
   The label face is now Poppins, so this is worth revisiting if you want to. */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.88rem;
  font-family:var(--font); text-transform:uppercase; letter-spacing:.035em;
  padding:.9em 1.6em; border:1px solid var(--border); cursor:pointer; color:var(--text);
  background:transparent; transition:background .15s, border-color .15s, color .15s }
.btn:hover{ background:var(--hover-tint); border-color:var(--muted) }
/* Black label on the bright red (5.56:1), flipping to white on the dark brick
   hover (6.58:1). Black on the hover shade would be 2.71:1 and near invisible. */
.btn-primary{ background:var(--accent); color:#0a0a0a; font-weight:700; border-color:var(--accent) }
.btn-primary:hover{ background:var(--accent-hover); color:var(--text); border-color:var(--text) }
/* Two underline layers. Layer 1 is the wipe: zero-width at rest, sweeping in on
   hover. Layer 2 is a static faint rule that is always there, so the link still
   reads as a link before you touch it - accent against the --muted body copy it
   sits in is only 1.62:1, well under the 3:1 that colour-alone identification
   needs. Layer 1 paints over layer 2, so the wipe is unchanged. */
.link{ display:inline-block; color:var(--accent);
  background-image:
    linear-gradient(var(--accent) 0 0),
    linear-gradient(rgba(var(--accent-vals),.4) 0 0);
  background-position:0 100%, 0 100%;
  background-size:0 2px, 100% 2px;
  background-repeat:no-repeat, no-repeat;
  transition:
    background-size 0.3s ease,
    background-position 0s 0.3s ease }
.link:hover{ background-position:100% 100%, 0 100%; background-size:100% 2px, 100% 2px }

/* 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 }

/* Hero motif - decorative iris graphic, home hero only, static.
   It occupies a real grid column so it can never overlap the headline; it reads
   as a deliberate counterweight rather than art floating in dead space. */
.page-hero.has-motif{ display:flex; align-items:center;
  padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px) }
.page-hero.has-motif > .wrap{ width:100% }
.page-hero.has-motif .split{ grid-template-columns:var(--idx) minmax(0,1fr) auto;
  align-items:center }
.aperture{ position:static; pointer-events:none; opacity:.9; color:#6d6c66; justify-self:end }
.aperture svg{ width:clamp(230px,26vw,430px); height:auto; display:block }

/* Section */
.section{ position:relative; padding:clamp(40px,4.6vw,64px) 0; border-top:1px solid var(--border-soft); overflow:hidden }
.section-head{ margin-bottom:clamp(20px,2.4vw,30px) }
.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) }

/* Package rows (home overview).
   Text stack on the left, CTA anchored right so the row has a terminus rather
   than the duration drifting away from the tier name on wide viewports. */
.list-rows{ display:flex; flex-direction:column }
.list-row{ display:grid; grid-template-columns:1fr auto; gap:6px 32px; align-items:start;
  padding:22px 10px; border-top:1px solid var(--border-soft);
  transition:
    border 0.2s linear,
    padding 0.2s linear,
    transform 0.4s ease,
    background 0.4s ease }
.list-row:hover{ background-color:var(--hover-tint); transform:scale(0.995,1); padding-left:12px }
.list-row:last-child{ border-bottom:1px solid var(--border-soft) }
.list-row .lr-top{ grid-column:1; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.list-row .name{ font-family:var(--font-display); font-size:1.6rem; text-transform:uppercase; letter-spacing:.01em }
.list-row .price{ font-family:var(--font-display); font-size:1.35rem; color:var(--accent); letter-spacing:.01em }
.list-row .meta{ grid-column:1; color:var(--muted); font-family:var(--font-label); font-size:.76rem;
  text-transform:uppercase; letter-spacing:.04em }
.list-row .lr-desc{ grid-column:1; color:var(--muted); font-size:.92rem; max-width:62ch; line-height:1.55; margin-top:4px }
.list-row .row-cta{ grid-column:2; grid-row:1 / span 3; align-self:center }

/* Recommended tier: accent rule and a small tag, so the middle option anchors choice */
.list-row.is-featured{ border-left:2px solid var(--accent); background-color:rgba(var(--accent-vals),var(--featured-opacity)); padding-left:18px }
.list-row.is-featured:hover{ border-left:4px solid var(--accent); background-color:rgba(var(--accent-vals),var(--featured-hover-opacity)) }
.list-row .pick{ font-family:var(--font-label); font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:#0a0a0a; background:var(--accent);
  padding:.35em .7em; align-self:center }

/* Reassurance strip under the package list */
.reassure{ margin-top:20px; font-family:var(--font-label); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); border-left:2px solid var(--accent); padding-left:14px }

/* Retainer, presented as its own product rather than a fourth one-off package */
.retainer-band{ border:1px solid var(--border); padding:clamp(22px,3vw,32px);
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  transition:
    transform 0.4s ease,
    background 0.4s ease }
.retainer-band:hover{ transform:scale(0.995,1); background-color:var(--hover-tint) }
.retainer-band .rb-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.retainer-band .name{ font-family:var(--font-display); font-size:1.8rem; text-transform:uppercase; letter-spacing:.01em }
.retainer-band .price{ font-family:var(--font-display); font-size:1.45rem; color:var(--accent); letter-spacing:.01em }
.retainer-band .meta{ font-family:var(--font-label); font-size:.76rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em }
.retainer-band .rb-desc{ color:var(--muted); font-size:.95rem; line-height:1.6; max-width:64ch; margin-top:2px }
.retainer-band .row-cta{ margin-top:8px }

/* Small outlined CTA, used on package rows and package cards */
.row-cta{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  font-family:var(--font); font-size:.84rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.035em; padding:.85em 1.6em; border:1px solid var(--border); color:var(--text);
  transition:background .15s, border-color .15s, color .15s }
.row-cta:hover{ background:var(--hover-tint); border-color:var(--muted) }
.row-cta-primary{ background:var(--accent); border-color:var(--accent); color:#0a0a0a; font-weight:700 }
.row-cta-primary:hover{ background:var(--accent-hover); border-color:var(--text); color:var(--text) }

/* Package comparison grid - full width, one column per package */
/* Three one-off packages; the retainer sits in its own band below */
.pkg-grid{ display:grid; grid-template-columns:repeat(3,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;
  transition:
    background 0.4s ease,
    padding 0.2s linear,
    border 0.2s linear}
.pkg:hover{ background-color:var(--hover-tint) }
.pkg.is-featured{ background-color:rgba(var(--accent-vals),var(--featured-opacity)) }
.pkg.is-featured:hover{ background-color:rgba(var(--accent-vals),var(--featured-hover-opacity)) }
.pkg .num{ font-family:var(--font-label); 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-label); 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-label); font-size:.74rem }
.pkg .row-cta{ margin-top:auto; width:100% }

/* 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 }
/* Right-aligned rates column. The old label face was monospaced, so the figures
   lined up for free; Poppins is proportional, hence tabular-nums. */
.row .note{ font-family:var(--font-label); font-size:.78rem; color:var(--muted); text-align:right;
  text-transform:uppercase; letter-spacing:.03em; font-variant-numeric:tabular-nums }
.row .note-price{ color:var(--accent) }

/* 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 .3s ease,
    background .3s ease }
.c-tile:hover{ padding-left:4px; padding-right:4px; background-color:var(--hover-tint) }
.c-tile .t{ font-family:var(--font-label); 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 }

/* Enquiry form */
.enquiry-form{ display:flex; flex-direction:column; gap:22px }
.enquiry-form .hp{ position:absolute; left:-9999px }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.field label, .field .label-txt{ font-family:var(--font-label); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted) }
.field .req{ color:var(--accent); margin-left:6px; font-size:.66rem }
.field-note{ font-size:.84rem; color:var(--muted-2); line-height:1.5; margin-top:-2px }
.enquiry-form input[type=text], .enquiry-form input[type=email], .enquiry-form input[type=tel],
.enquiry-form select, .enquiry-form textarea{
  font-family:var(--font); font-size:.95rem; color:var(--text); background:#131316;
  border:1px solid var(--border); padding:12px 14px; width:100%; border-radius:0;
  -webkit-appearance:none; appearance:none; transition:border-color .15s }
.enquiry-form textarea{ resize:vertical; line-height:1.55 }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus{
  outline:none; border-color:var(--accent) }
.enquiry-form select{ background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 13px) 51%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:40px }
.enquiry-form ::placeholder{ color:var(--muted-2) }

/* Add-on checkboxes; .is-disabled marks an option ruled out by another selection */
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px }
/* .field label sets mono/uppercase, so scope these tighter to win on specificity */
.enquiry-form .check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; padding:4px 0;
  font-family:var(--font); font-size:.92rem; text-transform:none; letter-spacing:0; color:var(--text) }
.check input{ appearance:none; -webkit-appearance:none; width:17px; height:17px; margin-top:2px; flex:none;
  border:1px solid var(--border-2, rgba(255,255,255,.28)); background:#131316; cursor:pointer;
  transition:background .15s, border-color .15s }
.check input:checked{ background:var(--accent); border-color:var(--accent) }
.check input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.check em{ display:block; font-style:normal; font-family:var(--font-label); font-size:.7rem;
  color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-top:3px }
.check.is-disabled{ opacity:.35; cursor:not-allowed }
.check.is-disabled input{ cursor:not-allowed }
.conflict-note{ font-size:.84rem; color:var(--accent); line-height:1.5; margin-top:4px }

.f-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px }
.f-actions .btn{ cursor:pointer }
.reply-note{ font-family:var(--font-label); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted) }

.call-instead{ margin-top:-8px; font-size:.9rem; color:var(--muted) }

/* Plain-English glossary on Services, for clients new to commissioning video */
.glossary{ margin-top:26px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px; max-width:900px }
.glossary dt{ font-family:var(--font-label); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--accent) }
.glossary dd{ margin:6px 0 0; font-size:.9rem; color:var(--muted); line-height:1.55 }

/* Featured package card on Services */
.pkg.is-featured{ border-color:var(--accent) }
.pkg .pick{ display:inline-block; font-family:var(--font-label); font-size:.58rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; color:#0a0a0a; background:var(--accent);
  padding:.3em .6em; margin-left:6px }
.retainer-band .rb-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px }
.retainer-band .rb-list li{ position:relative; padding-left:16px; font-size:.9rem; color:var(--text) }
.retainer-band .rb-list li::before{ content:"//"; position:absolute; left:0; color:var(--muted-2);
  font-family:var(--font-label); font-size:.76rem }

/* 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-label); 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-label); font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
  padding-left:var(--edge); padding-right:var(--edge) }
.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) }
  .glossary{ grid-template-columns:1fr }
}
@media (max-width:780px){
  .split{ grid-template-columns:1fr; gap:14px }
  /* Must match .page-hero.has-motif .split specificity to beat the desktop rule */
  .page-hero.has-motif .split{ grid-template-columns:1fr }
  /* Empty index columns are a desktop layout device; stacked they're just dead space */
  .split .idx:empty{ 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-label);
    font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; background-image:linear-gradient(var(--text) 0 0);
    background-position:0 100%; background-size:0 2px; background-repeat:no-repeat;
    transition:
      color 0.3s,
      background-size 0.3s ease,
      background-position 0s 0.3s ease,
      background-color 0.3s ease }
  .mobile-panel a.active{ color:var(--text) }
  .mobile-panel a:hover:not(.active){ color:var(--text); background-color:var(--hover-tint); background-position:100% 100%; background-size:100% 2px }
  .pkg-grid{ grid-template-columns:1fr }
  .row, .c-tile{ flex-direction:column; gap:4px }
  .list-row{ grid-template-columns:1fr }
  .list-row .row-cta{ grid-column:1; grid-row:auto; justify-self:start; margin-top:12px }
  .f-row, .check-grid{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}