/*
 * Lazy E Ranch Stallions v2.0.0 - Stallion profile template
 * (c) 2026 Justin Franklin, Horse Alley. All rights reserved. (17 U.S.C. 1202)
 * Author and copyright owner: Justin Franklin (Horse Alley).
 * Removal or alteration of this notice is prohibited.
 *
 * The established stallion-page design system: navy #0D223F, red #A51D33,
 * cream #F0EDE8 on white; Barlow / Barlow Condensed / Yellowtail.
 * Everything is scoped to .lze. Salient supplies header, nav and footer;
 * this stylesheet renders everything between them.
 */

/* Salient renders page content inside a constrained container. The profile
   is designed full-bleed, so the wrapper breaks out to the viewport and the
   body is told not to grow a horizontal scrollbar because of it. */
body.ler-profile-body{overflow-x:hidden}
.lze-breakout{
  width:100vw;position:relative;
  left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
}

/* ============================================================
   LAZY E RANCH — STALLION PAGE TEMPLATE
   Palette sampled directly from Lazy E print/social collateral.
   Committed light theme: white ground, cream surfaces, navy ink,
   red accent. Every color painted explicitly.
   ============================================================ */
:root{
  --navy:#0D223F;
  --navy-2:#1B3457;
  --navy-3:#4A5D78;      /* navy-biased secondary ink */
  --navy-4:#7A8AA0;      /* navy-biased muted ink */
  --red:#A51D33;
  --red-dark:#7B1524;
  --red-tint:#F7E9EB;
  --white:#FFFFFF;
  --cream:#F0EDE8;
  --cream-2:#F8F6F3;
  --rule:#DDD7CF;
  --rule-2:#C9C1B6;

  --maxw:1200px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* ------------------------------------------------------------
   HOST-THEME RESET
   This template renders inside the existing WordPress theme, whose
   stylesheet also targets bare ul, li, p, headings and links. Neutralise
   it at the root so the page looks the same wherever it is dropped in.
   Scoped to .lze — nothing here escapes the template.
   ------------------------------------------------------------ */
.lze *,.lze *::before,.lze *::after{box-sizing:border-box}

/* Lists: the theme's bullets and indents are forced off. The template never
   relies on list markers, list padding-left or li margins, so nothing here
   can collide with the component rules below. */
.lze ul,.lze ol,.lze ul ul,.lze ol ol{list-style:none !important}
.lze li,.lze ul li,.lze ol li{
  list-style:none !important;list-style-type:none !important;
  list-style-image:none !important;
  margin:0 !important;padding-left:0 !important;
  text-indent:0 !important;background-image:none !important;
}
.lze li::marker,.lze ul li::marker{content:"" !important;font-size:0 !important}
.lze li::before,.lze ul li::before{content:none !important;display:none !important}

/* The theme rounds buttons and images. Nothing in this template is ever
   meant to be round.
   These carry !important AND deliberately high specificity: an !important
   in the theme at the same specificity would otherwise win on source order,
   because the theme's stylesheet loads after this inline block. The .btn
   anchors keep their own 2px — they are <a>, not <button>. */
.lze button{border-radius:0 !important}
.lze img{border-radius:0 !important}
.lze .hero-media .photo,
.lze .hero-media .photo img,
.lze .gal-thumbs .gal-thumb,
.lze .gal-thumbs .gal-thumb img,
.lze .ranch .ranch-img,
.lze .lb .lb-close,
.lze .lb .lb-nav button,
.lze .incs .inc,
.lze .pcard .race,
.lze .feebox,
.lze .hero-terms > div,
.lze .figs .fig,
.lze .pnode{border-radius:0 !important}

/* Everything else is a plain reset, wrapped in :where() so it carries ZERO
   specificity of its own. It still outranks the theme's bare element rules,
   but it can never outrank the component rules below — a plain `.lze p`
   here would beat `.hero-line` and silently eat its margin. */
.lze :where(p){margin:0}
.lze :where(h1,h2,h3,h4){margin:0;padding:0}
.lze :where(a){text-decoration:none;box-shadow:none}
.lze :where(img){max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.lze :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;text-transform:none}
.lze :where(table){border-collapse:collapse}
.lze :where(figure){margin:0}

body{
  margin:0;
  background:var(--white);
  color:var(--navy);
  font-family:Barlow,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
.cond{
  font-family:"Barlow Condensed",Barlow,"Arial Narrow",sans-serif;
  text-transform:uppercase;line-height:.95;letter-spacing:.005em;
}
.eyebrow{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0;
}
.sec-title{
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,42px);line-height:1;letter-spacing:.01em;
  margin:8px 0 0;color:var(--navy);
}
.sec-head{margin-bottom:clamp(24px,3vw,36px)}
.sec-head .bar{width:52px;height:4px;background:var(--red);margin-bottom:14px}

.band{padding-block:clamp(44px,6vw,72px)}
.band-cream{background:var(--cream)}
.band-navy{background:var(--navy);color:var(--white)}
.band-navy .sec-title{color:var(--white)}
.band-navy .eyebrow{color:#E8A0AC}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 26px;border:2px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn-red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-out{background:transparent;color:var(--navy);border-color:var(--rule-2)}
.btn-out:hover{border-color:var(--navy);background:var(--navy);color:var(--white)}
.btn-white{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-white:hover{background:var(--cream);border-color:var(--cream)}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--white);padding-block:clamp(30px,4vw,52px) clamp(34px,4.5vw,60px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(26px,4vw,48px);align-items:center;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}

.hero-name{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,6.6vw,80px);line-height:.92;letter-spacing:.005em;
  color:var(--navy);margin:10px 0 0;text-wrap:balance;
}
.hero-tag{
  display:inline-block;margin-top:14px;
  background:var(--red);color:var(--white);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;
}
.hero-line{
  margin:30px 0 0;padding-top:16px;border-top:2px solid var(--navy);
  font-size:17px;font-weight:500;color:var(--navy);
}
.hero-line .sep{color:var(--red);margin-inline:8px;font-weight:700}
.hero-line em{font-style:normal;color:var(--navy-3)}

.hero-terms{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin-top:22px;
  border:1px solid var(--rule);background:var(--rule);
}
@media (min-width:560px){.hero-terms{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-terms > div{padding:12px 15px;background:var(--cream-2)}
.hero-terms .k{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy-4);
}
.hero-terms .v{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:26px;line-height:1.1;color:var(--navy);margin-top:3px;
}
.hero-terms .v.sm{font-size:17px;font-weight:600;letter-spacing:.01em;padding-block:4px}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-cta .btn{padding:12px 22px;font-size:14px}

/* photo */
.photo{
  position:relative;aspect-ratio:1024/696;
  background:linear-gradient(150deg,var(--cream) 0%,#E3DED6 100%);
  border:1px solid var(--rule);overflow:hidden;
}
.photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.photo .ph{
  position:absolute;inset:0;z-index:0;display:grid;place-content:center;justify-items:center;gap:10px;
  text-align:center;padding:20px;
}
.photo .ph-n{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.6vw,32px);color:var(--navy);line-height:1;
}
.photo .ph-c{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy-4);
}
.photo .ph-bar{width:40px;height:3px;background:var(--red)}
.photo.broken img{display:none}
/* Once the photograph loads it defines the frame exactly — the box takes the
   image's own aspect ratio, so nothing is cropped and no ground shows through.
   The 1024/696 ratio above is only the placeholder shape. */
.photo.loaded{aspect-ratio:auto}
.photo.loaded img{height:auto}
.photo::after{
  content:"";position:absolute;z-index:2;right:0;bottom:0;
  width:0;height:0;border-style:solid;border-width:0 0 46px 46px;
  border-color:transparent transparent var(--red) transparent;
}

/* ============================================================
   RACE RECORD
   ============================================================ */
.rec-grid{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
@media (max-width:840px){.rec-grid{grid-template-columns:1fr;gap:26px}}

.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.figs .fig{background:var(--white);padding:18px 20px}
.band-cream .figs .fig{background:var(--cream)}
.figs .fig .v{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--navy);
}
.figs .fig .v .cur{font-size:.62em;vertical-align:.12em;color:var(--red);margin-right:1px}
.figs .fig .k{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy-4);margin-top:7px;
}

