/* ===== Onewrk — Event Coverage Calculator (hi-fi, preset-first) ===== */

:root{
  /* Onewrk brand — matches onewrk.com (navy + teal) */
  --indigo-900:#021129;       /* deepest navy */
  --indigo-800:#021d38;       /* dark section bg */
  --indigo-700:#042f59;       /* primary navy */
  --indigo-600:#0a4a7f;       /* navy hover */
  --indigo-100:#e6eef5;
  --indigo-50:#f4f8fc;

  --amber-600:#1a8a9a;        /* teal-dark */
  --amber-500:#25afc2;        /* teal accent — Onewrk brand */
  --amber-400:#3fd4e8;        /* teal-light */
  --amber-100:#d4f0f4;
  --amber-50:#eaf8fa;

  /* Neutrals (cool-warm balance) */
  --ink:#0f1226;
  --ink-2:#2b2f45;
  --ink-3:#575c74;
  --ink-4:#8a8fa3;
  --ink-5:#c9cbd6;
  --line:#e6e7ee;
  --line-2:#eef0f5;
  --paper:#ffffff;
  --paper-2:#fafbfd;
  --paper-3:#f4f5f8;

  --success:#16a34a;
  --warn:#b45309;
  --danger:#b91c1c;

  --shadow-sm:0 1px 2px rgba(15,18,38,.04), 0 1px 3px rgba(15,18,38,.06);
  --shadow-md:0 4px 10px rgba(15,18,38,.06), 0 12px 30px rgba(15,18,38,.08);
  --shadow-lg:0 10px 30px rgba(15,18,38,.10), 0 30px 60px rgba(15,18,38,.12);
  --shadow-inset: inset 0 0 0 1px var(--line);

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;

  --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --accent: var(--amber-500);
  --accent-soft: var(--amber-100);
  --accent-50: var(--amber-50);
}

/* accent locked to Onewrk teal (cycler retained for dev use, all map to teal) */
body[data-accent="amber"],
body[data-accent="emerald"],
body[data-accent="rose"],
body[data-accent="violet"],
body[data-accent="teal"]{ --accent:#25afc2; --accent-soft:#d4f0f4; --accent-50:#eaf8fa;}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper-2);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings: "ss01","cv11","tnum";
  line-height:1.5;
  font-size:15px;
  letter-spacing: -0.005em;
}
.tnum{ font-variant-numeric: tabular-nums;}
button{ font-family:inherit; color:inherit;}
a{ color:inherit;}

/* ======================== HEADER ======================== */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .inner{
  max-width:1240px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em;}
.brand .mark{
  width:30px; height:30px; border-radius:8px;
  background: linear-gradient(135deg, var(--indigo-700), var(--indigo-900));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px;
  box-shadow: var(--shadow-sm);
}
.brand .mark::after{ content:"O";}
.brand b{ font-size:16px;}
.brand .sub{ color:var(--ink-3); font-weight:500; font-size:13px; margin-left:4px;}

.header-title{
  flex:1; min-width:0;
  display:flex; gap:8px; align-items:baseline; overflow:hidden;
  color:var(--ink-3); font-size:13px;
}
.header-title .sep{ color:var(--ink-5);}
.header-title .city{
  color:var(--ink); font-weight:600;
}
.trust-strip{
  display:flex; gap:6px; flex-wrap:wrap;
}
.trust-strip .tp{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:999px;
  background:var(--paper-3); color:var(--ink-2);
  font-size:12px; font-weight:500;
}
.trust-strip .tp svg{ width:12px; height:12px; color:var(--success);}

