/*
 * THE CUSTOMER-CARE INTERFACE.
 *
 * Its own stylesheet, versioned by its own modification time — the same lesson
 * as delivery.css, where a shared version constant meant a month of browsers
 * being served a stale file.
 *
 * SCOPE. Every selector below either begins `.lf-cc` (a class used on no other
 * page) or is nested under `.lf-legal--contact`, the modifier `parts-legal.php`
 * adds only where a section carries the `contact` layout. Nothing here can
 * reach the header, the footer, a product page, a category or the delivery
 * page, all of which share this template.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * THE SYSTEM
 *
 * RADIUS is a ladder, not a value. Each step is the surface the one before it
 * sits inside, and a child is always tighter than its parent — an inner radius
 * equal to its container's reads as a mistake at the corner.
 *
 *      6px   the smallest marks
 *     10px   small controls, chips, icon tiles
 *     13px   inputs, select, the send button
 *     16px   enquiry rows, the drop surface
 *     20px   inner surfaces — the form, the context panel, the email strip
 *     24px   the shell
 *
 * SURFACES are three tones deep and no more. The page is white; the shell is
 * ivory; the context panel is stone; the form is white again. Depth comes from
 * that ordering, not from outlining every box.
 *
 * SHADOW is used to say "this is nearer", never to say "this is a card". Two
 * values, both navy-tinted rather than black — a grey shadow on a warm ground
 * reads as dirt — and both large-radius and very low alpha.
 * ───────────────────────────────────────────────────────────────────────── */

/*
 * THE TOKENS BELONG TO THE COMPONENT, NOT ONLY TO ITS FIRST PAGE.
 *
 * `.lf-ccfields` is in this list because the form is now embedded on the
 * suppliers page, where neither `.lf-cc` nor `.lf-legal--contact` exists. Every
 * input there resolved `border: 1px solid var(--cc-hair-2)` against an
 * undefined property, which makes the whole shorthand invalid and drops it —
 * so the fields rendered with no border at all while their padding, height and
 * font were correct. Measured: `border-top-width: 0px` on a control styled
 * `1px solid`.
 *
 * A component that has to be told which page it is on is not a component.
 */
.lf-cc,
.lf-legal--contact,
.lf-ccfields {
  --cc-r-xs:  6px;
  --cc-r-sm: 10px;
  --cc-r-md: 13px;
  --cc-r-lg: 16px;
  --cc-r-xl: 20px;
  --cc-r-2xl: 24px;

  --cc-shell:  #FBF9F6;                    /* ivory  — the object          */
  --cc-inner:  #FFFFFF;                    /* white  — where you write     */
  --cc-panel:  #F4F0EA;                    /* stone  — context             */
  --cc-field:  #FFFFFF;
  --cc-hair:   #EAE4DC;
  --cc-hair-2: #DDD4C9;

  --cc-lift:  0 8px 24px rgba(0, 20, 46, .055);
  --cc-deep:  0 24px 70px rgba(0, 20, 46, .045);
  --cc-inset: 0 1px 3px rgba(0, 20, 46, .025);
  --cc-ring:  0 0 0 3px rgba(141, 106, 58, .16);

  --cc-ease:  cubic-bezier(.22, .61, .36, 1);
}

/*
 * `[hidden]` LOSES TO ANY AUTHOR RULE THAT SETS `display`, and this file sets
 * `display` on several elements the script toggles. The guard is scoped to the
 * component rather than global — this project has forgotten it twice.
 */
.lf-cc [hidden] { display: none !important; }

/* ============================================================ the canvas */

/*
 * A stronger opening, and a measured gap beneath it.
 *
 * The shared `.lf-section` already contributes ~100px of top padding on every
 * page; the hero was adding 79px of its own on top of that, for 180px of
 * nothing between the breadcrumb and the eyebrow. The rhythm is set here
 * against what the page actually inherits rather than in isolation.
 */
.lf-legal--contact .lf-dhero2 {
  padding-block: clamp(.5rem, 1.4vw, 1.35rem) clamp(1.75rem, 3vw, 2.75rem);
  align-items: end;
}
.lf-legal--contact .lf-dhero2__h {
  font-size: clamp(2.6rem, 5.4vw, 4.15rem);
  max-width: 11ch;
}
.lf-legal--contact .lf-dhero2__lede {
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  max-width: 32rem;
  padding-bottom: .35rem;
}