.lze .wins{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.lze .wins li{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.lze .wins .pl{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--red);
}
.lze .wins .pl.q{color:var(--navy-4)}
.lze .wins .rn{font-size:16.5px;font-weight:600;color:var(--navy);line-height:1.35}
.lze .wins .rn .g{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.06em;color:var(--red);margin-left:7px;
}
.lze .wins .rn small{display:block;font-size:13.5px;font-weight:400;color:var(--navy-4);margin-top:2px}

.champ-line{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  background:var(--navy);color:var(--white);padding:12px 18px;
}
.champ-line .st{color:#E8B04A;font-size:18px;line-height:1}
.champ-line span{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:17px;letter-spacing:.09em;text-transform:uppercase;
}

/* ============================================================
   SIRE RECORD + PROGENY
   ============================================================ */
.sirestats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:clamp(26px,3.5vw,40px);
}
.sirestats > div{background:var(--white);padding:18px 20px}
.sirestats .v{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(26px,3vw,36px);line-height:1;color:var(--navy);
}
.sirestats .v .cur{font-size:.6em;vertical-align:.14em;color:var(--red)}
.sirestats .k{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy-4);margin-top:7px;
}

.prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:14px}
.pcard{background:var(--white);border:1px solid var(--rule);border-left:5px solid var(--red);display:flex;flex-direction:column}
.pcard .race{
  background:var(--red);color:var(--white);padding:9px 16px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  min-height:54px;display:flex;align-items:center;
}
.pcard .race .g{color:#F6CBD2;margin-left:5px}
.pcard .body{padding:14px 16px 16px}
.pcard .place{
  font-family:Yellowtail,"Brush Script MT",cursive;
  font-size:27px;line-height:1;color:var(--red);margin-bottom:2px;
}
.pcard .horse{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:24px;line-height:1.05;color:var(--navy);
}
.pcard .ped{font-size:13.5px;font-style:italic;color:var(--navy-3);margin-top:5px;line-height:1.45}
.pcard .brd{font-size:12px;color:var(--navy-4);margin-top:7px}

.firstfoals{
  border:1px solid var(--rule);border-top:5px solid var(--red);
  background:var(--cream-2);
  padding:clamp(30px,4vw,48px);text-align:center;
  max-width:720px;
}
.firstfoals .yr{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(48px,7vw,80px);line-height:1;color:var(--red);
}
.firstfoals .lbl{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-top:8px;
}
.firstfoals p{max-width:52ch;margin:12px auto 0;color:var(--navy-3);font-size:15.5px}

/* ============================================================
   PEDIGREE
   ============================================================ */
/* ---- three-generation chart ---- */
.pedchart{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,14px);align-items:stretch;
}
.pedcol{display:grid;gap:clamp(8px,1.1vw,12px)}
.pedcol.g1{grid-template-rows:repeat(2,1fr)}
.pedcol.g2{grid-template-rows:repeat(4,1fr)}
.pedcol.g3{grid-template-rows:repeat(8,1fr)}