/* ======================== HERO: preset picker ======================== */
.hero{
  position:relative;
  background:
    radial-gradient(1000px 400px at 10% -10%, color-mix(in oklab, var(--indigo-700) 8%, transparent), transparent 60%),
    radial-gradient(800px 400px at 110% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero .inner{
  max-width:1240px; margin:0 auto; padding:36px 20px 28px;
}
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--indigo-700);
  display:inline-flex; align-items:center; gap:8px;
}
.kicker .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent);}
.hero h1{
  font-family:var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height:1.05; letter-spacing:-0.025em;
  margin:10px 0 8px; max-width:22ch; color:var(--ink);
  font-weight:700;
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(120deg, var(--indigo-700), color-mix(in oklab, var(--indigo-700) 60%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color:transparent;
}
.hero .lede{
  color:var(--ink-3); font-size:16px; max-width:62ch; margin:0 0 22px;
}

.preset-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.preset{
  position:relative;
  text-align:left; cursor:pointer;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:8px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.preset:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--indigo-700) 30%, var(--line));
}
.preset .icon-tile{
  width:42px; height:42px; border-radius:10px;
  background: linear-gradient(135deg, var(--indigo-50), var(--paper-3));
  color:var(--indigo-700);
  display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.preset .icon-tile svg{ width:22px; height:22px;}
.preset h3{ margin:0; font-size:15px; font-weight:600; letter-spacing:-0.01em;}
.preset .mini{
  font-size:12px; color:var(--ink-3); line-height:1.4;
  display:flex; flex-wrap:wrap; gap:4px 10px;
}
.preset .mini span{ display:inline-flex; align-items:center; gap:4px;}
.preset .mini svg{ width:11px; height:11px; opacity:.8;}
.preset .from{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:6px; border-top:1px dashed var(--line);
  font-size:12px; color:var(--ink-3);
}
.preset .from b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}

.preset.selected{
  border-color: var(--indigo-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo-700) 15%, transparent), var(--shadow-md);
}
.preset.selected .icon-tile{
  background: linear-gradient(135deg, var(--indigo-700), var(--indigo-800));
  color:#fff; box-shadow:none;
}
.preset .check{
  position:absolute; top:10px; right:10px;
  width:22px; height:22px; border-radius:50%;
  background:var(--indigo-700); color:#fff;
  display:none; align-items:center; justify-content:center;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo-700) 15%, transparent);
}
.preset .check svg{ width:12px; height:12px;}
.preset.selected .check{ display:flex;}

.hero-foot{
  margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:14px;
  color:var(--ink-3); font-size:13px;
}
.hero-foot .mini-trust{
  display:flex; gap:14px; flex-wrap:wrap;
}
.hero-foot .mini-trust span{ display:inline-flex; gap:6px; align-items:center;}

/* ======================== MAIN LAYOUT ======================== */
.app{
  max-width:1240px; margin:0 auto; padding:28px 20px 120px;
  display:grid; grid-template-columns: 1fr 360px; gap:28px;
  align-items:start;
}
.sections{ display:flex; flex-direction:column; gap:18px; min-width:0;}

.section{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  box-shadow: var(--shadow-sm);
}
.section > header{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.section > header .lbl{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.section > header .num{
  font-family:var(--font-mono); font-size:11px; color:var(--indigo-700);
  letter-spacing:.06em; font-weight:600; text-transform:uppercase;
  background: var(--indigo-50); padding:3px 8px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--indigo-700) 15%, transparent);
}
.section > header h2{
  margin:0; font-family:var(--font-display); font-size:20px;
  font-weight:600; letter-spacing:-0.015em;
}
.section > header .sub{
  color:var(--ink-3); font-size:13px;
}
.section > header .defaults-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:var(--amber-50); color:var(--amber-600);
  border:1px solid var(--amber-100);
  font-size:11.5px; font-weight:600;
}

/* Helper banner */
.helper{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--indigo-50);
  color:var(--indigo-800);
  font-size:13px;
  border:1px solid color-mix(in oklab, var(--indigo-700) 10%, transparent);
  margin-bottom:14px;
}
.helper.warn{ background:var(--amber-50); color:var(--amber-600); border-color:var(--amber-100);}
.helper svg{ width:16px; height:16px; flex:none; margin-top:2px;}