/*
 * DELIBERATE RHYTHM, MEASURED AGAINST WHAT THE PAGE INHERITS.
 *
 *   hero rule → shell      ~52px
 *   shell → email strip    ~56px
 *   strip → identity       ~44px
 *   identity → footer band ~101px, from `.lf-section` alone
 *
 * The section wrapper the CTA inherits carries a border-top and 37px of
 * padding either side of it — right on a prose page, and on this one a stray
 * full-width rule floating above a rounded strip with dead space around it.
 * Both are removed here and the distance is carried by margin instead, so the
 * gap is one number rather than four things adding up.
 */
.lf-cc { padding-block: clamp(2rem, 3.6vw, 3.25rem) 0; }
.lf-legal--contact .lf-dsec--cta {
  border-top: 0; padding-block: 0;
  margin-top: clamp(2.25rem, 3.9vw, 3.5rem);
}
.lf-legal--contact .lf-legal__block { margin-top: clamp(2.25rem, 3.9vw, 3.5rem); }
.lf-legal--contact .lf-legal__identity { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
/* The wrapper's own bottom padding stacks on top of the section's 101px. */
.lf-legal--contact { padding-bottom: 0; }

.lf-cc__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.lf-cc__alert {
  display: flex; align-items: flex-start; gap: .8rem;
  margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  background: #FBF3F1; border: 1px solid #E9D3CD; border-radius: var(--cc-r-lg);
  font-size: .95rem; line-height: 1.6; color: #6E2A2A;
}
.lf-cc__alert-mark {
  flex: none; display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: #8A2F2F; color: #fff; font-size: .78rem; font-weight: 600; line-height: 1;
}

/* ============================================================== the shell */

/*
 * ONE OBJECT ON THE PAGE. Warm ivory against the white page, a hairline, and a
 * single large-radius shadow at 4.5% — enough that the panel sits ON the page
 * rather than being drawn onto it, and far short of a floating dashboard card.
 */
.lf-ccshell {
  background: var(--cc-shell);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-r-2xl);
  box-shadow: var(--cc-deep);
  overflow: hidden;   /* so the head's rule meets the rounded corners */
}
.lf-ccshell__head {
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--cc-hair);
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0));
}
.lf-ccshell__body { padding: clamp(1.35rem, 3vw, 2.75rem); }

/* ========================================================== the progress */

/*
 * 01 —— 02 —— 03. Utility typography on a connecting rule, understated on
 * purpose: it tells you where you are and asks for nothing.
 */
.lf-ccsteps {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
}
.lf-ccsteps__i {
  display: flex; align-items: center; gap: .55rem;
  /* 12.16px. The rail is utility type and wants to be small; it does not want
      to be under 12px, which is where "refined" becomes "unreadable" — measured
      at 11.84px on the first pass of this system. */
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lf-taupe-mid);
  transition: color .3s var(--cc-ease);
}
/* The rule between markers belongs to the gap, so it grows with the row and
   never appears after the last one. */
.lf-ccsteps__i + .lf-ccsteps__i::before {
  content: ""; width: clamp(1rem, 3vw, 2.75rem); height: 1px;
  margin-right: .75rem; background: var(--cc-hair-2);
}
.lf-ccsteps__n {
  display: grid; place-items: center;
  min-width: 1.85rem; height: 1.85rem; padding-inline: .35rem;
  border-radius: var(--cc-r-sm);
  border: 1px solid var(--cc-hair-2); background: rgba(255, 255, 255, .7);
  font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--lf-taupe-mid);
  transition: background .3s var(--cc-ease), border-color .3s var(--cc-ease),
              color .3s var(--cc-ease);
}
.lf-ccsteps__i.is-now { color: var(--lf-navy); }
.lf-ccsteps__i.is-now .lf-ccsteps__n {
  border-color: var(--lf-gold); background: var(--lf-gold); color: #fff;
}
.lf-ccsteps__i.is-done { color: var(--lf-taupe); }
.lf-ccsteps__i.is-done .lf-ccsteps__n {
  border-color: var(--lf-gold-rule); color: var(--lf-gold); background: var(--cc-inner);
}

/* ====================================================== state 1: choose */

.lf-ccpick__h {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.14;
  letter-spacing: -0.01em; color: var(--lf-navy);
  margin: 0 0 .55rem;
}
.lf-ccpick__h:focus { outline: none; }
.lf-ccpick__h:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 4px; border-radius: var(--cc-r-xs); }
.lf-ccpick__lede {
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  font-size: .98rem; line-height: 1.7; color: var(--lf-taupe-deep);
  max-width: 44ch;
}

/*
 * SIX TACTILE ROWS.
 *
 * At rest a row is only a hairline — no box, no fill, nothing outlined. The
 * surface, the border, the shadow and a 1px lift belong to the row you are
 * pointing at, which is what makes the interface feel like it is responding
 * to you rather than sitting there being rectangular.
 */
