:root {
      --petrol: #2e5753;
      --champagne: #dfc288;
      --wine: #642c3b;
      --porcelain: #f4f1e9;
      --mist: #dce7e2;
      --slate: #20282a;
      --white: #fffdf8;
      --line: rgba(32, 40, 42, .14);
      --shadow: 0 22px 55px rgba(32, 40, 42, .12);
      --radius: 24px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--slate);
      background:
        radial-gradient(circle at 82% 8%, rgba(223,194,136,.22), transparent 25rem),
        var(--porcelain);
      font-family: "DM Sans", system-ui, sans-serif;
      line-height: 1.5;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid var(--champagne);
      outline-offset: 3px;
    }
    .page-shell { min-height: 100vh; overflow: hidden; }
    .topbar {
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 28px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand-lockup { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
    .brand-mark-logo { width: auto; height: auto; border: 0; background: none; box-shadow: none; border-radius: 0; }
    .brand-mark-logo img,
    .brand-mark-logo .custom-logo { display: block; max-height: 48px; width: auto; }
    .brand-mark {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--petrol); color: var(--champagne);
      display: grid; place-items: center;
      border: 2px solid var(--champagne);
      font-family: "Cormorant Garamond", serif;
      font-size: 25px; font-weight: 700;
      box-shadow: 5px 5px 0 rgba(100,44,59,.18);
    }
    .brand-mark-placeholder {
      background: none; color: rgba(32,40,42,.4);
      border: 2px dashed rgba(46,87,83,.4); box-shadow: none;
    }
    .brand-name { font-weight: 700; letter-spacing: .02em; }
    .brand-sub { display: block; color: rgba(32,40,42,.62); font-size: 12px; margin-top: 1px; }
    .utility-label, .eyebrow, .field-label, .meta-label {
      font-family: "IBM Plex Mono", monospace;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 11px;
      font-weight: 600;
    }
    .utility-label { color: var(--petrol); }

    .hero {
      max-width: 1180px;
      margin: 0 auto;
      padding: 76px 28px 46px;
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(320px, .72fr);
      gap: 70px;
      align-items: end;
      position: relative;
    }
    .hero h1 {
      margin: 15px 0 18px;
      max-width: 730px;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(54px, 7vw, 92px);
      line-height: .9;
      letter-spacing: -.045em;
      font-weight: 600;
    }
    .hero h1 em { color: var(--wine); font-style: normal; }
    .hero-copy { max-width: 570px; font-size: 18px; color: rgba(32,40,42,.76); }
    .hero-note {
      border-left: 2px solid var(--champagne);
      padding: 8px 0 8px 20px;
      color: rgba(32,40,42,.65);
      font-size: 14px;
    }
    .arrival-line {
      width: 100%; height: 85px; margin-top: 25px;
      overflow: visible;
    }
    .arrival-line path { fill: none; stroke: var(--champagne); stroke-width: 2.5; stroke-linecap: round; }
    .arrival-line circle { fill: var(--wine); }

    .calculator-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px 82px; }
    .calculator {
      background: var(--white);
      border: 1px solid rgba(46,87,83,.15);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 250px minmax(0,1fr);
      overflow: hidden;
    }
    .side-panel {
      background: var(--petrol);
      color: var(--white);
      padding: 30px 24px;
      position: relative;
    }
    .side-panel::after {
      content: ""; position: absolute; width: 140px; height: 140px; border: 1px solid rgba(223,194,136,.45);
      border-radius: 50%; right: -72px; bottom: -58px;
    }
    .side-title { font-family: "Cormorant Garamond", serif; font-size: 31px; line-height: 1; margin: 0 0 32px; color: var(--champagne); }
    .steps { display: grid; gap: 21px; position: relative; z-index: 1; }
    .step-indicator { display: flex; gap: 11px; align-items: flex-start; color: rgba(255,253,248,.53); transition: color .2s ease; }
    .step-indicator.active, .step-indicator.done { color: var(--white); }
    .step-number { width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 600 11px "IBM Plex Mono", monospace; flex: 0 0 auto; }
    .step-indicator.active .step-number { background: var(--champagne); color: var(--slate); border-color: var(--champagne); }
    .step-copy strong { display: block; font-size: 13px; font-weight: 600; }
    .step-copy span { display: block; font-size: 12px; margin-top: 2px; }
    .side-foot { position: absolute; left: 24px; right: 24px; bottom: 28px; color: rgba(255,253,248,.62); font-size: 12px; max-width: 170px; }

    .form-panel { padding: 39px clamp(24px, 5vw, 66px) 45px; min-width: 0; }
    .form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 31px; }
    .form-head h2 { font-family: "Cormorant Garamond", serif; font-size: 42px; line-height: 1; margin: 6px 0 0; font-weight: 600; }
    .progress { color: var(--petrol); white-space: nowrap; padding-top: 4px; }
    .progress strong { display: block; font: 600 16px "IBM Plex Mono", monospace; letter-spacing: .03em; }
    .progress span { color: rgba(32,40,42,.55); font-size: 12px; }

    .panel-step { display: none; animation: enter .25s ease both; }
    .panel-step.active { display: block; }
    @keyframes enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    .question { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.08; margin: 0 0 8px; }
    .hint { color: rgba(32,40,42,.63); font-size: 14px; margin: 0 0 25px; max-width: 650px; }
    .choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .choice-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .choice { position: relative; }
    .choice input { position: absolute; opacity: 0; pointer-events: none; }
    .choice label {
      display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
      min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 15px;
      background: #fffefa; transition: .18s ease; cursor: pointer;
    }
    .choice label:hover { border-color: var(--petrol); transform: translateY(-1px); }
    .choice input:checked + label { border: 2px solid var(--petrol); background: var(--mist); padding: 15px; box-shadow: inset 0 0 0 1px rgba(46,87,83,.06); }
    .choice-title { font-weight: 700; font-size: 15px; }
    .choice-meta { font-size: 12px; color: rgba(32,40,42,.64); }
    .choice-price { color: var(--wine); font: 600 14px "IBM Plex Mono", monospace; }

    .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .field-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field-label { color: var(--petrol); letter-spacing: .08em; }
    .field input, .field select, .field textarea {
      width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fffefa;
      color: var(--slate); padding: 13px 14px; min-height: 48px;
    }
    .field textarea { min-height: 92px; resize: vertical; }
    .field small { color: rgba(32,40,42,.56); font-size: 12px; }
    .inline-unit { position: relative; }
    .inline-unit input { padding-right: 48px; }
    .unit { position: absolute; right: 14px; top: 14px; font: 600 12px "IBM Plex Mono", monospace; color: rgba(32,40,42,.53); }
    .extras-list { display: grid; gap: 10px; }
    .extra-row {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffefa;
    }
    .extra-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .extra-name { font-size: 14px; font-weight: 600; }
    .extra-price { font-size: 12px; color: rgba(32,40,42,.6); }
    .qty-stepper { display: flex; align-items: center; gap: 0; flex: 0 0 auto; }
    .qty-btn {
      width: 32px; height: 32px; border: 1px solid var(--line); background: var(--white);
      color: var(--petrol); font-size: 16px; font-weight: 700; line-height: 1; display: grid; place-items: center;
    }
    .qty-btn:hover { background: var(--mist); }
    .qty-btn.qty-minus { border-radius: 8px 0 0 8px; }
    .qty-btn.qty-plus { border-radius: 0 8px 8px 0; }
    .qty-stepper input[type="number"] {
      width: 44px; height: 32px; border: 1px solid var(--line); border-left: 0; border-right: 0;
      text-align: center; -moz-appearance: textfield; padding: 0; min-height: 0;
    }
    .qty-stepper input[type="number"]::-webkit-outer-spin-button,
    .qty-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .extras-subtotal {
      margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--mist);
      color: var(--petrol); font: 600 14px "IBM Plex Mono", monospace; text-align: right;
    }
    .check-list { display: grid; gap: 10px; }
    .check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
    .check-row input { margin-top: 3px; accent-color: var(--petrol); width: 17px; height: 17px; }
    .form-error { display: none; background: #f7e9e8; border-left: 3px solid var(--wine); padding: 10px 13px; color: var(--wine); font-size: 13px; margin: 18px 0 0; }
    .form-error.show { display: block; }

    .actions { display: flex; justify-content: space-between; align-items: center; gap: 13px; margin-top: 30px; padding-top: 23px; border-top: 1px solid var(--line); }
    .button { border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 700; transition: .18s ease; }
    .button:hover { transform: translateY(-1px); }
    .button.primary { background: var(--petrol); color: var(--white); box-shadow: 0 8px 18px rgba(46,87,83,.18); }
    .button.primary:hover { background: #234843; }
    .button.secondary { background: transparent; color: var(--petrol); border: 1px solid rgba(46,87,83,.35); }
    .button.text { color: rgba(32,40,42,.65); padding-left: 0; background: none; }
    .button:disabled { opacity: .42; cursor: not-allowed; transform: none; }

    .result-shell { background: var(--mist); border-radius: 19px; padding: 22px; border: 1px solid rgba(46,87,83,.16); }
    .result-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
    .result-top > div:first-child { min-width: 0; }
    .result-kicker { color: var(--petrol); }
    .result-shell h3 { margin: 5px 0 8px; font: 600 38px/1 "Cormorant Garamond", serif; }
    .result-copy { margin: 0; color: rgba(32,40,42,.72); font-size: 14px; overflow-wrap: anywhere; }
    .result-price { text-align: right; white-space: nowrap; }
    .result-price small { display: block; color: rgba(32,40,42,.57); font-size: 11px; }
    .result-price strong { color: var(--wine); font: 600 27px "IBM Plex Mono", monospace; }
    .result-price em { display: block; font-style: normal; color: rgba(32,40,42,.58); font-size: 11px; }
    .result-list { list-style: none; padding: 19px 0 0; margin: 19px 0 0; border-top: 1px solid rgba(46,87,83,.18); display: grid; gap: 9px; }
    .result-list li { display: flex; gap: 9px; font-size: 14px; overflow-wrap: anywhere; min-width: 0; }
    .result-list li::before { content: "✓"; color: var(--petrol); font-weight: 700; flex: 0 0 auto; }
    .cost-breakdown { margin-top: 19px; display: grid; gap: 8px; font-size: 14px; }
    .cost-row { display: flex; justify-content: space-between; gap: 14px; overflow-wrap: anywhere; }
    .cost-row span { min-width: 0; }
    .cost-row.total { padding-top: 12px; border-top: 1px solid rgba(46,87,83,.2); font-weight: 700; }
    .cost-row.total span:last-child { color: var(--wine); font: 600 16px "IBM Plex Mono", monospace; }
    .notice { margin-top: 16px; padding: 13px 14px; border-radius: 12px; background: rgba(255,253,248,.72); color: rgba(32,40,42,.7); font-size: 13px; overflow-wrap: anywhere; }
    .notice strong { color: var(--petrol); }
    .notice.warning { border-left: 3px solid var(--wine); }
    .contact-block { margin-top: 23px; }
    .contact-block h4 { font: 600 27px/1 "Cormorant Garamond", serif; margin: 0 0 8px; }
    .copy-success { display: none; color: var(--petrol); font-size: 13px; margin-top: 10px; }
    .copy-success.show { display: block; }
    .copy-success.is-error { color: var(--wine); }

    .footer-note { max-width: 1180px; padding: 0 28px 42px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; color: rgba(32,40,42,.58); font-size: 12px; }
    .footer-note strong { color: var(--petrol); }
    .footer-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .footer-note a:hover { color: var(--petrol); }
    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 54px; }
      .hero h1 { max-width: 600px; }
      .hero-note { max-width: 520px; }
      .calculator { grid-template-columns: 1fr; }
      .side-panel { padding: 24px; }
      .side-title { margin-bottom: 18px; }
      .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
      .step-indicator { display: block; text-align: center; min-width: 0; }
      .step-number { margin: 0 auto 8px; }
      .step-copy strong { font-size: 10px; line-height: 1.25; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
      .step-copy span, .side-foot { display: none; }
    }
    @media (max-width: 590px) {
      .topbar, .hero, .calculator-wrap, .footer-note { padding-left: 17px; padding-right: 17px; }
      .topbar { padding-top: 18px; }
      .brand-sub, .utility-label { font-size: 10px; }
      .hero { padding-top: 48px; padding-bottom: 32px; }
      .hero h1 { font-size: clamp(52px, 16vw, 76px); }
      .hero-copy { font-size: 16px; }
      .calculator { border-radius: 18px; }
      .form-panel { padding: 28px 18px 31px; }
      .form-head h2 { font-size: 36px; }
      .form-head { margin-bottom: 25px; }
      .choice-grid, .choice-grid.three, .field-grid, .field-grid.three { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .actions { align-items: stretch; flex-direction: column-reverse; }
      .actions .button { width: 100%; }
      .result-top { flex-direction: column; }
      .result-price { text-align: left; }
      .result-shell h3 { font-size: 34px; }
      .footer-note { flex-direction: column; gap: 8px; }
      .extra-row { flex-wrap: wrap; }
      .extra-info { flex: 1 1 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    }
  

/* Responsive typography refinement / v1.1.0 */
body { font-size: clamp(1rem, calc(.96rem + .16vw), 1.08rem); }
.topbar, .footer-note { font-size: clamp(.72rem, calc(.68rem + .16vw), .8rem); }
.brand-name { font-size: clamp(.92rem, calc(.84rem + .25vw), 1rem); }
.brand-sub, .utility-label { font-size: clamp(.64rem, calc(.61rem + .12vw), .72rem); }

.hero h1 { font-size: clamp(3rem, calc(2.25rem + 4.2vw), 5.75rem); line-height: .91; text-wrap: balance; }
.hero-copy { font-size: clamp(1rem, calc(.96rem + .2vw), 1.125rem); line-height: 1.55; }
.hero-note { font-size: clamp(.82rem, calc(.78rem + .14vw), .9rem); line-height: 1.5; }
.side-title { font-size: clamp(1.7rem, calc(1.4rem + 1vw), 1.94rem); }
.step-copy strong { font-size: clamp(.7rem, calc(.66rem + .16vw), .82rem); }
.step-copy span, .side-foot { font-size: clamp(.66rem, calc(.63rem + .12vw), .75rem); }
.form-head h2 { font-size: clamp(1.9rem, calc(1.65rem + .9vw), 2.625rem); line-height: .98; text-wrap: balance; }
.progress strong { font-size: clamp(.9rem, calc(.84rem + .2vw), 1rem); }
.progress span { font-size: clamp(.68rem, calc(.64rem + .12vw), .75rem); }
.question { font-size: clamp(1.6rem, calc(1.35rem + 1.25vw), 1.875rem); line-height: 1.05; text-wrap: balance; }
.hint { font-size: clamp(.9rem, calc(.86rem + .14vw), .96rem); line-height: 1.5; }
.choice-title { font-size: clamp(.9rem, calc(.86rem + .16vw), 1rem); }
.choice-meta { font-size: clamp(.74rem, calc(.7rem + .12vw), .8rem); line-height: 1.4; }
.choice-price { font-size: clamp(.8rem, calc(.76rem + .14vw), .88rem); }
.field-label { font-size: clamp(.66rem, calc(.63rem + .12vw), .73rem); }
.field input, .field select, .field textarea { font-size: 1rem; line-height: 1.35; }
.field small { font-size: clamp(.74rem, calc(.7rem + .12vw), .8rem); }
.check-row { font-size: clamp(.9rem, calc(.86rem + .14vw), .96rem); line-height: 1.45; }
.form-error { font-size: clamp(.8rem, calc(.76rem + .12vw), .86rem); }
.button { font-size: clamp(.94rem, calc(.9rem + .14vw), 1rem); line-height: 1.2; }
.result-shell h3 { font-size: clamp(1.95rem, calc(1.7rem + .8vw), 2.375rem); line-height: 1; text-wrap: balance; }
.result-copy, .result-list li, .cost-breakdown { font-size: clamp(.88rem, calc(.84rem + .14vw), .94rem); line-height: 1.5; }
.result-price small, .result-price em { font-size: clamp(.66rem, calc(.63rem + .12vw), .73rem); }
.result-price strong { font-size: clamp(1.45rem, calc(1.2rem + .8vw), 1.7rem); }
.notice { font-size: clamp(.8rem, calc(.76rem + .14vw), .88rem); line-height: 1.5; }
.contact-block h4 { font-size: clamp(1.65rem, calc(1.4rem + .8vw), 1.9rem); }
.copy-success { font-size: clamp(.8rem, calc(.76rem + .12vw), .86rem); }

@media (max-width: 590px) {
  .hero h1 { font-size: clamp(2.85rem, 12.5vw, 4rem); line-height: .92; }
  .hero-copy { font-size: 1rem; }
  .form-head h2 { font-size: clamp(1.9rem, 8vw, 2.35rem); }
  .question { font-size: clamp(1.5rem, 6.2vw, 1.8rem); }
  .hint { font-size: .94rem; }
  .choice-title { font-size: .96rem; }
  .choice-meta { font-size: .8rem; }
  .check-row { font-size: .94rem; }
  .result-shell h3 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
  .result-price strong { font-size: clamp(1.4rem, 7vw, 1.7rem); }
  .footer-note { font-size: .75rem; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: clamp(2.7rem, 12.8vw, 3.2rem); }
  .form-head h2 { font-size: 1.9rem; }
  .question { font-size: 1.48rem; }
  .result-shell h3 { font-size: 1.85rem; }
}