.pnode{
  background:var(--white);border:1px solid var(--rule);
  padding:13px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.pnode .pn-role{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}
.pnode .pn-name{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,21px);line-height:1.05;color:var(--navy);
}
.pnode .pn-meta{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--navy-4);
}
.pnode .pn-note{
  margin:8px 0 0;padding-top:9px;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.5;color:var(--navy-3);
}

.pedcol.g1 .pnode{border-left:5px solid var(--red);padding:16px 18px}
.pedcol.g1 .pn-name{font-size:clamp(24px,2.7vw,32px)}
.pedcol.g2 .pnode{border-left:3px solid var(--rule-2)}
.pedcol.g3 .pnode{background:var(--cream-2);padding:9px 13px}
.pedcol.g3 .pn-name{font-size:clamp(14px,1.25vw,16px)}
.pedcol.g3 .pn-meta{font-size:11px;letter-spacing:.09em}

.ped-dup{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  font-size:14px;color:var(--navy-3);
}
.ped-dup .mk{width:8px;height:8px;background:var(--red);flex:none;transform:rotate(45deg)}

@media (max-width:820px){
  .pedchart{grid-template-columns:1fr;gap:18px}
  .pedcol{gap:8px}
  .pedcol.g1,.pedcol.g2,.pedcol.g3{grid-template-rows:none}
  .pedcol::before{
    content:attr(data-label);
    font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--navy-4);
    padding-bottom:6px;border-bottom:1px solid var(--rule-2);display:block;
  }
}