.lf-ccdir {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
}
.lf-ccdir__li + .lf-ccdir__li { border-top: 1px solid var(--cc-hair); }

.lf-ccrow {
  position: relative;
  display: grid;
  grid-template-columns: 2.85rem minmax(0, .8fr) minmax(0, 1.2fr) 2.25rem;
  align-items: center;
  column-gap: clamp(.9rem, 1.9vw, 1.6rem);
  padding: clamp(1.05rem, 1.9vw, 1.4rem) clamp(1rem, 1.8vw, 1.5rem);
  border-radius: var(--cc-r-lg);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .26s var(--cc-ease), border-color .26s var(--cc-ease),
              box-shadow .26s var(--cc-ease), transform .26s var(--cc-ease);
}
.lf-ccrow:hover, .lf-ccrow:focus-visible {
  background: var(--cc-inner);
  border-color: var(--cc-hair);
  box-shadow: var(--cc-lift);
  transform: translateY(-1px);
}
/* The brass mark: a short bar at the row's own left edge, inside the radius. */
.lf-ccrow::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 1.5rem; border-radius: 0 3px 3px 0;
  background: var(--lf-gold);
  transform: translateY(-50%) scaleY(0); transform-origin: 50% 50%;
  transition: transform .3s var(--cc-ease);
}
.lf-ccrow:hover::before, .lf-ccrow:focus-visible::before { transform: translateY(-50%) scaleY(1); }
.lf-ccrow:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 2px; }
.lf-ccrow:active { transform: translateY(0); box-shadow: var(--cc-inset); }

/* The icon tile: a soft square, not a circle — it sits beside squared type and
   a rounded rectangle belongs to the same family as the row it is inside. */
.lf-ccrow__icon {
  display: grid; place-items: center;
  width: 2.85rem; height: 2.85rem;
  border-radius: var(--cc-r-sm);
  border: 1px solid var(--cc-hair-2);
  background: rgba(255, 255, 255, .6);
  color: var(--lf-taupe);
  transition: color .26s var(--cc-ease), border-color .26s var(--cc-ease),
              background .26s var(--cc-ease);
}
.lf-ccrow:hover .lf-ccrow__icon, .lf-ccrow:focus-visible .lf-ccrow__icon {
  color: var(--lf-gold); border-color: var(--lf-gold-rule);
  background: rgba(141, 106, 58, .07);
}
.lf-ccrow__icon .lf-dicon { width: 1.25rem; height: 1.25rem; margin: 0; }

.lf-ccrow__name {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2;
  color: var(--lf-navy);
}
.lf-ccrow__blurb { font-size: .92rem; line-height: 1.6; color: var(--lf-taupe); }
.lf-ccrow__cue {
  justify-self: end; display: grid; place-items: center;
  width: 1.4rem; height: 1.4rem; color: var(--cc-hair-2);
  transform: translateX(-.3rem);
  transition: transform .3s var(--cc-ease), color .26s var(--cc-ease);
}
.lf-ccrow__cue svg { width: 100%; height: 100%; }
.lf-ccrow:hover .lf-ccrow__cue, .lf-ccrow:focus-visible .lf-ccrow__cue {
  transform: translateX(.05rem); color: var(--lf-gold);
}

/* ======================================================== state 2: form */

/* ---- the utility action ---- */

.lf-ccform__back { margin: 0 0 clamp(1.1rem, 2vw, 1.6rem); }
.lf-ccback {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem 1.1rem .5rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--cc-hair-2); background: rgba(255, 255, 255, .65);
  font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lf-taupe); text-decoration: none;
  transition: background .25s var(--cc-ease), border-color .25s var(--cc-ease),
              color .25s var(--cc-ease);
}
.lf-ccback__cue {
  display: grid; place-items: center; width: 1rem; height: 1rem;
  transition: transform .26s var(--cc-ease);
}
.lf-ccback__cue svg { width: 100%; height: 100%; }
.lf-ccback:hover {
  background: var(--cc-inner); border-color: var(--lf-gold-rule); color: var(--lf-navy);
}
.lf-ccback:hover .lf-ccback__cue { transform: translateX(-3px); }
.lf-ccback:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }

