@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --ink: #080808;
  --card: #17110f;
  --paper: #fff8f4;
  --muted: #c4b9b2;
  --orange: #ff3d00;
  --orange-light: #ff8a5d;
  --line: rgba(255, 255, 255, .13);
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: 'Poppins', Arial, sans-serif; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.site-shell {
  display: grid;
  grid-template-columns: minmax(570px, 1.08fr) minmax(350px, .92fr);
  min-height: 100vh;
  background: radial-gradient(circle at 10% 5%, #ff4d00 0, transparent 31%), linear-gradient(135deg, #050505 5%, #160504 55%, #330000 100%);
}

.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  padding: 32px clamp(34px, 6vw, 96px) 28px;
  color: #fff6f0;
  background: linear-gradient(155deg, rgba(20,20,20,.96), rgba(8,8,8,.985));
  border-right: 1px solid rgba(255,132,77,.16);
}

.quote-card::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,43,0,.28), transparent 67%);
  top: -145px;
  right: -125px;
  pointer-events: none;
}

.topbar, .progress, .question-area, .summary-area, .actions, .send-error { position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; width: 224px; height: 58px; overflow: visible; }
.brand img { display: block; object-fit: contain; width: 224px; max-width: none; height: 58px; }
.topbar-nav a { color: #cfc4bd; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; text-decoration: none; }
.topbar-nav a:hover { color: var(--paper); }

.progress { display: flex; gap: 8px; margin: 48px 0 38px; }
.progress span { width: 43px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.16); }
.progress span.active { background: linear-gradient(90deg, #ff6a00, #ff0900); }

.question-area, .summary-area { flex: 1; max-width: 670px; }
.eyebrow { margin: 0 0 15px; color: var(--orange); letter-spacing: .16em; font-size: 10px; font-weight: 700; }
.question-area > h1, .summary-area > h1 { margin: 0; font-size: clamp(39px, 4.2vw, 59px); line-height: .99; letter-spacing: -3.2px; font-weight: 600; }
.summary-area h1 em { color: var(--paper); font-style: normal; font-weight: 700; }
.intro { max-width: 530px; margin: 21px 0 27px; color: var(--muted); font-size: 15px; line-height: 1.55; }

.option-grid { display: grid; gap: 13px; }
.networks { grid-template-columns: repeat(3, 1fr); }
.two-columns { grid-template-columns: 1fr 1fr; }
.choice, .post-choice, .mini-choice {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
  color: var(--paper);
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border-radius: 10px;
  transition: .2s ease;
}
.choice:hover, .post-choice:hover, .mini-choice:hover { border-color: var(--orange); background: rgba(255,61,0,.1); transform: translateY(-2px); }
.choice.selected, .post-choice.selected, .mini-choice.selected { border-color: #ff2400; background: linear-gradient(145deg, rgba(255,77,0,.24), rgba(255,0,0,.16)); box-shadow: 0 0 0 1px #ff2400, 0 10px 25px rgba(255,30,0,.16); }
.choice i, .post-choice i, .mini-choice i { display: none; position: absolute; right: 12px; top: 11px; width: 20px; height: 20px; padding-top: 2px; border-radius: 50%; background: #ff2100; color: white; text-align: center; font-size: 12px; font-style: normal; }
.selected i { display: block; }
.network { display: flex; flex-direction: column; justify-content: space-between; min-height: 130px; padding: 23px 17px; }
.network b img { display: block; object-fit: contain; width: 31px; height: 31px; }
.network:nth-child(2) b img { filter: brightness(0) invert(1); }
.network span { font-size: 14px; font-weight: 700; }
.large { display: flex; flex-direction: column; gap: 7px; min-height: 145px; padding: 23px 21px; }
.large b { color: var(--orange); font-size: 29px; line-height: 1; }
.large strong { color: var(--paper); font-size: 16px; }
.large span { max-width: 180px; color: #cbbdb5; font-size: 13px; line-height: 1.4; }

.contact-fields { display: grid; gap: 12px; max-width: 620px; margin-top: 24px; }
.two-field-form { grid-template-columns: 1fr 1fr; }
.contact-fields label { display: grid; gap: 7px; color: #e3c9bd; font-size: 12px; font-weight: 600; }
.contact-fields .full-field { grid-column: 1 / -1; }
.contact-fields input { width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; outline: none; padding: 13px 14px; color: var(--paper); background: rgba(255,255,255,.055); font-size: 14px; font-weight: 400; }
.contact-fields input::placeholder { color: #917e75; }
.contact-fields input:focus { border-color: #ff611f; box-shadow: 0 0 0 3px rgba(255,76,12,.13); }
.contact-fields input[aria-invalid='true'] { border-color: #ff6049; }

.need-section, .timeline-section { margin-top: 25px; }
.need-section h2, .timeline-section h2, .binary-question h2 { margin: 0; color: #f1ded4; font-size: 13px; font-weight: 600; }
.objective-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mini-choice { min-height: 56px; padding: 14px 42px 14px 15px; }
.mini-choice span { font-size: 12px; font-weight: 600; line-height: 1.35; }
.history-section { display: grid; gap: 4px; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.binary-question { display: grid; grid-template-columns: minmax(210px, 1fr) 190px; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.binary-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.binary-options .mini-choice { min-height: 45px; padding: 11px 36px 11px 13px; }
.traffic-options { max-width: 620px; }
.timeline-section { max-width: 620px; margin-top: 25px; }
.timeline-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }

.post-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.post-choice { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 144px; padding: 26px 16px; }
.post-choice b { position: absolute; top: 19px; left: 17px; color: var(--orange); font-size: 47px; line-height: 1; font-weight: 500; }
.post-choice span { color: #cbbdb5; font-size: 13px; font-weight: 700; }

.actions { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 32px; }
.next { margin-left: auto; border: 0; border-radius: 8px; padding: 15px 20px; color: white; background: linear-gradient(105deg, #ff7600, #ff1300); box-shadow: 0 9px 24px rgba(255,42,0,.28); font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; }
.next:hover { background: linear-gradient(105deg, #ff9300, #ff2800); }
.next:disabled { cursor: not-allowed; background: #4a433f; box-shadow: none; }
.next span { margin-left: 16px; font-size: 16px; }
.back { border: 0; padding: 10px 0; color: #c5b8b0; background: transparent; font-size: 13px; cursor: pointer; }
.back:hover { color: #ff4d00; }

.summary-area { padding-top: 8px; }
.success-mark { display: grid; place-items: center; width: 41px; height: 41px; margin-bottom: 21px; border-radius: 50%; color: #ff9d6b; background: rgba(255,119,56,.18); font-size: 20px; }
.quote-summary { margin-top: 26px; border-top: 1px solid var(--line); }
.quote-summary > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.11); font-size: 13px; }
.quote-summary span, .price span { color: #bfb2aa; }
.quote-summary strong { max-width: 57%; color: var(--paper); text-align: right; font-size: 13px; }
.traffic-summary { position: relative; }
.traffic-summary small { display: block; margin-top: 4px; color: #b9a8a0; font-size: 10px; line-height: 1.45; }
.quote-summary .included { display: block; margin: 13px 0; padding: 12px; border: 0; border-radius: 7px; background: rgba(255,126,48,.13); }
.included span, .included strong { display: block; max-width: none; text-align: left; }
.included strong { margin-top: 5px; font-size: 12px; }
.price { display: flex; align-items: baseline; gap: 9px; margin-top: 22px; padding: 18px 21px; border-radius: 10px; color: white; background: linear-gradient(110deg, #ff7100, #ed0000); box-shadow: 0 10px 28px rgba(255,28,0,.25); }
.price span, .price small { color: #fff1e8; font-size: 12px; }
.price strong { margin-left: auto; letter-spacing: -1.2px; font-size: 29px; font-weight: 600; }
.summary-buttons { display: flex; gap: 9px; margin-left: auto; }
.summary-buttons .next { margin-left: 0; }
.download-quote { border: 1px solid rgba(255,129,71,.72); padding: 12px 13px; color: var(--paper); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }
.download-quote:hover { background: rgba(255,79,0,.15); }
.download-quote:disabled { cursor: wait; opacity: .62; }
.request-proposal { letter-spacing: .02em; }
.send-error { margin: 9px 0 0; color: #ff9b79; text-align: right; font-size: 12px; }

.side-copy { position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(125deg, rgba(12,4,2,.24) 0%, rgba(29,5,1,.18) 45%, rgba(78,12,2,.3) 100%), url('assets/opine-portrait.png') 62% 16% / cover no-repeat; }
.side-copy::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,72,10,.1), transparent 35%, rgba(0,0,0,.22)); }
.side-copy::after { content: ''; position: absolute; top: -220px; right: -290px; width: 520px; height: 520px; border: 1px solid rgba(255,107,45,.28); border-radius: 50%; }
.orb-one { position: absolute; z-index: 1; bottom: 42px; left: 52px; width: 142px; height: 5px; background: linear-gradient(90deg, #ff7700, #ff1a00); }
.orb-two { position: absolute; z-index: 1; bottom: 42px; left: 214px; width: 88px; height: 5px; border-left: 1px solid rgba(255,255,255,.16); }
.mobile-portrait { display: none; }

.confirmation-modal { position: fixed; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(0,0,0,.76); }
.confirmation-panel { width: 100%; max-width: 420px; padding: 38px; border: 1px solid rgba(255,112,48,.42); color: var(--paper); text-align: center; background: linear-gradient(145deg, #17100d, #300b03); box-shadow: 0 25px 70px rgba(0,0,0,.55); }
.confirmation-mark { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg, #ff7600, #ee1500); font-size: 24px; }
.confirmation-panel p { margin: 0 0 12px; color: #ff8a5d; letter-spacing: .14em; font-size: 11px; font-weight: 700; }
.confirmation-panel h2 { margin: 0; letter-spacing: -1.8px; font-size: 31px; line-height: 1.08; font-weight: 600; }
.confirmation-panel > span { display: block; max-width: 315px; margin: 18px auto 29px; color: #dfc8bc; font-size: 15px; line-height: 1.65; }
.confirmation-panel button { margin-top: 10px; border: 0; padding: 14px 19px; color: white; background: linear-gradient(105deg, #ff7600, #ff1300); font-size: 13px; font-weight: 600; cursor: pointer; }
.confirmation-panel button:disabled { cursor: wait; opacity: .65; }
.confirmation-panel .download-pdf { display: block; margin: 0 auto; border: 1px solid rgba(255,137,82,.7); background: transparent; }
.confirmation-panel .download-pdf:hover { background: rgba(255,92,26,.16); }
.confirmation-panel .modal-close { display: block; margin: 12px auto 0; padding: 6px; color: #d6c1b7; background: transparent; }

/* SEO service page */
.service-page { min-height: 100vh; color: var(--paper); background: #080808; }
.service-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px 7vw; }
.service-header > a:last-child { color: var(--paper); font-size: 12px; font-weight: 600; text-decoration: none; }
.service-brand { display: block; width: 180px; height: 46px; }
.service-brand img { width: 180px; height: 46px; object-fit: contain; }
.service-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,42%); min-height: 700px; padding: 0 7vw; background: linear-gradient(90deg, #080808 14%, rgba(13,5,3,.9) 47%, rgba(31,5,1,.31)), url('assets/opine-portrait.png') 79% 27% / cover no-repeat; }
.service-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 74%, #080808 100%); }
.service-hero-copy { position: relative; z-index: 1; align-self: center; max-width: 690px; padding: 105px 0 58px; }
.service-kicker { margin: 0 0 16px; color: #ff6a2c; letter-spacing: .14em; font-size: 11px; font-weight: 700; }
.service-hero h1, .service-content h2, .service-process h2, .service-cta h2 { margin: 0; letter-spacing: -4px; font-size: clamp(40px,5.3vw,75px); line-height: 1.02; font-weight: 600; }
.service-hero-copy > p:not(.service-kicker) { max-width: 560px; margin: 24px 0 32px; color: #ebc8bb; font-size: 17px; line-height: 1.7; }
.service-button { display: inline-block; padding: 15px 21px; color: white; background: linear-gradient(105deg,#ff7600,#ff1300); box-shadow: 0 10px 27px rgba(255,42,0,.24); font-size: 14px; font-weight: 600; text-decoration: none; }
.service-button span { margin-left: 14px; }
.service-content { padding: 100px 7vw; background: linear-gradient(145deg,#080808,#170603 70%,#250400); }
.service-content > h2, .service-content > .service-lead { max-width: 820px; }
.service-content h2, .service-process h2, .service-cta h2 { font-size: clamp(31px,4.2vw,56px); }
.service-lead { margin: 24px 0 42px; color: #dec5ba; font-size: 16px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-grid article { padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02)); }
.service-grid h3 { margin: 0 0 13px; font-size: 20px; }
.service-grid p { margin: 0; color: #d4c0b8; font-size: 14px; line-height: 1.7; }
.service-process { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 70px; padding: 100px 7vw; background: #090909; }
.service-process ol { margin: 0; padding: 0; list-style: none; }
.service-process li { display: flex; align-items: flex-start; gap: 25px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.service-process li b { color: #ff4a12; font-size: 13px; }
.service-process li span { display: grid; gap: 7px; color: #cdbbb3; font-size: 14px; line-height: 1.6; }
.service-process li strong { color: var(--paper); font-size: 16px; }
.service-cta { padding: 92px 7vw; background: radial-gradient(circle at 87% 18%,rgba(255,75,0,.36),transparent 31%),linear-gradient(120deg,#270700,#100303); }
.service-cta > p { margin: 0 0 13px; color: #ff9a77; font-size: 14px; }
.service-cta h2 { max-width: 760px; }
.service-cta .service-button { margin-top: 30px; }

@media (max-width: 820px) {
  .site-shell { display: block; }
  .side-copy { display: none; }
  .quote-card { min-height: 100dvh; padding: 24px 23px 25px; background: linear-gradient(rgba(4,4,4,.08) 0, rgba(8,8,8,.95) 300px), linear-gradient(155deg,rgba(20,20,20,.96),rgba(8,8,8,.98)); }
  .mobile-portrait { display: block; position: absolute; inset: 0 0 auto; height: 300px; pointer-events: none; background: linear-gradient(rgba(0,0,0,.13) 0%,rgba(255,101,0,.52) 8%,rgba(217,37,0,.28) 39%,rgba(0,0,0,.63) 70%,#080808 100%), url('assets/opine-portrait.png') 50% 18% / cover no-repeat; }
  .topbar { position: absolute; z-index: 2; inset: 166px 0 auto; justify-content: center; }
  .topbar-nav { display: none; }
  .brand { width: 224px; height: 58px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
  .progress { margin: 300px 0 37px; }
  .question-area > h1, .summary-area > h1 { letter-spacing: -2px; }
  .networks, .post-options, .two-columns, .objective-grid, .timeline-options, .two-field-form { grid-template-columns: 1fr; }
  .contact-fields .full-field { grid-column: auto; }
  .network { min-height: 76px; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; }
  .network b img { width: 26px; height: 26px; }
  .large { min-height: 118px; }
  .binary-question { grid-template-columns: 1fr; gap: 10px; }
  .history-section { margin-top: 18px; }
  .timeline-options { gap: 8px; }
  .mini-choice { min-height: 50px; }
  .actions { margin-top: 25px; }
  .price { flex-wrap: wrap; }
  .price strong { margin-left: 0; }
  .quote-summary > div { display: block; }
  .quote-summary strong { display: block; max-width: none; margin-top: 5px; text-align: left; }
  .summary-buttons { gap: 7px; }
  .download-quote { padding: 12px 10px; font-size: 11px; }
  .summary-buttons .next { padding: 13px 11px; font-size: 10px; }
  .summary-buttons .next span { margin-left: 8px; }
  .service-header { padding: 17px 23px; }
  .service-brand, .service-brand img { width: 145px; height: 37px; }
  .service-header > a:last-child { font-size: 10px; }
  .service-hero { display: block; min-height: 680px; padding: 0 23px; background: linear-gradient(rgba(255,70,0,.26),rgba(8,8,8,.94) 67%,#080808),url('assets/opine-portrait.png') 50% 20% / cover no-repeat; }
  .service-hero-copy { padding: 325px 0 62px; }
  .service-hero h1, .service-content h2, .service-process h2, .service-cta h2 { letter-spacing: -2px; }
  .service-hero-copy > p:not(.service-kicker) { font-size: 15px; }
  .service-content, .service-process, .service-cta { padding: 65px 23px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-process { grid-template-columns: 1fr; gap: 38px; }
  .service-process li { gap: 18px; }
  .service-cta { padding-bottom: 76px; }
}