/* OpenDott marketing site - base styles.
   Ported from the approved design reference; colours, type and motion kept
   verbatim so the live site matches the mock exactly. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',sans-serif;background:#FFFDFB;color:#17120E;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#F15A24;text-decoration:none}
a:hover{color:#D8480F}
::selection{background:#F15A24;color:#fff}

/* scroll-reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,.8,.24,1),transform .8s cubic-bezier(.16,.8,.24,1)}
.rv.show{opacity:1;transform:none}

@keyframes floaty{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-28px) scale(1.09)}}
@keyframes floaty2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.12)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes barpulse{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes risein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* hover states (the design mock expressed these as style-hover; here they are
   real CSS so no JS is needed for them) */
.navbtn{position:relative;background:none;border:none;cursor:pointer;font-family:'DM Sans';font-size:15px;font-weight:500;color:#4A3F37;padding:9px 13px;border-radius:9px;transition:color .2s,background .2s}
.navbtn:hover{color:#F15A24;background:#FFEDE2}
.ctabtn{transition:transform .18s,box-shadow .18s}
.ctabtn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(241,90,36,.42);color:#fff}
.footlink{background:none;border:none;text-align:left;cursor:pointer;color:#A79C90;font-family:'DM Sans';font-size:14.5px;padding:0;transition:color .2s}
.footlink:hover{color:#F15A24}
.contactline:hover{color:#F15A24}

/* loading state before React mounts */
#root:empty::before{content:"";display:block;height:100vh}

@media (max-width:1024px){
  [data-desktop-nav]{display:none!important}
  [data-cta-desktop]{display:none!important}
  [data-burger]{display:flex!important}
  /* burger sits on the left, logo is centred in the bar */
  .brandbtn{position:absolute;left:50%;transform:translateX(-50%)}
  /* card grids go two-up instead of stacking one per row */
  .g2{grid-template-columns:1fr 1fr!important}
}
/* tighten the two-up cards on the smallest phones so they still breathe */
@media (max-width:460px){
  .g2{gap:12px!important}
}