/* ===== Teaching cards ===== */
.teach-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
}
.teach-grid.three{ grid-template-columns:repeat(3, 1fr);}
.teach{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px 12px;
  background:var(--paper);
  cursor:pointer;
  display:grid; grid-template-columns:40px 1fr auto; gap:10px 12px;
  align-items:start;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
  text-align:left;
}
.teach:hover{ border-color: color-mix(in oklab, var(--indigo-700) 25%, var(--line));}
.teach .ico{
  grid-row:1/3;
  width:40px; height:40px; border-radius:10px;
  background:var(--paper-3); color:var(--indigo-700);
  display:grid; place-items:center;
  box-shadow: var(--shadow-inset);
}
.teach .ico svg{ width:20px; height:20px;}
.teach .name{
  font-weight:600; letter-spacing:-0.01em; font-size:14.5px; line-height:1.25;
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.teach .price{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  padding:3px 8px; border-radius:999px;
  background:var(--paper-3); color:var(--ink-2);
  white-space:nowrap;
}
.teach .what{ grid-column:2/4; font-size:13px; color:var(--ink-3); line-height:1.45;}
.teach .when{ grid-column:2/4; font-size:12.5px; color:var(--ink-2); margin-top:-2px;}
.teach .when::before{
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--accent); vertical-align:middle; margin-right:8px; margin-bottom:2px;
}
.teach .info-btn{
  position:absolute; right:10px; bottom:10px;
  width:22px; height:22px; border-radius:50%;
  background:transparent; border:1px solid var(--line);
  color:var(--ink-3);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s;
}
.teach .info-btn:hover{ background:var(--paper-3); color:var(--ink);}
.teach:hover .info-btn{ display:inline-flex;}
.teach.on{
  background: linear-gradient(180deg, var(--indigo-50), var(--paper));
  border-color: var(--indigo-700);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--indigo-700) 12%, transparent);
}
.teach.on .ico{
  background: var(--indigo-700); color:#fff; box-shadow:none;
}
.teach.on .price{ background:var(--indigo-700); color:#fff;}
.teach.on .check{
  position:absolute; top:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  background: var(--accent); color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 0 0 3px var(--paper), 0 2px 6px rgba(0,0,0,.1);
}
.teach.on .check svg{ width:12px; height:12px;}
.teach:not(.on) .check{ display:none;}

/* Stepper for quantities (inside teaching card when selected) */
.teach .qty{
  grid-column:2/4; display:flex; align-items:center; gap:8px; margin-top:4px;
  font-size:12px; color:var(--ink-3);
}
.teach .qty .stepper{
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); overflow:hidden;
}
.teach .qty .stepper button{
  border:0; background:transparent; width:26px; height:26px; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-2); font-size:14px;
}
.teach .qty .stepper button:hover{ background:var(--paper-3);}
.teach .qty .stepper .v{
  min-width:28px; text-align:center; font-family:var(--font-mono); font-weight:600;
  color:var(--ink);
}

/* ===== Event-type strip ===== */
.etype-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-bottom:14px;
}
.etype-strip button{
  border:1px solid var(--line); background:var(--paper);
  padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13px;
  display:flex; align-items:center; gap:8px; font-weight:500;
  color:var(--ink-2);
  transition: all .15s;
}
.etype-strip button:hover{ background:var(--paper-3);}
.etype-strip button.on{
  background: var(--indigo-50);
  border-color: var(--indigo-700); color:var(--indigo-700); font-weight:600;
}
.etype-strip button svg{ width:14px; height:14px; flex:none;}

/* ===== Duration slider ===== */
.duration{
  display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:center;
}
.duration .track-wrap{
  padding:8px 4px 4px;
}
.duration .slider{
  position:relative; height:36px;
}
.duration .slider .rail{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px; background:var(--paper-3);
}
.duration .slider .fill{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px;
  background: linear-gradient(90deg, var(--indigo-700), var(--accent));
}
.duration .slider .tick{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%; background:var(--paper); border:2px solid var(--line-2); z-index:1;
}
.duration .slider .tick.passed{ border-color:var(--indigo-700); background:var(--indigo-700);}
.duration .slider .thumb{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--indigo-700);
  box-shadow: var(--shadow-md);
  z-index:2; cursor:grab;
}
.duration .slider input[type="range"]{
  position:absolute; inset:0;
  width:100%; height:100%; opacity:0; cursor:pointer; margin:0;
}
.duration .labels{
  display:flex; justify-content:space-between; margin-top:6px;
  font-size:11.5px; color:var(--ink-4);
}
.duration .summary{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
  background:var(--paper-2);
}
.duration .summary .big{
  font-family:var(--font-display); font-size:22px; font-weight:700;
  letter-spacing:-.02em; line-height:1;
}
.duration .summary .sub{ font-size:12px; color:var(--ink-3); margin-top:4px;}
.days-step{ display:flex; gap:6px; align-items:center; margin-top:8px; font-size:12px; color:var(--ink-3);}
.days-step .stepper{ margin-left:auto;}