.lf-ccform__grid {
  display: grid;
  /* 35 / 65. Context earns real width — it is the part that tells somebody
     whether they are in the right place — and the form keeps the majority. */
  grid-template-columns: minmax(0, .54fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}

/* ---- the contextual panel ---- */

.lf-ccform__aside {
  position: sticky; top: 9.5rem;   /* clear of the 134px sticky site header */
  background: var(--cc-panel);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-r-xl);
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.lf-ccform__icon {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: var(--cc-r-sm);
  border: 1px solid var(--lf-gold-line); background: rgba(255, 255, 255, .7);
  color: var(--lf-gold); margin-bottom: 1.15rem;
}
.lf-ccform__icon .lf-dicon { width: 1.3rem; height: 1.3rem; margin: 0; }
.lf-ccform__eyebrow {
  margin: 0 0 .55rem; font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lf-gold);
}
.lf-ccform__h {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1;
  letter-spacing: -0.012em; color: var(--lf-navy); margin: 0 0 .7rem;
}
.lf-ccform__h:focus { outline: none; }
.lf-ccform__h:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 4px; border-radius: var(--cc-r-xs); }
.lf-ccform__title {
  margin: 0; font-size: .98rem; line-height: 1.7; color: var(--lf-taupe-deep);
}
.lf-ccform__guide { margin: 1.25rem 0 0; font-size: .89rem; }
.lf-ccform__guide a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem;
  color: var(--lf-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--lf-gold-line);
  transition: box-shadow .25s var(--cc-ease);
}
.lf-ccform__guide a:hover { box-shadow: inset 0 -1px 0 var(--lf-gold); }
.lf-ccform__guide a:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }

/* ---- the form surface ---- */

.lf-ccfields {
  background: var(--cc-inner);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-r-xl);
  padding: clamp(1.35rem, 2.4vw, 2.1rem);
  box-shadow: var(--cc-inset);
}

.lf-ccgroup {
  border: 0; margin: 0 0 clamp(1.5rem, 2.4vw, 2rem); padding: 0;
  min-width: 0;   /* a fieldset will otherwise refuse to shrink inside a grid */
}
.lf-ccgroup:last-of-type { margin-bottom: 0; }
.lf-ccgroup__legend {
  /* `float` rather than the default legend rendering, so the rule below it is
     a rule across the group rather than a line broken by the browser's own
     legend cut-out. */
  float: left; width: 100%;
  margin: 0 0 1.1rem; padding: 0 0 .65rem;
  border-bottom: 1px solid var(--cc-hair);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lf-taupe-mid);
}
.lf-ccgroup__fields {
  clear: both;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 1.8vw, 1.4rem) clamp(.9rem, 1.5vw, 1.2rem);
}

.lf-ccfield { grid-column: 1 / -1; min-width: 0; }
.lf-ccfield--half { grid-column: span 1; }
.lf-ccfield__in { display: grid; gap: .5rem; }
.lf-ccfield__in > label {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .92rem; color: var(--lf-navy);
}
.lf-ccfield__name { font-weight: 500; }
/* Secondary by weight, colour and case — never by being too small to read.
   Measured at 11.5px once; nothing on this page is now under 12px. */
.lf-ccfield__opt {
  font-size: .75rem; font-weight: 400; color: var(--lf-taupe-mid);
  letter-spacing: .1em; text-transform: uppercase;
}
.lf-ccfield__hint {
  margin: -.15rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--lf-taupe-mid);
}
.lf-ccfield__err {
  display: flex; align-items: baseline; gap: .5rem;
  margin: .1rem 0 0; font-size: .86rem; line-height: 1.5; color: #8A2F2F;
}
.lf-ccfield__err > span {
  flex: none; display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #8A2F2F; color: #fff;
  font-size: .75rem; font-weight: 600; line-height: 1;
  transform: translateY(.12rem);
}

/*
 * THE FIELDS.
 *
 * ~58px, 13px radius, a warm hairline and a warm-white ground — the point of
 * every number here is that none of them is the browser's. Focus is a brass
 * border plus a soft brass ring: visible from across the room, and not the
 * operating system's blue.
 */
.lf-ccfield input[type="text"],
.lf-ccfield input[type="email"],
.lf-ccfield input[type="url"],
/* A telephone field is a text field; without this it rendered as the browser's
   own 21px control in the middle of a row of 57px ones. */