.ped-links{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;
  font-size:14px;color:var(--navy-4);
}
.ped-links a{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px;
}
.ped-links a:hover{color:var(--red)}


/* ============================================================
   GALLERY
   Lives inside the hero rather than as another section — it costs a
   caption line and a row of thumbnails, not a whole band. One photo and
   the strip doesn't render at all; the caption is the point, because a
   race shot labelled with the race it won is worth more than three
   conformation angles. Click the plate to see it full size.
   ============================================================ */
.hero-media{min-width:0}
.gal-cap{
  display:flex;align-items:baseline;gap:9px;margin-top:10px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-4);
}
.gal-cap::before{
  content:"";width:6px;height:6px;background:var(--red);
  transform:rotate(45deg);flex:none;align-self:center;
}
.gal-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gal-thumb{
  appearance:none;padding:0;cursor:pointer;
  width:clamp(64px,7vw,86px);aspect-ratio:4/3;
  border:1px solid var(--rule);border-bottom:3px solid var(--rule);
  background:var(--cream);overflow:hidden;
  opacity:.6;transition:opacity .2s var(--ease),border-color .2s var(--ease);
}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:1}
.gal-thumb[aria-current="true"]{opacity:1;border-bottom-color:var(--red)}
.photo{cursor:zoom-in}

/* full-size viewer */
.lb{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(13,34,63,.965);
  padding:clamp(16px,4vw,48px);
}
.lb.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.lb img{max-width:min(1100px,92vw);max-height:78vh;width:auto;height:auto;object-fit:contain}
.lb-cap{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9FB2CA;text-align:center;
}
.lb-close{
  position:absolute;top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px);
  width:44px;height:44px;border:1px solid #33507A;background:transparent;
  color:var(--white);font-size:22px;line-height:1;cursor:pointer;border-radius:2px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.lb-close:hover{border-color:var(--red);background:var(--red)}
.lb-nav{display:flex;gap:8px}
.lb-nav button{
  appearance:none;cursor:pointer;border:1px solid #33507A;background:transparent;
  color:#CFDAE8;padding:9px 18px;border-radius:2px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
}
.lb-nav button:hover{border-color:var(--white);color:var(--white)}

/* ============================================================
   CREDENTIAL PLATE
   The first thing read after the name. One red plate carrying the
   single biggest claim, then supporting credentials punctuated by the
   Lazy E diamond. The plate's angled right edge is that same diamond
   geometry — the mark becomes the punctuation of the whole system.
   Every stallion has at least the plate; none of them ship without one.
   ============================================================ */
