/* Approved concept 1. Revision 2: connected drafting lines and compact facts. */
html body .po-page--strings .po-hero {
  display:grid!important;
  grid-template-columns:minmax(0,40%) minmax(0,60%);
  grid-template-rows:auto;
  align-items:stretch!important;
  height:auto!important;
  min-height:540px!important;
  background:#fbfaf7!important;
  color:#21302e;
  isolation:isolate;
}
/* The table lid spans the full width, including the area below the photograph. */
html body .po-page--strings .po-hero + .po-facts {
  border-top:1px solid #ddd9d1!important;
}
html body .po-page--strings .po-hero + .po-facts .po-fact {
  min-height:0!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}
@media(min-width:801px) {
  html body .po-page--strings .po-hero .po-hero__content::before {
    content:"";position:absolute;left:48px;right:26px;bottom:16px;
    height:1px;background:#a66d3d;pointer-events:none;
    transform-origin:right center;
  }
  html body .po-page--strings .po-hero .po-hero__content::after {
    transform-origin:center top;
  }
}
@media(min-width:801px) and (max-width:1100px) {
  html body .po-page--strings .po-hero .po-hero__content::before {left:28px;right:18px}
}
/* Same 120 ms delay, 1.2 s duration and easing as the live home drafting line.
   Two connected strokes: down the divider, then left along its lower edge. */