.lf-ccfield input[type="tel"],
.lf-ccfield select,
.lf-ccfield textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--lf-sans); font-weight: 300;
  /* 16px minimum, or iOS zooms the page the moment a field takes focus. */
  font-size: 1rem; line-height: 1.45; color: var(--lf-navy);
  background: var(--cc-field);
  border: 1px solid var(--cc-hair-2);
  border-radius: var(--cc-r-md);
  padding: 1.05rem 1.1rem;
  transition: border-color .2s var(--cc-ease), background .2s var(--cc-ease),
              box-shadow .2s var(--cc-ease);
}
.lf-ccfield textarea {
  line-height: 1.65; resize: vertical; min-height: 12rem;
  border-radius: var(--cc-r-lg); padding: 1.05rem 1.1rem;
}
.lf-ccfield input:hover, .lf-ccfield select:hover, .lf-ccfield textarea:hover {
  border-color: var(--lf-taupe-pale);
}
.lf-ccfield input:focus, .lf-ccfield select:focus, .lf-ccfield textarea:focus {
  outline: none; border-color: var(--lf-gold); box-shadow: var(--cc-ring);
}
.lf-ccfield.is-invalid input, .lf-ccfield.is-invalid textarea,
.lf-ccfield.is-invalid select { border-color: #C88C86; background: #FEFBFA; }
.lf-ccfield.is-invalid input:focus, .lf-ccfield.is-invalid textarea:focus {
  border-color: #8A2F2F; box-shadow: 0 0 0 3px rgba(138, 47, 47, .13);
}

/*
 * THE SELECT: the native control, dressed to the text fields' exact metrics.
 *
 * Nothing is replaced — the element in the page is still a `<select>`, so the
 * keyboard, the platform picker on touch, form validation and the screen
 * reader's understanding of it are the browser's and not a reimplementation.
 * Only `appearance` and the chevron change.
 */
.lf-ccselect { position: relative; display: block; }
.lf-ccfield select {
  appearance: none; -webkit-appearance: none;
  padding-right: 3.25rem; cursor: pointer;
}
.lf-ccselect__cue {
  position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem; pointer-events: none;
  color: var(--lf-taupe); transition: color .2s var(--cc-ease);
}
.lf-ccselect__cue svg { width: 100%; height: 100%; }
.lf-ccfield select:focus ~ .lf-ccselect__cue,
.lf-ccfield select:hover ~ .lf-ccselect__cue { color: var(--lf-gold); }

/*
 * THE UPLOAD SURFACE — and it is still the file input.
 *
 * The real control fills this box at zero opacity: clicking opens the picker,
 * DRAGGING FILES ONTO IT WORKS WITH NO SCRIPT AT ALL, and the input keeps its
 * place in the tab order and in the accessibility tree. `display: none` plus a
 * rebuilt button would have cost all three, and "Choose file / No file chosen"
 * is the single most page-builder-looking control a form can contain.
 */
.lf-ccdrop {
  position: relative;
  border: 1px dashed var(--cc-hair-2);
  border-radius: var(--cc-r-lg);
  background: #FCFAF7;
  transition: border-color .22s var(--cc-ease), background .22s var(--cc-ease),
              box-shadow .22s var(--cc-ease);
}
.lf-ccdrop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.lf-ccdrop__face {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem; pointer-events: none;
}
.lf-ccdrop__mark {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--cc-r-sm);
  border: 1px solid var(--lf-gold-line); background: #fff; color: var(--lf-gold);
  transition: background .22s var(--cc-ease), color .22s var(--cc-ease);
}
.lf-ccdrop__mark svg { width: 1.15rem; height: 1.15rem; }
.lf-ccdrop__lines { display: grid; gap: .15rem; min-width: 0; }
.lf-ccdrop__lead { font-size: .95rem; font-weight: 500; color: var(--lf-navy); }
.lf-ccdrop__sub { font-size: .85rem; line-height: 1.45; color: var(--lf-taupe-mid); }
.lf-ccdrop:hover, .lf-ccdrop:has(input:focus-visible) {
  border-color: var(--lf-gold-rule); background: #FFFDFA;
}
.lf-ccdrop:has(input:focus-visible) { box-shadow: var(--cc-ring); border-style: solid; }
.lf-ccdrop:hover .lf-ccdrop__mark { background: rgba(141, 106, 58, .09); }
/* `:has()` is not everywhere; the ring is the enhancement, this is the floor. */
.lf-ccdrop input[type="file"]:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 2px; }
.lf-ccfield__files {
  margin: .55rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--lf-taupe-deep);
}
.lf-ccfield__files:not(:empty)::before {
  content: "✓"; margin-right: .45rem; color: var(--lf-gold); font-weight: 600;
}

/*
 * A CONDITIONAL FIELD THAT OPENS RATHER THAN APPEARS.
 *
 * `grid-template-rows: 0fr → 1fr` animates to the field's own height without
 * anybody hard-coding one, so the surrounding form does not jump. Rendered
 * OPEN and closed by the script: without JavaScript the field is simply there,
 * because the failure mode of a conditional field has to be showing too much.
 */
.lf-ccfield--reveal {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .38s var(--cc-ease), opacity .3s var(--cc-ease);
}
.lf-ccfield--reveal > .lf-ccfield__in { overflow: hidden; min-height: 0; }
.lf-ccfield--reveal.is-closed {
  grid-template-rows: 0fr; opacity: 0; pointer-events: none;
}

