:root{
  --af-black:#f7f8fa;
  --af-panel:#ffffff;
  --af-white:#141414;
  --af-white-pure:#000000;
  --af-red:#d81324;
  --af-grey:#5a5d63;
  --af-grey-dim:#d4d7dd;
  /* Cool-neutral, not beige. These two draw every hairline and every grid
     gutter on the site (~65 uses), so a warm cast here read as a tint across
     the whole layout while the surfaces around them are blue-leaning. */
  --af-border:#dfe1e6;
  --mono: 'JetBrains Mono', monospace;
  --disp: 'Rajdhani', sans-serif;
  --body: 'Inter', sans-serif;
  --shadow-sm: 0 1px 2px rgba(20,20,20,0.04), 0 1px 1px rgba(20,20,20,0.03);
  --shadow-md: 0 6px 16px rgba(20,20,20,0.06), 0 2px 6px rgba(20,20,20,0.04);
  --shadow-lg: 0 20px 50px rgba(20,20,20,0.10), 0 6px 18px rgba(20,20,20,0.06);
  --shadow-red: 0 10px 28px rgba(216,19,36,0.16);
  /* One canonical dark surface. Every dark zone on every page uses this so
     adjacent dark sections never show a seam and pages read consistently. */
  --surface-dark:#101014;
  /* Dot-grid texture shared by every dark zone. Defined once here rather
     than embedded in each rule — it was duplicated six times, which alone
     accounted for 73% of this stylesheet. */
  --dot-grid: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='896'%20height='280'%3E%3Cg%20fill='rgba(245,243,238,0.22)'%3E%3Ccircle%20cx='14'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='14'%20r='1.55'/%3E%3Ccircle%20cx='70'%20cy='14'%20r='1.99'/%3E%3Ccircle%20cx='98'%20cy='14'%20r='2.11'/%3E%3Ccircle%20cx='126'%20cy='14'%20r='1.95'/%3E%3Ccircle%20cx='154'%20cy='14'%20r='1.68'/%3E%3Ccircle%20cx='182'%20cy='14'%20r='1.47'/%3E%3Ccircle%20cx='210'%20cy='14'%20r='1.37'/%3E%3Ccircle%20cx='238'%20cy='14'%20r='1.33'/%3E%3Ccircle%20cx='266'%20cy='14'%20r='1.21'/%3E%3Ccircle%20cx='294'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='322'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='350'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='378'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='406'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='434'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='462'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='490'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='518'%20cy='14'%20r='1.28'/%3E%3Ccircle%20cx='546'%20cy='14'%20r='1.45'/%3E%3Ccircle%20cx='574'%20cy='14'%20r='1.48'/%3E%3Ccircle%20cx='602'%20cy='14'%20r='1.5'/%3E%3Ccircle%20cx='630'%20cy='14'%20r='1.64'/%3E%3Ccircle%20cx='658'%20cy='14'%20r='1.85'/%3E%3Ccircle%20cx='686'%20cy='14'%20r='2.01'/%3E%3Ccircle%20cx='714'%20cy='14'%20r='1.96'/%3E%3Ccircle%20cx='742'%20cy='14'%20r='1.59'/%3E%3Ccircle%20cx='770'%20cy='14'%20r='.97'/%3E%3Ccircle%20cx='798'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='826'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='854'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='882'%20cy='14'%20r='.9'/%3E%3Ccircle%20cx='14'%20cy='42'%20r='1.85'/%3E%3Ccircle%20cx='42'%20cy='42'%20r='2.19'/%3E%3Ccircle%20cx='70'%20cy='42'%20r='2.05'/%3E%3Ccircle%20cx='98'%20cy='42'%20r='1.66'/%3E%3Ccircle%20cx='126'%20cy='42'%20r='1.33'/%3E%3Ccircle%20cx='154'%20cy='42'%20r='1.2'/%3E%3Ccircle%20cx='182'%20cy='42'%20r='1.1'/%3E%3Ccircle%20cx='210'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='238'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='266'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='294'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='322'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='350'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='378'%20cy='42'%20r='1.17'/%3E%3Ccircle%20cx='406'%20cy='42'%20r='1.55'/%3E%3Ccircle%20cx='434'%20cy='42'%20r='1.61'/%3E%3Ccircle%20cx='462'%20cy='42'%20r='1.57'/%3E%3Ccircle%20cx='490'%20cy='42'%20r='1.67'/%3E%3Ccircle%20cx='518'%20cy='42'%20r='1.86'/%3E%3Ccircle%20cx='546'%20cy='42'%20r='1.89'/%3E%3Ccircle%20cx='574'%20cy='42'%20r='1.5'/%3E%3Ccircle%20cx='602'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='630'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='658'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='686'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='714'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='742'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='770'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='798'%20cy='42'%20r='.9'/%3E%3Ccircle%20cx='826'%20cy='42'%20r='1.05'/%3E%3Ccircle%20cx='854'%20cy='42'%20r='1.53'/%3E%3Ccircle%20cx='882'%20cy='42'%20r='2.08'/%3E%3Ccircle%20cx='14'%20cy='70'%20r='2.27'/%3E%3Ccircle%20cx='42'%20cy='70'%20r='1.96'/%3E%3Ccircle%20cx='70'%20cy='70'%20r='1.41'/%3E%3Ccircle%20cx='98'%20cy='70'%20r='1.09'/%3E%3Ccircle%20cx='126'%20cy='70'%20r='.96'/%3E%3Ccircle%20cx='154'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='210'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='238'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='266'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='294'%20cy='70'%20r='1.28'/%3E%3Ccircle%20cx='322'%20cy='70'%20r='1.72'/%3E%3Ccircle%20cx='350'%20cy='70'%20r='1.69'/%3E%3Ccircle%20cx='378'%20cy='70'%20r='1.61'/%3E%3Ccircle%20cx='406'%20cy='70'%20r='1.73'/%3E%3Ccircle%20cx='434'%20cy='70'%20r='1.77'/%3E%3Ccircle%20cx='462'%20cy='70'%20r='1.33'/%3E%3Ccircle%20cx='490'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='518'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='574'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='602'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='630'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='658'%20cy='70'%20r='1.03'/%3E%3Ccircle%20cx='686'%20cy='70'%20r='1.38'/%3E%3Ccircle%20cx='714'%20cy='70'%20r='1.96'/%3E%3Ccircle%20cx='742'%20cy='70'%20r='2.29'/%3E%3Ccircle%20cx='770'%20cy='70'%20r='1.93'/%3E%3Ccircle%20cx='798'%20cy='70'%20r='1.03'/%3E%3Ccircle%20cx='826'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='854'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='882'%20cy='70'%20r='.9'/%3E%3Ccircle%20cx='14'%20cy='98'%20r='2'/%3E%3Ccircle%20cx='42'%20cy='98'%20r='1.57'/%3E%3Ccircle%20cx='70'%20cy='98'%20r='1.17'/%3E%3Ccircle%20cx='98'%20cy='98'%20r='.94'/%3E%3Ccircle%20cx='126'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='154'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='210'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='238'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='266'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='294'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='322'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='350'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='378'%20cy='98'%20r='1.29'/%3E%3Ccircle%20cx='406'%20cy='98'%20r='1.72'/%3E%3Ccircle%20cx='434'%20cy='98'%20r='1.87'/%3E%3Ccircle%20cx='462'%20cy='98'%20r='1.8'/%3E%3Ccircle%20cx='490'%20cy='98'%20r='1.66'/%3E%3Ccircle%20cx='518'%20cy='98'%20r='1.6'/%3E%3Ccircle%20cx='546'%20cy='98'%20r='1.63'/%3E%3Ccircle%20cx='574'%20cy='98'%20r='1.66'/%3E%3Ccircle%20cx='602'%20cy='98'%20r='1.54'/%3E%3Ccircle%20cx='630'%20cy='98'%20r='1.18'/%3E%3Ccircle%20cx='658'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='686'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='714'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='742'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='770'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='798'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='826'%20cy='98'%20r='.9'/%3E%3Ccircle%20cx='854'%20cy='98'%20r='.95'/%3E%3Ccircle%20cx='882'%20cy='98'%20r='1.09'/%3E%3Ccircle%20cx='14'%20cy='126'%20r='1.33'/%3E%3Ccircle%20cx='42'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='154'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='210'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='238'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='266'%20cy='126'%20r='1.04'/%3E%3Ccircle%20cx='294'%20cy='126'%20r='1.72'/%3E%3Ccircle%20cx='322'%20cy='126'%20r='1.99'/%3E%3Ccircle%20cx='350'%20cy='126'%20r='1.86'/%3E%3Ccircle%20cx='378'%20cy='126'%20r='1.63'/%3E%3Ccircle%20cx='406'%20cy='126'%20r='1.52'/%3E%3Ccircle%20cx='434'%20cy='126'%20r='1.52'/%3E%3Ccircle%20cx='462'%20cy='126'%20r='1.39'/%3E%3Ccircle%20cx='490'%20cy='126'%20r='.93'/%3E%3Ccircle%20cx='518'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='574'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='602'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='630'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='658'%20cy='126'%20r='.98'/%3E%3Ccircle%20cx='686'%20cy='126'%20r='1.24'/%3E%3Ccircle%20cx='714'%20cy='126'%20r='1.31'/%3E%3Ccircle%20cx='742'%20cy='126'%20r='1.45'/%3E%3Ccircle%20cx='770'%20cy='126'%20r='1.76'/%3E%3Ccircle%20cx='798'%20cy='126'%20r='2.08'/%3E%3Ccircle%20cx='826'%20cy='126'%20r='2.09'/%3E%3Ccircle%20cx='854'%20cy='126'%20r='1.61'/%3E%3Ccircle%20cx='882'%20cy='126'%20r='.9'/%3E%3Ccircle%20cx='14'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='154'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='210'%20cy='154'%20r='1.47'/%3E%3Ccircle%20cx='238'%20cy='154'%20r='2.05'/%3E%3Ccircle%20cx='266'%20cy='154'%20r='1.98'/%3E%3Ccircle%20cx='294'%20cy='154'%20r='1.62'/%3E%3Ccircle%20cx='322'%20cy='154'%20r='1.41'/%3E%3Ccircle%20cx='350'%20cy='154'%20r='1.35'/%3E%3Ccircle%20cx='378'%20cy='154'%20r='1.06'/%3E%3Ccircle%20cx='406'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='434'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='462'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='490'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='518'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='154'%20r='1.33'/%3E%3Ccircle%20cx='574'%20cy='154'%20r='1.44'/%3E%3Ccircle%20cx='602'%20cy='154'%20r='1.52'/%3E%3Ccircle%20cx='630'%20cy='154'%20r='1.81'/%3E%3Ccircle%20cx='658'%20cy='154'%20r='2.05'/%3E%3Ccircle%20cx='686'%20cy='154'%20r='1.77'/%3E%3Ccircle%20cx='714'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='742'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='770'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='798'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='826'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='854'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='882'%20cy='154'%20r='.9'/%3E%3Ccircle%20cx='14'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='154'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='210'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='238'%20cy='182'%20r='1.03'/%3E%3Ccircle%20cx='266'%20cy='182'%20r='1.67'/%3E%3Ccircle%20cx='294'%20cy='182'%20r='2.09'/%3E%3Ccircle%20cx='322'%20cy='182'%20r='2.17'/%3E%3Ccircle%20cx='350'%20cy='182'%20r='1.97'/%3E%3Ccircle%20cx='378'%20cy='182'%20r='1.66'/%3E%3Ccircle%20cx='406'%20cy='182'%20r='1.4'/%3E%3Ccircle%20cx='434'%20cy='182'%20r='1.26'/%3E%3Ccircle%20cx='462'%20cy='182'%20r='1.2'/%3E%3Ccircle%20cx='490'%20cy='182'%20r='1.08'/%3E%3Ccircle%20cx='518'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='574'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='602'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='630'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='658'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='686'%20cy='182'%20r='.9'/%3E%3Ccircle%20cx='714'%20cy='182'%20r='1.01'/%3E%3Ccircle%20cx='742'%20cy='182'%20r='1.41'/%3E%3Ccircle%20cx='770'%20cy='182'%20r='1.57'/%3E%3Ccircle%20cx='798'%20cy='182'%20r='1.57'/%3E%3Ccircle%20cx='826'%20cy='182'%20r='1.56'/%3E%3Ccircle%20cx='854'%20cy='182'%20r='1.65'/%3E%3Ccircle%20cx='882'%20cy='182'%20r='1.82'/%3E%3Ccircle%20cx='14'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='154'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='182'%20cy='210'%20r='1.61'/%3E%3Ccircle%20cx='210'%20cy='210'%20r='2.16'/%3E%3Ccircle%20cx='238'%20cy='210'%20r='2.21'/%3E%3Ccircle%20cx='266'%20cy='210'%20r='1.85'/%3E%3Ccircle%20cx='294'%20cy='210'%20r='1.41'/%3E%3Ccircle%20cx='322'%20cy='210'%20r='1.14'/%3E%3Ccircle%20cx='350'%20cy='210'%20r='1.03'/%3E%3Ccircle%20cx='378'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='406'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='434'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='462'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='490'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='518'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='210'%20r='.96'/%3E%3Ccircle%20cx='574'%20cy='210'%20r='1.53'/%3E%3Ccircle%20cx='602'%20cy='210'%20r='1.72'/%3E%3Ccircle%20cx='630'%20cy='210'%20r='1.65'/%3E%3Ccircle%20cx='658'%20cy='210'%20r='1.61'/%3E%3Ccircle%20cx='686'%20cy='210'%20r='1.72'/%3E%3Ccircle%20cx='714'%20cy='210'%20r='1.82'/%3E%3Ccircle%20cx='742'%20cy='210'%20r='1.64'/%3E%3Ccircle%20cx='770'%20cy='210'%20r='1.04'/%3E%3Ccircle%20cx='798'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='826'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='854'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='882'%20cy='210'%20r='.9'/%3E%3Ccircle%20cx='14'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='238'%20r='1.59'/%3E%3Ccircle%20cx='154'%20cy='238'%20r='2.25'/%3E%3Ccircle%20cx='182'%20cy='238'%20r='2.19'/%3E%3Ccircle%20cx='210'%20cy='238'%20r='1.62'/%3E%3Ccircle%20cx='238'%20cy='238'%20r='1.1'/%3E%3Ccircle%20cx='266'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='294'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='322'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='350'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='378'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='406'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='434'%20cy='238'%20r='1'/%3E%3Ccircle%20cx='462'%20cy='238'%20r='1.7'/%3E%3Ccircle%20cx='490'%20cy='238'%20r='1.83'/%3E%3Ccircle%20cx='518'%20cy='238'%20r='1.66'/%3E%3Ccircle%20cx='546'%20cy='238'%20r='1.61'/%3E%3Ccircle%20cx='574'%20cy='238'%20r='1.69'/%3E%3Ccircle%20cx='602'%20cy='238'%20r='1.49'/%3E%3Ccircle%20cx='630'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='658'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='686'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='714'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='742'%20cy='238'%20r='.9'/%3E%3Ccircle%20cx='770'%20cy='238'%20r='.92'/%3E%3Ccircle%20cx='798'%20cy='238'%20r='1.09'/%3E%3Ccircle%20cx='826'%20cy='238'%20r='1.27'/%3E%3Ccircle%20cx='854'%20cy='238'%20r='1.72'/%3E%3Ccircle%20cx='882'%20cy='238'%20r='2.18'/%3E%3Ccircle%20cx='14'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='42'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='70'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='98'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='126'%20cy='266'%20r='1.38'/%3E%3Ccircle%20cx='154'%20cy='266'%20r='1.97'/%3E%3Ccircle%20cx='182'%20cy='266'%20r='2.31'/%3E%3Ccircle%20cx='210'%20cy='266'%20r='2.3'/%3E%3Ccircle%20cx='238'%20cy='266'%20r='1.97'/%3E%3Ccircle%20cx='266'%20cy='266'%20r='1.49'/%3E%3Ccircle%20cx='294'%20cy='266'%20r='1.07'/%3E%3Ccircle%20cx='322'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='350'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='378'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='406'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='434'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='462'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='490'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='518'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='546'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='574'%20cy='266'%20r='.9'/%3E%3Ccircle%20cx='602'%20cy='266'%20r='1.41'/%3E%3Ccircle%20cx='630'%20cy='266'%20r='1.84'/%3E%3Ccircle%20cx='658'%20cy='266'%20r='1.96'/%3E%3Ccircle%20cx='686'%20cy='266'%20r='1.85'/%3E%3Ccircle%20cx='714'%20cy='266'%20r='1.67'/%3E%3Ccircle%20cx='742'%20cy='266'%20r='1.56'/%3E%3Ccircle%20cx='770'%20cy='266'%20r='1.55'/%3E%3Ccircle%20cx='798'%20cy='266'%20r='1.55'/%3E%3Ccircle%20cx='826'%20cy='266'%20r='1.42'/%3E%3Ccircle%20cx='854'%20cy='266'%20r='1.05'/%3E%3Ccircle%20cx='882'%20cy='266'%20r='.9'/%3E%3C/g%3E%3C/svg%3E");
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Content shell. Grows with the screen instead of sitting at a fixed
     1280px, which left half of a wide monitor empty. Paragraph widths are
     capped separately in ch units, so readability is unaffected. */
  --shell: clamp(1280px, 90vw, 1760px);
  /* Tints native control chrome — selection highlight, checkboxes,
     radios — away from the OS default blue. */
  accent-color: #d81324;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--af-black);
  color:var(--af-white);
  font-family:var(--body);
  /* clip, not hidden: `hidden` turns this into a scroll container, which
     silently breaks position:sticky on the header. `clip` blocks the same
     sideways overflow without that side effect. */
  overflow-x:hidden;   /* fallback for pre-2022 browsers */
  overflow-x:clip;
  position:relative;
}
/* body::before dot layer removed — every section now has its own explicit
   background (gradient/watermark up top, dark dot-grid sections below), so
   this global layer was only ever leaking through behind the hero. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--af-red); outline-offset:3px;}

.mono{font-family:var(--mono);}
/* Animations, not transitions. A transition only plays if the browser
   already painted the start state, so on a fast load the class can land in
   the same frame and the element just snaps to its end state — which is why
   reveals worked on some page loads and not others. An animation always runs
   from its own keyframes regardless of what was painted before. */
