/* =====================================================================
   Home — Editorial
   =====================================================================
   The alternative home page design. Selected in Settings -> General ->
   Home page design; the classic layout is untouched and remains the
   default.

   EVERYTHING here is scoped under `.hm-ed`. That is not tidiness, it is
   the safety property that lets this ship: the classic home page, the
   shop, the product page and the admin all share style.css, and a single
   unscoped `h2` or `:root` in this file would redesign the whole site the
   moment someone switched the option on. The only tokens declared are on
   `.hm-ed` itself, so they cannot leak either.

   Values are taken from the supplied design reference (assets/home/
   Main.dc.html), which is a fixed 1440px artboard. Fixed pixel sizes are
   reproduced as clamp() ranges anchored on the design's number at its
   design width, so 1440px renders what was drawn and everything else
   scales rather than overflowing.
   ===================================================================== */

.hm-ed{
  /* ---- palette, straight from the reference ---- */
  --ed-bg:#FBF7F0;          /* warm cream page */
  --ed-panel:#F3ECDF;       /* trust strip, review cards */
  --ed-ink:#1C1714;         /* near-black brown */
  --ed-body:#5A4F45;        /* body copy */
  --ed-muted:#6B5F54;       /* captions, meta */
  --ed-line:#E8DFCF;        /* hairlines */
  --ed-line-2:#D8CCB8;      /* heavier borders */

  --ed-gold:#8A6320;        /* eyebrows, emphasis */
  --ed-gold-mid:#B8862F;    /* stars, dots */
  --ed-gold-light:#D9B56A;  /* on dark grounds */
  --ed-gold-pale:#EADBB8;   /* text on ink */

  --ed-green:#1F3B33;       /* story section */
  --ed-green-2:#2A4A40;

  /* Page gutter. 64px at the design width, never less than 20px on a
     phone — the reference has no mobile artboard, so this is the one
     number that had to be invented rather than measured. */
  --ed-gutter:clamp(20px, 4.4vw, 64px);

  background:var(--ed-bg);
  color:var(--ed-ink);
  font-family:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.5;
}

/* The display face. Used only for headings and figures — body copy stays
   on Jost, as drawn. */
.hm-ed h1,.hm-ed h2,.hm-ed h3,
.hm-ed .ed-display{
  font-family:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight:500;
  margin:0;
}
.hm-ed em{ font-style:italic; color:var(--ed-gold); }

.hm-ed a{ color:inherit; text-decoration:none; }
.hm-ed a:hover{ color:var(--ed-gold); }
.hm-ed img{ display:block; max-width:100%; }
.hm-ed button{ font-family:inherit; cursor:pointer; }

/* ---------------------------------------------------------------- */
/* Shared pieces                                                     */
/* ---------------------------------------------------------------- */
.hm-ed .ed-section{ padding-left:var(--ed-gutter); padding-right:var(--ed-gutter); }

/* The gold rule + small caps label that opens every section. */
.hm-ed .ed-eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:13px; letter-spacing:.24em; color:var(--ed-gold);
  font-weight:600; text-transform:uppercase;
}
.hm-ed .ed-eyebrow::before{
  content:""; width:40px; height:1px; background:var(--ed-gold); flex-shrink:0;
}
.hm-ed .ed-eyebrow--center{ justify-content:center; }
.hm-ed .ed-eyebrow--center::after{
  content:""; width:40px; height:1px; background:var(--ed-gold); flex-shrink:0;
}

.hm-ed .ed-h2{ font-size:clamp(34px, 3.9vw, 56px); line-height:1; }

/* Square-cornered link and button set. The reference uses no radius on
   anything rectangular — the only round things are the pills and the
   circular icon wells — and that squareness is most of its character. */