/* The honeypot: gone from sight and from the accessibility tree, and never
   focusable, so no real person can reach it by any route. */
.lf-cchp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the primary action ---- */

.lf-ccsubmit {
  margin-top: clamp(1.6rem, 2.6vw, 2.1rem);
  padding-top: clamp(1.35rem, 2.2vw, 1.7rem);
  border-top: 1px solid var(--cc-hair);
}
/*
 * Full width of the form surface, and space-between rather than centred: the
 * label reads from the left edge like every other line in the form, and the
 * arrow sits where the eye leaves. Rendered both ways at 1440 — a 260px
 * centred button under a 690px form column reads as a smaller, weaker echo of
 * the fields above it.
 */
.lf-ccsend {
  position: relative;
  width: 100%; min-height: 3.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  appearance: none; cursor: pointer;
  padding: 1rem 1.5rem;
  background: var(--lf-navy); color: #fff;
  border: 1px solid var(--lf-navy); border-radius: var(--cc-r-md);
  font-family: var(--lf-sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 20, 46, .12);
  transition: background .25s var(--cc-ease), box-shadow .25s var(--cc-ease),
              transform .18s var(--cc-ease);
}
.lf-ccsend__cue {
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
  transition: transform .28s var(--cc-ease);
}
.lf-ccsend__cue svg { width: 100%; height: 100%; }
.lf-ccsend:hover {
  background: var(--lf-navy-80); box-shadow: 0 10px 26px rgba(0, 20, 46, .18);
}
.lf-ccsend:hover .lf-ccsend__cue { transform: translateX(5px); }
.lf-ccsend:active {
  transform: translateY(1px); box-shadow: 0 3px 10px rgba(0, 20, 46, .16);
}
.lf-ccsend:focus-visible { outline: 2px solid var(--lf-gold); outline-offset: 3px; }
.lf-ccsend[disabled] {
  cursor: default; background: var(--lf-navy-60); border-color: var(--lf-navy-60);
  box-shadow: none;
}
.lf-ccsend[disabled] .lf-ccsend__cue { display: none; }

.lf-ccsend__spin { display: none; }
.lf-ccsend.is-sending .lf-ccsend__spin {
  display: block; width: 1.05rem; height: 1.05rem;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: lf-ccspin .8s linear infinite;
}
@keyframes lf-ccspin { to { transform: rotate(360deg); } }

.lf-ccprivacy {
  margin: 1.1rem 0 0; font-size: .84rem; line-height: 1.65; color: var(--lf-taupe-mid);
}
.lf-ccprivacy a { color: var(--lf-taupe-deep); }
.lf-ccprivacy a:hover { color: var(--lf-navy); }

/* ========================================================== transitions */

/*
 * ONE PAIR OF KEYFRAMES, TWO DIRECTIONS. Restrained on purpose: the panel
 * settles into place from 14px below over 380ms. No scale, no blur, no
 * staggered children — the point is that the page changed state, not that
 * something was animated.
 */
