/* Arranged Marriage — static rebuild
   Design canvas: 1366px wide. --u is the design unit (1px at >=1366px, fluid below).
   --bu is the same unit for full-bleed backgrounds, which keep growing past 1366px. */
@font-face{font-family:"AM Sans";font-style:normal;font-weight:100 300;font-display:swap;src:url("../fonts/ee970c9e826a5671994ba31842cd33d9.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:italic;font-weight:100 300;font-display:swap;src:url("../fonts/ee970c9e826a5671994ba31842cd33d9.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url("../fonts/e6e448bf532ef4fa944b8b08c9d44f33.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:italic;font-weight:400 500;font-display:swap;src:url("../fonts/e6e448bf532ef4fa944b8b08c9d44f33.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url("../fonts/0f4141832438767f693a063410892ccd.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:italic;font-weight:600 800;font-display:swap;src:url("../fonts/0f4141832438767f693a063410892ccd.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:normal;font-weight:900 900;font-display:swap;src:url("../fonts/0c89f7f6a820d09005e7c52b273d13b5.woff2") format("woff2")}
@font-face{font-family:"AM Sans";font-style:italic;font-weight:900 900;font-display:swap;src:url("../fonts/0c89f7f6a820d09005e7c52b273d13b5.woff2") format("woff2")}
@font-face{font-family:"AM Label";font-style:normal;font-weight:100 500;font-display:swap;src:url("../fonts/fcd349140b0dbb75604bd51fdc02e2e8.woff2") format("woff2")}
@font-face{font-family:"AM Label";font-style:italic;font-weight:100 500;font-display:swap;src:url("../fonts/fcd349140b0dbb75604bd51fdc02e2e8.woff2") format("woff2")}
@font-face{font-family:"AM Label";font-style:normal;font-weight:600 900;font-display:swap;src:url("../fonts/9c2c6aa6700c787262c247c3d2dfbde9.woff2") format("woff2")}
@font-face{font-family:"AM Label";font-style:italic;font-weight:600 900;font-display:swap;src:url("../fonts/9c2c6aa6700c787262c247c3d2dfbde9.woff2") format("woff2")}
@font-face{font-family:"AM Serif";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/45cd83110d0222c7954291d0891e79f5.woff") format("woff")}
@font-face{font-family:"AM Serif";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/45cd83110d0222c7954291d0891e79f5.woff") format("woff")}
@font-face{font-family:"AM Display";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/783ea6569c363f65d9330910d50049b9.woff") format("woff")}
@font-face{font-family:"AM Display";font-style:italic;font-weight:100 800;font-display:swap;src:url("../fonts/783ea6569c363f65d9330910d50049b9.woff") format("woff")}
@font-face{font-family:"AM Display";font-style:normal;font-weight:900 900;font-display:swap;src:url("../fonts/0b7d5d7bea9e0d769b2971ac1f6e3346.woff") format("woff")}
@font-face{font-family:"AM Display";font-style:italic;font-weight:900 900;font-display:swap;src:url("../fonts/0b7d5d7bea9e0d769b2971ac1f6e3346.woff") format("woff")}
@font-face{font-family:"AM Text";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/fa893145282dc7080ef00ee71dbbef2a.woff") format("woff")}
@font-face{font-family:"AM Text";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/fa893145282dc7080ef00ee71dbbef2a.woff") format("woff")}
@font-face{font-family:"AM Caption";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/93bd2fa9b8235fff74e7a30707282310.woff2") format("woff2")}
@font-face{font-family:"AM Caption";font-style:italic;font-weight:100 900;font-display:swap;src:url("../fonts/93bd2fa9b8235fff74e7a30707282310.woff2") format("woff2")}

:root{
  --u: min(1px, 0.0732064vw);   /* design unit for content */
  --bgu: 0.0732064vw;           /* design unit for full-bleed backgrounds */
  --nav-h: 48px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#141d27;color:#fff;font-family:"AM Text",Arial,sans-serif;overflow-x:hidden}
img{display:block;border:0}
a{color:inherit}

/* ---------- top navigation ---------- */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:flex-end;
     height:var(--nav-h);background:#000}
.nav-menu{display:flex;align-items:center;margin:0;padding:0 0 0 40px;list-style:none}
.nav-menu li{padding:12px 16px;color:#fff;
  font:400 15px/normal 'AM Sans',-apple-system,system-ui,sans-serif}
.nav-menu li.is-active{font-weight:700}
.nav-menu a{font:inherit;color:inherit;text-decoration:none}
.nav-toggle{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:34px;height:30px;padding:6px 4px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px}

/* ---------- page canvas ----------
   Sections keep their design height, but when the window is taller than the
   whole page they grow proportionally (flex-grow) so the page always fills the
   screen, exactly like the original. Content stays at design size, centred. */
.site{min-height:calc(100vh - var(--nav-h));display:flex;flex-direction:column}
.pg{position:relative;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;
    flex:var(--ph) 0 calc(var(--ph) * var(--u))}
.cv{position:relative;width:calc(1366 * var(--u));height:calc(var(--ph) * var(--u));flex:none}
.bg{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bg-cv{position:relative;flex:none;width:calc(1366 * var(--bgu));height:calc(var(--ph) * var(--bgu))}
.bg-el{position:absolute}
.bg-el img{position:absolute;max-width:none}

.el{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
a.el{display:block;text-decoration:none}
.im{overflow:hidden}
.im img{position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);height:var(--ih);max-width:none}
.sh svg{display:block;width:100%;height:100%;overflow:visible}
.tx{overflow:visible}
/* Canva rasterises canvas text with kerning and ligatures disabled and
   geometricPrecision metrics — matching that keeps every line break identical. */
.tx-in p{margin:0;padding:0;font-weight:400;
  font-kerning:none;font-feature-settings:"calt" 0,"clig" 0,"liga" 0;
  text-rendering:geometricPrecision;font-variant-ligatures:none}
.tx a{text-decoration:none}
.tx a:hover{text-decoration:underline}

/* ---------- mobile ---------- */
@media (max-width:1199px){
  .nav-menu{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
    background:#000;padding:6px 0;display:none;max-height:calc(100vh - var(--nav-h));overflow:auto}
  .nav-menu.is-open{display:flex}
  .nav-menu li{padding:12px 22px}
  .nav-menu a{display:block}
  .nav-toggle{display:flex}
}

/* ---------- mobile layout (<=1024px) ----------
   The 1366px canvas is unreadable on a phone, so below the breakpoint the
   original Canva site uses we hide it and show a generated flow stack. */
.m-sec{display:none}   /* also inlined on the element, so a stale cache can't leak it onto desktop */

@media (max-width:1024px){
  .site{display:block;min-height:0}
  .pg{display:block;height:auto;flex:none;overflow:visible}
  .pg > .cv,.pg > .bg{display:none}

  .m-sec{display:block !important;position:relative;padding:34px 20px;overflow:hidden}
  .m-sec > .m-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    max-width:none;margin:0;pointer-events:none;z-index:0}
  .m-sec > *{position:relative;z-index:1}

  .m-tx{margin:0 0 14px}
  /* Text that sits on top of an image keeps its position over it. */
  .m-stack{position:relative;width:100%;max-width:230px;margin:0 auto 16px;container-type:inline-size}
  .m-stack .m-im{width:100%;max-width:100%;margin:0}
  .m-over{position:absolute;z-index:2}
  .m-over .m-tx{margin:0}
  .m-over .m-tx p{text-align:center !important;line-height:1.1}
  .m-head{margin-top:24px}
  .m-sec > .m-head:first-child,.m-sec > *:first-child + .m-head{margin-top:0}
  .m-btn .m-head{margin-top:0}
  .m-tx:last-child{margin-bottom:0}
  .m-tx p{margin:0 0 2px;text-align:left !important;white-space:normal !important}
  .m-tx p:last-child{margin-bottom:0}
  .m-tx a{text-decoration:none}

  .m-im{position:relative;width:100%;max-width:520px;margin:0 auto 18px;overflow:hidden}
  .m-im img{position:absolute;max-width:none}
  .m-lk{display:block;margin:0 0 14px;text-decoration:none}
  .m-lk > .m-tx{margin:0}
  .m-lk > .m-im{margin-bottom:0}

  .m-btn{display:flex;align-items:center;justify-content:center;gap:0;min-height:50px;
    margin:0 0 12px;padding:12px 20px;text-decoration:none;text-align:center}
  .m-btn .m-tx{margin:0;width:auto}
  .m-btn .m-im{width:26px;flex:none;margin:0 10px 0 0}
  .m-btn .m-tx p{text-align:center !important}

  /* App-store / social badges and the logo shouldn't stretch across the screen */
  .m-sec > .m-im:first-child{max-width:230px;margin-left:0}

  /* Footer strips: one centred row of badges and icons, copyright underneath. */
  .m-foot{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:12px 16px;padding:26px 16px;text-align:center}
  .m-foot > *{margin:0 !important;flex:0 0 auto}
  .m-foot .m-im{margin:0 !important}
  .m-foot .m-tx{flex:0 0 100%;margin:0 !important}
  .m-foot .m-tx p{text-align:center !important}
  .m-foot .m-head{margin-top:0 !important}

  /* Contact page reads as a list, not a two-column canvas */
  [data-am="hours"] .am-hours-row{display:flex;gap:10px}
  [data-am="hours"] .am-hours-day{min-width:96px}
}

@media (max-width:600px){
  .m-sec{padding:28px 16px}
  .m-im{max-width:100%}
}