/* Homepage hero: brand on the left, service picker on the right. Picking a service
     swaps the picker for the quick-contact panel (data-hero-view on the section). */
  .hero { position: relative; overflow: hidden; padding: clamp(96px,9vw,120px) 0 clamp(48px,6vw,80px); }
  .hero-bg-word { position: absolute; top: 72%; left: 26%; transform: translate(-50%,-50%); font-family: "Cormorant Garamond",serif; font-size: clamp(160px,22vw,360px); line-height: .8; letter-spacing: -.04em; opacity: .035; white-space: nowrap; pointer-events: none; user-select: none; }
  .hero-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg,rgba(18,41,61,.055) 0 1px,transparent 1px 100%); background-size: calc(100% / 12) 100%; opacity: .45; }
  .hero-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(28px,4vw,64px); align-items: start; }

  .hero-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8A6512; margin-bottom: clamp(18px,2.4vw,28px); }
  .hero-title { margin: 0; font-family: "Cormorant Garamond","Times New Roman",serif; font-weight: 400; font-size: clamp(40px,4.3vw,70px); line-height: 1.04; letter-spacing: -.035em; color: #12293D; }
  .hero-copy { margin-top: clamp(18px,2.4vw,28px); }
  .hero-rule { display: block; width: 56px; height: 1px; background: rgba(138,101,18,.6); margin-bottom: clamp(16px,2vw,24px); }
  .hero-image { display: block; width: clamp(150px,16vw,240px); height: auto; margin-bottom: clamp(16px,2vw,24px); }
  .hero-lead { margin: 0 0 28px; max-width: 36ch; font-size: var(--section-body-size); line-height: var(--section-leading); color: #4A5A6B; }
  .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: 2px; font: 500 12px/1 "Inter",sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 280ms cubic-bezier(.22,1,.36,1), color 280ms, border-color 280ms; }
  .hero-btn-primary { background: #14304A; border: 1px solid #14304A; color: #FBF7EF; }
  .hero-btn-primary:hover { background: #091A2C; border-color: #091A2C; color: #F5F0E6; }
  .hero-btn-ghost { background: transparent; border: 1px solid rgba(18,41,61,.28); color: #12293D; }
  .hero-btn-ghost:hover { background: #091A2C; border-color: #091A2C; color: #F5F0E6; }

  .hero-picker-title { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font: 500 13px/1.2 "Inter",sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8A6512; }
  .hero-picker-title::before, .hero-picker-title::after { content: ""; flex: 1; height: 1px; background: rgba(138,101,18,.4); }
  .hero-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .hero-rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; margin-top: 12px; }
  .hero-card, .hero-row, .hero-list-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: rgba(251,247,239,.82); border: 1px solid rgba(138,101,18,.22); border-radius: 6px; color: #12293D; cursor: pointer; font: inherit; transition: background 220ms, border-color 220ms, box-shadow 220ms, transform 220ms; }
  .hero-card { min-height: 104px; padding: 18px 18px 18px 20px; }
  .hero-row { min-height: 48px; padding: 10px 16px; }
  .hero-card:hover, .hero-row:hover, .hero-list-item:hover { background: #FBF3E3; border-color: rgba(138,101,18,.55); box-shadow: 0 10px 24px rgba(35,25,18,.08); }
  .hero-card-icon { flex: none; font-size: 34px; color: #8A6512; }
  .hero-row .hero-card-icon { font-size: 22px; }
  .hero-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
  .hero-card-name { font-family: "Cormorant Garamond",serif; font-size: clamp(19px,1.6vw,24px); font-weight: 600; line-height: 1.12; flex: 1; }
  .hero-row .hero-card-name { font-size: 17px; font-weight: 500; }
  .hero-card-desc { font-size: 12px; line-height: 1.45; color: #4A5A6B; }
  .hero-card-arrow { flex: none; font-size: 16px; color: #12293D; }

  .hero-list { display: none; flex-direction: column; gap: 8px; max-height: min(76svh,720px); overflow-y: auto; padding-right: 4px; }
  .hero-list-item { min-height: 50px; padding: 10px 14px; font-family: "Cormorant Garamond",serif; font-size: 17px; font-weight: 500; }
  .hero-list-item span { flex: 1; }
  .hero-list-item .ph-light:first-child { font-size: 24px; color: #8A6512; }
  .hero-list-item[aria-pressed="true"] { background: #FBF0DC; border-color: #B58A43; box-shadow: 0 8px 20px rgba(138,101,18,.14); }

  .hero-panel { position: relative; background: #FBF7EF; border: 1px solid rgba(138,101,18,.22); border-radius: 8px; padding: clamp(22px,2.6vw,34px); box-shadow: 0 24px 60px rgba(35,25,18,.08); }
  .hero-panel-head { display: flex; align-items: center; gap: 14px; }
  .hero-panel-icon { font-size: 34px; color: #8A6512; }
  .hero-panel-title { flex: 1; margin: 0; font-family: "Cormorant Garamond",serif; font-weight: 500; font-size: clamp(26px,2.4vw,34px); line-height: 1.1; }
  .hero-panel-title:focus { outline: none; }
  .hero-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: 50%; color: #12293D; font-size: 22px; cursor: pointer; }
  .hero-close:hover { background: rgba(18,41,61,.06); }
  .hero-panel-question, .hero-form-title { margin: 20px 0 4px; font-family: "Cormorant Garamond",serif; font-size: 22px; font-weight: 600; }
  .hero-panel-hint { margin: 0 0 12px; font-size: 12px; color: #4A5A6B; }
  .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-chip { min-height: 32px; padding: 6px 14px; background: #F3ECDF; border: 1px solid rgba(138,101,18,.2); border-radius: 999px; color: #12293D; font: 12px/1.3 "Inter",sans-serif; cursor: pointer; }
  .hero-chip:hover { background: #EADDC5; border-color: rgba(138,101,18,.45); }
  .hero-chip:disabled, .hero-close:disabled { opacity: .5; cursor: not-allowed; }
  .hero-chip-other { border-style: dashed; }
  .hero-ornament { display: block; width: 8px; height: 8px; margin: 20px auto 0; background: #B58A43; transform: rotate(45deg); }

  .hero-form { display: flex; flex-direction: column; gap: 12px; }
  .hero-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .hero-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: #12293D; }
  .hero-field b { color: #A33A2B; font-weight: 500; }
  .hero-field input, .hero-field textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; background: #FFFDF8; border: 1px solid rgba(18,41,61,.2); border-radius: 4px; color: #12293D; font: 16px/1.4 "Inter",sans-serif; }
  .hero-field input[type="file"] { padding: 4px 0; border: 0; background: transparent; font-size: 14px; }
  .hero-field input[type="file"]::file-selector-button { margin-right: 14px; padding: 11px 16px; background: #B58A43; border: 1px solid #B58A43; border-radius: 2px; color: #261B17; font: 500 11px "Inter",sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background 180ms,border-color 180ms,color 180ms,transform 180ms; }
  .hero-field input[type="file"]:hover::file-selector-button { background: #F3EEE4; border-color: #F3EEE4; transform: translateY(-1px); }
  .hero-field input[type="file"]:focus-visible { outline: 2px solid #C0902F; outline-offset: 3px; }
  .hero-file-help { font-size: 11px; font-weight: 400; color: #4A5A6B; }
  .hero-field textarea { min-height: 88px; resize: vertical; }
  .hero-field input:focus, .hero-field textarea:focus { border-color: #8A6512; outline: none; box-shadow: 0 0 0 3px rgba(181,138,67,.2); }
  .hero-error { min-height: 0; font-size: 12px; font-weight: 400; color: #A33A2B; }
  .hero-error:empty { display: none; }
  .hero-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: 4px; background: #14304A; border: 1px solid #14304A; border-radius: 4px; color: #FBF7EF; font: 500 13px/1 "Inter",sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .hero-submit:hover { background: #091A2C; }
  .hero-submit:disabled { opacity: .7; cursor: wait; }
  .hero-status { font-size: 13px; line-height: 1.5; color: #4A5A6B; }
  .hero-status:empty { display: none; }
  .hero-status[data-status="error"] { color: #A33A2B; }

  .hero-thanks { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(32px,5vw,64px); }
  .hero-thanks-icon { font-size: 72px; color: #8A6512; }
  .hero-thanks-title { margin: 18px 0 0; font-family: "Cormorant Garamond",serif; font-weight: 500; font-size: clamp(30px,3vw,40px); line-height: 1.15; }
  .hero-thanks-title:focus { outline: none; }
  .hero-thanks-text { max-width: 48ch; margin: 10px 0 20px; color: #4A5A6B; line-height: 1.55; }
  .hero-thanks-urgent { max-width: 48ch; margin: 0 0 24px; padding: 14px 18px; border: 1px solid rgba(138,101,18,.28); border-radius: 6px; background: #FBF0DC; }
  .hero-thanks-urgent-title { margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8A6512; }
  .hero-thanks-urgent-text { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #4A5A6B; }
  .hero-thanks-hotline { margin: 0; font-size: 15px; color: #12293D; }
  .hero-thanks-hotline a { color: #12293D; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(138,101,18,.6); text-underline-offset: 3px; }
  .hero-thanks-hotline a:hover { color: #8A6512; }
  .hero-thanks-hotline a:focus-visible { outline: 2px solid #8A6512; outline-offset: 3px; }
  .hero-thanks-logo { width: 120px; height: auto; }
  .hero-thanks-motto { margin: 10px 0 24px; font-size: 13px; color: #4A5A6B; }

  /* View switching (tablet and up): the form replaces the picker and the brand block
     gives way to the compact list. The heading stays readable to screen readers. */
  @media (min-width: 768px) {
    .hero[data-hero-view="form"] .hero-picker, .hero[data-hero-view="thanks"] .hero-picker { display: none; }
    .hero[data-hero-view="form"] .hero-list, .hero[data-hero-view="thanks"] .hero-list { display: flex; }
    .hero[data-hero-view="form"] .hero-brand, .hero[data-hero-view="thanks"] .hero-brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    /* Only the heading stays for screen readers; the hidden links must leave the tab order. */
    .hero[data-hero-view="form"] .hero-copy, .hero[data-hero-view="thanks"] .hero-copy { visibility: hidden; }
  }

  @media (max-width: 1199px) {
    .hero-layout { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
    .hero-card { gap: 10px; padding: 14px 14px 14px 16px; }
    .hero-card-icon { font-size: 28px; }
  }

  @media (max-width: 899px) {
    .hero-layout { grid-template-columns: minmax(0,1fr); }
    .hero-actions { flex-direction: row; flex-wrap: wrap; }
    .hero-list { max-height: none; display: none; }
    .hero[data-hero-view="form"] .hero-list, .hero[data-hero-view="thanks"] .hero-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  }

  /* Phones: one column of services; the panel takes the whole screen. */
  @media (max-width: 767px) {
    .hero { padding-top: 88px; }
    .hero-cards, .hero-rows { grid-template-columns: minmax(0,1fr); }
    .hero-card { min-height: 84px; }
    .hero-form-row { grid-template-columns: minmax(0,1fr); }
    .hero-panel { position: fixed; inset: 0; z-index: 80; overflow-y: auto; border-radius: 0; border: 0; padding: 20px 20px 32px; overscroll-behavior: contain; }
    .hero[data-hero-view="form"] .hero-list, .hero[data-hero-view="thanks"] .hero-list { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-card, .hero-row, .hero-list-item, .hero-btn { transition: none; }
  }