/* ===== Camera stepper ===== */
.cam-stepper{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.cam-stepper .cam{
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:var(--paper);
  display:grid; place-items:center; cursor:pointer;
  font-weight:700; font-family:var(--font-mono); font-size:14px;
  transition: all .12s;
  color:var(--ink-3);
}
.cam-stepper .cam:hover{ background:var(--paper-3);}
.cam-stepper .cam.on{
  background: linear-gradient(180deg, var(--indigo-700), var(--indigo-800));
  color:#fff; border-color:var(--indigo-800);
  box-shadow: 0 4px 10px color-mix(in oklab, var(--indigo-700) 30%, transparent);
}
.cam-stepper .cam.passed{
  background: var(--indigo-50); color:var(--indigo-700); border-color:color-mix(in oklab, var(--indigo-700) 20%, var(--line));
}
.cam-meta{
  margin-left:auto; font-size:12.5px; color:var(--ink-3);
}
.cam-coverage{
  margin-top:12px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  font-size:11px; color:var(--ink-3);
}
.cam-coverage .pos{
  padding:6px 8px; border-radius:8px; background:var(--paper-3); color:var(--ink-4);
  display:flex; align-items:center; gap:6px;
  border:1px solid var(--line-2);
}
.cam-coverage .pos.on{
  background:var(--indigo-50); color:var(--indigo-700); border-color: color-mix(in oklab, var(--indigo-700) 20%, var(--line));
}
.cam-coverage .pos svg{ width:12px; height:12px; flex:none;}

/* ===== Lighting (segmented) ===== */
.segmented{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.segmented button{
  cursor:pointer; text-align:left;
  padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column; gap:4px;
  transition: all .15s;
}
.segmented button:hover{ background:var(--paper-3);}
.segmented button.on{
  background: linear-gradient(180deg, var(--indigo-50), var(--paper));
  border-color: var(--indigo-700);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--indigo-700) 12%, transparent);
}
.segmented .title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:600; font-size:14px;
}
.segmented .desc{ font-size:12.5px; color:var(--ink-3); line-height:1.4;}
.segmented .price-chip{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2);
  padding:2px 7px; border-radius:999px; background:var(--paper-3); border:1px solid var(--line);
  white-space:nowrap;
}
.segmented button.on .price-chip{ background:var(--indigo-700); color:#fff; border-color:transparent;}

/* ===== Toggle (switch) ===== */
.switch{
  position:relative; display:inline-flex; align-items:center;
  width:40px; height:22px; border-radius:999px;
  background:var(--paper-3); border:1px solid var(--line);
  cursor:pointer; transition: background .15s;
  flex:none;
}
.switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow: var(--shadow-sm);
  transition: transform .2s;
}
.switch.on{
  background: var(--indigo-700); border-color:var(--indigo-800);
}
.switch.on::after{ transform: translateX(18px);}