@media(min-width:801px) and (prefers-reduced-motion:no-preference) {
  html body .po-page--strings .po-hero .po-hero__content::after {
    animation:als-product-drafting-vertical 1200ms cubic-bezier(.35,0,.2,1) 120ms backwards;
  }
  html body .po-page--strings .po-hero .po-hero__content::before {
    animation:als-product-drafting-horizontal 1200ms cubic-bezier(.35,0,.2,1) 120ms backwards;
  }
}
@keyframes als-product-drafting-vertical {
  0% {transform:scaleY(0)}
  50%,100% {transform:scaleY(1)}
}
@keyframes als-product-drafting-horizontal {
  0%,50% {transform:scaleX(0)}
  100% {transform:scaleX(1)}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference) {
  html body .po-page--strings .po-hero .po-hero__content::after {
    transform-origin:left center;
    animation:als-product-drafting-mobile 1200ms cubic-bezier(.35,0,.2,1) 120ms backwards;
  }
}
@keyframes als-product-drafting-mobile {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce) {
  html body .po-page--strings .po-hero .po-hero__content::before,
  html body .po-page--strings .po-hero .po-hero__content::after {animation:none!important}
}
html body .po-page--strings .po-hero::after {
  display:none!important;
  background:none!important;
}
html body .po-page--strings .po-hero .po-hero__content {
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  position:relative;inset:auto;
  align-self:stretch!important;
  width:100%!important;max-width:none!important;min-width:0;
  margin:0!important;padding:64px 40px 64px 48px!important;
  background:#fbfaf7!important;box-shadow:none!important;
  overflow:visible!important;
  opacity:1!important;transform:none!important;
}
html body .po-page--strings .po-hero .po-hero__content::after {
  content:"";position:absolute;top:16px;bottom:16px;right:26px;
  width:1px;background:#a66d3d;pointer-events:none;
}
html body .po-page--strings .po-hero .po-hero__media {
  grid-column:2;grid-row:1;
  position:relative!important;inset:auto!important;
  width:100%!important;min-width:0;min-height:0!important;
  height:auto!important;margin:0!important;overflow:hidden;
}
html body .po-page--strings .po-hero .po-hero__media picture,
html body .po-page--strings .po-hero .po-hero__media img {
  position:absolute;inset:0;display:block;
  width:100%!important;height:100%!important;max-width:none!important;
}
html body .po-page--strings .po-hero .po-hero__media img {
  object-fit:cover;object-position:center center;filter:none!important;
  transform:scaleX(-1)!important;
}
html body .po-page--strings:not(.po-page--glass-mirror):not(.po-page--mesh):not(.po-page--sealed):not(.po-page--stone) .po-hero .po-hero__media img {object-position:center center}
html body .po-page--stone .po-hero .po-hero__media img,
html body .po-page--mesh .po-hero .po-hero__media img {height:110%!important;object-position:center top}
html body .po-page--strings .po-hero .po-kicker {
  width:auto!important;max-width:100%;margin:0 0 26px!important;
  font-size:9px!important;line-height:1.5!important;
  letter-spacing:.12em!important;gap:12px;white-space:normal;
}
html body .po-page--strings .po-hero .po-kicker::before {
  width:36px;flex:0 0 36px;
}
html body .po-page--strings .po-hero h1 {
  max-width:100%!important;margin:0!important;
  font-size:48px!important;line-height:1.1!important;
  letter-spacing:-.035em!important;text-wrap:balance;
}
html body .po-page--strings .po-hero .po-lead {
  width:auto!important;max-width:100%!important;
  margin:24px 0 0!important;
  font-size:16px!important;line-height:1.65!important;
  color:#66726d!important;text-wrap:pretty;
}
html body .po-page--strings .po-hero .po-actions {
  width:100%;display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 24px!important;margin:34px 0 0!important;
}
html body .po-page--strings .po-hero .po-actions .po-btn {
  width:auto!important;min-height:52px;padding:14px 20px!important;
  border-radius:0!important;border-width:1px!important;
  font-size:13px!important;line-height:1.4!important;
  letter-spacing:normal!important;text-transform:none!important;
  font-weight:600!important;white-space:normal;
}
html body .po-page--strings .po-hero .po-actions .po-btn--ghost,
html body .po-page--strings .po-hero .po-actions .po-btn--text {
  padding:12px 0!important;border:0!important;
  color:#21302e!important;background:transparent!important;
  text-decoration:underline!important;text-underline-offset:10px;
  text-decoration-thickness:1px!important;
}
html body .po-page--strings .po-hero .po-actions .po-btn--ghost:hover,
html body .po-page--strings .po-hero .po-actions .po-btn--text:hover {
  color:#86552f!important;background:transparent!important;
}
@media(min-width:801px) and (max-width:1100px) {
  html body .po-page--strings .po-hero {grid-template-columns:minmax(0,46%) minmax(0,54%);min-height:500px!important}
  html body .po-page--strings .po-hero .po-hero__content {padding:42px 34px 42px 28px!important}
  html body .po-page--strings .po-hero .po-hero__content::after {right:18px}
  html body .po-page--strings .po-hero h1 {font-size:40px!important}
  html body .po-page--strings .po-hero .po-kicker {font-size:8px!important;gap:9px}
  html body .po-page--strings .po-hero .po-kicker::before {width:24px;flex-basis:24px}
  html body .po-page--strings .po-hero .po-actions {gap:12px 18px!important;margin-top:26px!important}
  html body .po-page--strings .po-hero .po-actions .po-btn {padding:12px 15px!important}
}
@media(max-width:800px) {
  html body .po-page--strings .po-hero {grid-template-columns:minmax(0,1fr);min-height:0!important}
  html body .po-page--strings .po-hero .po-hero__content {grid-column:1;grid-row:1;padding:36px 24px 34px!important}
  html body .po-page--strings .po-hero .po-hero__content::after {top:auto;bottom:0;left:24px;right:24px;width:auto;height:1px}
  html body .po-page--strings .po-hero .po-hero__media {grid-column:1;grid-row:2;aspect-ratio:16/10;min-height:0!important}
  html body .po-page--strings .po-hero h1 {font-size:36px!important}
  html body .po-page--strings .po-hero .po-kicker {font-size:8px!important;margin-bottom:20px!important;gap:9px}
  html body .po-page--strings .po-hero .po-kicker::before {width:28px;flex-basis:28px}
  html body .po-page--strings .po-hero .po-lead {margin-top:20px!important;font-size:16px!important}
  html body .po-page--strings .po-hero .po-actions {margin-top:26px!important;gap:12px 20px!important}
}
@media(max-width:380px) {
  html body .po-page--strings .po-hero h1 {font-size:33px!important}
  html body .po-page--strings .po-hero .po-hero__content {padding-left:20px!important;padding-right:20px!important}
  html body .po-page--strings .po-hero .po-actions {gap:12px 16px!important}
  html body .po-page--strings .po-hero .po-actions .po-btn {font-size:12px!important;padding:12px 16px!important}
}
/* A single border corner keeps both strokes equally rasterized at browser zoom. */
@media(min-width:801px) {
  html body .po-page--strings .po-hero .po-hero__content::before {
    display:none;animation:none;
  }
  html body .po-page--strings .po-hero .po-hero__content::after {
    left:48px;right:26px;top:16px;bottom:16px;width:auto;height:auto;
    background:none;border-right:1px solid #a66d3d;border-bottom:1px solid #a66d3d;
    transform:none;
  }
}
@media(min-width:801px) and (max-width:1100px) {
  html body .po-page--strings .po-hero .po-hero__content::after {left:28px;right:18px}
}
@media(min-width:801px) and (prefers-reduced-motion:no-preference) {
  html body .po-page--strings .po-hero .po-hero__content::after {
    animation:als-product-drafting-corner 1200ms cubic-bezier(.35,0,.2,1) 120ms backwards;
  }
}
@keyframes als-product-drafting-corner {
  0% {clip-path:inset(0 0 100% calc(100% - 1px))}
  50% {clip-path:inset(0 0 0 calc(100% - 1px))}
  100% {clip-path:inset(0)}
}
/* Angular dimension anchored to the existing lower-right drafting corner. */
html body .po-page--strings .po-hero .po-hero-angle {
  position:absolute;right:26px;bottom:16px;width:60px;height:60px;
  display:block;overflow:visible;pointer-events:none;color:#a66d3d;
}
html body .po-page--strings .po-hero .po-hero-angle path {
  stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
html body .po-page--strings .po-hero .po-hero-angle__label {
  fill:currentColor;font:11px/1 Consolas,"Courier New",monospace;letter-spacing:.02em;
}
@media(min-width:801px) and (max-width:1100px) {
  html body .po-page--strings .po-hero .po-hero-angle {right:18px;width:45px;height:45px}
}
@media(max-width:800px) {
  html body .po-page--strings .po-hero .po-hero-angle {display:none}
}
@media(prefers-reduced-motion:no-preference) {
  html body .po-page--strings .po-hero .po-hero-angle__arc {
    stroke-dasharray:100;stroke-dashoffset:0;
    animation:als-angle-arc 850ms cubic-bezier(.35,0,.2,1) 1350ms backwards;
  }
  html body .po-page--strings .po-hero .po-hero-angle__arrows {
    animation:als-angle-note 350ms ease-out 2050ms backwards;
  }
  html body .po-page--strings .po-hero .po-hero-angle__label {
    animation:als-angle-note 500ms ease-out 2200ms backwards;
  }
}
@keyframes als-angle-arc {from {stroke-dashoffset:100} to {stroke-dashoffset:0}}
@keyframes als-angle-note {from {opacity:0} to {opacity:1}}
/* Handwritten revision: every visible mark is a progressively drawn stroke. */
html body .po-page--strings .po-hero .po-hero-handline {display:none}
html body .po-page--strings .po-hero .po-hero-angle path,
html body .po-page--strings .po-hero .po-hero-handline path {
  fill:none;stroke:#a66d3d;stroke-width:1;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
@media(min-width:801px) {
  html body .po-page--strings .po-hero .po-hero__content::after {display:none}
  html body .po-page--strings .po-hero .po-hero-handline {
    display:block;position:absolute;left:48px;right:26px;top:16px;bottom:16px;
    width:calc(100% - 74px);height:calc(100% - 32px);overflow:visible;pointer-events:none;
  }
}
@media(min-width:801px) and (max-width:1100px) {
  html body .po-page--strings .po-hero .po-hero-handline {left:28px;right:18px;width:calc(100% - 46px)}
}
@media(prefers-reduced-motion:no-preference) {
  html body .po-page--strings .po-hero .po-hero-handline path {
    stroke-dasharray:none;animation:als-hand-corner 1600ms linear 120ms backwards;
  }
  html body .po-page--strings .po-hero .po-hero-angle path {
    stroke-dasharray:none;stroke-dashoffset:0;
    animation:als-hand-stroke var(--stroke-duration,450ms) cubic-bezier(.25,.1,.35,1) var(--stroke-delay,1750ms) backwards;
  }
  html body .po-page--strings .po-hero .po-hero-angle__arc {--stroke-duration:650ms;--stroke-delay:1750ms}
  html body .po-page--strings .po-hero .po-hero-angle__arrow--one {--stroke-duration:160ms;--stroke-delay:2410ms}
  html body .po-page--strings .po-hero .po-hero-angle__arrow--two {--stroke-duration:160ms;--stroke-delay:2590ms}
  html body .po-page--strings .po-hero .po-hero-angle__nine {--stroke-duration:420ms;--stroke-delay:2830ms}
  html body .po-page--strings .po-hero .po-hero-angle__zero {--stroke-duration:390ms;--stroke-delay:3310ms}
  html body .po-page--strings .po-hero .po-hero-angle__degree {--stroke-duration:180ms;--stroke-delay:3760ms}
}
@keyframes als-hand-corner {
  0% {stroke-dasharray:1000;stroke-dashoffset:1000}
  18% {stroke-dashoffset:830}
  46% {stroke-dashoffset:460}
  56% {stroke-dashoffset:442}
  78% {stroke-dashoffset:225}
  100% {stroke-dasharray:1000;stroke-dashoffset:0}
}
@keyframes als-hand-stroke {from {stroke-dasharray:100;stroke-dashoffset:100} to {stroke-dasharray:100;stroke-dashoffset:0}}

/* Keep the shared 540px desktop hero when a longer title wraps to three lines.
   Symmetric padding releases unused space; shorter content stays centered.
   Narrow layouts retain their content-driven height and mobile image ratio. */
@media(min-width:1200px) {
  html body .po-page--strings .po-hero .po-hero__content {
    padding-top:36px!important;
    padding-bottom:36px!important;
  }
}