.hm-ed .ed-btn{
  height:56px; padding:0 32px;
  display:inline-flex; align-items:center; gap:12px;
  font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ed-ink); background:var(--ed-ink); color:var(--ed-bg);
  transition:background .15s ease, color .15s ease;
}
.hm-ed .ed-btn:hover{ background:#000; color:#fff; }
.hm-ed .ed-btn--ghost{ background:transparent; color:var(--ed-ink); }
.hm-ed .ed-btn--ghost:hover{ background:var(--ed-ink); color:var(--ed-bg); }

.hm-ed .ed-textlink{
  font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--ed-ink); padding-bottom:6px; white-space:nowrap;
}
.hm-ed .ed-textlink:hover{ border-bottom-color:var(--ed-gold); }

.hm-ed .ed-head-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}

/* ---------------------------------------------------------------- */
/* Announcement bar                                                  */
/* ---------------------------------------------------------------- */
.hm-ed .ed-announce{
  background:var(--ed-ink); color:var(--ed-gold-pale);
  min-height:40px; display:flex; align-items:center; justify-content:center;
  gap:clamp(16px,3vw,48px); flex-wrap:wrap;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px var(--ed-gutter); text-align:center;
}
.hm-ed .ed-announce i{
  width:4px; height:4px; border-radius:2px; background:var(--ed-gold-mid);
  flex-shrink:0; display:block;
}

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */
.hm-ed .ed-hero{
  display:grid; grid-template-columns:600px 1fr; gap:48px;
  padding-top:56px; padding-bottom:64px;
}
.hm-ed .ed-hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  gap:28px; min-width:0;
}
.hm-ed .ed-hero h1{
  font-size:clamp(46px, 6.1vw, 88px);
  line-height:.98; letter-spacing:-.01em;
  text-wrap:balance;
}
.hm-ed .ed-hero-lead{
  margin:0; font-size:18px; line-height:1.65; color:var(--ed-body); max-width:500px;
}
.hm-ed .ed-hero-cta{ display:flex; gap:12px; margin-top:4px; flex-wrap:wrap; }

/* Figures under a hairline. */
.hm-ed .ed-stats{
  display:flex; gap:clamp(24px,3.3vw,48px); flex-wrap:wrap;
  margin-top:20px; padding-top:28px; border-top:1px solid var(--ed-line);
}
.hm-ed .ed-stat{ display:flex; flex-direction:column; gap:4px; }
.hm-ed .ed-stat b{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:40px; font-weight:600; line-height:1;
}
.hm-ed .ed-stat b span{ font-size:24px; color:var(--ed-gold); }
.hm-ed .ed-stat small{ font-size:12px; letter-spacing:.14em; color:var(--ed-muted); text-transform:uppercase; }

