/* meetkati.com — one stylesheet for every page.
   The accent color lives in ONE place: --accent below. Red today; blue was #1230FF. */
@font-face{font-family:"Inter";src:url(fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/InterVariable-Italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --accent:#FF3120;
  --ink:#161616;
  --page:#F4F4F3;
  --panel:#E6E6E5;
  --mute:#6B6B6B;
  --line:#B9B9B8;
  --hdr:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:560px;margin:0 auto}
img{display:block;max-width:100%}
a{color:inherit}

/* ── header ───────────────────────────── */
.hdr{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#fff;border-bottom:1px solid #e2e2e2;position:sticky;top:0;z-index:20}
.logo{font-weight:200;font-size:30px;letter-spacing:.06em;line-height:1;text-decoration:none;color:var(--ink)}
.menu-btn{width:44px;height:44px;margin-right:-11px;background:none;border:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.menu-btn span{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);transition:transform .35s ease}
.menu-btn span:before,.menu-btn span:after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%)}
.menu-btn span:before{width:20px;height:1px}
.menu-btn span:after{width:1px;height:20px}
body.menu-open .menu-btn span{transform:translate(-50%,-50%) rotate(45deg)}

/* ── menu ─────────────────────────────── */
.menu{position:fixed;top:var(--hdr);left:0;right:0;bottom:0;background:var(--page);z-index:19;padding:60px 22px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
body.menu-open{overflow:hidden}
body.menu-open .menu{opacity:1;visibility:visible}
.menu a{display:block;font-weight:800;text-transform:uppercase;font-size:30px;letter-spacing:-.02em;line-height:1.05;text-decoration:none;color:var(--accent)}
.menu a:active,.menu a[aria-current="page"]{color:var(--ink)}
.menu .sm{position:absolute;bottom:34px;left:22px;font-size:11px;letter-spacing:.14em;color:var(--mute)}
@media (hover:hover){.menu a:hover{color:var(--ink)}}

/* ── photos (swap-able) ───────────────── */
.slot{background:var(--panel);overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:0;transition:opacity .5s ease}
.slot img.ready{opacity:1}
.inset{padding:20px 20px 0}
.inset .slot{aspect-ratio:2/3}
.over{position:relative}
.over .slot{aspect-ratio:390/420}
.over .slot img{object-position:50% 22%;filter:grayscale(1) brightness(.6)}
.over .slot img.ready{opacity:1}
.over .w{position:absolute;left:22px;bottom:26px;color:#fff;font-weight:800;text-transform:uppercase;font-size:64px;line-height:.9;letter-spacing:-.03em;pointer-events:none}
.over.short .slot{aspect-ratio:390/360}

/* ── type ─────────────────────────────── */
.quote{padding:34px 22px 44px;position:relative}
.quote .q{padding-left:44px}
.qm{position:absolute;left:14px;top:22px;color:var(--accent);font-weight:900;font-size:64px;line-height:1;font-family:Georgia,"Times New Roman",serif}
.q{font-weight:800;text-transform:uppercase;color:var(--accent);font-size:44px;line-height:.92;letter-spacing:-.025em}
.big{padding:44px 22px 8px;font-weight:800;text-transform:uppercase;font-size:58px;line-height:.9;letter-spacing:-.03em;color:var(--accent)}
.para{padding:30px 22px 8px;font-size:15px;line-height:1.5;max-width:360px}
.body{padding-top:30px}
.body p{padding:0 22px;font-size:15.5px;line-height:1.5;margin:0 0 18px;max-width:380px}
.body p.lead{font-size:20px;line-height:1.3;font-weight:500}
.body em{font-style:normal;font-weight:600}
.body p.quiet{color:var(--mute)}
.pull{margin:8px 22px 28px;color:var(--accent);font-weight:800;text-transform:uppercase;font-size:32px;line-height:.95;letter-spacing:-.02em;max-width:380px}

/* ── buttons ──────────────────────────── */
.btn{display:inline-block;margin:20px 22px 40px;border:1.5px solid var(--ink);padding:13px 20px;font-size:11px;letter-spacing:.08em;font-weight:600;text-decoration:none;color:var(--ink);background:none;font-family:inherit;cursor:pointer;text-transform:uppercase}
.btn.accent{border-color:var(--accent);color:var(--accent)}
@media (hover:hover){.btn:hover{background:var(--ink);color:#fff}.btn.accent:hover{background:var(--accent);color:#fff}}

/* ── LE page ─────────────────────────── */
.le-h{padding:44px 22px 6px;font-weight:800;text-transform:uppercase;color:var(--accent);font-size:40px;line-height:.92;letter-spacing:-.025em}
.le-h .say{font-weight:200;font-style:italic;letter-spacing:0}
.sign{padding:0 22px;font-weight:200;font-size:30px;letter-spacing:.06em;margin:-4px 0 6px}

/* ── LE page phone ────────────────────── */
.phone-wrap{padding:10px 40px 0;overflow:hidden}
.phone-wrap img{width:100%;height:auto;border-radius:38px 38px 0 0}

/* ── form ─────────────────────────────── */
.form{padding:10px 22px 40px}
.form label{display:block;font-size:11px;letter-spacing:.14em;font-weight:600;margin:26px 0 4px;color:var(--mute)}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:8px 0;outline:none;-webkit-appearance:none}
.form textarea{border:1.5px solid var(--line);height:130px;padding:10px;margin-top:10px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.form .btn{margin:34px 0 0}
.hp{position:absolute;left:-9999px}

/* ── footer ───────────────────────────── */
.foot{padding:22px 22px 30px;font-size:11px;letter-spacing:.12em;color:var(--mute);display:flex;justify-content:space-between;background:var(--panel)}
.foot a{text-decoration:none}
.foot nav a+a:before{content:"·";margin:0 8px}

/* ── wider screens: keep the phone-shaped column, centered ── */
@media (min-width:700px){
  .hdr{padding:0 max(20px,calc(50vw - 260px))}
  .foot{padding-left:max(22px,calc(50vw - 258px));padding-right:max(22px,calc(50vw - 258px))}
  .menu{padding-left:max(22px,calc(50vw - 258px))}
  .menu a{font-size:44px}
}