@keyframes lf-ccin {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.lf-cc .is-entering { animation: lf-ccin .38s var(--cc-ease) both; }
.lf-cc .is-leaving {
  opacity: 0; transform: translateY(-8px);
  transition: opacity .17s var(--cc-ease), transform .17s var(--cc-ease);
  pointer-events: none;
}

/* ============================================================== success */

.lf-cc--done { padding-block: clamp(2rem, 3.6vw, 3.25rem) 0; }
.lf-ccdone {
  background: var(--cc-shell);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-r-2xl);
  box-shadow: var(--cc-deep);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  max-width: 46rem;
  animation: lf-ccin .45s var(--cc-ease) both;
}
.lf-ccdone__mark {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: var(--cc-r-md);
  border: 1px solid var(--lf-gold-line);
  background: var(--cc-inner); color: var(--lf-gold); margin-bottom: 1.4rem;
}
.lf-ccdone__mark svg { width: 1.6rem; height: 1.6rem; }
.lf-ccdone__eyebrow {
  margin: 0 0 .6rem; font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lf-gold);
}
.lf-ccdone__h {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(1.85rem, 3.2vw, 2.7rem); line-height: 1.1;
  letter-spacing: -0.012em; color: var(--lf-navy); margin: 0 0 .85rem;
}
.lf-ccdone__lede {
  margin: 0 0 1.6rem; font-size: 1.02rem; line-height: 1.75;
  color: var(--lf-taupe-deep); max-width: 42ch;
}
.lf-ccdone__lede strong { font-weight: 500; color: var(--lf-navy); }
.lf-ccdone__facts {
  margin: 0 0 1.85rem; display: grid; gap: 0; max-width: 34rem;
  background: var(--cc-inner);
  border: 1px solid var(--cc-hair); border-radius: var(--cc-r-lg);
  padding: .35rem 1.15rem;
}
.lf-ccdone__facts > div {
  display: flex; gap: 1rem; justify-content: space-between;
  padding-block: .8rem;
}
.lf-ccdone__facts > div + div { border-top: 1px solid var(--cc-hair); }
.lf-ccdone__facts dt { font-size: .86rem; color: var(--lf-taupe-mid); }
.lf-ccdone__facts dd { margin: 0; font-size: .95rem; color: var(--lf-navy); text-align: right; }
.lf-ccdone__links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.lf-ccdone__btn {
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 3.25rem; padding: .9rem 1.8rem;
  background: var(--lf-navy); color: #fff; text-decoration: none;
  border: 1px solid var(--lf-navy); border-radius: var(--cc-r-md);
  font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 20, 46, .12);
  transition: background .25s var(--cc-ease), box-shadow .25s var(--cc-ease);
}
.lf-ccdone__btn:hover {
  background: var(--lf-navy-80); color: #fff; box-shadow: 0 10px 26px rgba(0, 20, 46, .18);
}
.lf-ccdone__btn span { transition: transform .28s var(--cc-ease); }
.lf-ccdone__btn:hover span { transform: translateX(4px); }
.lf-ccdone__alt {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem;
  font-size: .88rem; color: var(--lf-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--lf-gold-line);
  transition: box-shadow .25s var(--cc-ease);
}
.lf-ccdone__alt:hover { box-shadow: inset 0 -1px 0 var(--lf-gold); }
.lf-ccdone__btn:focus-visible, .lf-ccdone__alt:focus-visible {
  outline: 2px solid var(--lf-gold); outline-offset: 3px;
}

/* ================================================ the secondary support */

/*
 * "Prefer to email?" — SECONDARY, and made to look it.
 *
 * The shared CTA layout renders a navy slab. On the delivery page that is the
 * page's one call to action and it earns the weight; here it sits below an
 * interactive customer-care interface and must not compete with it. Restyled
 * as a soft tinted footer to that component, scoped so the delivery page keeps
 * its slab untouched.
 */
.lf-legal--contact .lf-dcta {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .85rem clamp(1.25rem, 2.5vw, 2.5rem);
  background: var(--cc-panel);
  border: 1px solid var(--cc-hair);
  border-radius: var(--cc-r-xl);
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 2rem);
}
.lf-legal--contact .lf-dcta h2 {
  font-family: var(--lf-serif); font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.2;
  color: var(--lf-navy); margin: 0;
  flex: 0 0 auto;
}
.lf-legal--contact .lf-dcta__lede,
.lf-legal--contact .lf-dcta > p {
  margin: 0; font-size: .91rem; line-height: 1.6;
  color: var(--lf-taupe); flex: 1 1 14rem; min-width: 0;
}
.lf-legal--contact .lf-dcta__addr {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: .95rem; color: var(--lf-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--lf-gold-line);
  word-break: break-word;
  transition: box-shadow .25s var(--cc-ease);
}
.lf-legal--contact .lf-dcta__addr:hover { box-shadow: inset 0 -1px 0 var(--lf-gold); }
.lf-legal--contact .lf-dcta__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.9rem; padding: .75rem 1.4rem;
  background: rgba(255, 255, 255, .75); color: var(--lf-navy);
  border: 1px solid var(--cc-hair-2); border-radius: var(--cc-r-md);
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s var(--cc-ease), border-color .25s var(--cc-ease),
              box-shadow .25s var(--cc-ease);
}
.lf-legal--contact .lf-dcta__btn:hover {
  background: #fff; border-color: var(--lf-gold-rule); color: var(--lf-navy);
  box-shadow: var(--cc-lift);
}
.lf-legal--contact .lf-dcta a:focus-visible {
  outline: 2px solid var(--lf-gold); outline-offset: 3px;
}

/* =========================================================== responsive */

@media (max-width: 1080px) {
  .lf-ccform__grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
  /* Sticky is meaningless once the panel sits above the form. */
  .lf-ccform__aside { position: static; }
  .lf-ccform__title { max-width: 56ch; }
}

@media (max-width: 860px) {
  /* The blurb moves under the name: side by side below this width it is four
     words per line and the row grows taller than a two-line stack. */
  .lf-ccrow {
    grid-template-columns: 2.6rem minmax(0, 1fr) 1.4rem;
    grid-template-areas: "icon name cue" "icon blurb cue";
    align-items: center; row-gap: .28rem;
  }
  .lf-ccrow__icon { grid-area: icon; width: 2.6rem; height: 2.6rem; }
  .lf-ccrow__name { grid-area: name; }
  .lf-ccrow__blurb { grid-area: blurb; }
  .lf-ccrow__cue { grid-area: cue; }
}