.section-head-toggle{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.section-head-toggle .copy{ flex:1;}
.section-head-toggle .copy .t{ font-weight:600;}
.section-head-toggle .copy .d{ font-size:12.5px; color:var(--ink-3);}

/* ===== Deliverables (multi) ===== */
.deliv-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.deliv-grid .teach .name{ font-size:14px;}

.rush-row{
  margin-top:12px; padding:12px 14px;
  border:1px dashed var(--line); border-radius:var(--radius-md);
  background:var(--paper-2);
  display:flex; align-items:center; gap:10px;
}
.rush-row .copy{ flex:1;}
.rush-row .t{ font-weight:600; font-size:14px;}
.rush-row .d{ font-size:12.5px; color:var(--ink-3);}
.rush-row .p{ font-family:var(--font-mono); font-size:12px; color:var(--ink-2); padding:3px 8px; border-radius:999px; background:var(--paper-3);}

/* ===== Venue / date ===== */
.venue-grid{
  display:grid; grid-template-columns:180px 1fr; gap:12px;
}
.field{
  border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--paper);
  transition: border-color .15s;
}
.field:focus-within{ border-color:var(--indigo-700); box-shadow: 0 0 0 3px color-mix(in oklab, var(--indigo-700) 12%, transparent);}
.field .flabel{
  font-size:11px; letter-spacing:.04em; color:var(--ink-4); text-transform:uppercase; font-weight:600;
}
.field input, .field textarea{
  border:0; outline:0; width:100%;
  font: inherit; color:inherit; padding:4px 0 0; background:transparent;
}
.field textarea{ resize:vertical; min-height:44px;}
.field .hint{ color:var(--ink-4); font-size:12px; margin-top:4px;}
.venue-grid .notes{ grid-column: 1 / -1;}
.date-wrap{ display:flex; align-items:center; gap:8px; margin-top:2px;}
.date-wrap .big{ font-weight:600; font-size:15px;}
.peak{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--amber-600);
  background:var(--amber-50); border:1px solid var(--amber-100);
  padding:3px 8px; border-radius:999px; margin-top:6px;
}