/* One tall tile and two stacked — the arrangement the reference draws. */
.hm-ed .ed-hero-art{
  display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:1fr 1fr;
  gap:16px; min-height:560px;
}
.hm-ed .ed-tile{
  position:relative; overflow:hidden; background:var(--ed-panel);
  display:flex; align-items:flex-end;
}
.hm-ed .ed-tile--lead{ grid-row:1 / 3; background:#7A2E35; }
.hm-ed .ed-tile--b{ background:var(--ed-green); }
.hm-ed .ed-tile--c{ background:#D9C6A5; }
.hm-ed .ed-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* The floating caption card on the lead tile. */
.hm-ed .ed-tile-card{
  position:relative; margin:24px; padding:18px 22px;
  background:var(--ed-bg); display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; max-width:calc(100% - 48px);
}
.hm-ed .ed-tile-card small{
  font-size:12px; letter-spacing:.16em; color:var(--ed-gold);
  font-weight:600; text-transform:uppercase; display:block;
}
.hm-ed .ed-tile-card b{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:22px; font-weight:600; display:block;
}
.hm-ed .ed-tile-card .ed-price{ margin-left:auto; font-size:15px; font-weight:500; }

/* ---------------------------------------------------------------- */
/* Trust strip                                                       */
/* ---------------------------------------------------------------- */
.hm-ed .ed-trust{
  background:var(--ed-panel);
  border-top:1px solid var(--ed-line); border-bottom:1px solid var(--ed-line);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px; padding-top:22px; padding-bottom:22px;
}
.hm-ed .ed-trust-item{ display:flex; align-items:center; gap:16px; justify-content:center; }
.hm-ed .ed-trust-item .ed-well{
  width:48px; height:48px; border-radius:24px; border:1px solid var(--ed-gold-mid);
  display:flex; align-items:center; justify-content:center; color:var(--ed-gold);
  flex-shrink:0;
}
.hm-ed .ed-trust-item b{ font-size:15px; font-weight:600; display:block; }
.hm-ed .ed-trust-item small{ font-size:13px; color:var(--ed-muted); }

/* ---------------------------------------------------------------- */
/* Categories                                                        */
/* ---------------------------------------------------------------- */
.hm-ed .ed-cats-wrap{ padding-top:clamp(56px,7.8vw,112px); display:flex; flex-direction:column; gap:48px; }
.hm-ed .ed-cats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.hm-ed .ed-cat{
  position:relative; height:clamp(340px, 36vw, 520px);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; color:var(--ed-bg); background:var(--ed-green);
}
.hm-ed .ed-cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hm-ed .ed-cat-body{
  position:relative; padding:28px; background:rgba(28,23,20,.72);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.hm-ed .ed-cat-body b{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(26px,2.4vw,34px); font-weight:500; line-height:1; display:block;
}
.hm-ed .ed-cat-body small{ font-size:13px; letter-spacing:.1em; color:var(--ed-gold-pale); }
.hm-ed .ed-cat-arrow{
  width:44px; height:44px; border-radius:22px; border:1px solid var(--ed-gold-pale);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.hm-ed .ed-cat:hover .ed-cat-arrow{ background:var(--ed-gold-pale); color:var(--ed-ink); }

/* ---------------------------------------------------------------- */
/* Product grid                                                      */
/* ---------------------------------------------------------------- */
.hm-ed .ed-picks{ padding-top:clamp(64px,8.9vw,128px); display:flex; flex-direction:column; gap:40px; }
.hm-ed .ed-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hm-ed .ed-pill{
  height:44px; padding:0 22px; border-radius:22px;
  border:1px solid var(--ed-line-2); background:transparent; color:var(--ed-ink);
  font-size:14px; display:inline-flex; align-items:center;
}
.hm-ed .ed-pill.is-active{ background:var(--ed-ink); border-color:var(--ed-ink); color:var(--ed-bg); font-weight:500; }
.hm-ed .ed-pill:hover:not(.is-active){ border-color:var(--ed-ink); }

.hm-ed .ed-products{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  column-gap:20px; row-gap:48px;
}
.hm-ed .ed-card{ display:flex; flex-direction:column; gap:16px; }
.hm-ed .ed-card-media{
  position:relative; height:clamp(260px, 29vw, 420px);
  background:var(--ed-panel); overflow:hidden;
}
.hm-ed .ed-card-media img{ width:100%; height:100%; object-fit:cover; }
.hm-ed .ed-tag{
  position:absolute; top:16px; left:16px;
  background:var(--ed-bg); color:var(--ed-ink);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px;
}
.hm-ed .ed-wish{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:22px; border:0;
  background:var(--ed-bg); color:var(--ed-ink);
  display:flex; align-items:center; justify-content:center;
}
/* Revealed on hover, as drawn — it sits over the photograph, so leaving
   it always-on would cover the garment it is selling. Touch screens have
   no hover, so there it is simply always visible. */
.hm-ed .ed-quick{
  position:absolute; left:16px; right:16px; bottom:16px; height:48px;
  border:0; background:var(--ed-ink); color:var(--ed-bg);
  font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease;
}
.hm-ed .ed-card-media:hover .ed-quick,
.hm-ed .ed-quick:focus-visible{ opacity:1; transform:none; }
@media (hover:none){ .hm-ed .ed-quick{ opacity:1; transform:none; } }

.hm-ed .ed-card-meta{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12px; letter-spacing:.14em; color:var(--ed-muted); text-transform:uppercase;
}
.hm-ed .ed-card-meta .ed-rating{ color:var(--ed-gold); white-space:nowrap; }
.hm-ed .ed-card h3{
  font-family:'Jost', system-ui, sans-serif;
  font-size:17px; font-weight:500; line-height:1.35;
}
.hm-ed .ed-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px; }
.hm-ed .ed-card-price{ font-size:16px; font-weight:600; }
.hm-ed .ed-card-was{ font-size:13px; color:var(--ed-muted); text-decoration:line-through; margin-left:8px; font-weight:400; }
.hm-ed .ed-swatches{ display:flex; gap:6px; }
.hm-ed .ed-swatch{ width:14px; height:14px; border-radius:7px; box-shadow:0 0 0 1px var(--ed-line-2); }

/* ---------------------------------------------------------------- */
/* Story (dark)                                                      */
/* ---------------------------------------------------------------- */
.hm-ed .ed-story{
  margin-top:clamp(64px,8.9vw,128px);
  background:var(--ed-green); color:var(--ed-bg);
  display:grid; grid-template-columns:1fr 1fr;
}
.hm-ed .ed-story-art{ position:relative; background:var(--ed-green-2); min-height:360px; }
.hm-ed .ed-story-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hm-ed .ed-story-copy{
  padding:clamp(40px,6.7vw,96px);
  display:flex; flex-direction:column; justify-content:center; gap:28px;
}
.hm-ed .ed-story .ed-eyebrow{ color:var(--ed-gold-light); }
.hm-ed .ed-story .ed-eyebrow::before{ background:var(--ed-gold-light); }
.hm-ed .ed-story h2{ font-size:clamp(34px,4.2vw,60px); line-height:1.02; }
.hm-ed .ed-story em{ color:var(--ed-gold-light); }
.hm-ed .ed-story p{ margin:0; font-size:17px; line-height:1.7; color:#D5DDD8; }
.hm-ed .ed-story-figs{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
  padding-top:28px; border-top:1px solid rgba(251,247,240,.18);
}
.hm-ed .ed-story-figs b{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(30px,3vw,44px); font-weight:600; line-height:1; color:var(--ed-gold-light);
  display:block;
}
.hm-ed .ed-story-figs small{ font-size:12px; letter-spacing:.14em; color:#C4CEC8; text-transform:uppercase; }

/* ---------------------------------------------------------------- */
/* Bundles                                                           */
/* ---------------------------------------------------------------- */
.hm-ed .ed-bundles-wrap{ padding-top:clamp(64px,8.9vw,128px); display:flex; flex-direction:column; gap:40px; }
.hm-ed .ed-bundles{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.hm-ed .ed-bundle{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--ed-line);
}
.hm-ed .ed-bundle-media{ position:relative; height:clamp(240px,23.6vw,340px); background:var(--ed-panel); overflow:hidden; }
.hm-ed .ed-bundle-media img{ width:100%; height:100%; object-fit:cover; }
.hm-ed .ed-save{
  position:absolute; top:16px; left:16px;
  background:var(--ed-gold); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.12em; padding:7px 12px; text-transform:uppercase;
}
.hm-ed .ed-bundle-body{ padding:24px 28px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.hm-ed .ed-bundle-body small{ font-size:12px; letter-spacing:.16em; color:var(--ed-muted); text-transform:uppercase; }
.hm-ed .ed-bundle-body h3{ font-size:clamp(24px,2.1vw,30px); font-weight:600; line-height:1.1; }
.hm-ed .ed-bundle-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:10px; flex-wrap:wrap; }
.hm-ed .ed-bundle-foot .ed-price{ font-size:18px; font-weight:600; }
.hm-ed .ed-btn--sm{ height:44px; padding:0 20px; font-size:13px; }

/* ---------------------------------------------------------------- */
/* Reviews                                                           */
/* ---------------------------------------------------------------- */
.hm-ed .ed-reviews-wrap{ padding-top:clamp(64px,8.9vw,128px); display:flex; flex-direction:column; gap:48px; }
.hm-ed .ed-reviews-head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.hm-ed .ed-stars{ color:var(--ed-gold-mid); font-size:20px; letter-spacing:3px; }
.hm-ed .ed-reviews{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.hm-ed .ed-review{
  margin:0; padding:40px; background:var(--ed-panel);
  display:flex; flex-direction:column; gap:24px;
}
.hm-ed .ed-quote{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:72px; line-height:.5; color:var(--ed-gold-mid); height:32px;
}
.hm-ed .ed-review blockquote{
  margin:0; font-family:'Cormorant Garamond', Georgia, serif;
  font-size:24px; line-height:1.4; font-style:italic; color:#3A322C;
  flex:1;
}
.hm-ed .ed-review figcaption{
  display:flex; align-items:center; gap:14px;
  padding-top:20px; border-top:1px solid #DDD0BA;
}
.hm-ed .ed-avatar{
  width:44px; height:44px; border-radius:22px; overflow:hidden; flex-shrink:0;
  background:var(--ed-ink); color:var(--ed-gold-pale);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', Georgia, serif; font-size:20px; font-weight:600;
}
.hm-ed .ed-avatar img{ width:100%; height:100%; object-fit:cover; }
.hm-ed .ed-review figcaption b{ font-size:15px; font-weight:600; display:block; }
.hm-ed .ed-review figcaption small{ font-size:13px; color:var(--ed-muted); }

/* ---------------------------------------------------------------- */
/* Returns promise                                                   */
/* ---------------------------------------------------------------- */
.hm-ed .ed-promise{
  margin-top:clamp(64px,7.8vw,112px); margin-bottom:clamp(64px,7.8vw,112px);
  padding:48px clamp(24px,3.9vw,56px);
  border:1px solid var(--ed-line-2);
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
}
.hm-ed .ed-promise-icon{
  width:72px; height:72px; flex-shrink:0; border-radius:36px;
  background:var(--ed-ink); color:var(--ed-gold-light);
  display:flex; align-items:center; justify-content:center;
}
.hm-ed .ed-promise-copy{ display:flex; flex-direction:column; gap:8px; flex:1 1 320px; }
.hm-ed .ed-promise h2{ font-size:clamp(26px,2.4vw,34px); font-weight:600; }
.hm-ed .ed-promise p{ margin:0; font-size:16px; line-height:1.6; color:var(--ed-body); max-width:820px; }

/* ---------------------------------------------------------------- */
/* Contact                                                           */
/* ---------------------------------------------------------------- */
/* The classic page's contact block, redrawn in this design's language:
   square corners, hairline borders and labels above the field instead of
   Bootstrap's floating ones.

   The markup deliberately keeps Bootstrap's .form-control / .form-select /
   .invalid-feedback classes and the same element ids, because the existing
   handler in script.js binds to those and runs checkValidity() against
   them. Restyling without renaming means the form keeps its validation,
   its success and error banners and its POST to /api/contact with no
   second copy of that logic to drift. */
.hm-ed .ed-contact{
  padding-top:clamp(64px,8.9vw,128px);
  padding-bottom:clamp(64px,7.8vw,112px);
  display:flex; flex-direction:column; gap:48px;
}
.hm-ed .ed-contact-head{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.hm-ed .ed-contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,3.3vw,48px); align-items:start; }

/* ---- form ---- */
.hm-ed .ed-field{ display:flex; flex-direction:column; gap:8px; }
.hm-ed .ed-field label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ed-muted); font-weight:600;
}
.hm-ed .ed-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.hm-ed .ed-contact .form-control,
.hm-ed .ed-contact .form-select{
  width:100%; height:56px; padding:0 18px;
  background:#fff; color:var(--ed-ink);
  border:1px solid var(--ed-line-2); border-radius:0;
  font-family:inherit; font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hm-ed .ed-contact textarea.form-control{ height:auto; min-height:150px; padding:16px 18px; resize:vertical; line-height:1.6; }
.hm-ed .ed-contact .form-control::placeholder{ color:#A79C90; }
.hm-ed .ed-contact .form-control:focus,
.hm-ed .ed-contact .form-select:focus{
  outline:none; border-color:var(--ed-gold);
  box-shadow:0 0 0 3px rgba(138,99,32,.12);
}
/* Bootstrap paints its own invalid state; this only matches it to the
   square, gold-accented look so a failed field does not suddenly render
   in the default theme's rounded blue. */
.hm-ed .ed-contact .was-validated .form-control:invalid,
.hm-ed .ed-contact .was-validated .form-select:invalid{
  border-color:#B3261E; background-image:none;
}
.hm-ed .ed-contact .invalid-feedback{ font-size:12.5px; color:#B3261E; }

.hm-ed .ed-contact .alert{ border-radius:0; border-width:1px; font-size:14.5px; }

/* ---- info column ---- */
.hm-ed .ed-info{ display:flex; flex-direction:column; gap:16px; }
.hm-ed .ed-info-card{
  display:flex; align-items:flex-start; gap:18px;
  padding:22px 24px; background:#fff; border:1px solid var(--ed-line);
}
.hm-ed .ed-info-card .ed-well{
  width:48px; height:48px; border-radius:24px; flex-shrink:0;
  border:1px solid var(--ed-gold-mid); color:var(--ed-gold);
  display:flex; align-items:center; justify-content:center;
}
.hm-ed .ed-info-card b{ font-size:15px; font-weight:600; display:block; margin-bottom:2px; }
.hm-ed .ed-info-card span{ font-size:15px; color:var(--ed-body); line-height:1.55; }
.hm-ed .ed-info-card a{ color:var(--ed-body); }
.hm-ed .ed-info-card a:hover{ color:var(--ed-gold); }

.hm-ed .ed-map{
  border:1px solid var(--ed-line); background:var(--ed-panel);
  height:240px; overflow:hidden;
}
.hm-ed .ed-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.25); }

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */
/* The reference is a single 1440px artboard with no smaller states, so
   these breakpoints are an implementation decision: collapse the widest
   grids first, keep two product columns as long as possible (a one-column
   product list on a phone means a lot of scrolling for very little), and
   never let a section become a single column before it has to. */
@media (max-width: 1200px){
  .hm-ed .ed-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; }
  .hm-ed .ed-cats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hm-ed .ed-products{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width: 992px){
  .hm-ed .ed-contact-grid{ grid-template-columns:1fr; }
  .hm-ed .ed-hero{ grid-template-columns:1fr; }
  .hm-ed .ed-hero-art{ min-height:420px; }
  .hm-ed .ed-hero-lead{ max-width:none; }
  .hm-ed .ed-trust{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
  .hm-ed .ed-story{ grid-template-columns:1fr; }
  .hm-ed .ed-story-art{ min-height:300px; }
  .hm-ed .ed-bundles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hm-ed .ed-reviews{ grid-template-columns:1fr; }
}

@media (max-width: 768px){
  .hm-ed .ed-products{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hm-ed .ed-bundles{ grid-template-columns:1fr; }
  .hm-ed .ed-story-figs{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
  .hm-ed .ed-hero-art{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; min-height:0; }
  /* The lead tile stops spanning two rows and becomes a full-width band
     above the other two — stacked in one column it would be a very tall
     block of colour before anything else. */
  .hm-ed .ed-tile--lead{ grid-row:auto; grid-column:1 / -1; aspect-ratio:4/3; }
  .hm-ed .ed-tile--b,.hm-ed .ed-tile--c{ aspect-ratio:1/1; }
  .hm-ed .ed-promise{ gap:24px; }
  .hm-ed .ed-review{ padding:28px; }
  .hm-ed .ed-review blockquote{ font-size:21px; }
  /* Name and email stop sharing a row — two 40%-width fields are harder
     to type into than two full-width ones. */
  .hm-ed .ed-form-row{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .hm-ed .ed-trust{ grid-template-columns:1fr; }
  .hm-ed .ed-trust-item{ justify-content:flex-start; }
  .hm-ed .ed-btn{ width:100%; justify-content:center; }
  .hm-ed .ed-hero-cta{ flex-direction:column; align-items:stretch; }
  .hm-ed .ed-cat-body{ padding:20px; }
}

@media (prefers-reduced-motion: reduce){
  .hm-ed .ed-quick{ transition:none; }
}