@media (max-width: 640px) {
  .lf-legal--contact .lf-dhero2 { padding-block: .5rem 1.5rem; }
  .lf-cc { padding-block: 1.5rem 0; }
  /* A tighter radius on a smaller object: 24px on a 350px-wide panel eats the
     corner. */
  .lf-ccshell, .lf-ccdone { border-radius: 18px; }
  .lf-ccshell__head { padding: 1rem 1.15rem; }
  .lf-ccshell__body { padding: 1.25rem 1.15rem 1.4rem; }
  .lf-ccform__aside, .lf-ccfields { padding: 1.25rem 1.15rem; border-radius: var(--cc-r-lg); }
  .lf-ccrow { padding: 1rem .85rem; column-gap: .85rem; }
  .lf-ccrow__icon { width: 2.4rem; height: 2.4rem; }
  .lf-ccrow__name { font-size: 1.1rem; }
  .lf-ccrow__blurb { font-size: .87rem; }
  /* Everything to one column: two 150px-wide inputs side by side is worse than
     one full-width field, on any phone. */
  .lf-ccgroup__fields { grid-template-columns: 1fr; }
  .lf-ccfield--half { grid-column: 1 / -1; }
  .lf-ccdone { padding: 1.6rem 1.25rem; }
  .lf-ccdone__facts { padding-inline: 1rem; }
  .lf-ccdone__facts > div { flex-direction: column; gap: .15rem; }
  .lf-ccdone__facts dd { text-align: left; }
  .lf-ccdone__btn { width: 100%; justify-content: center; }
  .lf-legal--contact .lf-dcta {
    flex-direction: column; align-items: flex-start; gap: .7rem;
  }
  /* Stacked, the strip's paragraphs are COLUMN flex items, and the `flex: 1 1`
     that lets them share the row on desktop makes them grow VERTICALLY here —
     measured as ~100px of empty strip. The basis is meaningful only along the
     main axis, so it is reset with it. */
  .lf-legal--contact .lf-dcta > p,
  .lf-legal--contact .lf-dcta__lede { flex: 0 0 auto; }
  .lf-legal--contact .lf-dcta__btn { width: 100%; justify-content: center; }
  .lf-ccsteps { gap: .5rem .25rem; }
  .lf-ccsteps__i + .lf-ccsteps__i::before { width: .85rem; margin-right: .5rem; }
  .lf-ccsteps__t { letter-spacing: .09em; }
}

/*
 * THE RAIL MUST STAY ON ONE LINE.
 *
 * Wrapped, the connector belonging to the first marker on the second line
 * starts that line — a dash hanging in space that reads as a rendering fault.
 * There is no CSS for "hide a pseudo-element when it wraps", so the rail is
 * made to fit instead: below 560px the two inactive steps keep their numbers
 * and drop their words, which is all a position marker has to say.
 */
@media (max-width: 560px) {
  .lf-ccsteps__i:not(.is-now) .lf-ccsteps__t { display: none; }
  /* Measured at 390: numbers-only still needs 329px in a 311px rail, because
     the active label alone is 170px. The connectors are the desktop
     refinement, so they are what goes — the chips carry the position on their
     own. */
  .lf-ccsteps__i + .lf-ccsteps__i::before { display: none; }
  .lf-ccsteps { gap: .5rem .7rem; }
}
@media (max-width: 400px) {
  /* The last 20px, so a 360px phone keeps the rail on one line: tracking is
     the only thing here that can give without the type getting smaller. */
  .lf-ccsteps { gap: .5rem .5rem; }
  .lf-ccsteps__i { gap: .45rem; }
  /* On the label itself: the ≤640 rule already sets tracking there, and a
     value inherited from the parent loses to it. */
  .lf-ccsteps__t { letter-spacing: .05em; }
}

/* ====================================================== reduced motion */

/*
 * Every transition and every animation, off. The state change still happens —
 * it just happens at once, which is what was asked for.
 */
@media (prefers-reduced-motion: reduce) {
  .lf-cc *, .lf-legal--contact .lf-dcta * { transition: none !important; }
  .lf-cc .is-entering, .lf-ccdone { animation: none; }
  .lf-cc .is-leaving { transition: none; }
  .lf-ccrow:hover, .lf-ccrow:focus-visible { transform: none; }
  .lf-ccsend:active { transform: none; }
  .lf-ccsend.is-sending .lf-ccsend__spin { animation-duration: 1.6s; }
}