/* ===== Testimonial ===== */
.testimonial{
  background: linear-gradient(135deg, var(--indigo-900), var(--indigo-700));
  color:#fff;
  border-radius:var(--radius-lg);
  padding:22px 24px;
  display:grid; grid-template-columns: 60px 1fr auto; gap:18px; align-items:center;
}
.testimonial .avatar{
  width:60px; height:60px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--amber-400));
  color:var(--indigo-900); font-weight:800; font-size:20px;
  display:grid; place-items:center; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2);
}
.testimonial q{
  display:block; font-size:15px; line-height:1.55;
  color:#fff; font-style:italic;
  quotes: "\201C""\201D";
}
.testimonial .who{
  color: color-mix(in oklab, #fff 75%, transparent);
  font-size:12.5px; margin-top:8px;
}
.testimonial .rating{
  color:var(--accent);
  font-size:13px; letter-spacing:2px;
  white-space:nowrap;
}

/* ======================== QUOTE (fixed — sticky through whole page on desktop) ======================== */
.quote{
  position:fixed;
  top:96px;
  right:max(20px, calc((100vw - 1240px) / 2 + 20px));
  width:360px;
  max-height: calc(100vh - 120px);
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
  z-index:30;
  transition: opacity .25s ease, transform .25s ease;
}
/* q-head and q-footer stay visible; only q-body scrolls. So the CTA stack
   is ALWAYS reachable regardless of how many line items are in the quote. */
.quote .q-head{ flex-shrink:0; }
.quote .q-body{ flex:1 1 auto; overflow-y:auto; scrollbar-width:thin; min-height:0; }
.quote .q-footer{ flex-shrink:0; border-top:1px solid var(--line); background:var(--paper); }
/* Hide the floating quote when the footer / final CTA is in view */
body.hide-fixed-quote .quote{
  opacity:0; pointer-events:none; transform: translateY(10px);
}
main.app > aside{ min-height:1px; }

/* Hide the "Saved vs à-la-carte" row globally — pricing is always additive. */
.savings-row{ display:none !important; }

/* Reserve right-gutter for the fixed quote on wide viewports so it doesn't
   overlap preset cards, venues, testimonials, FAQ, etc.
   Fixed quote = 360 wide + 28 gap + 20 padding = ~408px. */
@media (min-width: 1240px){
  .hero .inner,
  .onwk-section .wrap{
    padding-right: 408px;
  }
  /* Preset grid: drop to 3 columns so cards stay comfortable width in the
     narrower area to the left of the sticky quote. */
  .preset-grid{ grid-template-columns: repeat(3, 1fr); gap:14px; }

  /* Deliverables/aerial/audio teach cards: 2 columns (default 3 is too
     cramped in the narrow left column beside the fixed quote) */
  .deliv-grid, .teach-grid.three{ grid-template-columns: repeat(2, 1fr) !important; }
  body.hide-fixed-quote .deliv-grid,
  body.hide-fixed-quote .teach-grid.three{ grid-template-columns: repeat(3, 1fr) !important; }

  /* Trust bullets: 3 columns instead of 4 (same reason) */
  .trust-bullets{ grid-template-columns: repeat(3, 1fr) !important; }

  /* Testimonials: 2 columns instead of 3 */
  .test-grid{ grid-template-columns: repeat(2, 1fr) !important; }

  /* FAQ list anchors left (was auto-centered inside parent wrap) */
  .faq-list{ margin-left:0 !important; }

  /* Risk banner: asymmetric margins so it clears the quote */
  .risk-banner{
    margin-right: max(20px, calc((100vw - 1240px)/2 + 408px));
    margin-left:  max(20px, calc((100vw - 1240px)/2 + 20px));
    max-width: none;
  }

  /* Once the quote is hidden near the footer, release the gutter */
  body.hide-fixed-quote .hero .inner,
  body.hide-fixed-quote .onwk-section .wrap{
    padding-right: 20px;
  }
  body.hide-fixed-quote .preset-grid{ grid-template-columns: repeat(4, 1fr); }
  body.hide-fixed-quote .trust-bullets{ grid-template-columns: repeat(4, 1fr) !important; }
  body.hide-fixed-quote .test-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  body.hide-fixed-quote .risk-banner{
    margin-left:auto; margin-right:auto; max-width:1120px;
  }
}
.quote .q-head{
  padding:18px 20px 14px;
  background: linear-gradient(180deg, var(--indigo-900), var(--indigo-700));
  color:#fff;
  position:relative; overflow:hidden;
}
.quote .q-head::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 200px at 100% 0%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 60%);
  pointer-events:none;
}
.quote .ref{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: color-mix(in oklab, #fff 75%, transparent); font-weight:600;}
.quote .total{
  font-family:var(--font-display);
  font-size:36px; font-weight:700; letter-spacing:-.02em; line-height:1;
  margin:8px 0 6px;
  display:flex; align-items:baseline; gap:6px;
  position:relative;
  transition: transform .4s cubic-bezier(.2,.9,.3,1.3);
}
.quote .total .rupee{
  font-size:22px; font-weight:600; color:color-mix(in oklab, #fff 80%, transparent);
}
.quote .total .n{ font-variant-numeric: tabular-nums;}
.quote .total.pulse{ animation: pulse .6s ease;}
@keyframes pulse{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.04); color:var(--accent);}
  100%{ transform: scale(1);}
}
.quote .total-sub{ font-size:12px; color:color-mix(in oklab, #fff 75%, transparent);}
.quote .savings-row{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:12px;
}
.quote .savings{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--amber-400);
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  font-weight:600;
}

.q-body-label{
  flex-shrink:0;
  padding:14px 20px 4px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); font-weight:700;
  background:var(--paper);
  border-bottom:1px solid var(--line-2);
}
.q-body{ padding:10px 20px 6px;}
.q-sec{
  border-bottom:1px solid var(--line-2);
  padding:8px 0;
}
.q-sec:last-child{ border-bottom:0;}
.q-sec .h{
  font-size:11px; color:var(--ink-4); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; justify-content:space-between;
  margin-bottom:4px;
}
.q-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:3px 0; font-size:13px;
}
.q-line .n{ color:var(--ink-2); min-width:0;}
.q-line .n small{ display:block; color:var(--ink-4); font-size:11px; margin-top:1px;}
.q-line .p{ font-family:var(--font-mono); font-weight:500; color:var(--ink); white-space:nowrap;}
.q-line.muted .n, .q-line.muted .p{ color:var(--ink-4);}

.q-empty{ color:var(--ink-4); font-size:13px; padding:4px 0;}

