/* Teal Path — shared styles. Layout lives inline in each page; this file holds
   the base rules, hover states, and the values that change at the mobile breakpoint. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#ffffff;color:#102b4e;font-family:Heebo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#006776}
a:hover{color:#102b4e}
textarea{font-family:Heebo,sans-serif}
.page{background:#ffffff;color:#102b4e;overflow:hidden}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
input:focus,textarea:focus,select:focus{outline:2px solid #006776;outline-offset:1px}
[hidden]{display:none!important}

/* hover states */
.hv1:hover{background:#b3a160!important}
.hv2:hover{background:rgba(255,255,255,.12)!important}
.hv3:hover{color:#ffffff!important;text-decoration:underline!important}

/* desktop values */
:root{
  --heroDir:row;
  --ovTeal:linear-gradient(to left,#006776 0%,#00677600 55%),linear-gradient(#0067762e,#0067762e);
  --ovWhite:linear-gradient(to left,#ffffff 0%,#ffffff00 55%),linear-gradient(#ffffff2e,#ffffff2e);
  --imprintCols:200px minmax(0,1fr);
  --pillarCols:repeat(3,minmax(0,1fr));
  --pillarPad:clamp(28px,3vw,44px);
  --pillarGap:22px;
  --pebbleRow:flex;
  --liPad:12px 0;
  --liBorder:1px solid rgba(228,225,220,.3);
  --liSize:17px;
  --trainGap:clamp(40px,5vw,72px);
  --stepCols:minmax(0,1fr) 96px minmax(0,1fr);
  --stoneCol:2;
  --leftCol:1;
  --rightCol:3;
  --leftAlign:right;
  --lineLeft:50%;
}
.d-only{display:contents}
.m-only{display:none}

/* mobile values */
@media (max-width:959.98px){
  :root{
    --imprintCols:minmax(0,1fr);
    --pillarCols:minmax(0,1fr);
    --pillarPad:22px;
    --pillarGap:10px;
    --pebbleRow:none;
    --liPad:4px 0;
    --liBorder:0;
    --liSize:16px;
    --trainGap:28px;
    --stepCols:84px minmax(0,1fr);
    --stoneCol:1;
    --leftCol:2;
    --rightCol:2;
    --leftAlign:left;
    --lineLeft:42px;
  }
  .d-only{display:none}
  .m-only{display:contents}
}

/* The hero photo and text sit side by side until they no longer fit (2 x 380px),
   then stack. Stacked, the photo keeps the proportions of the 390px phone design. */
@media (max-width:759.98px){
  :root{
    --ovTeal:linear-gradient(to top,#006776 0%,#00677600 45%),linear-gradient(#0067762e,#0067762e);
    --ovWhite:linear-gradient(to top,#ffffff 0%,#ffffff00 45%),linear-gradient(#ffffff2e,#ffffff2e);
  }
  .hero-img{min-height:max(440px,112.8vw)!important}
  .hero-img-short{min-height:max(360px,92.3vw)!important}
}

/* On very wide screens, stop the hero photo column from getting wider than it is tall,
   so the portrait keeps the framing it has at the design width (about 1440px). */
@media (min-width:760px){
  .hero-img{max-width:760px}
}