.creds{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px clamp(14px,1.6vw,22px);
  margin-top:20px;
}
.cred-lead-wrap{display:inline-block;line-height:0}
.cred-lead{
  display:inline-block;
  background:var(--red);color:var(--white);
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.15;
  font-size:clamp(14px,1.55vw,19px);
  padding:10px 32px 10px 16px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
.cred{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;line-height:1.2;
  font-size:clamp(12.5px,1.15vw,14.5px);color:var(--navy-3);
}
.cred::before{
  content:"";flex:none;width:7px;height:7px;
  background:var(--red);transform:rotate(45deg);
}
@media (max-width:560px){
  .creds{gap:9px 14px}
  .cred-lead{font-size:14px;padding:9px 26px 9px 13px}
}

@keyframes lzeWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lzeCred{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .lze-js .hero-in .cred-lead-wrap{animation:lzeWipe .52s var(--ease) both;animation-delay:.24s}
  .lze-js .hero-in .cred{animation:lzeCred .42s var(--ease) both;animation-delay:var(--cd,0s)}
}

/* ============================================================
   RANCH BAND
   The one photograph every stallion page shares. Sits below the booking
   band and closes the page: the scrim is solid navy at the top so the
   photograph emerges out of "Book a Mare" with no seam, then opens up
   and ends on a red rule against the footer.
   ============================================================ */
.ranch{
  /* Crop control. On desktop the band is far wider than it is tall, so the
     photograph only ever overflows vertically — --ranch-y is the one that
     matters there, and "bottom" keeps the sign in frame. On phones the band
     is nearly square, the overflow flips to horizontal, and --ranch-x starts
     mattering; it goes back to centre below 760px so the sign isn't cropped
     off the right edge. */
  --ranch-x:left;
  --ranch-y:bottom;

  /* The band takes the photograph's own shape. This default is the real
     ratio of stallion_viewing_edit (2560 x 1536 = 5:3) so the band is right
     even if the script never runs — page builders and optimisers do strip
     inline JS. The script still refines it if you swap the photo out.
     The clamp only bites when the photo would swallow the page; past that,
     --ranch-y keeps the bottom of the frame. */
  --ranch-ratio:1.6667;

  position:relative;overflow:hidden;
  background:var(--navy);
  /* Height, not aspect-ratio — aspect-ratio plus a cap makes the box give up
     its width and the band stops being full-bleed. This keeps width at 100%
     and derives the height, so the photo shows whole until the 640px cap. */
  height:clamp(360px, calc(100vw / var(--ranch-ratio)), 640px);
  display:flex;align-items:center;
  border-bottom:3px solid var(--red);
}
/* specificity must clear the .lze img reset above, which sets height:auto */
.ranch .ranch-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--ranch-x) var(--ranch-y);
  z-index:0;
}
.ranch-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(13,34,63,.94) 0%,
      rgba(13,34,63,.58) 14%,
      rgba(13,34,63,.13) 38%,
      rgba(13,34,63,.04) 74%,
      rgba(13,34,63,.08) 100%),
    linear-gradient(100deg,
      rgba(13,34,63,.96) 0%,
      rgba(13,34,63,.88) 30%,
      rgba(13,34,63,.42) 60%,
      rgba(13,34,63,.12) 100%);
}
.ranch-body{
  position:relative;z-index:2;
  padding-block:clamp(44px,5vw,68px);
  max-width:var(--maxw);width:100%;
}
.ranch-body .eyebrow{color:#E8A0AC}
.ranch-title{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.4vw,54px);line-height:.98;letter-spacing:.01em;
  color:var(--white);margin:9px 0 0;
}
.ranch-copy{
  margin:14px 0 0;max-width:46ch;
  font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:#CFDAE8;
}
.ranch-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* ------------------------------------------------------------
   DESKTOP: the photograph is NOT cropped. At all.
   The image sits in normal flow at its natural height, so the band is
   exactly as tall as the picture and every pixel of it is on screen —
   there is no object-fit, no object-position, nothing left to get wrong.
   The copy floats over it.
   ------------------------------------------------------------ */
@media (min-width:761px){
  /* min-height is only a floor for the case where the photo fails to load —
     the image itself is always taller than this, so it never shows as a gap. */
  .ranch{height:auto;min-height:clamp(440px,36vw,520px);display:block}
  .ranch .ranch-img{position:static;width:100%;height:auto;display:block}
  .ranch-body{
    position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);margin-inline:auto;
  }
}

@media (max-width:760px){
  /* On a phone a full 5:3 frame would be far too short to carry the copy,
     so here the content sets the height and the photo covers it, centred. */
  .ranch{height:auto;min-height:0;--ranch-x:center}
  .ranch-scrim{
    background:
      linear-gradient(to bottom,
        rgba(13,34,63,1) 0%,
        rgba(13,34,63,.92) 14%,
        rgba(13,34,63,.78) 52%,
        rgba(13,34,63,.66) 100%);
  }
}

/* ============================================================
   BOOK
   ============================================================ */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px)}
@media (max-width:840px){.book{grid-template-columns:1fr;gap:28px}}

.feebox{background:var(--white);color:var(--navy);padding:clamp(22px,3vw,32px)}
.feebox .k{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy-4);
}
.feebox .fee{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;
  font-size:clamp(52px,7.5vw,76px);line-height:1;color:var(--navy);margin:6px 0 2px;
}
.feebox .fee .cur{font-size:.5em;vertical-align:.32em;color:var(--red)}
.feebox .lfg{font-size:14.5px;color:var(--navy-3);margin-bottom:20px}
.lze .terms{list-style:none;margin:0 0 22px;padding:0}
.lze .terms li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--rule);font-size:15px}
.lze .terms li .tk{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-4);padding-top:3px;
}
.lze .terms li .tv{text-align:right;font-weight:600;color:var(--navy)}

