/* Shared by both mobile designs of homepage 6: reset, controls, calendar dialog, sticky bar.
   Colours and radii come from tokens that each design sets on :root. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}a,summary,button{-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit}button{cursor:pointer}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.shots:focus-visible{outline:3px solid #996000;outline-offset:3px}
p{margin:0 0 16px}h1,h2,h3,h4{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
.ico{width:22px;height:22px;flex:none}
.wrap{width:min(1080px,calc(100% - 36px));margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;z-index:20;background:#fff;padding:12px}
.review{padding:8px 16px;background:var(--review-bg);color:var(--review-ink);text-align:center;font-size:12px;line-height:1.5}
.review a{margin-left:10px}

/* header */
.top{position:sticky;top:0;z-index:8;background:var(--header-bg);border-bottom:1px solid var(--line)}
.nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.logo{font-size:23px;font-weight:850;letter-spacing:-1px;text-decoration:none}.logo span{color:var(--logo-accent)}
.nav nav{display:none;position:absolute;top:100%;left:-18px;right:-18px;flex-direction:column;background:var(--header-bg);padding:8px 18px 18px;border-bottom:1px solid var(--line);box-shadow:0 14px 24px #0000001a}
.nav nav.is-open{display:flex}.nav nav a{padding:14px 4px;font-size:17px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}.nav nav a:last-child{border-bottom:0}
.nav-phone{display:none;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.menu-toggle{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-size:14px;font-weight:600}

/* buttons */
.actions{display:grid;gap:10px;margin:22px 0 14px}
.actions>strong{display:contents}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 20px;border-radius:var(--btn-radius);background:var(--accent);color:var(--on-accent);border:1.5px solid transparent;font-size:15px;font-weight:760;line-height:1.25;text-align:center;text-decoration:none}
.btn:hover{background:var(--accent-hover)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--btn-outline)}.btn.secondary:hover{background:var(--btn-outline-hover)}
.link-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;text-decoration:none}.link-row .ico{width:20px;height:20px}
.small{font-size:13.5px;color:var(--muted)}

/* project video (details) */
.project-video summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;font-weight:700;font-size:15px}
.project-video summary::-webkit-details-marker{display:none}
.project-video video{width:100%;max-height:520px;background:#101412;border-radius:10px;margin-top:14px}

/* horizontal swipe rows hide their scrollbar */
.shots,.expense-grid{scrollbar-width:none}.shots::-webkit-scrollbar,.expense-grid::-webkit-scrollbar{display:none}

/* sticky bar on phones */
.mobile-actions{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:7;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--header-bg);border-top:1px solid var(--line)}
.mobile-actions[hidden]{display:none}
.mobile-actions .btn{flex:1;min-height:48px;padding:9px 8px;font-size:13px}
footer{padding:26px 0 110px}.foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}.foot .logo{font-size:20px;color:var(--ink)}

/* calendar + expense viewer dialogs */
dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:26px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(10,16,13,.72)}body:has(dialog[open]){overflow:hidden}
dialog h2{font-size:28px;line-height:1.15;letter-spacing:-.8px;padding-right:24px}dialog p{font-size:15px}
dialog .eyebrow{font-size:12px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}
.close{position:absolute;right:10px;top:8px;border:0;background:none;color:var(--ink);font-size:28px;width:44px;height:44px}
.field{display:block;font-size:14px;font-weight:650;margin:18px 0}.field small{font-weight:400;color:var(--muted)}
textarea{display:block;width:100%;border:1px solid #a6b0a4;border-radius:10px;padding:12px;background:#fff;color:#101412;margin-top:7px;min-height:88px;resize:vertical}
.dialog-note{font-size:13px!important;color:var(--muted);margin-top:14px}
.calendar-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.calendar-nav strong{text-transform:capitalize;font-size:18px}
.calendar-nav button{width:44px;height:44px;background:#fff;border:1px solid var(--line);border-radius:10px;color:#101412}.calendar-nav button:disabled{opacity:.3}
.weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekdays{margin:14px 0 7px;text-align:center;font-size:12px;color:var(--muted)}
.calendar-days button{min-width:0;min-height:44px;border:1px solid var(--line);background:#fff;color:#101412;border-radius:8px;font-size:14px}
.calendar-days button:hover:enabled{border-color:var(--dark)}.calendar-days button:disabled{color:#a7aca5;background:transparent;border-color:transparent}
.calendar-days button[aria-pressed=true],.slot-list button[aria-pressed=true]{background:var(--dark);color:#fff;border-color:var(--dark)}
.selected-date{margin:12px 0 0;font-size:14px!important;font-weight:650;color:var(--dark)}
.error{color:#923f24;font-size:13px!important}.error:empty{display:none}
.slots{border:0;padding:0;margin:16px 0 0;min-width:0}.slots legend{font-size:14px;font-weight:650;margin-bottom:8px;padding:0}
.slot-list{display:flex;flex-wrap:wrap;gap:8px}.slot-list button{min-height:46px;min-width:84px;padding:0 16px;border:1px solid var(--line);background:#fff;color:#101412;border-radius:8px;font-size:15px}
.slot-list button:disabled{color:#a7aca5;background:transparent;border-color:transparent;cursor:not-allowed}
dialog .btn{width:100%;margin-top:6px}
dialog.expense-viewer{padding:18px}.expense-viewer-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}
.expense-viewer-heading h2{font-size:21px;margin:0;padding:0}.expense-viewer-heading button{flex:none;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#101412}
.expense-viewer>p{font-size:15px;line-height:1.5;margin:12px 0}.expense-viewer>img{width:100%;height:auto}

@media(min-width:900px){
  .wrap{width:min(1080px,calc(100% - 64px))}
  .menu-toggle{display:none}
  .nav{min-height:76px}
  .nav nav{display:flex;position:static;flex-direction:row;gap:24px;padding:0;border:0;box-shadow:none;background:transparent;margin-left:auto}
  .nav nav a{padding:0;font-size:14px;border:0}.nav nav a:hover{text-decoration:underline}
  .nav-phone{display:block}
  .actions{display:flex;flex-wrap:wrap}.btn{min-height:52px}
  .mobile-actions{display:none!important}footer{padding-bottom:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}