/* Failsafe: content must not depend on a script arriving.
   .reveal starts hidden so it can animate in, which means a missing or broken
   site.js would leave the page looking empty. The fallback animation below
   reveals everything after 2.5s regardless. site.js marks the document as
   `js-ready` the moment it runs, which cancels the fallback and hands control
   back to the scroll observer — so in normal use the reveal animations behave
   exactly as before, and only a genuine script failure triggers the safety net. */
.reveal{ opacity:0; animation: af-failsafe 0.01s linear 2.5s forwards; }
@keyframes af-failsafe{ to{ opacity:1; transform:none; } }
html.js-ready .reveal{ animation:none; }
html.js-ready .reveal.in-view{ animation: af-reveal 0.7s var(--ease) forwards; }
@keyframes af-reveal{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
.reveal-stagger > *{ opacity:0; animation: af-failsafe 0.01s linear 2.5s forwards; }
html.js-ready .reveal-stagger > *{ animation:none; }
html.js-ready .reveal-stagger.in-view > *{ animation: af-reveal-sm 0.6s var(--ease) forwards; }
@keyframes af-reveal-sm{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
.reveal-stagger.in-view > *:nth-child(1){ animation-delay:0.02s; }
.reveal-stagger.in-view > *:nth-child(2){ animation-delay:0.08s; }
.reveal-stagger.in-view > *:nth-child(3){ animation-delay:0.14s; }
.reveal-stagger.in-view > *:nth-child(4){ animation-delay:0.20s; }
.reveal-stagger.in-view > *:nth-child(5){ animation-delay:0.26s; }
.reveal-stagger.in-view > *:nth-child(6){ animation-delay:0.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--af-red);
}

/* ===== NAV ===== */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,248,250,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--af-border);
  transition:box-shadow .3s var(--ease);
}
header.scrolled{ box-shadow:0 8px 24px rgba(20,20,20,0.06); }
nav{
  max-width:var(--shell); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:700;
  font-size:1.4rem; letter-spacing:0.04em;
  user-select:none;
}
.logo__mark{ width:20px; height:20px; flex-shrink:0; }
.logo__mark svg{ width:100%; height:100%; display:block; }
.logo__rev{
  font-family:var(--mono); font-size:0.62rem;
  color:var(--af-grey); border:1px solid var(--af-grey-dim);
  padding:2px 6px; border-radius:2px; cursor:help;
  position:relative;
}
.logo__rev:hover::after{
  content:"A · CONCEPT — B · MATERIAL CHANGE (STEEL→TI) — C · CURRENT";
  position:absolute; top:130%; left:0;
  background:#000; border:1px solid var(--af-red);
  color:#f2f0ea; font-size:0.62rem; padding:8px 10px;
  width:240px; white-space:normal; line-height:1.4; z-index:60;
}
.navlinks{ display:flex; gap:6px; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;}
.navlinks a{
  padding:8px 12px; color:var(--af-grey);
  transition:color .15s;
}
.navlinks a:hover{ color:var(--af-white); }
.navlinks a::before{ content:"["; color:var(--af-grey-dim); }
.navlinks a::after{ content:"]"; color:var(--af-grey-dim); }
.navlinks a:hover::before, .navlinks a:hover::after{ color:var(--af-red); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.account-link{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em;
  color:var(--af-grey); background:transparent; border:none; padding:8px 4px; cursor:pointer;
  transition:color .15s;
}
.account-link:hover{ color:var(--af-white); }
.account-link::before{ content:"<"; color:var(--af-red); }
.account-link::after{ content:">"; color:var(--af-red); }
.cart-btn{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.78rem;
  border:1px solid var(--af-grey-dim); background:transparent; color:var(--af-white);
  padding:9px 14px;
}
.cart-btn:hover{ border-color:var(--af-red); color:var(--af-red); }

/* ===== MOBILE NAV ===== */
.hamburger-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:transparent; border:1px solid var(--af-grey-dim);
  cursor:pointer; padding:0; margin-left:8px;
}
.hamburger-btn span{ display:block; width:18px; height:1.5px; background:var(--af-white); margin:0 auto; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger-btn:hover{ border-color:var(--af-red); }
.hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay{
  position:fixed; inset:0; background:rgba(10,10,10,0.4); z-index:140;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.mobile-nav-overlay.open{ opacity:1; pointer-events:auto; }
.mobile-nav-drawer{
  position:fixed; top:0; right:-320px; width:300px; max-width:88vw; height:100vh;
  background:var(--af-panel); border-left:1px solid var(--af-border); z-index:150;
  transition:right .4s var(--ease); display:flex; flex-direction:column;
  box-shadow:-24px 0 60px rgba(20,20,20,0.14);
}
.mobile-nav-drawer.open{ right:0; }
.mobile-nav-drawer__header{ padding:20px 22px; border-bottom:1px solid var(--af-border); display:flex; justify-content:space-between; align-items:center; }
.mobile-nav-drawer__links{ display:flex; flex-direction:column; padding:10px 0; }
.mobile-nav-drawer__links a{
  padding:16px 22px; font-family:var(--mono); font-size:0.85rem; letter-spacing:0.04em;
  color:var(--af-white); border-bottom:1px solid var(--af-border);
  display:flex; align-items:center; gap:8px;
}
.mobile-nav-drawer__links a:hover{ color:var(--af-red); background:var(--af-black); }

.cart-count{ color:var(--af-red); }
.navlinks-mobile{display:none;}

/* ===== HERO ===== */
.hero{
  position:relative; z-index:1;
  max-width:var(--shell); margin:0 auto;
  padding:80px 32px 60px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px;
  align-items:center;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDE0MDAgODAwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjAsNjApIHJvdGF0ZSgtMjgpIHNjYWxlKDMuMikiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4yMiI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk4MCwzODApIHJvdGF0ZSgyMikgc2NhbGUoNC4wKSIgZmlsbD0iI2Q4MTMyNCIgZmlsbC1vcGFjaXR5PSIwLjE4Ij48cGF0aCBkPSJNIDE3LjQ2IDYyLjExIEwgMjMuNDkgNTEuNjEgTCA2Ni43MiA1MS42MSBMIDYyLjYzIDQ0LjY2IEwgMTcuMTcgNDQuNjYgTCAxOS43MiA0MC4xOSBMIDU5Ljk2IDQwLjE5IEwgNTUuOTggMzMuMzUgTCAyMy43MiAzMy4zNSBMIDI2LjU2IDI4Ljg4IEwgNTMuMzUgMjguODggTCA0OS4yOSAyMS45OCBMIDMwLjMzIDIxLjk4IEwgMzMuMDAgMTcuMjMgTCA0Ni41NyAxNy4yMyBMIDM2LjQyIDAuMDAgTCAwLjAwIDYyLjExIFoiLz48cGF0aCBkPSJNIDI1LjU3IDU4LjgwIEwgNDguNjYgNTguODAgTCA0Ny4wMyA1Ni4wMiBMIDI3LjIwIDU2LjAyIFoiLz48cGF0aCBkPSJNIDUxLjczIDU0LjI4IEwgNTYuMDggNjIuMTEgTCA3Mi44NCA2Mi4xMSBMIDY4LjI5IDU0LjI4IFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTUwLDQ4MCkgcm90YXRlKDE4KSBzY2FsZSgyLjYpIiBmaWxsPSIjNWM1YzVjIiBmaWxsLW9wYWNpdHk9IjAuMTYiPjxwYXRoIGQ9Ik0gMTcuNDYgNjIuMTEgTCAyMy40OSA1MS42MSBMIDY2LjcyIDUxLjYxIEwgNjIuNjMgNDQuNjYgTCAxNy4xNyA0NC42NiBMIDE5LjcyIDQwLjE5IEwgNTkuOTYgNDAuMTkgTCA1NS45OCAzMy4zNSBMIDIzLjcyIDMzLjM1IEwgMjYuNTYgMjguODggTCA1My4zNSAyOC44OCBMIDQ5LjI5IDIxLjk4IEwgMzAuMzMgMjEuOTggTCAzMy4wMCAxNy4yMyBMIDQ2LjU3IDE3LjIzIEwgMzYuNDIgMC4wMCBMIDAuMDAgNjIuMTEgWiIvPjxwYXRoIGQ9Ik0gMjUuNTcgNTguODAgTCA0OC42NiA1OC44MCBMIDQ3LjAzIDU2LjAyIEwgMjcuMjAgNTYuMDIgWiIvPjxwYXRoIGQ9Ik0gNTEuNzMgNTQuMjggTCA1Ni4wOCA2Mi4xMSBMIDcyLjg0IDYyLjExIEwgNjguMjkgNTQuMjggWiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTgwLDQwKSByb3RhdGUoLTIyKSBzY2FsZSgwLjgpIiBmaWxsPSIjNWM1YzVjIiBmaWxsLW9wYWNpdHk9IjAuMTQiPjxwYXRoIGQ9Ik0gMTcuNDYgNjIuMTEgTCAyMy40OSA1MS42MSBMIDY2LjcyIDUxLjYxIEwgNjIuNjMgNDQuNjYgTCAxNy4xNyA0NC42NiBMIDE5LjcyIDQwLjE5IEwgNTkuOTYgNDAuMTkgTCA1NS45OCAzMy4zNSBMIDIzLjcyIDMzLjM1IEwgMjYuNTYgMjguODggTCA1My4zNSAyOC44OCBMIDQ5LjI5IDIxLjk4IEwgMzAuMzMgMjEuOTggTCAzMy4wMCAxNy4yMyBMIDQ2LjU3IDE3LjIzIEwgMzYuNDIgMC4wMCBMIDAuMDAgNjIuMTEgWiIvPjxwYXRoIGQ9Ik0gMjUuNTcgNTguODAgTCA0OC42NiA1OC44MCBMIDQ3LjAzIDU2LjAyIEwgMjcuMjAgNTYuMDIgWiIvPjxwYXRoIGQ9Ik0gNTEuNzMgNTQuMjggTCA1Ni4wOCA2Mi4xMSBMIDcyLjg0IDYyLjExIEwgNjguMjkgNTQuMjggWiIvPjwvZz48L3N2Zz4=");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 26px 40px -22px rgba(20,20,20,0.22);
}
.hero__left{ position:relative; }
.coord-ticks{
  position:absolute; left:-24px; top:0; bottom:0; width:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--mono); font-size:0.6rem; color:var(--af-grey-dim);
}
.hero h1{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(2.7rem, 5.6vw, 4.8rem);
  line-height:0.94; letter-spacing:-0.005em;
  text-transform:uppercase;
  margin:16px 0 22px;
}
.hero h1 .accent{ color:var(--af-red); }
.hero p.lede{
  font-size:1.02rem; line-height:1.65; color:#4a4842; max-width:46ch; margin-bottom:32px;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:0.82rem; letter-spacing:0.04em;
  padding:14px 26px; border:1px solid var(--af-white);
  background:var(--af-white); color:var(--af-black);
  transition:transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
  box-shadow:var(--shadow-sm);
}
.btn:hover{ transform:translateY(-2px); background:var(--af-red); border-color:var(--af-red); color:#fff; box-shadow:var(--shadow-red); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--af-white); border-color:var(--af-white); box-shadow:none; }
.btn--ghost:hover{ background:var(--af-white); color:#fff; border-color:var(--af-white); box-shadow:var(--shadow-sm); }

.spec-strip{
  margin-top:44px; display:flex; gap:32px; flex-wrap:wrap;
  font-family:var(--mono); font-size:0.7rem; color:var(--af-grey);
}
.spec-strip strong{ display:block; color:var(--af-white); font-size:0.95rem; margin-bottom:2px; }

/* ===== BLUEPRINT SIGNATURE ===== */
.blueprint{
  position:relative;
  border:1px solid var(--af-border);
  background:
    radial-gradient(circle, var(--af-grey-dim) 1.8px, transparent 1.8px) 0 0/26px 26px,
    #f7f8fa;
  aspect-ratio:1/1;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.blueprint__frame-label{
  position:absolute; top:10px; left:12px;
  font-family:var(--mono); font-size:0.62rem; color:var(--af-grey);
  letter-spacing:0.06em; z-index:3;
}
.blueprint__frame-label span{ color:#f2f0ea; }
.live-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--af-red);
  margin-right:5px; animation:live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
.blueprint__crosshair{
  position:absolute; width:26px; height:26px; pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:5; opacity:0; transition:opacity .2s;
}
.blueprint:hover .blueprint__crosshair{ opacity:1; }
.blueprint__crosshair::before, .blueprint__crosshair::after{
  content:""; position:absolute; background:#f2f0ea;
}
.blueprint__crosshair::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.blueprint__crosshair::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.blueprint__coord{
  position:absolute; bottom:12px; right:12px;
  font-family:var(--mono); font-size:0.66rem; color:#f2f0ea;
  z-index:4; opacity:0; transition:opacity .2s;
}
.blueprint:hover .blueprint__coord{ opacity:1; }
.blueprint svg{ position:relative; z-index:2; width:100%; height:100%; }
.blueprint canvas{ position:relative; z-index:2; width:100%; height:100%; display:block; }
.hero-photo{
  position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.08);
}
/* Desaturated rather than full color or full grayscale — keeps it reading
   as a real, documentary photo of the shop floor without its amber/blue
   tones clashing against the site's black/white/red system. */
.hero-photo--color{ filter:saturate(0.32) contrast(1.12) brightness(0.97); }
.draw-path{
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:draw 2.2s ease forwards;
}
.draw-path.d1{ animation-delay:0.1s; }
.draw-path.d2{ animation-delay:0.5s; }
.draw-path.d3{ animation-delay:0.9s; }
.draw-path.d4{ animation-delay:1.3s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.fade-in-label{ opacity:0; animation:fadeIn 0.6s ease forwards; }
.fade-in-label.f1{ animation-delay:1.6s; }
.fade-in-label.f2{ animation-delay:1.8s; }
.fade-in-label.f3{ animation-delay:2s; }
@keyframes fadeIn{ to{ opacity:1; } }

/* ===== SECTION SHELLS ===== */
section{ position:relative; z-index:1; }
.section-inner{ max-width:var(--shell); margin:0 auto; padding:90px 32px; position:relative; z-index:1; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:42px; flex-wrap:wrap; gap:16px; border-bottom:1px solid var(--af-border); padding-bottom:22px; }
.section-head h2{ font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,3vw,2.6rem); text-transform:uppercase; letter-spacing:0.01em; }
.section-head .tag{ font-family:var(--mono); font-size:0.7rem; color:var(--af-grey); }

/* ===== 3D PRINT LAB ===== */
/* Clean white-to-black gradient (weighted so content stays on the light
   portion, only merging into dark right at the seam into the next section)
   with the real logo mark scattered faintly across it as a watermark. */
.print-lab{
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgOTAwIDkwMCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODAsNjApIHJvdGF0ZSgtMTIpIHNjYWxlKDAuNTUpIiBmaWxsPSIjNWM1YzVjIiBmaWxsLW9wYWNpdHk9IjAuMSI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMCwxNDApIHJvdGF0ZSgyNSkgc2NhbGUoMC4zNSkiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4wOCI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1MCwzODApIHJvdGF0ZSg4KSBzY2FsZSgwLjc1KSIgZmlsbD0iI2Q4MTMyNCIgZmlsbC1vcGFjaXR5PSIwLjA3Ij48cGF0aCBkPSJNIDE3LjQ2IDYyLjExIEwgMjMuNDkgNTEuNjEgTCA2Ni43MiA1MS42MSBMIDYyLjYzIDQ0LjY2IEwgMTcuMTcgNDQuNjYgTCAxOS43MiA0MC4xOSBMIDU5Ljk2IDQwLjE5IEwgNTUuOTggMzMuMzUgTCAyMy43MiAzMy4zNSBMIDI2LjU2IDI4Ljg4IEwgNTMuMzUgMjguODggTCA0OS4yOSAyMS45OCBMIDMwLjMzIDIxLjk4IEwgMzMuMDAgMTcuMjMgTCA0Ni41NyAxNy4yMyBMIDM2LjQyIDAuMDAgTCAwLjAwIDYyLjExIFoiLz48cGF0aCBkPSJNIDI1LjU3IDU4LjgwIEwgNDguNjYgNTguODAgTCA0Ny4wMyA1Ni4wMiBMIDI3LjIwIDU2LjAyIFoiLz48cGF0aCBkPSJNIDUxLjczIDU0LjI4IEwgNTYuMDggNjIuMTEgTCA3Mi44NCA2Mi4xMSBMIDY4LjI5IDU0LjI4IFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzIwLDQ4MCkgcm90YXRlKC0zMCkgc2NhbGUoMC40NSkiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4wOSI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMCw2MjApIHJvdGF0ZSgxOCkgc2NhbGUoMC42KSIgZmlsbD0iIzVjNWM1YyIgZmlsbC1vcGFjaXR5PSIwLjA4Ij48cGF0aCBkPSJNIDE3LjQ2IDYyLjExIEwgMjMuNDkgNTEuNjEgTCA2Ni43MiA1MS42MSBMIDYyLjYzIDQ0LjY2IEwgMTcuMTcgNDQuNjYgTCAxOS43MiA0MC4xOSBMIDU5Ljk2IDQwLjE5IEwgNTUuOTggMzMuMzUgTCAyMy43MiAzMy4zNSBMIDI2LjU2IDI4Ljg4IEwgNTMuMzUgMjguODggTCA0OS4yOSAyMS45OCBMIDMwLjMzIDIxLjk4IEwgMzMuMDAgMTcuMjMgTCA0Ni41NyAxNy4yMyBMIDM2LjQyIDAuMDAgTCAwLjAwIDYyLjExIFoiLz48cGF0aCBkPSJNIDI1LjU3IDU4LjgwIEwgNDguNjYgNTguODAgTCA0Ny4wMyA1Ni4wMiBMIDI3LjIwIDU2LjAyIFoiLz48cGF0aCBkPSJNIDUxLjczIDU0LjI4IEwgNTYuMDggNjIuMTEgTCA3Mi44NCA2Mi4xMSBMIDY4LjI5IDU0LjI4IFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTIwLDcyMCkgcm90YXRlKC02KSBzY2FsZSgwLjMpIiBmaWxsPSIjNWM1YzVjIiBmaWxsLW9wYWNpdHk9IjAuMDciPjxwYXRoIGQ9Ik0gMTcuNDYgNjIuMTEgTCAyMy40OSA1MS42MSBMIDY2LjcyIDUxLjYxIEwgNjIuNjMgNDQuNjYgTCAxNy4xNyA0NC42NiBMIDE5LjcyIDQwLjE5IEwgNTkuOTYgNDAuMTkgTCA1NS45OCAzMy4zNSBMIDIzLjcyIDMzLjM1IEwgMjYuNTYgMjguODggTCA1My4zNSAyOC44OCBMIDQ5LjI5IDIxLjk4IEwgMzAuMzMgMjEuOTggTCAzMy4wMCAxNy4yMyBMIDQ2LjU3IDE3LjIzIEwgMzYuNDIgMC4wMCBMIDAuMDAgNjIuMTEgWiIvPjxwYXRoIGQ9Ik0gMjUuNTcgNTguODAgTCA0OC42NiA1OC44MCBMIDQ3LjAzIDU2LjAyIEwgMjcuMjAgNTYuMDIgWiIvPjxwYXRoIGQ9Ik0gNTEuNzMgNTQuMjggTCA1Ni4wOCA2Mi4xMSBMIDcyLjg0IDYyLjExIEwgNjguMjkgNTQuMjggWiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4MDAsNzYwKSByb3RhdGUoMzUpIHNjYWxlKDAuNCkiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4wNiI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI1MCw4MzApIHJvdGF0ZSgxNSkgc2NhbGUoMC41KSIgZmlsbD0iI2Q4MTMyNCIgZmlsbC1vcGFjaXR5PSIwLjA5Ij48cGF0aCBkPSJNIDE3LjQ2IDYyLjExIEwgMjMuNDkgNTEuNjEgTCA2Ni43MiA1MS42MSBMIDYyLjYzIDQ0LjY2IEwgMTcuMTcgNDQuNjYgTCAxOS43MiA0MC4xOSBMIDU5Ljk2IDQwLjE5IEwgNTUuOTggMzMuMzUgTCAyMy43MiAzMy4zNSBMIDI2LjU2IDI4Ljg4IEwgNTMuMzUgMjguODggTCA0OS4yOSAyMS45OCBMIDMwLjMzIDIxLjk4IEwgMzMuMDAgMTcuMjMgTCA0Ni41NyAxNy4yMyBMIDM2LjQyIDAuMDAgTCAwLjAwIDYyLjExIFoiLz48cGF0aCBkPSJNIDI1LjU3IDU4LjgwIEwgNDguNjYgNTguODAgTCA0Ny4wMyA1Ni4wMiBMIDI3LjIwIDU2LjAyIFoiLz48cGF0aCBkPSJNIDUxLjczIDU0LjI4IEwgNTYuMDggNjIuMTEgTCA3Mi44NCA2Mi4xMSBMIDY4LjI5IDU0LjI4IFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjMwLDg2MCkgcm90YXRlKC0yMCkgc2NhbGUoMC42NSkiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4wOCI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLDc4MCkgcm90YXRlKDQwKSBzY2FsZSgwLjMyKSIgZmlsbD0iIzVjNWM1YyIgZmlsbC1vcGFjaXR5PSIwLjA3Ij48cGF0aCBkPSJNIDE3LjQ2IDYyLjExIEwgMjMuNDkgNTEuNjEgTCA2Ni43MiA1MS42MSBMIDYyLjYzIDQ0LjY2IEwgMTcuMTcgNDQuNjYgTCAxOS43MiA0MC4xOSBMIDU5Ljk2IDQwLjE5IEwgNTUuOTggMzMuMzUgTCAyMy43MiAzMy4zNSBMIDI2LjU2IDI4Ljg4IEwgNTMuMzUgMjguODggTCA0OS4yOSAyMS45OCBMIDMwLjMzIDIxLjk4IEwgMzMuMDAgMTcuMjMgTCA0Ni41NyAxNy4yMyBMIDM2LjQyIDAuMDAgTCAwLjAwIDYyLjExIFoiLz48cGF0aCBkPSJNIDI1LjU3IDU4LjgwIEwgNDguNjYgNTguODAgTCA0Ny4wMyA1Ni4wMiBMIDI3LjIwIDU2LjAyIFoiLz48cGF0aCBkPSJNIDUxLjczIDU0LjI4IEwgNTYuMDggNjIuMTEgTCA3Mi44NCA2Mi4xMSBMIDY4LjI5IDU0LjI4IFoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUwLDg3MCkgcm90YXRlKC0xMCkgc2NhbGUoMC40MikiIGZpbGw9IiM1YzVjNWMiIGZpbGwtb3BhY2l0eT0iMC4wOCI+PHBhdGggZD0iTSAxNy40NiA2Mi4xMSBMIDIzLjQ5IDUxLjYxIEwgNjYuNzIgNTEuNjEgTCA2Mi42MyA0NC42NiBMIDE3LjE3IDQ0LjY2IEwgMTkuNzIgNDAuMTkgTCA1OS45NiA0MC4xOSBMIDU1Ljk4IDMzLjM1IEwgMjMuNzIgMzMuMzUgTCAyNi41NiAyOC44OCBMIDUzLjM1IDI4Ljg4IEwgNDkuMjkgMjEuOTggTCAzMC4zMyAyMS45OCBMIDMzLjAwIDE3LjIzIEwgNDYuNTcgMTcuMjMgTCAzNi40MiAwLjAwIEwgMC4wMCA2Mi4xMSBaIi8+PHBhdGggZD0iTSAyNS41NyA1OC44MCBMIDQ4LjY2IDU4LjgwIEwgNDcuMDMgNTYuMDIgTCAyNy4yMCA1Ni4wMiBaIi8+PHBhdGggZD0iTSA1MS43MyA1NC4yOCBMIDU2LjA4IDYyLjExIEwgNzIuODQgNjIuMTEgTCA2OC4yOSA1NC4yOCBaIi8+PC9nPjwvc3ZnPg=="),
    linear-gradient(to bottom, rgba(20,20,20,0.10), transparent 220px);
  background-color: var(--af-black);
  background-repeat: repeat, no-repeat;
  background-size: 900px 900px, 100% 100%;
  position:relative;
}
/* fades the line-grid in only within the darkening zone, so the pattern
   itself ramps up in sync with the color instead of snapping on at the
   section boundary — hands off seamlessly into the gallery strip's grid */
.print-lab::after{ content:none; }
.metalwork-bg{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark) !important;
}
/* ===== DARK ZONE =====
   The Metal Fab treatment, generalised: dotted grid on the shared dark
   surface, used for the mid-page content of every page so the rhythm is
   always white header -> dark body -> white CTA -> dark footer.
   Everything below re-colours the components that normally sit on a light
   background so they stay legible inside one of these zones. */
.dark-zone{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark);
  box-shadow: inset 0 14px 26px -18px rgba(0,0,0,0.85);
}
.dark-zone .section-head{ border-color:rgba(247,248,250,0.12); }
.dark-zone .section-head h2,
.dark-zone .print-copy h2,
.dark-zone h2{ color:var(--af-black); }
.dark-zone .section-head .tag{ color:#8a8a8a; }
.dark-zone .tag a{ color:var(--af-red); }
.dark-zone .print-copy .lede,
.dark-zone .print-copy .lede-sm,
.dark-zone > .section-inner > p{ color:#b5b3ab; }
.dark-zone .print-copy .lede-sm strong{ color:var(--af-black); }
.dark-zone .print-stats{ color:#8a8a8a; }
.dark-zone .print-stats strong{ color:var(--af-black); }
.dark-zone .btn--ghost{ color:var(--af-black); border-color:rgba(247,248,250,0.25); }
.dark-zone .btn--ghost:hover{ background:transparent; color:var(--af-red); border-color:var(--af-red); }
.dark-zone .check-list li{ color:#b5b3ab; }
.dark-zone .check-list li strong{ color:var(--af-black); }
/* spec sheets keep white rows, but their frame needs to read on dark */
.dark-zone .spec-sheet{ background:rgba(247,248,250,0.14); border-color:rgba(247,248,250,0.14); }
.dark-zone .shop-empty{ background:transparent; border-color:rgba(247,248,250,0.18); color:#b5b3ab; }
.dark-zone .grid{ background:rgba(247,248,250,0.14); border-color:rgba(247,248,250,0.14); }
.dark-zone .howitworks{ background:rgba(247,248,250,0.14); border-color:rgba(247,248,250,0.14); }

#metalwork .section-head{ border-color:rgba(247,248,250,0.12); }
#metalwork .section-head h2, #metalwork .print-copy h2{ color:var(--af-black); }
#metalwork .section-head .tag{ color:#8a8a8a; }
#metalwork .print-copy .lede{ color:#b5b3ab; }
#metalwork .print-stats{ color:#8a8a8a; }
#metalwork .print-stats strong{ color:var(--af-black); }
#metalwork .btn--ghost{ color:var(--af-black); border-color:rgba(247,248,250,0.25); }
#metalwork .btn--ghost:hover{ color:var(--af-red); border-color:var(--af-red); }
.nav-badge{
  font-family:var(--mono); font-size:0.56rem; letter-spacing:0.06em;
  background:var(--af-red); color:#fff; padding:1px 5px; border-radius:2px;
  position:relative; top:-7px; margin-left:2px;
}
.print-top{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.print-intro{ max-width:70ch; margin-bottom:50px; }
.print-intro .lede{ margin-bottom:26px; }
.print-copy p.lede{ margin-bottom:26px; }
.print-stats{ display:flex; gap:30px; flex-wrap:wrap; font-family:var(--mono); font-size:0.7rem; color:var(--af-grey); margin-bottom:30px; }
.print-stats strong{ display:block; color:var(--af-white); font-size:1.05rem; margin-bottom:2px; }
.print-visual{
  position:relative; border:1px solid var(--af-border);
  background:
    radial-gradient(circle, var(--af-grey-dim) 1.8px, transparent 1.8px) 0 0/26px 26px,
    #f7f8fa;
  aspect-ratio:1/1; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.print-visual__label{ position:absolute; top:10px; left:12px; font-family:var(--mono); font-size:0.62rem; color:var(--af-grey); letter-spacing:0.06em; z-index:3; }
.print-visual__label span{ color:var(--af-red); }
.print-visual__readout{ position:absolute; bottom:12px; left:12px; font-family:var(--mono); font-size:0.66rem; color:#f2f0ea; z-index:4; }
.print-visual__readout div{ margin-bottom:2px; }
.print-visual svg{ position:relative; z-index:2; width:100%; height:100%; }
.print-visual canvas{ position:relative; z-index:2; width:100%; height:100%; display:block; }
.layer-ring{ opacity:0; transform:scaleX(0.4); transform-box:fill-box; transform-origin:center; animation:layerRise 0.5s ease forwards; }
@keyframes layerRise{ to{ opacity:1; transform:scaleX(1); } }
.nozzle{ animation:nozzleSweep 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes nozzleSweep{ 0%,100%{ transform:translateX(-34px);} 50%{ transform:translateX(34px);} }

/* ===== HOW IT WORKS ===== */
.howitworks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--af-border); border:1px solid var(--af-border); margin-bottom:56px; }
.step{ background:var(--af-panel); padding:22px 20px; position:relative; }
.step__num{ font-family:var(--mono); font-size:0.7rem; color:#5c5c5c; margin-bottom:10px; }
.step h4, .step h3{ font-family:var(--disp); font-weight:600; font-size:1.05rem; text-transform:uppercase; margin-bottom:6px; }
.step p{ font-size:0.8rem; color:var(--af-grey); line-height:1.5; }

/* ===== GALLERY ===== */
.gallery-strip{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark);
}
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--af-border); border:1px solid var(--af-border); }
.gallery-item{ position:relative; overflow:hidden; aspect-ratio:1/1; transition:box-shadow .3s var(--ease); }
.gallery-item:hover{ box-shadow:var(--shadow-lg); z-index:2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.1); transition:transform .4s ease, filter .4s ease; }
.gallery-item:hover img{ transform:scale(1.06); filter:grayscale(0.4) contrast(1.1); }
.gallery-item__cap{
  position:absolute; bottom:0; left:0; right:0; padding:10px 12px;
  background:linear-gradient(to top, rgba(10,10,10,0.85), transparent);
  font-family:var(--mono); font-size:0.62rem; color:#f2f0ea; letter-spacing:0.04em;
}

/* ===== PRODUCT GRID ===== */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--af-border);
  border:1px solid var(--af-border); grid-auto-flow:dense; }
/* Bento-style hierarchy: the lead item in a catalogue takes a 2x2 cell so the
   flagship isn't the same size as a filament spool. Only kicks in from three
   items up, so a narrow filter result doesn't leave a giant tile beside a hole. */
.grid > .card:first-child:nth-last-child(n+3){ grid-column:span 2; grid-row:span 2; }
.grid > .card:first-child:nth-last-child(n+3) .card__photo-wrap img{ height:340px; }
.grid > .card:first-child:nth-last-child(n+3) h3{ font-size:1.6rem; }
.grid > .card:first-child:nth-last-child(n+3) .desc{ font-size:1rem; max-width:46ch; }
@media (max-width:900px){
  .grid > .card:first-child:nth-last-child(n+3){ grid-column:span 1; grid-row:span 1; }
  .grid > .card:first-child:nth-last-child(n+3) .card__photo-wrap img{ height:150px; }
  .grid > .card:first-child:nth-last-child(n+3) h3{ font-size:1.25rem; }
}
.card{
  background:var(--af-panel); padding:32px 28px 28px; position:relative;
  transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:var(--shadow-sm);
  z-index:1;
}
.card:hover{ background:#fbfaf7; transform:translateY(-3px); box-shadow:var(--shadow-lg); z-index:2; }
.card__id{ font-family:var(--mono); font-size:0.68rem; color:var(--af-grey); display:flex; justify-content:space-between; margin-bottom:18px; }
.card__id .status{ color:var(--af-red); }
.card__icon{ width:100%; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card__photo-wrap{ position:relative; margin-bottom:18px; overflow:hidden; border:1px solid var(--af-border); background:var(--af-black); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4); }
.card__photo-wrap img{ width:100%; height:150px; object-fit:cover; display:block; filter:grayscale(1) contrast(1.08); transition:transform .5s var(--ease), filter .5s var(--ease); }
.card__photo-wrap::after{ content:""; position:absolute; inset:0; background:var(--af-red); mix-blend-mode:multiply; opacity:0; transition:opacity .3s var(--ease); pointer-events:none; }
.card:hover .card__photo-wrap::after{ opacity:0.13; }
.card:hover .card__photo-wrap img{ transform:scale(1.06); filter:grayscale(0.55) contrast(1.08); }
.card__icon-badge{ position:absolute; bottom:8px; right:8px; width:32px; height:32px; background:var(--af-panel); border:1px solid var(--af-border); display:flex; align-items:center; justify-content:center; padding:6px; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease); }
.card:hover .card__icon-badge{ transform:scale(1.08); }
.card__icon-badge svg{ width:100%; height:100%; }
.photo-tag{ position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:0.58rem; color:var(--af-white); background:rgba(247,248,250,0.85); padding:2px 6px; letter-spacing:0.05em; }
.card__icon svg{ width:90%; height:90%; }
.card h3{ font-family:var(--disp); font-weight:600; font-size:1.3rem; text-transform:uppercase; margin-bottom:6px; }
.card p.desc{ font-size:0.86rem; color:#54524c; line-height:1.5; margin-bottom:16px; min-height:42px;}
.card__specs{ font-family:var(--mono); font-size:0.66rem; margin-bottom:18px; border-top:1px dashed var(--af-grey-dim); padding-top:10px; }
.spec-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:3px 0; }
.spec-row__label{ color:var(--af-grey); letter-spacing:0.04em; white-space:nowrap; }
.spec-row__value{ color:var(--af-white); font-weight:700; text-align:right; }
.concept-ribbon{
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--af-red); border:1px dashed var(--af-red); background:rgba(216,19,36,0.05);
  padding:6px 8px; text-align:center; margin-bottom:16px;
}
.card__footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:16px; border-top:1px dashed var(--af-grey-dim); }
.card__price{ font-family:var(--mono); font-size:1.3rem; font-weight:700; color:var(--af-white); letter-spacing:0.01em; }
.card__add{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.05em;
  border:1px solid var(--af-grey-dim); background:transparent; color:var(--af-white);
  padding:9px 14px; transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.card__add:hover{ border-color:var(--af-red); background:var(--af-red); color:#fff; }
/* Instant-buy CTA: solid fill by default, not just on hover — gives a
   customer scanning the grid an immediate visual cue for "buyable now"
   vs the outline treatment used for quote-request/notify buttons. */
.card__add--buy{ background:var(--af-red); border-color:var(--af-red); color:#fff; }
.card__add--buy:hover{ background:#a80f1c; border-color:#a80f1c; transform:translateY(-1px); }
.card__corner{ position:absolute; width:11px; height:11px; border-color:var(--af-grey-dim); opacity:0; transition:opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.card:hover .card__corner{ opacity:1; border-color:var(--af-red); }
.card:hover .card__corner.tl{ transform:translate(-2px,-2px); }
.card:hover .card__corner.tr{ transform:translate(2px,-2px); }
.card:hover .card__corner.bl{ transform:translate(-2px,2px); }
.card:hover .card__corner.br{ transform:translate(2px,2px); }
.card__corner.tl{ top:8px; left:8px; border-top:1px solid; border-left:1px solid; }
.card__corner.tr{ top:8px; right:8px; border-top:1px solid; border-right:1px solid; }
.card__corner.bl{ bottom:8px; left:8px; border-bottom:1px solid; border-left:1px solid; }
.card__corner.br{ bottom:8px; right:8px; border-bottom:1px solid; border-right:1px solid; }

/* ===== FAQ ===== */
.dark-zone-faq{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark);
}
#faq .section-head{ border-color:rgba(247,248,250,0.12); }
#faq .section-head h2{ color:var(--af-black); }
#faq .section-head .tag{ color:#8a8a8a; }
.faq-layout{ display:grid; grid-template-columns:260px 1fr; gap:50px; align-items:start; }
.faq-col{ min-width:0; }
.faq-tabs-vertical{ display:flex; flex-direction:column; gap:2px; position:sticky; top:calc(var(--header-h, 72px) + 24px); }
.faq-tab{
  text-align:left; background:transparent; border:1px solid transparent; border-left:3px solid transparent;
  color:#8a8a8a; font-family:var(--body); font-size:0.92rem; padding:12px 14px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.faq-tab:hover{ color:#f2f0ea; }
.faq-tab.is-active{
  color:#fff; border-color:rgba(247,248,250,0.14); border-left-color:var(--af-red);
  background:rgba(247,248,250,0.04);
}
@media (max-width:880px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-tabs-vertical{ position:static; flex-direction:row; flex-wrap:wrap; }
  .faq-tab{ border-left:1px solid transparent; border-bottom:2px solid transparent; }
  .faq-tab.is-active{ border-left-color:transparent; border-bottom-color:var(--af-red); }
}
.faq-group{ display:none; margin-bottom:44px; }
.faq-group.is-active{ display:block; }
.faq-group:last-child{ margin-bottom:0; }
.faq-item{ border-bottom:1px solid rgba(247,248,250,0.1); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--disp); font-weight:600; font-size:1.05rem;
  color:var(--af-black);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; width:8px; height:8px; flex-shrink:0; margin-top:-4px;
  border-right:1.5px solid var(--af-red); border-bottom:1.5px solid var(--af-red);
  transform:rotate(45deg); transition:transform .3s var(--ease), margin-top .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.faq-item__body{ padding:0 0 20px; color:#b5b3ab; font-size:0.92rem; line-height:1.65; max-width:68ch; }

/* ===== MANIFESTO STRIP ===== */
.manifesto{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark);
}
/* The photo column was a proportion of the page, so the portrait grew to
   roughly twice the height of the paragraph beside it and dragged the whole
   section left. Fixed widths cap the photo, justify-content centres the pair
   so leftover space splits evenly instead of pooling on the right, and
   centring the items balances the two blocks against each other. */
.manifesto .section-inner{
  padding:90px 32px; display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,620px);
  justify-content:center; gap:64px; align-items:center;
}
.manifesto__people-label{ font-family:var(--mono); font-size:0.72rem; color:var(--af-red); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
/* height:auto matters here — the img's height attribute (added so the
   browser can reserve space before the photo loads) otherwise acts as a
   presentational hint and overrides aspect-ratio, stretching the frame. */
.manifesto__photo{ width:100%; max-width:340px; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid rgba(247,248,250,0.15); }
.manifesto__body p{ font-size:1.05rem; line-height:1.8; color:#b5b3ab; margin-bottom:20px; max-width:56ch; }
.manifesto__body p:last-child{ margin-bottom:0; }
.manifesto__body strong{ color:var(--af-black); }
.tol-list{ font-family:var(--mono); font-size:0.72rem; color:#8a8a8a; margin-top:28px; display:flex; gap:26px; flex-wrap:wrap; }
.tol-list b{ color:var(--af-black); }

/* ===== FOOTER ===== */
footer{
  background:
    var(--dot-grid) 0 0/896px 280px,
    var(--surface-dark);
  position:relative; z-index:1;
}
.footer-inner{ max-width:var(--shell); margin:0 auto; padding:60px 32px 30px; }
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:36px; margin-bottom:50px; }
.footer-brand .logo{ margin-bottom:14px; color:var(--af-black); }
footer .logo__mark path{ fill:#f2f0ea; }
.footer-brand p{ font-size:0.85rem; color:#8a8a8a; max-width:32ch; line-height:1.6; }
.footer-col h4, .footer-col .footer-col__title{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; color:#8a8a8a; text-transform:uppercase; margin-bottom:16px; }
.footer-col a{ display:block; font-size:0.85rem; color:#8a8a8a; margin-bottom:10px; transition:color .15s; }
.footer-col a:hover{ color:var(--af-black); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  border-top:1px solid rgba(247,248,250,0.1); padding-top:22px;
  font-family:var(--mono); font-size:0.64rem; color:#5c5c5c;
}
.footer-bottom .coords{ cursor:default; }

/* ===== CART DRAWER ===== */
.cart-overlay-bg{ position:fixed; inset:0; background:rgba(10,10,10,0.35); z-index:140; opacity:0; pointer-events:none; transition:opacity .25s; }
.cart-overlay-bg.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  /* Slides on `transform`, not `right`. Animating `right` re-runs layout on
     every frame; a transform is handled by the compositor, so the drawer
     opens smoothly even on a long page. */
  position:fixed; top:0; right:0; width:400px; max-width:92vw; height:100vh;
  transform:translateX(105%);
  background:var(--af-panel); border-left:1px solid var(--af-border); z-index:150;
  transition:transform .4s var(--ease); display:flex; flex-direction:column;
  box-shadow:-24px 0 60px rgba(20,20,20,0.14);
  will-change:transform;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer__header{ padding:20px 22px; border-bottom:1px solid var(--af-border); display:flex; justify-content:space-between; align-items:center; }
.cart-drawer__header h3{ font-family:var(--disp); text-transform:uppercase; font-size:1.1rem; letter-spacing:0.02em; }
.cart-drawer__close{ background:transparent; border:1px solid var(--af-grey-dim); color:var(--af-white); font-family:var(--mono); font-size:0.7rem; padding:6px 10px; transition:border-color .2s, color .2s; }
.cart-drawer__close:hover{ border-color:var(--af-red); color:var(--af-red); }
.cart-drawer__items{ flex:1; overflow-y:auto; padding:6px 22px; }
.cart-line{ display:flex; gap:12px; padding:16px 0; border-bottom:1px dashed var(--af-grey-dim); }
.cart-line img{ width:56px; height:56px; object-fit:cover; filter:grayscale(1) contrast(1.08); border:1px solid var(--af-border); flex-shrink:0; }
.cart-line__info{ flex:1; min-width:0; }
.cart-line__info .cid{ font-family:var(--mono); font-size:0.6rem; color:var(--af-grey); }
.cart-line__info h4{ font-family:var(--disp); font-size:0.95rem; text-transform:uppercase; margin:2px 0 8px; }
.cart-line__qty{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:0.75rem; }
.cart-line__qty button{ width:22px; height:22px; border:1px solid var(--af-grey-dim); background:transparent; color:var(--af-white); line-height:1; transition:border-color .2s, color .2s, transform .15s; }
.cart-line__qty button:active{ transform:scale(0.9); }
.cart-line__qty button:hover{ border-color:var(--af-red); color:var(--af-red); }
.cart-line__right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.cart-line__price{ font-family:var(--mono); font-size:0.85rem; }
.cart-line__remove{ background:transparent; border:none; color:var(--af-grey); font-family:var(--mono); font-size:0.62rem; cursor:pointer; letter-spacing:0.04em; }
.cart-line__remove:hover{ color:var(--af-red); }
.cart-empty{ text-align:center; color:var(--af-grey); font-family:var(--mono); font-size:0.8rem; padding:70px 16px; line-height:1.6; }
.cart-drawer__footer{ padding:18px 22px 24px; border-top:1px solid var(--af-border); }
.cart-subtotal{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.9rem; margin-bottom:16px; }
.cart-drawer__footer .btn{ width:100%; text-align:center; display:block; margin-bottom:10px; }

/* ===== CHECKOUT MODAL ===== */
.checkout-modal{ position:fixed; inset:0; background:rgba(247,248,250,0.97); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:70px 20px; }
.checkout-modal.show{ display:flex; }
.checkout-box{ background:var(--af-panel); border:1px solid var(--af-border); max-width:620px; width:100%; padding:38px; position:relative; box-shadow:var(--shadow-lg); }
.checkout-box__close{ position:absolute; top:16px; right:16px; background:transparent; border:1px solid var(--af-grey-dim); color:var(--af-white); font-family:var(--mono); font-size:0.7rem; padding:6px 10px; }
.checkout-box__close:hover{ border-color:var(--af-red); color:var(--af-red); }
.checkout-eyebrow{ font-family:var(--mono); font-size:0.66rem; color:var(--af-red); letter-spacing:0.1em; margin-bottom:8px; }
.checkout-box h2{ font-family:var(--disp); font-weight:700; font-size:1.6rem; text-transform:uppercase; margin-bottom:6px; }
.checkout-summary{ margin:22px 0; border-top:1px dashed var(--af-grey-dim); border-bottom:1px dashed var(--af-grey-dim); padding:16px 0; }
.checkout-summary__line{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:0.78rem; margin-bottom:8px; color:var(--af-grey); }
.checkout-summary__total{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:1.05rem; color:var(--af-white); margin-top:10px; padding-top:10px; border-top:1px solid var(--af-border); }
.checkout-form label{ display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.06em; color:var(--af-grey); margin-bottom:6px; text-transform:uppercase; }
.checkout-form input{ width:100%; background:transparent; border:1px solid var(--af-grey-dim); color:var(--af-white); font-family:var(--body); font-size:0.9rem; padding:10px 12px; margin-bottom:16px; }
.checkout-form input:focus{ outline:none; border-color:var(--af-red); }
.checkout-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkout-note{ font-family:var(--mono); font-size:0.62rem; color:var(--af-grey); margin-bottom:18px; line-height:1.5; }
.order-confirm{ text-align:center; padding:10px 0 4px; }
.order-confirm .stamp{ font-family:var(--mono); font-size:0.7rem; color:var(--af-red); border:1px solid var(--af-red); display:inline-block; padding:4px 12px; margin-bottom:20px; letter-spacing:0.08em; }
.order-confirm h2{ margin-bottom:10px; }
.order-confirm p{ color:var(--af-grey); font-size:0.88rem; line-height:1.6; margin-bottom:24px; }

/* ===== AETHER CHAT PLACEHOLDER ===== */
.aether-launcher{
  position:fixed; bottom:24px; right:24px; z-index:120;
  width:60px; height:60px; border-radius:50%;
  background:var(--af-white); border:1px solid var(--af-grey-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 22px rgba(20,20,20,0.18);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.aether-launcher:hover{ transform:scale(1.07); box-shadow:0 10px 30px rgba(20,20,20,0.24); }

/* Mirrors the real AETHER dashboard's center hub: three concentric rings at
   different sizes/speeds/colors around a glowing gradient core, scaled down
   from the dashboard's 280px orb to fit a 48px launcher icon. */
.aether-orb{ position:relative; width:48px; height:48px; display:flex; align-items:center; justify-content:center; }
.aether-orb__ring{ position:absolute; border-radius:50%; border:1px solid; opacity:0.55; }
.aether-orb__ring.r1{ width:48px; height:48px; border-color:rgba(247,248,250,0.18); animation:orbSpin 22s linear infinite; }
.aether-orb__ring.r2{ width:38px; height:38px; border-color:rgba(216,19,36,0.28); animation:orbSpin 16s linear infinite reverse; }
.aether-orb__ring.r3{ width:27px; height:27px; border-color:rgba(247,248,250,0.3); animation:orbPulseRing 3s ease-in-out infinite; }
@keyframes orbSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes orbPulseRing{ 0%,100%{ transform:scale(1); opacity:0.4; } 50%{ transform:scale(1.06); opacity:0.75; } }
@keyframes orbPulse{
  0%{ box-shadow:0 0 0 0 rgba(216,19,36,0.45); }
  70%{ box-shadow:0 0 0 14px rgba(216,19,36,0); }
  100%{ box-shadow:0 0 0 0 rgba(216,19,36,0); }
}

.aether-orb__core{
  width:19px; height:19px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #e5e5e3 35%, #a6a6a4 70%, #3a3a3a 100%);
  box-shadow:0 0 11px 2px rgba(255,255,255,0.3), 0 0 19px 5px rgba(216,19,36,0.16);
  animation:orbBreathe 4s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
}
@keyframes orbBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.04); } }

.aether-launcher__badge{
  position:absolute; top:-4px; right:-4px; background:var(--af-red); color:#fff;
  font-family:var(--mono); font-size:0.52rem; letter-spacing:0.03em;
  padding:2px 5px; border-radius:8px;
}
.aether-panel{
  position:fixed; bottom:96px; right:24px; width:360px; max-width:90vw;
  height:480px; max-height:70vh; background:var(--af-panel); border:1px solid var(--af-border);
  z-index:121; display:none; flex-direction:column; box-shadow:0 14px 44px rgba(20,20,20,0.2);
}
.aether-panel.open{ display:flex; }
.aether-panel__header{ padding:16px 18px; border-bottom:1px solid var(--af-border); display:flex; align-items:center; gap:10px; }
.aether-panel__core{ width:9px; height:9px; border-radius:50%; background:var(--af-red); animation:orbPulse 2.4s ease-in-out infinite; flex-shrink:0; }
.aether-panel__title{ flex:1; min-width:0; }
.aether-panel__title h4{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1rem; letter-spacing:0.03em; }
.aether-panel__title span{ font-family:var(--mono); font-size:0.6rem; color:var(--af-grey); }
.aether-panel__close{ background:transparent; border:1px solid var(--af-grey-dim); color:var(--af-white); font-family:var(--mono); font-size:0.62rem; padding:5px 8px; flex-shrink:0; }
.aether-panel__close:hover{ border-color:var(--af-red); color:var(--af-red); }
.aether-panel__body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.aether-msg{ max-width:86%; font-size:0.83rem; line-height:1.5; padding:10px 12px; border:1px solid var(--af-border); }
.aether-msg.bot{ background:var(--af-black); align-self:flex-start; }
.aether-msg.user{ background:var(--af-white); color:var(--af-black); align-self:flex-end; border-color:var(--af-white); }
.aether-msg .tag-mini{ display:block; font-family:var(--mono); font-size:0.55rem; color:var(--af-red); margin-bottom:4px; letter-spacing:0.05em; }
.aether-msg.user .tag-mini{ color:var(--af-red); }
.aether-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px; }
.aether-chip{ font-family:var(--mono); font-size:0.64rem; border:1px solid var(--af-grey-dim); background:transparent; color:var(--af-white); padding:7px 10px; transition:border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.aether-chip:hover{ transform:translateY(-1px); }
.aether-chip:hover{ border-color:var(--af-red); color:var(--af-red); }
.aether-panel__inputrow{ display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--af-border); }
.aether-panel__inputrow input{ flex:1; min-width:0; background:transparent; border:1px solid var(--af-grey-dim); color:var(--af-white); font-family:var(--body); font-size:0.85rem; padding:9px 10px; }
.aether-panel__inputrow input:focus{ outline:none; border-color:var(--af-red); }
.aether-panel__inputrow button{ font-family:var(--mono); font-size:0.68rem; border:1px solid var(--af-white); background:var(--af-white); color:var(--af-black); padding:0 14px; flex-shrink:0; }
.aether-panel__inputrow button:hover{ background:var(--af-red); border-color:var(--af-red); color:#fff; }
@media (max-width: 480px){
  .aether-panel{ right:12px; bottom:88px; width:calc(100vw - 24px); }
  .aether-launcher{ right:16px; bottom:16px; }
}

/* ===== EASTER EGG OVERLAY ===== */
.egg-overlay{
  position:fixed; inset:0; background:rgba(247,248,250,0.97); z-index:200;
  display:none; align-items:center; justify-content:center; flex-direction:column;
  font-family:var(--mono); text-align:center; padding:24px;
}
.egg-overlay.show{ display:flex; }
.egg-overlay pre{ color:var(--af-red); font-size:0.7rem; line-height:1.3; margin-bottom:24px; }
.egg-overlay p{ color:var(--af-white); font-size:0.95rem; max-width:44ch; line-height:1.6; margin-bottom:20px; }
.egg-overlay button{ font-family:var(--mono); background:transparent; border:1px solid var(--af-red); color:var(--af-red); padding:10px 20px; font-size:0.75rem; }
.egg-overlay button:hover{ background:var(--af-red); color:#fff; }

@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; padding-top:50px; }
  .navlinks{ display:none; }
  .hamburger-btn{ display:flex; }
  .grid{ grid-template-columns:1fr; }
  .print-top{ grid-template-columns:1fr; }
  .howitworks{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .manifesto .section-inner{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

/* ===== MULTI-PAGE NAV STATE ===== */
/* Marks which page you're currently on in the header nav. */
.navlinks a.is-current, .mobile-nav-drawer__links a.is-current{ color:var(--af-white); }
.navlinks a.is-current::before, .navlinks a.is-current::after{ color:var(--af-red); }

/* ===== PAGE HEADER (sub-pages) ===== */
/* Compact intro block that opens each interior page, in place of the
   full-height hero that only the home page carries. */
.page-head{ background:var(--af-panel); }
.page-head__inner{ max-width:var(--shell); margin:0 auto; padding:64px 32px 56px; }
.page-head .eyebrow{ margin-bottom:14px; }
.page-head h1{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.4rem,5.5vw,4rem); line-height:0.95; letter-spacing:-0.01em; margin-bottom:18px;
}
.page-head p{ max-width:62ch; color:var(--af-grey); font-size:1rem; line-height:1.7; }

/* ===== ROUTE CARDS (home: send people into the service pages) ===== */
/* These sat outside the section's content container, so they ran the full
   width of the screen while the heading above them stayed centred. Matching
   the content column (shell minus its 32px padding) lines the cards up with
   that heading and turns them into an inset white panel on the dark surface,
   the same way the CTA band works. */
.route-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  max-width:calc(var(--shell) - 64px); margin:0 auto;
  background:var(--af-border); border:1px solid var(--af-border);
  box-shadow:0 18px 44px rgba(0,0,0,0.28);
}
@media (max-width:1340px){ .route-cards{ box-shadow:none; } }
.route-card{ background:var(--af-panel); padding:46px 42px 40px; position:relative; display:block; transition:background .3s var(--ease); }
.route-card:hover{ background:#fff; }
.route-card__label{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.route-card__label .dot{ width:6px; height:6px; border-radius:50%; background:var(--af-red); display:inline-block; }
.route-card__label.is-live{ color:var(--af-red); }
.route-card__label.is-soon{ color:var(--af-grey); }
.route-card__label.is-soon .dot{ background:var(--af-grey-dim); }
.route-card h3{ font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3vw,2.3rem); text-transform:uppercase; line-height:1; margin-bottom:14px; }
.route-card p{ color:var(--af-grey); font-size:0.94rem; line-height:1.7; max-width:44ch; margin-bottom:22px; }
.route-card__meta{ display:flex; gap:26px; margin-bottom:26px; flex-wrap:wrap; }
.route-card__meta div{ font-family:var(--mono); font-size:0.62rem; color:var(--af-grey); letter-spacing:0.06em; text-transform:uppercase; }
.route-card__meta strong{ display:block; font-family:var(--disp); font-size:1.35rem; color:var(--af-white); font-weight:700; margin-bottom:2px; }
.route-card__go{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--af-white); display:inline-flex; align-items:center; gap:8px; }
.route-card:hover .route-card__go{ color:var(--af-red); }
.route-card__go .arr{ transition:transform .25s var(--ease); display:inline-block; }
.route-card:hover .route-card__go .arr{ transform:translateX(5px); }
@media (max-width:820px){ .route-cards{ grid-template-columns:1fr; } .route-card{ padding:34px 26px; } }

/* ===== SPEC SHEET (printing: hard capability numbers) ===== */
.spec-sheet{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--af-border); border:1px solid var(--af-border); }
.spec-sheet__row{ background:var(--af-panel); padding:16px 20px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.spec-sheet__key{ font-family:var(--mono); font-size:0.66rem; color:var(--af-grey); letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap; }
.spec-sheet__val{ font-family:var(--mono); font-size:0.78rem; color:var(--af-white); font-weight:700; text-align:right; }
@media (max-width:700px){ .spec-sheet{ grid-template-columns:1fr; } }

/* ===== ROADMAP (metal fab: what has to happen before launch) ===== */
.roadmap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(247,248,250,0.14); border:1px solid rgba(247,248,250,0.14); }
.roadmap__step{ background:#141414; padding:26px 22px 24px; position:relative; }
.roadmap__num{ font-family:var(--mono); font-size:0.62rem; color:var(--af-grey); letter-spacing:0.1em; margin-bottom:10px; }
.roadmap__step h4, .roadmap__step h3{ font-family:var(--disp); font-weight:600; font-size:1.05rem; text-transform:uppercase; color:#f2f0ea; margin-bottom:8px; }
.roadmap__step p{ font-size:0.82rem; line-height:1.6; color:#b5b3ab; margin:0 0 14px; }
.roadmap__status{ font-family:var(--mono); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; padding:3px 7px; border:1px solid rgba(247,248,250,0.2); color:#8a8a8a; display:inline-block; }
.roadmap__step.is-done .roadmap__status{ color:var(--af-red); border-color:var(--af-red); }
.roadmap__step.is-active .roadmap__status{ color:#fff; background:var(--af-red); border-color:var(--af-red); }
@media (max-width:880px){ .roadmap{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .roadmap{ grid-template-columns:1fr; } }

/* ===== CTA BAND (consistent close on every page) ===== */
.cta-band{ background: var(--dot-grid) 0 0/896px 280px, var(--surface-dark); }
.cta-band__inner{ max-width:var(--shell); margin:0 auto; padding:60px 32px; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.cta-band__copy{ max-width:56ch; }
.cta-band .eyebrow{ margin-bottom:10px; }
.cta-band h2{ font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); text-transform:uppercase; line-height:1.05; margin-bottom:10px; }
.cta-band p{ color:var(--af-grey); font-size:0.94rem; line-height:1.7; }
.cta-band__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ===== NARROW-SCREEN HEADER FIT ===== */
/* At phone widths the logo badge + cart + login + hamburger no longer fit on
   one line and pushed the header past the viewport. Drop the two least
   essential items — the REV badge and the account link (which moves into the
   mobile drawer) — and keep cart and menu, which people actually need. */
@media (max-width: 600px){
  .logo__rev{ display:none; }
  .account-link{ display:none !important; }
  .logo{ font-size:1.05rem; }
  .cart-btn{ padding:8px 10px; font-size:0.72rem; }
}
/* The off-canvas drawer sits outside the viewport by design; make sure it can
   never contribute a horizontal scrollbar on the page itself. */
html{ overflow-x:hidden; overflow-x:clip; }

/* ===== SHOP: FILTER BAR ===== */
.shop-toolbar{ background:var(--af-panel); position:sticky; top:var(--header-h, 72px); z-index:9; }
.shop-toolbar__inner{ max-width:var(--shell); margin:0 auto; padding:18px 32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.filter-group{ display:flex; align-items:center; gap:10px; }
.filter-group__label{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; color:var(--af-grey-dim); text-transform:uppercase; }

/* primary line switch — the 3D printing / metal fab toggle */
.line-switch{ display:flex; gap:1px; background:var(--af-grey-dim); border:1px solid var(--af-grey-dim); }
.line-switch button{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
  background:var(--af-panel); color:var(--af-grey); border:none; padding:10px 18px;
  transition:background .2s, color .2s;
}
.line-switch button:hover{ color:var(--af-white); }
.line-switch button.is-active{ background:var(--af-white); color:#fff; }

/* secondary availability chips */
.chip{
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em; text-transform:uppercase;
  background:transparent; color:var(--af-grey); border:1px solid var(--af-grey-dim);
  padding:7px 12px; transition:border-color .2s, color .2s, background .2s;
}
.chip:hover{ color:var(--af-white); border-color:var(--af-grey); }
.chip.is-active{ color:var(--af-red); border-color:var(--af-red); background:rgba(216,19,36,0.06); }

.shop-search{
  font-family:var(--mono); font-size:0.74rem; background:transparent;
  border:1px solid var(--af-grey-dim); color:var(--af-white); padding:9px 12px; min-width:190px;
}
.shop-search:focus{ outline:none; border-color:var(--af-red); }
.shop-sort{
  font-family:var(--mono); font-size:0.72rem; background:transparent;
  border:1px solid var(--af-grey-dim); color:var(--af-white); padding:9px 10px; cursor:pointer;
}
.shop-sort:focus{ outline:none; border-color:var(--af-red); }
.shop-count{ font-family:var(--mono); font-size:0.68rem; color:var(--af-grey); letter-spacing:0.06em; margin-left:auto; }

/* line badge on each shop card, so mixed results stay legible */
.shop-line-tag{
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.1em; color:var(--af-red);
  text-transform:uppercase; margin-bottom:8px;
}
.shop-empty{
  display:none; text-align:center; padding:70px 20px; border:1px dashed var(--af-border);
  background:var(--af-panel); color:var(--af-grey); font-size:0.94rem;
}
@media (max-width:820px){
  .shop-toolbar{ position:static; }
  .shop-toolbar__inner{ padding:16px 22px; gap:14px; }
  .shop-count{ margin-left:0; width:100%; }
  .shop-search{ min-width:0; flex:1; }
}

/* ===== PROCESS CHECKLIST (printing page, beside the hero visual) ===== */
.check-list{ list-style:none; margin:0 0 28px; padding:0; }
.check-list li{
  position:relative; padding-left:26px; margin-bottom:14px;
  font-size:0.92rem; line-height:1.6; color:var(--af-grey);
}
.check-list li strong{ color:var(--af-white); font-weight:600; }
.check-list li::before{
  content:''; position:absolute; left:0; top:6px;
  width:9px; height:5px; border-left:2px solid var(--af-red); border-bottom:2px solid var(--af-red);
  transform:rotate(-45deg);
}
.print-copy .lede-sm{ font-size:0.98rem; line-height:1.7; color:var(--af-grey); margin-bottom:24px; max-width:52ch; }
.print-copy .lede-sm strong{ color:var(--af-white); font-weight:600; }

/* ===== CONSISTENT DARK-ZONE EDGES =====
   Every dark section now shares one surface colour, so the only thing left to
   standardise is how each one meets the section above it. A single hairline
   plus a soft inner shadow makes the transition read the same everywhere,
   instead of each section carrying its own bespoke gradient. */
.gallery-strip, .manifesto, .metalwork-bg, .dark-zone-faq, footer{
  box-shadow: inset 0 14px 26px -18px rgba(0,0,0,0.85);
}

/* Grid gutters are drawn with the light border colour, which reads as bright
   seams once the section behind them goes dark — dim them inside dark zones. */
.dark-zone .route-cards{ background:rgba(247,248,250,0.14); border-color:rgba(247,248,250,0.14); }
.dark-zone .gallery-grid{ background:rgba(247,248,250,0.14); border-color:rgba(247,248,250,0.14); }
.dark-zone .spec-sheet__row{ background:var(--surface-dark); }
.dark-zone .spec-sheet__key{ color:#8a8a8a; }
.dark-zone .spec-sheet__val{ color:var(--af-black); }
.dark-zone .step{ background:var(--surface-dark); }
.dark-zone .step h4{ color:var(--af-black); }
.dark-zone .step p{ color:#b5b3ab; }
.dark-zone .file-hint, .dark-zone .filter-group__label{ color:#6f6f6f; }

/* Small mono labels are #5c5c5c by default, which is fine on the light
   surface but drops to ~2.8:1 against the dark one. Lift them inside dark
   zones so step numbers and phase markers stay readable. */
.dark-zone .step__num,
.dark-zone .roadmap__num{ color:#9a9a9a; }

/* ============================================================
   TRANSITIONS & MOTION
   Everything here sits inside prefers-reduced-motion guards or
   degrades to a plain state, so nothing below is load-bearing.
   ============================================================ */

/* ---- Cross-page transitions -------------------------------
   The site is a real multi-page app now, so every nav click was
   a hard white cut. This hands the browser a snapshot of the old
   page and cross-fades it into the new one. Chromium and Safari
   honour it; anywhere else navigation just works as before. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root){ animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: af-page-out .18s both; }
  ::view-transition-new(root){ animation: af-page-in .34s both; }
}
@keyframes af-page-out{ to   { opacity:0; transform:translateY(-6px); } }
@keyframes af-page-in { from { opacity:0; transform:translateY(10px); } }

/* Chrome the user shouldn't see move between pages: naming these keeps
   them out of the page snapshot so they hold still while the body
   changes underneath, rather than fading out and back in. */
/* Naming the <header> itself broke position:sticky — Chromium gives a
   view-transition-name'd element its own containment, which stops it
   sticking. Name the inner <nav> instead: the bar still carries across a
   page change, and the header goes back to staying pinned while you scroll. */
header > nav{ view-transition-name: af-nav; }
footer{ view-transition-name: af-footer; }
.aether-launcher{ view-transition-name: af-launcher; }

/* ---- Section rule draws itself in -------------------------
   A red line traces along the section divider as it scrolls into
   view — reads like a drafting pen laying down a rule. */
.section-head{ position:relative; }
.section-head::after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:100%; height:1px; background:var(--af-red);
  transform:scaleX(0); transform-origin:left center;
}
.section-head.rule-in::after{ animation: af-rule 1.1s var(--ease) forwards; }
@keyframes af-rule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---- Nav brackets open on hover --------------------------- */
.navlinks a::before, .navlinks a::after{
  display:inline-block;
  transition:transform .28s var(--ease), color .15s var(--ease);
}
.navlinks a:hover::before, .navlinks a.is-current::before{ transform:translateX(-3px); }
.navlinks a:hover::after,  .navlinks a.is-current::after { transform:translateX(3px); }

/* ---- Counting stats --------------------------------------- */
/* Tabular figures stop the numbers jittering in width as they climb. */
.print-stats strong, .route-card__meta strong, .spec-strip strong{
  font-variant-numeric: tabular-nums;
}

/* ---- Buttons: accent sweeps across on hover ---------------- */
/* inline-block so the sweep clips correctly even outside a flex container */
.btn{ position:relative; overflow:hidden; display:inline-block; }
.btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:translateX(-120%);
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%); }

/* ---- Shop filter: cards deal in rather than snapping --------
   Filtering replaces the whole grid at once, which read as a jump
   cut. A short staggered entrance makes it obvious the set changed
   and which cards survived the filter. Enter-only (no fade-out)
   so clicking a filter still feels instant. */
@media (prefers-reduced-motion: no-preference){
  .card-enter{ animation: af-card-in .40s var(--ease) both; }
}
@keyframes af-card-in{
  from{ opacity:0; transform:translateY(12px) scale(0.985); }
  to  { opacity:1; transform:none; }
}

/* ---- Plotter wipe on shop-floor photos ---------------------
   Images uncover left-to-right behind a red rule, the way a print
   head lays down a pass. */
/* The clipped starting state is applied by JS (.plot-ready), never by
   default — so if site.js ever fails to load, the photos are simply
   visible rather than invisible with no way to reveal them. */
.gallery-item img{
  transition: clip-path 1.15s var(--ease), transform .4s ease, filter .4s ease;
}
.gallery-item.plot-ready img{ clip-path: inset(0 100% 0 0); }
.gallery-item.plot-ready.plotted img{ animation: af-plot 1.15s var(--ease) forwards; }
@keyframes af-plot{
  from{ clip-path: inset(0 100% 0 0); }
  to  { clip-path: inset(0 0 0 0); }
}
.gallery-item::before{
  content:''; position:absolute; top:0; bottom:0; left:0;
  width:2px; background:var(--af-red); opacity:0; z-index:3; pointer-events:none;
}
.gallery-item.plot-ready.plotted::before{ animation: af-scan 1.15s var(--ease) forwards; }
@keyframes af-scan{
  0%   { left:0;    opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { left:100%; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .gallery-item img{ clip-path:none; transition:none; }
  .gallery-item::before{ display:none; }
}

/* ---- FAQ answers slide open instead of snapping ------------
   Progressive enhancement: browsers without ::details-content just
   get the normal instant toggle. */
@supports selector(::details-content){
  :root{ interpolate-size: allow-keywords; }
  .faq-item::details-content{
    block-size:0; overflow:hidden;
    transition: block-size .34s var(--ease), content-visibility .34s allow-discrete;
  }
  .faq-item[open]::details-content{ block-size:auto; }
}

/* ---- Scroll progress rule ----------------------------------
   Thin red bar across the very top tracking how far down the page
   you are. Uses a scroll-driven animation, so it costs no JS on
   the scroll path; where that isn't supported it simply stays
   hidden rather than degrading to something broken. */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--af-red); transform:scaleX(0); transform-origin:0 50%;
  z-index:200; pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .scroll-progress{ animation: af-progress auto linear; animation-timeline: scroll(root block); }
}
@keyframes af-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .scroll-progress{ display:none; } }

/* ---- Modals ease in instead of popping --------------------
   These carry the quote request and the final step before payment,
   so an abrupt appearance undercuts the moment. display can't be
   transitioned, so the entrance runs as an animation on .show. */
@media (prefers-reduced-motion: no-preference){
  .checkout-modal.show{ animation: af-modal-bg .22s var(--ease) both; }
  .checkout-modal.show .checkout-box{ animation: af-modal-box .36s var(--ease) both; }
}
@keyframes af-modal-bg { from{ opacity:0; } }
@keyframes af-modal-box{ from{ opacity:0; transform:translateY(16px) scale(0.985); } }

/* ---- Status dots: the live ones breathe ---------------------
   The bullet is drawn by CSS now rather than sitting in the text,
   so only genuinely live states (OPEN / IN STOCK) can pulse while
   CONCEPT and PLANNED stay still. */
.status::before{
  content:'●'; margin-right:5px; display:inline-block;
}
@media (prefers-reduced-motion: no-preference){
  .status.is-live::before{ animation: af-status-pulse 1.9s ease-in-out infinite; }
}
@keyframes af-status-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* ---- Header gives space back once you start reading -------- */
header{ transition: box-shadow .3s var(--ease), padding .25s var(--ease); }
header nav{ transition: padding .25s var(--ease); }
.logo{ transition: font-size .25s var(--ease); }
header.condensed nav{ padding-top:10px; padding-bottom:10px; }
header.condensed .logo{ font-size:1.02rem; }
@media (prefers-reduced-motion: reduce){
  header, header nav, .logo{ transition:none; }
}

/* ---- Cart badge acknowledges the add ----------------------- */
.cart-count{ display:inline-block; }
.cart-count.bump{ animation: af-bump .42s var(--ease); }
@keyframes af-bump{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.28); color:var(--af-red); }
  100%{ transform:scale(1); }
}

/* ---- FAQ: one indicator slides between categories ---------- */
.faq-tabs-vertical{ position:relative; }
.faq-indicator{
  position:absolute; left:0; top:0; width:3px; background:var(--af-red);
  opacity:0; pointer-events:none;
  transition: transform .34s var(--ease), height .34s var(--ease),
              width .34s var(--ease), opacity .2s;
}
.faq-indicator.is-horizontal{ top:auto; bottom:0; left:0; width:0; height:2px; }
/* the per-tab border is now the indicator's job */
.faq-tab.is-active{ border-left-color:transparent; }
@media (max-width:880px){ .faq-tab.is-active{ border-bottom-color:transparent; } }
@media (prefers-reduced-motion: reduce){ .faq-indicator{ transition:none; } }

/* ---- Inputs draw their focus rule ------------------------- */
/* Painted as a background layer rather than a border, so it can grow from
   the left on focus — inputs can't carry pseudo-elements to animate. */
.af-form input, .af-form textarea,
.checkout-form input, .shop-search{
  background-image:linear-gradient(var(--af-red), var(--af-red));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0% 2px;
  transition:background-size .34s var(--ease), border-color .2s var(--ease);
}
.af-form input:focus, .af-form textarea:focus,
.checkout-form input:focus, .shop-search:focus{ background-size:100% 2px; }
@media (prefers-reduced-motion: reduce){
  .af-form input, .af-form textarea, .checkout-form input, .shop-search{ transition:none; }
}

/* ===== CONTACT PAGE ===== */
.contact-layout{ display:grid; grid-template-columns:1.35fr 1fr; gap:54px; align-items:start; }
.contact-form-wrap{ min-width:0; }
.contact-aside{ min-width:0; }
.contact-block{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid rgba(247,248,250,0.12); }
.contact-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.contact-block .eyebrow{ margin-bottom:10px; }
.contact-block p{ color:#b5b3ab; font-size:0.9rem; line-height:1.7; margin:0; }
.contact-block p strong{ color:var(--af-black); }
.contact-block a{ color:var(--af-red); }
.contact-email{
  display:inline-block; font-family:var(--mono); font-size:0.95rem;
  color:var(--af-black) !important; border-bottom:1px solid var(--af-red);
  padding-bottom:2px; margin-bottom:10px; word-break:break-all;
}
.contact-email:hover{ color:var(--af-red) !important; }
.contact-select{
  /* appearance:none strips Chrome's native control, which brought its own
     blue focus ring and arrow that ignored the site's palette. The chevron
     and the red focus rule below are ours, so it matches every other field. */
  appearance:none; -webkit-appearance:none;
  width:100%; background-color:transparent; border:1px solid var(--af-grey-dim);
  color:var(--af-white); font-family:var(--body); font-size:0.9rem;
  padding:10px 36px 10px 12px; margin-bottom:16px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%20L6%206.5%20L11%201.5'%20fill='none'%20stroke='%23b5b3ab'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(var(--af-red), var(--af-red));
  background-repeat:no-repeat, no-repeat;
  background-position:right 12px center, left bottom;
  background-size:11px 7px, 0% 2px;
  transition:background-size .34s var(--ease), border-color .2s var(--ease);
}
.contact-select:hover{ border-color:var(--af-grey); }
.contact-select:focus,
.contact-select:focus-visible{
  outline:none;
  border-color:var(--af-red);
  background-size:11px 7px, 100% 2px;
}
@media (prefers-reduced-motion: reduce){ .contact-select{ transition:none; } }
/* the form sits in a dark zone, so its fields need light text */
.dark-zone .checkout-form input,
.dark-zone .checkout-form textarea,
.dark-zone .contact-select{
  color:var(--af-black); border-color:rgba(247,248,250,0.22);
}
.dark-zone .checkout-form input::placeholder,
.dark-zone .checkout-form textarea::placeholder{ color:#6f6f6f; }
.dark-zone .checkout-form label{ color:#8a8a8a; }
.dark-zone .contact-select option{ color:var(--af-white); background:var(--af-panel); }
@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; gap:44px; }
}

/* ===== TEXTAREAS =====
   The shared stylesheet styled inputs but never textareas, so the contact
   message box fell back to the browser default — monospace at 13px, which
   is why its placeholder looked like a different typeface to everything
   around it. Match the inputs, and give the message box real room. */
.checkout-form textarea,
.af-form textarea{
  width:100%; background:transparent;
  border:1px solid var(--af-grey-dim); color:var(--af-white);
  font-family:var(--body); font-size:0.9rem; line-height:1.65;
  padding:12px; margin-bottom:16px; resize:vertical;
}
.checkout-form textarea:focus,
.af-form textarea:focus{ outline:none; border-color:var(--af-red); }

/* Placeholders inherit unreliably across browsers — state it outright so
   they always read as the same family and size as the text you type. */
.checkout-form input::placeholder, .checkout-form textarea::placeholder,
.af-form input::placeholder, .af-form textarea::placeholder,
.shop-search::placeholder{
  font-family:var(--body); font-size:0.9rem; color:var(--af-grey); opacity:1;
}
.dark-zone .checkout-form input::placeholder,
.dark-zone .checkout-form textarea::placeholder{ color:#7c7f86; }

/* The contact form is the one place someone writes more than a line. */
#contactForm textarea{ min-height:250px; }

/* The dark-zone field overrides are more specific than the plain :focus
   rules, so they were winning and the focus border never turned red — the
   underline animated but the outline stayed grey. Re-assert focus at the
   same depth so every field in a dark section highlights properly. */
.dark-zone .checkout-form input:focus,
.dark-zone .checkout-form textarea:focus,
.dark-zone .af-form input:focus,
.dark-zone .af-form textarea:focus,
.dark-zone .contact-select:focus{
  border-color:var(--af-red);
  outline:none;
}

/* ===== CUSTOM SELECT =====
   The options list inside a native <select> is drawn by the OS, so its
   highlight stays system blue no matter what CSS says. This replaces the
   visible control with markup we own, while the real <select> stays in the
   form (visually hidden) so submission and no-JS visitors are unaffected. */
.select-native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.select-wrap{ position:relative; margin-bottom:16px; }
.select-btn{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid rgba(247,248,250,0.22);
  color:var(--af-black); font-family:var(--body); font-size:0.9rem;
  padding:10px 36px 10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:border-color .2s var(--ease);
}
.select-btn:hover{ border-color:rgba(247,248,250,0.45); }
.select-wrap.is-open .select-btn,
.select-btn:focus-visible{ outline:none; border-color:var(--af-red); }
.select-btn__arrow{
  width:11px; height:7px; flex-shrink:0; position:absolute; right:12px;
  border-right:1.6px solid #b5b3ab; border-bottom:1.6px solid #b5b3ab;
  width:8px; height:8px; transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease), border-color .2s var(--ease);
}
.select-wrap.is-open .select-btn__arrow{ transform:rotate(-135deg) translateY(-2px); border-color:var(--af-red); }

.select-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:#16161b; border:1px solid rgba(247,248,250,0.22);
  box-shadow:0 18px 40px rgba(0,0,0,0.5);
  max-height:280px; overflow-y:auto; display:none;
}
.select-wrap.is-open .select-list{ display:block; }
.select-opt{
  padding:11px 14px; font-family:var(--body); font-size:0.88rem;
  color:#b5b3ab; cursor:pointer; border-left:3px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.select-opt:hover,
.select-opt.is-active{ background:rgba(216,19,36,0.10); color:var(--af-black); border-left-color:var(--af-red); }
.select-opt.is-selected{ color:var(--af-black); }
.select-opt.is-selected::after{ content:' ✓'; color:var(--af-red); }


/* Below the shell's lower bound the clamp would overflow the viewport, so
   hand the containers back to 100%. */
@media (max-width:1340px){
  :root{ --shell:100%; }
}



/* The inset panels themselves. */
.cta-band__inner{
  background:var(--af-panel);
  border-left:1px solid var(--af-border);
  border-right:1px solid var(--af-border);
  box-shadow:0 0 0 1px rgba(0,0,0,0.03), 0 18px 44px rgba(0,0,0,0.28);
}
/* Edge borders only make sense once there's margin to sit against. */
@media (max-width:1340px){
  .cta-band__inner{ border-left:none; border-right:none; box-shadow:none; }
}





/* ===== SECTION TRANSITIONS =====
   One rule for the whole site: content sections do not draw dividers. Every
   boundary is a change of surface — white panel to dark dotted ground — and
   that change is the transition. Lines were being drawn in the light border
   colour on top of dark sections, which showed up as bright grey streaks, and
   they differed page to page depending on which section happened to be first.
   Borders are now reserved for chrome that genuinely needs an edge: the
   sticky header, and the shop's sticky filter bar. */
.print-lab, .dark-zone, .gallery-strip, .manifesto, .dark-zone-faq,
.cta-band, .page-head, footer{
  border-top:none; border-bottom:none;
}
/* Chrome. The shop toolbar sits between two light surfaces and floats over
   dark content once stuck, so it needs edges on both sides to read as a bar. */
.shop-toolbar{
  border-top:1px solid var(--af-border);
  border-bottom:1px solid var(--af-border);
}

/* ===== PAST PERFORMANCE ENTRIES ===== */
.perf{ margin-bottom:38px; }
.perf:last-of-type{ margin-bottom:22px; }
.perf__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid rgba(247,248,250,0.12);
}
.perf__head h3{
  font-family:var(--disp); font-weight:700; font-size:1.25rem;
  text-transform:uppercase; letter-spacing:0.01em; color:var(--af-black);
}
.perf__client{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  color:var(--af-red); text-transform:uppercase;
}
.perf__note{
  margin-top:14px; font-size:0.9rem; line-height:1.7; color:#b5b3ab; max-width:72ch;
}
.perf__note strong{ color:var(--af-black); }
@media (max-width:600px){
  .perf__head{ flex-direction:column; gap:6px; }
}

/* ===== IN-PAGE SECTION INDEX (capabilities) =====
   The capability page is long by design — buyers scan for one section rather
   than read top to bottom. This lets them jump straight to it. */
.page-index{ background:var(--af-panel); border-bottom:1px solid var(--af-border); }
.page-index__inner{
  max-width:var(--shell); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; gap:8px 20px; flex-wrap:wrap;
}
.page-index__label{
  font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em;
  color:var(--af-grey-dim); text-transform:uppercase;
}
.page-index a{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em;
  color:var(--af-grey); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.page-index a:hover{ color:var(--af-white); border-bottom-color:var(--af-red); }
.page-index a.is-cta{ color:var(--af-red); border-bottom-color:var(--af-red); }
/* land clear of the sticky header when jumping */
#competencies, #capability, #materials, #quality,
#performance, #compliance, #company, #rfq{
  scroll-margin-top:calc(var(--header-h, 72px) + 16px);
}
@media (max-width:700px){ .page-index__inner{ padding:12px 22px; gap:6px 14px; } }

/* ===== SKIP LINK =====
   First focusable element on every page. Keyboard and screen-reader users can
   jump straight past the navigation instead of tabbing through it on each
   page — WCAG 2.4.1, and an expectation for Section 508 conformance. */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:300;
  background:var(--af-red); color:#fff;
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em;
  padding:10px 16px; border:2px solid #fff;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:8px; outline:none; }

/* footer/aether headings moved from h4 to h3 to close a heading-level jump —
   keep them looking identical */
.footer-col__title{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--af-black); margin-bottom:16px; font-weight:400;
}
.aether-title{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; }
.dash-title{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.05;
}

/* download block on the capabilities page */
.cap-download{
  margin-top:26px; padding:22px 24px;
  border:1px solid rgba(247,248,250,0.16);
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
@media (max-width:700px){ .cap-download{ flex-direction:column; align-items:flex-start; } }

/* Visually hidden, still read aloud. Used where a section needs a heading for
   document structure but showing one would be redundant on screen. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}