/* Crysten Curry Elementor Widget - Hero (fonts come from fonts.css) */

.cc-hero-wrap {
  --cc-h-bg: #FBFAF8;
  --cc-h-border: #0A0708;
  --cc-h-bw: 1px;
  --cc-h-gutter: clamp(20px, 3vw, 48px);
  --cc-h-maxw: 1680px;
  --cc-h-min: clamp(720px, 96vh, 1000px);
  --cc-h-photo-w: 47%;
  --cc-h-photo-bg: #E9E7F0;
  --cc-h-pos-x: 50%;
  --cc-h-pos-y: 8%;
  --cc-h-label: #520000;
  --cc-h-heading: #0A0708;
  --cc-h-text: #4A4447;
  --cc-h-mono: #0A0708;
  --cc-h-link: #0A0708;
  --cc-h-link-hover: #0A0708;
  --cc-h-name: #520000;
  --cc-h-name-photo: #FBFAF8;
  --cc-h-name-y: 0px;
  width: 100%;
  padding: 24px var(--cc-h-gutter) 0;
  font-size: 16px;
  line-height: 1.65;
  box-sizing: border-box;
}
.cc-hero-wrap *, .cc-hero-wrap *::before, .cc-hero-wrap *::after { box-sizing: border-box; }

/* ---------- frame: copy on top, big name in its own row underneath ---------- */
.cc-hero {
  position: relative;
  max-width: var(--cc-h-maxw);
  margin: 0 auto;
  min-height: var(--cc-h-min);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--cc-h-bg);
  border: var(--cc-h-bw) solid var(--cc-h-border);
}

/* ---------- copy (stays clear of the photo) ---------- */
.cc-hero__copy {
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  max-width: calc(100% - var(--cc-h-photo-w));
  padding: 22px 22px clamp(24px, 3vw, 48px);
}
.cc-hero-wrap .cc-hero__mono {
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .66px;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--cc-h-mono);
}
.cc-hero__pitch { margin-top: clamp(70px, 12vh, 150px); max-width: 22em; }
.cc-hero-wrap .cc-hero__label {
  display: block;
  margin: 0 0 18px;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.98px;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--cc-h-label);
}
.cc-hero-wrap .cc-hero__heading {
  margin: 0;
  padding: 0;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3vw, 48px);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cc-h-heading);
}
.cc-hero__heading em { font-style: italic; }
.cc-hero-wrap .cc-hero__text {
  margin: 20px 0 0;
  max-width: 24em;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--cc-h-text);
}
.cc-hero-wrap .cc-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 0 4px;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.98px;
  line-height: 1.65;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cc-h-link);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s;
}
.cc-hero-wrap .cc-hero__btn:hover,
.cc-hero-wrap .cc-hero__btn:focus { color: var(--cc-h-link-hover); background-size: 100% 1px; }
.cc-hero .cc-ico { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cc-hero__btn:focus-visible { outline: 2px solid #B0122A; outline-offset: 4px; }

/* ---------- photo: full height of the frame ---------- */
.cc-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--cc-h-photo-w);
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: var(--cc-h-photo-bg);
}
.cc-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--cc-h-pos-x) var(--cc-h-pos-y);
}
.cc-hero__tag { position: absolute; top: 22px; right: 22px; z-index: 3; text-align: right; }