.inc-wrap .k{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#9FB2CA;margin-bottom:11px;
}
.lze .incs{display:flex;flex-wrap:wrap;gap:7px}
.lze .inc{
  border:1px solid #33507A;color:#CFDAE8;padding:6px 12px;
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.lze .contact{list-style:none;margin:26px 0 0;padding:0}
.lze .contact li{padding:13px 0;border-top:1px solid #24406A}
.lze .contact .ck{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#9FB2CA;display:block;margin-bottom:3px;
}
.lze .contact .cv{font-size:16.5px;color:var(--white)}
.lze .contact a{color:var(--white);text-decoration:none;border-bottom:1px solid #40608C}
.lze .contact a:hover{border-bottom-color:var(--white)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--cream);padding-block:30px}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.ftr .fl{font-size:14px;color:var(--navy-3);line-height:1.6}
.ftr .fl b{color:var(--navy)}
.ftr .fr{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy-4);
}

/* ============================================================
   MOTION
   Two ideas only. The hero plays one orchestrated entrance, and it
   replays whenever the horse changes. The pedigree cascades outward
   generation by generation — the motion is the bloodline, not decoration.
   Everything else is a micro-response to the reader. All of it is gated
   behind .lze-js so nothing hides if the script fails, and all of it is
   off under prefers-reduced-motion.
   ============================================================ */
@keyframes lzeRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes lzeDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lzeDrift{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes lzeBarUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){

  /* --- hero entrance, replayed on every horse change --- */
  .lze-js .hero-in .anim{animation:lzeRise .58s var(--ease) both;animation-delay:var(--d,0s)}

  .hero-line{position:relative;border-top:0;padding-top:18px}
  .hero-line::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:var(--navy);transform-origin:left center;
  }
  .lze-js .hero-in .hero-line::after{
    animation:lzeDraw .5s var(--ease) both;animation-delay:calc(var(--d,0s) + .04s);
  }

  /* --- scroll reveals --- */
  .lze-js .rv{opacity:0;transform:translateY(15px)}
  .lze-js .rv.in{
    opacity:1;transform:none;
    transition:opacity .6s var(--ease),transform .6s var(--ease);
    transition-delay:var(--d,0s);
  }

  /* section rule draws itself */
  .lze-js .sec-head .bar{transform:scaleX(0);transform-origin:left center}
  .lze-js .sec-head.in .bar{transform:scaleX(1);transition:transform .5s var(--ease) .08s}

  /* the ranch photograph breathes */
  .lze-js .ranch.in .ranch-img{animation:lzeDrift 22s ease-out both}

  /* action bar */
  .lze-js .minibar.on{animation:lzeBarUp .32s var(--ease) both}
}

/* --- micro-responses (safe under reduced motion: no movement) --- */
.pcard{transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .pcard:hover{transform:translateY(-3px)}
}
.pcard:hover{box-shadow:0 10px 26px rgba(13,34,63,.13)}
.pedcol.g1 .pnode,.pedcol.g2 .pnode,.pedcol.g3 .pnode{transition:border-color .2s var(--ease),background .2s var(--ease)}
.pedcol.g2 .pnode:hover,.pedcol.g3 .pnode:hover{border-left-color:var(--red)}

/* ============================================================
   ACTION BAR — appears once the hero is gone, hides over the fee
   ============================================================ */
.minibar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--navy);border-top:3px solid var(--red);
  display:none;
}
.minibar.on{display:block}
.minibar .wrap{display:flex;align-items:center;gap:16px;padding-block:11px}
.mb-name{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:21px;letter-spacing:.03em;color:var(--white);line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mb-fee{display:flex;align-items:baseline;gap:8px;margin-left:auto;flex:none}
.mb-fee b{
  font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:700;font-size:24px;
  color:var(--white);line-height:1;font-variant-numeric:tabular-nums;
}
.mb-fee em{
  font-style:normal;font-family:"Barlow Condensed",Barlow,sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9FB2CA;
}
.minibar .btn{flex:none;padding:11px 20px;font-size:13.5px}
@media (max-width:600px){
  .minibar .wrap{gap:12px}
  .mb-name{font-size:17px}
  .mb-fee em{display:none}
  .mb-fee b{font-size:20px}
  .minibar .btn{padding:10px 14px;font-size:12px;letter-spacing:.08em}
}

[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
