/* ==========================================================================
   NAUTILUS — Contact form (contacts.php)
   Prefix cf-. Theme variables with fallbacks. Light page, wine accent, hairline
   cells as on the product and service pages. The memorable element is the topic
   tiles: line icons that turn wine and light up when chosen.
   ========================================================================== */
.cf{
  --cf-wine: var(--theme-color, #79182d);
  --cf-wine-soft: rgba(121,24,45,.07);
  --cf-head: var(--heading-color, #000);
  --cf-text: var(--font-color, #5c5c5c);
  --cf-line: var(--border-color, #dcdcdc);
  --cf-bg: var(--bg-color, #F3F3F3);
  --cf-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --cf-hw: var(--font-weight-heading, 600);
  --cf-ease: cubic-bezier(.16, 1, .3, 1);
  padding: clamp(150px, 13vw, 200px) 0 120px;        /* first on the page: clears the fixed header */
}
.cf-wrap{ display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: 64px; align-items: start; }

/* ---------- left rail: title + progress ---------- */
.cf-rail{ position: sticky; top: 120px; }
.cf-title{ margin: 0; font-family: var(--cf-hfont); font-weight: var(--cf-hw); text-transform: uppercase;
  font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.01em; color: var(--cf-head); }
.cf-sub{ margin: 18px 0 34px; font-size: 17px; line-height: 1.6; color: var(--cf-text); }
.cf-steps{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-line); }
.cf-step{ position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: baseline;
  padding: 16px 0 16px 14px; border-bottom: 1px solid var(--cf-line); }
.cf-step::before{ content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--cf-wine);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--cf-ease); }
.cf-step.is-current::before{ transform: scaleY(1); }
.cf-step-n{ font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 15px; color: #A9A9B1; transition: color .3s; }
.cf-step-t{ font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 17px; color: var(--cf-head); }
.cf-step-v{ grid-column: 2; font-size: 14px; line-height: 1.4; color: var(--cf-text); min-height: 0; }
.cf-step-v:empty{ display: none; }
.cf-step.is-current .cf-step-n, .cf-step.is-done .cf-step-n{ color: var(--cf-wine); }
.cf-step.is-done .cf-step-t::after{ content: ""; display: inline-block; width: 14px; height: 8px; margin-left: 10px;
  border-left: 2px solid var(--cf-wine); border-bottom: 2px solid var(--cf-wine); transform: translateY(-4px) rotate(-45deg); }

/* ---------- form sections ---------- */
.cf-form{ min-width: 0; }
.cf-sect + .cf-sect{ margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--cf-line); position: relative; }
.cf-sect + .cf-sect::before{ content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; background: var(--cf-wine); }
.cf-sect-t{ display: flex; align-items: baseline; gap: 14px; margin: 0 0 26px;
  font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15;
  text-transform: uppercase; color: var(--cf-head); }
.cf-sect-t span{ color: var(--cf-wine); }
.cf-group-label{ margin: 0 0 12px; font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 15px; color: var(--cf-text); }
.cf-tiles + .cf-group-label{ margin-top: 28px; }

/* ---------- 01 · topic tiles ---------- */
/* hairlines are borders on each tile, so an incomplete last row leaves empty space, not a grey block */
.cf-tiles{ display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--cf-line); border-left: 1px solid var(--cf-line); }
.cf-tiles--4{ grid-template-columns: repeat(4, 1fr); }
.cf-tile{ position: relative; display: block; cursor: pointer; border-right: 1px solid var(--cf-line); border-bottom: 1px solid var(--cf-line); }
.cf-tile input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-tile-box{ position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box;
  padding: 22px 18px 20px; background: var(--cf-bg); transition: background .3s ease; }
.cf-tile-box::before{ content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--cf-wine);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--cf-ease); }
.cf-tile:hover .cf-tile-box{ background: #fff; }
.cf-tile:hover .cf-tile-box::before{ transform: scaleX(1); }
.cf-ico{ width: 40px; height: 40px; margin-bottom: 10px; fill: none; stroke: var(--cf-wine); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.cf-tile-t{ font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 15.5px; line-height: 1.25; color: var(--cf-head); transition: color .3s; }
.cf-tile-s{ font-size: 13px; line-height: 1.4; color: var(--cf-text); transition: color .3s; }
.cf-tile-ok{ position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4);
  transition: opacity .25s, transform .4s cubic-bezier(.2,1.6,.4,1); }
.cf-tile-ok svg{ width: 12px; height: 12px; fill: none; stroke: var(--cf-wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* chosen */
.cf-tile input:checked + .cf-tile-box{ background: var(--cf-wine); }
.cf-tile input:checked + .cf-tile-box::before{ transform: scaleX(0); }
.cf-tile input:checked + .cf-tile-box .cf-ico{ stroke: #fff; }
.cf-tile input:checked + .cf-tile-box .cf-tile-t{ color: #fff; }
.cf-tile input:checked + .cf-tile-box .cf-tile-s{ color: rgba(255,255,255,.75); }
.cf-tile input:checked + .cf-tile-box .cf-tile-ok{ opacity: 1; transform: none; }
.cf-tile input:focus-visible + .cf-tile-box{ outline: 2px solid var(--cf-wine); outline-offset: 2px; z-index: 1; }
/* the one orchestrated moment: the chosen icon lights up */
.cf-tile.is-picked .cf-ico{ animation: cf-pop .55s cubic-bezier(.2,1.6,.4,1); }
.cf-tile.is-picked .cf-spark{ stroke-dasharray: 20; stroke-dashoffset: 20; animation: cf-spark .6s ease .15s forwards; }
@keyframes cf-pop{ 0%{ transform: scale(.7); } 100%{ transform: scale(1); } }
@keyframes cf-spark{ to{ stroke-dashoffset: 0; } }

/* ---------- 02 · detail groups ---------- */
.cf-empty{ margin: 0; padding: 26px 24px; border: 1px dashed #C9C9CF; border-radius: 6px; font-size: 15px; color: var(--cf-text); }
.cf-group{ margin: 0; padding: 0; border: 0; min-width: 0; }
.cf-group + .cf-group, .cf-empty + .cf-group{ margin-top: 30px; }
.cf-group legend{ padding: 0; margin: 0 0 12px; font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 17px; color: var(--cf-head); }
.cf-group legend em, .cf-field em{ font-style: normal; font-weight: 400; font-size: 13px; color: #9A9AA4; margin-left: 6px; }
.cf-hint{ margin: -6px 0 12px; font-size: 14px; line-height: 1.5; color: var(--cf-text); }
.cf-chips{ display: flex; flex-wrap: wrap; gap: 10px; }
.cf-chip{ position: relative; cursor: pointer; }
.cf-chip input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-chip > span{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 40px;
  background: #fff; border: 1px solid var(--cf-line); font-size: 15px; line-height: 1.2; color: var(--cf-head);
  transition: border-color .25s, background .25s, color .25s; }
.cf-chip-ico{ width: 20px; height: 20px; fill: none; stroke: #8A8A94; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.cf-chip:hover > span{ border-color: var(--cf-wine); }
.cf-chip input:checked + span{ background: var(--cf-wine-soft); border-color: var(--cf-wine); color: var(--cf-wine); box-shadow: inset 0 0 0 1px var(--cf-wine); }
.cf-chip input:checked + span .cf-chip-ico{ stroke: var(--cf-wine); }
.cf-chip input:focus-visible + span{ outline: 2px solid var(--cf-wine); outline-offset: 2px; }
.cf-group.is-invalid legend{ color: var(--cf-wine); }
.cf-group.is-invalid .cf-chip > span{ border-color: rgba(121,24,45,.5); }

/* ---------- fields ---------- */
.cf-fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cf-fields--topic{ margin-top: 30px; }
.cf-field{ display: flex; flex-direction: column; gap: 8px; }
.cf-field--wide{ grid-column: 1 / -1; }
.cf-field > span{ font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 15px; color: var(--cf-head); }
.cf-field input, .cf-field textarea{ font: inherit; font-size: 16px; color: var(--cf-head); background: #fff;
  border: 1px solid var(--cf-line); border-radius: 6px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
.cf-field textarea{ resize: vertical; min-height: 130px; }
.cf-field input:focus, .cf-field textarea:focus{ outline: none; border-color: var(--cf-wine); box-shadow: 0 0 0 3px rgba(121,24,45,.14); }
.cf-field.is-invalid input, .cf-field.is-invalid textarea{ border-color: var(--cf-wine); }

.cf-consent{ display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 14.5px; line-height: 1.5; color: var(--cf-text); cursor: pointer; }
.cf-consent input{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cf-wine); flex: none; }
.cf-consent a{ color: var(--cf-wine); }
.cf-consent.is-invalid{ color: var(--cf-wine); }

.cf-err{ margin: 12px 0 0; font-size: 14px; color: var(--cf-wine); min-height: 0; }
.cf-err:empty{ display: none; }

.cf-send{ display: inline-flex; align-items: center; margin-top: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--cf-hfont); font-weight: var(--cf-hw); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.cf-send-label{ background: var(--cf-wine); color: #fff; padding: 17px 32px; border-radius: 50px; }
.cf-send-arrow{ width: 52px; height: 52px; border-radius: 50%; margin-left: -10px; background: var(--cf-wine); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: transform .35s var(--cf-ease); }
.cf-send-arrow svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cf-send:hover .cf-send-arrow{ transform: translateX(5px) rotate(45deg); }
.cf-send:focus-visible{ outline: none; } .cf-send:focus-visible .cf-send-label{ outline: 2px solid var(--cf-wine); outline-offset: 3px; }

.cf-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf [hidden]{ display: none !important; }        /* scoped to the form only */

/* ---------- responsive ---------- */
@media (max-width: 1199px){ .cf-tiles{ grid-template-columns: repeat(3, 1fr); } .cf-tiles--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px){
  .cf-wrap{ grid-template-columns: 1fr; gap: 40px; }
  .cf-rail{ position: static; }
  .cf-steps{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 0; }
  .cf-step{ grid-template-columns: 1fr; padding: 12px 10px 12px 12px; border: 1px solid var(--cf-line); margin-right: -1px; }
  .cf-step-v{ grid-column: 1; }
}
@media (max-width: 575px){
  .cf{ padding: 130px 0 80px; }
  .cf-tiles, .cf-tiles--4{ grid-template-columns: repeat(2, 1fr); }
  .cf-fields{ grid-template-columns: 1fr; }
  .cf-tile-box{ padding: 18px 14px; }
  .cf-step-t{ font-size: 14px; } .cf-step-v{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .cf *{ transition: none !important; animation: none !important; }
  .cf-tile.is-picked .cf-spark{ stroke-dashoffset: 0; }
}