.q-footer{
  padding:14px 20px 18px; background:var(--paper-2); border-top:1px solid var(--line);
}
.included{
  font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-bottom:12px;
  display:flex; gap:6px; flex-wrap:wrap;
}
.included span{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:6px; background:var(--paper-3);
}
.included svg{ width:10px; height:10px; color:var(--success);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font: 600 14px/1.2 var(--font-sans);
  padding:12px 16px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; letter-spacing:-.005em;
  transition: transform .08s, box-shadow .15s, background .15s;
  width:100%;
}
.btn.primary{
  background: var(--indigo-700); color:#fff;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--indigo-700) 35%, transparent);
}
.btn.primary:hover{ background: var(--indigo-800);}
.btn.primary:active{ transform: translateY(1px);}
.btn.primary:disabled{
  background: var(--ink-5); color:#fff;
  box-shadow:none; cursor:not-allowed;
}
.btn.ghost{
  background: var(--paper); color:var(--ink-2);
  border:1px solid var(--line);
}
.btn.ghost:hover{ background:var(--paper-3);}
.btn.ghost.wa{ color:#128C7E; border-color: color-mix(in oklab, #128C7E 30%, var(--line));}

.cta-stack{ display:flex; flex-direction:column; gap:8px;}
.fine{ font-size:11px; color:var(--ink-4); text-align:center; margin-top:8px;}

.q-disabled-notice{
  padding:8px 10px; border-radius:10px;
  background: var(--amber-50); color:var(--amber-600);
  border:1px solid var(--amber-100);
  font-size:12px; margin-bottom:8px;
  display:flex; align-items:center; gap:8px;
}

/* ======================== MOBILE PRICE BAR ======================== */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--paper);
  border-top:1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,18,38,.08);
  padding:10px 14px;
  align-items:center; gap:10px;
}
.mobile-bar .mb-total{
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em;
  display:flex; flex-direction:column; line-height:1.1;
}
.mobile-bar .mb-total small{ font-weight:500; color:var(--ink-4); font-size:10.5px; letter-spacing:.04em;}
.mobile-bar .mb-expand{
  margin-left:auto;
  width:34px; height:34px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper-3);
  display:grid; place-items:center; cursor:pointer;
}
.mobile-bar .mb-expand svg{ width:16px; height:16px;}
.mobile-bar .btn{ width:auto; padding:10px 16px; font-size:13.5px;}

.mobile-sheet{
  display:none;
  position:fixed; inset:0; z-index:60;
  background: rgba(15,18,38,.5);
  align-items:flex-end; justify-content:center;
}
.mobile-sheet.open{ display:flex;}
.mobile-sheet .sheet{
  background:var(--paper); border-radius:24px 24px 0 0;
  width:100%; max-width:600px;
  max-height:85vh; overflow:auto;
  padding:18px 20px 22px;
  box-shadow: 0 -30px 60px rgba(15,18,38,.25);
  animation: slideUp .22s ease;
}
.mobile-sheet .grabber{
  width:44px; height:5px; border-radius:999px; background:var(--line);
  margin:0 auto 12px;
}
@keyframes slideUp{ from{ transform: translateY(12px); opacity:0;} to{ transform:none; opacity:1;}}

/* ======================== MODAL ======================== */
.modal{
  display:none;
  position:fixed; inset:0; z-index:70;
  background: rgba(15,18,38,.55);
  backdrop-filter: blur(2px);
  align-items:center; justify-content:center;
  padding:20px;
}
.modal.open{ display:flex;}
.modal .dialog{
  background:var(--paper); border-radius:var(--radius-lg);
  width:100%; max-width:560px;
  max-height:94vh; overflow:auto;
  box-shadow: var(--shadow-lg);
  animation: dialogIn .22s ease;
}
@keyframes dialogIn{ from{ transform: translateY(8px) scale(.98); opacity:0;} to{ transform:none; opacity:1;}}
.modal .d-head{
  padding:20px 24px 14px; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}