/* ---------- big name: straddles the photo edge, never sits on the copy ---------- */
.cc-hero__namebox {
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 4;
  pointer-events: none;
  transform: translate(var(--cc-h-name-x, 0px), var(--cc-h-name-y));
}
.cc-hero-wrap .cc-hero__name {
  margin: 0;
  padding: 0 22px 6px;
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-size: clamp(73.6px, 16.4vw, 288px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: .8;
  text-align: var(--cc-h-name-align, left);
  text-transform: uppercase;
  color: var(--cc-h-name);
}
.cc-hero__line { display: block; overflow: hidden; padding-top: .04em; }
.cc-hero__line i { display: block; font-style: normal; }

/* one line: the name fills the full width of the hero.
   hero.js measures the real text and sets --cc-h-name-fs; the calc() below is the no-JavaScript fallback. */
.cc-hero--inline { container-type: inline-size; }
.cc-hero--inline .cc-hero__name {
  white-space: nowrap;
  font-size: clamp(54.4px, 10.6vw, 208px);
  font-size: var(--cc-h-name-fs, calc((100cqw - 44px) / 7.7 * var(--cc-h-fit, 1)));
}
.cc-hero--inline .cc-hero__line { display: inline-block; }
.cc-hero--inline .cc-hero__line + .cc-hero__line { margin-left: .22em; }

/* optional: a second colour for the part of the name that sits on the photo */
.cc-hero--twotone .cc-hero__name:not(.cc-hero__name--alt) { clip-path: inset(0 calc(var(--cc-h-photo-w) + var(--cc-h-name-x, 0px)) 0 0); }
.cc-hero--twotone .cc-hero__name--alt {
  position: absolute;
  inset: 0;
  color: var(--cc-h-name-photo);
  clip-path: inset(0 0 0 calc(100% - var(--cc-h-photo-w) - var(--cc-h-name-x, 0px)));
}

@keyframes cc-rise { from { transform: translateY(105%); } to { transform: none; } }
.cc-hero--animate .cc-hero__line i { animation: cc-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.cc-hero--animate .cc-hero__line:nth-child(2) i { animation-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .cc-hero--animate .cc-hero__line i { animation: none; }
  .cc-hero__btn { transition: none; }
}

/* ======================================================================
   Layout: photo inset (editorial)
   The photo is moved in from the right edge so there is a column of calm
   space on its left for small copy, and the big name overlaps the photo.
   ==================================================================== */
.cc-hero-wrap--inset { --cc-h-photo-x: 33%; --cc-h-photo-w: 52%; }

.cc-hero-wrap--inset .cc-hero__photo {
  left: var(--cc-h-photo-x);
  right: auto;
  width: var(--cc-h-photo-w);
}
.cc-hero-wrap--inset .cc-hero__copy {
  max-width: var(--cc-h-photo-x);
  padding-right: 18px;
}
/* small mono label stays top-left; the pitch sits in the middle of the column */
.cc-hero-wrap--inset .cc-hero__pitch {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 28px;
  max-width: 17em;
}
.cc-hero-wrap--inset .cc-hero__heading em { font-style: normal; }
.cc-hero-wrap--inset .cc-hero__text { margin-top: 14px; max-width: 26em; }
.cc-hero-wrap--inset .cc-hero__label { margin-bottom: 12px; }
.cc-hero-wrap--inset .cc-hero__btn { margin-top: 22px; }

/* the name floats a little above the bottom edge, like the reference */
.cc-hero-wrap--inset .cc-hero__name { padding-bottom: clamp(18px, 2.6vw, 44px); }

/* the name starts centered in the hero (like the reference) and a bit smaller so it
   overlaps the photo by a similar amount; any Typography size set in Elementor wins (low specificity) */
.cc-hero-wrap--inset { --cc-h-name-align: center; }
.cc-hero-wrap--inset :where(.cc-hero:not(.cc-hero--inline)) .cc-hero__name {
  font-size: clamp(60px, 11.8vw, 210px);
}

/* two-colour name: the part over the photo is the strip between photo-left and photo-right.
   The name box can be moved sideways (--cc-h-name-x), so the strip is shifted back by the same amount. */
.cc-hero-wrap--inset .cc-hero--twotone .cc-hero__name:not(.cc-hero__name--alt) {
  clip-path: polygon(
    0 0,
    calc(var(--cc-h-photo-x) - var(--cc-h-name-x, 0px)) 0,
    calc(var(--cc-h-photo-x) - var(--cc-h-name-x, 0px)) 100%,
    calc(var(--cc-h-photo-x) + var(--cc-h-photo-w) - var(--cc-h-name-x, 0px)) 100%,
    calc(var(--cc-h-photo-x) + var(--cc-h-photo-w) - var(--cc-h-name-x, 0px)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}
.cc-hero-wrap--inset .cc-hero--twotone .cc-hero__name--alt {
  clip-path: inset(0 calc(100% - var(--cc-h-photo-x) - var(--cc-h-photo-w) + var(--cc-h-name-x, 0px)) 0 calc(var(--cc-h-photo-x) - var(--cc-h-name-x, 0px)));
}