.modal h3{ margin:0 0 4px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.015em;}
.modal .d-sub{ color:var(--ink-3); font-size:13px;}
.modal .close{
  width:32px; height:32px; border-radius:10px;
  border:1px solid var(--line); background:var(--paper);
  display:grid; place-items:center; cursor:pointer;
  color:var(--ink-3);
}
.modal .close:hover{ background:var(--paper-3); color:var(--ink);}
.modal .d-body{ padding:18px 24px 20px;}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.form-grid .full{ grid-column: 1/-1;}
.contact-pref{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; margin-top:6px;
}
.contact-pref button{
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--paper); cursor:pointer;
  font-weight:500; font-size:13px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.contact-pref button.on{ background: var(--indigo-50); color:var(--indigo-700); border-color:var(--indigo-700);}
.contact-pref svg{ width:13px; height:13px;}

.d-foot{
  padding:16px 24px 20px; border-top:1px solid var(--line);
  background:var(--paper-2);
  display:flex; gap:10px; align-items:center;
}
.d-foot .sum{ flex:1; font-size:13px; color:var(--ink-3);}
.d-foot .sum b{ color:var(--ink); font-weight:600;}

/* confirmation step */
.conf{ text-align:center; padding:10px 0 6px;}
.conf .seal{
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg, var(--indigo-700), var(--indigo-900));
  margin: 0 auto 14px;
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--indigo-700) 30%, transparent);
}
.conf h3{ font-size:22px;}
.conf .qid{
  display:inline-block; margin:10px 0;
  padding:4px 12px; border-radius:8px; background:var(--paper-3);
  font-family:var(--font-mono); font-size:12px; color:var(--ink-2);
}
.conf .sum-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin:14px 0; text-align:left;
}
.conf .sum-card .row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--ink-2);}
.conf .sum-card .row b{ color:var(--ink);}
.conf .sum-card .row .p{ font-family:var(--font-mono); font-weight:500;}
.conf .cta-row{ display:flex; gap:8px; margin-top:10px;}

/* ======================== TWEAKS PANEL ======================== */
.tweaks{
  position:fixed; right:16px; bottom:16px; z-index:55;
  width:280px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding:14px 16px; font-size:13px;
  display:none;
}
body.tweaks-on .tweaks{ display:block;}
.tweaks h5{ margin:0 0 8px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3);}
.tweaks .tw-row{ margin-bottom:10px;}
.tweaks label{ display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer;}
.tweaks .swatches{ display:flex; gap:6px; margin-top:6px;}
.tweaks .swatches button{
  width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
}
.tweaks .swatches button.on{ border-color:var(--ink);}
.tweaks hr{ border:0; border-top:1px solid var(--line); margin:10px 0;}
.tweaks select{
  font: inherit; width:100%; padding:6px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper);
}

/* ======================== RESPONSIVE ========================
 * On narrower desktops (1020–1239px) the fixed quote would overlap content,
 * so we revert it to sticky-within-.app and let the bottom mobile-bar
 * take over for the rest of the page.
 */
@media (max-width: 1239px) and (min-width: 1021px){
  .quote{
    position:sticky; top:90px; right:auto; width:auto;
  }
  .mobile-bar{ display:flex; }
  body{ padding-bottom:80px; }
}
@media (max-width: 1020px){
  .app{ grid-template-columns: 1fr;}
  .quote{ display:none;}   /* sticky right-rail hidden on mobile; replaced by sticky bottom bar */
  .mobile-bar{ display:flex;}
  body{ padding-bottom:80px;}
  .preset-grid{ grid-template-columns: repeat(2,1fr);}
  .etype-strip{ grid-template-columns: repeat(2,1fr);}
  .teach-grid, .teach-grid.three, .deliv-grid{ grid-template-columns: 1fr;}
  .duration{ grid-template-columns:1fr;}
  .segmented{ grid-template-columns:1fr;}
  .venue-grid{ grid-template-columns:1fr;}
  .cam-coverage{ grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 600px){
  .form-grid{ grid-template-columns:1fr;}
  .preset-grid{ grid-template-columns: 1fr;}
  .hero h1{ font-size: 28px;}
  .section{ padding: 18px 16px;}
  .site-header .inner{ gap:10px;}
  .header-title{ display:none;}
  .trust-strip{ display:none;}
}