/* Static pages: /locations, /area/*, /operator/*, /space/*, the 404 page (seo-pages.js) and privacy, terms and
   sources (.html). They do not load app.css (630 KB, built for the one-page app), so this file carries the app's
   fonts, tokens and design language at page scale. Header and footer come from kf-chrome.css, as on the app;
   this file only lets the footer sit in the page flow and sizes the chrome for phones as the app does.
   Load order: kf-chrome.css, [policy.css], static.css. */

@font-face{font-family:'Suisse Int\'l';src:url('/fonts/SuisseIntl-Light.woff2') format('woff2'),url('/fonts/SuisseIntl-Light.ttf') format('truetype');font-weight:300;font-display:swap;}
@font-face{font-family:'Domaine Display Narrow';src:url('/fonts/DomaineDisplayNarrow-Medium.woff2') format('woff2'),url('/fonts/DomaineDisplayNarrow-Medium.otf') format('opentype');font-weight:500;font-display:swap;}

:root{
  --kf-red:#A6192E;--kf-red-dark:#7D1322;--ink:#1A1A1A;--ink-2:#2B2B2B;--paper:#F5F5F3;--paper-2:#EAE9E6;
  --line:#DBD9D5;--line-strong:#B7B4AE;--grey:#5E5D57;--grey-strong:#5E5D57;--white:#FFFFFF;
  --teal:#054F50;--full:#B23A2E;--status-available:#054F50;--status-full:#B23A2E;--status-unknown:#5E5D57;
  --r-tag:6px;--r-ctl:8px;--r-icon:10px;--r-card:12px;--r-pill:999px;--shadow-overlay:0 8px 24px rgba(26,26,26,.16);
  --font-body:'Suisse Int\'l','Helvetica Neue',Arial,sans-serif;
  --font-serif:var(--font-body);   /* policy.css titles: the app sets every heading in Suisse */
  --radius-card:12px;--radius-btn:8px;--gutter:16px;
}
@media (min-width:768px){:root{--gutter:24px;}}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  font:300 16px/1.55 var(--font-body);overflow-x:hidden;}
body>main{flex:1 0 auto;width:100%;}
img{max-width:100%;}
a{color:var(--kf-red);}
:focus-visible{outline:2px solid var(--kf-red);outline-offset:2px;}

/* ---- Chrome: the app's header and footer (kf-chrome.css), as static pages need them ---- */
html body .topbar-main .wordmark{color:inherit;text-decoration:none;}
html body .topbar-main .nav-link{text-decoration:none;}
html body .topbar-main :focus-visible{outline-offset:-2px;}
@media (max-width:767px){html body .topbar-main{padding:0 16px;}html body .topbar-main .nav-link{min-height:44px;}}
/* The shortlist count (shortlist-badge.js), as the app's .nav-badge in app.css. */
html body .topbar-main .nav-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;margin-left:5.4px;padding:1px 0 0 0.4px;
  border-radius:var(--r-ctl);background:var(--kf-red);color:var(--white);font-size:11px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
html body .topbar-main .nav-badge[hidden]{display:none;}
/* In the page flow, not fixed: the body is a full-height column, so on a short page it still sits at the bottom. */
html body .kf-site-footer{position:static;flex:none;}
html body .kf-site-footer .kf-footer-link:focus-visible,html body .kf-footer-links .kfc-hero-btn:focus-visible{outline-offset:0;}
/* Flex vs conventional office: kf-compare.js puts its button in the footer links; styled as a link, as in app.css. */
html body .kf-footer-links .kfc-hero-btn{margin:0;min-height:0;padding:3.6px 0;gap:0;border:0;border-radius:0;background:none;color:#5E5D57;font:inherit;font-size:11px;font-weight:500;white-space:nowrap;cursor:pointer;}
html body .kf-footer-links .kfc-hero-btn::before{content:"\00b7";margin-right:7.2px;color:#B7B4AE;font-weight:400;}
html body .kf-footer-links .kfc-hero-btn:hover{background:none;color:var(--kf-red);}
html body .kf-footer-links .kfc-hero-btn>[aria-hidden]{display:none;}
/* Phones: two rows as on the app, copy over links, every link a 44px target. */
@media (max-width:640px){
  html body .kf-site-footer{display:block;height:auto;padding:10px 16px calc(6px + env(safe-area-inset-bottom,0px));}
  html body .kf-footer-inner{display:flex;flex-direction:column;align-items:center;gap:2px;}
  html body .kf-footer-copy{flex:none;font-size:11px;line-height:16px;text-align:center;white-space:normal;}
  html body .kf-footer-links{flex-wrap:wrap;justify-content:center;gap:0 10px;}
  html body .kf-footer-sep,html body .kf-footer-links .kfc-hero-btn::before{display:none;}
  html body .kf-footer-link,html body .kf-footer-links .kfc-hero-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 1px;font-size:11px;}
}

/* ---- Page ---- */
.page{max-width:1080px;margin:0 auto;padding:24px var(--gutter) 56px;}
@media (min-width:768px){.page{padding-top:32px;padding-bottom:72px;}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin:0 0 12px;font-size:13px;color:var(--grey-strong);}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--grey-strong);text-decoration:none;}
.crumbs a:hover{color:var(--kf-red);text-decoration:underline;}
.crumbs>span{display:inline-flex;align-items:center;gap:6px;}
.eyebrow{margin:0 0 6px;font-size:14px;font-weight:500;color:var(--kf-red);}
.eyebrow a{color:inherit;}
.page h1{margin:0 0 12px;font-family:var(--font-body);font-weight:400;font-size:clamp(28px,calc(20px + 2.5vw),40px);line-height:1.1;letter-spacing:-0.01em;text-wrap:balance;}
.page h2{margin:40px 0 12px;font-family:var(--font-body);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-0.005em;}
.page h2 a{color:var(--ink);text-decoration:none;}
.page h2 a:hover{color:var(--kf-red);}
.page h2 small{font-size:14px;color:var(--grey-strong);}
.lead{max-width:720px;margin:0 0 20px;font-size:16px;color:var(--grey-strong);}
.note{max-width:760px;font-size:13px;color:var(--grey-strong);}

/* Buttons: crimson primary, ink-outline secondary, as on the app. */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--kf-red);border-radius:var(--radius-btn);
  background:var(--kf-red);color:var(--white);font-size:14px;font-weight:500;text-decoration:none;transition:background-color 150ms,border-color 150ms;}
.btn:hover{background:var(--kf-red-dark);border-color:var(--kf-red-dark);}
.btn.ghost{background:var(--white);border-color:var(--ink);color:var(--ink);}
.btn.ghost:hover{background:var(--paper-2);}
@media (max-width:479px){.cta .btn{flex:1 1 100%;}}

/* Availability chip: the app's card status chip, a white tag with a coloured dot. */
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-tag);background:var(--white);
  font-size:12px;font-weight:500;line-height:1.2;color:var(--ink);}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--status,var(--grey-strong));}
.status.available{--status:var(--status-available);}
.status.full{--status:var(--status-full);}
.status.unknown{--status:var(--grey-strong);}

/* Fact tiles: two columns on a phone, three wider; the last tile widens so no row is left with one. */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0;}
.facts>div{min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);}
.facts>div:last-child:nth-child(odd){grid-column:1 / -1;}
@media (min-width:720px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .facts>div:last-child:nth-child(odd){grid-column:auto;}
  .facts>div:last-child:nth-child(3n+1){grid-column:1 / -1;}
  .facts>div:last-child:nth-child(3n+2){grid-column:span 2;}
}
.facts dt{font-size:13px;color:var(--grey-strong);}
.facts dd{margin:4px 0 0;font-size:16px;overflow-wrap:anywhere;}
.facts small{font-size:13px;color:var(--grey-strong);}

.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:20px 0;}
.photos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-card);background:var(--line);}

/* Space cards: the whole card is the link. */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px;margin:0;padding:0;list-style:none;}
.list li{position:relative;padding:16px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);transition:border-color 150ms;}
.list li:hover{border-color:var(--ink);}
.list a.name{font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;}
.list a.name::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.list li:hover a.name{color:var(--kf-red);}
.list a.name:focus-visible{outline:none;}
.list li:has(a.name:focus-visible){outline:2px solid var(--kf-red);outline-offset:2px;}
.list .meta{margin-top:4px;font-size:14px;color:var(--grey-strong);}

/* Area and operator lists: 44px rows. */
.areas{columns:4 150px;column-gap:24px;margin:0;padding:0;list-style:none;color:var(--grey-strong);}
.areas li{break-inside:avoid;display:flex;align-items:center;min-height:44px;gap:4px;}
/* With a count: name left, count right on the name's first line, however the name wraps. */
.areas li:has(.n){align-items:baseline;justify-content:space-between;gap:12px;}
.areas .n{flex:none;font-variant-numeric:tabular-nums;}
.areas a{display:inline-flex;align-items:center;min-height:44px;color:var(--kf-red);text-decoration:none;}
.areas a:hover{text-decoration:underline;}
.areas+.list{margin-top:14px;}

/* ---- Privacy, terms and sources (policy.css), on the same scale ---- */
html body .policy-wrap{max-width:760px;padding:24px var(--gutter) 64px;}
@media (min-width:768px){html body .policy-wrap{padding-top:40px;padding-bottom:80px;}}
html body .back-link{min-height:44px;margin-bottom:12px;font-size:14px;font-weight:500;}
html body .policy-eyebrow{font-size:14px;font-weight:500;margin:0 0 6px;}
html body .policy-title{margin:0 0 12px;font-family:var(--font-body);font-weight:400;font-size:clamp(28px,calc(20px + 2.5vw),40px);line-height:1.1;letter-spacing:-0.01em;}
html body .policy-meta{font-size:14px;margin:0 0 32px;padding-bottom:20px;}
html body .policy-section{margin-bottom:32px;}
html body .policy-section h2{margin:0 0 10px;font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.3;}
html body .policy-section p,html body .policy-section ul li{margin-top:0;font-size:16px;line-height:1.55;color:var(--ink-2);}
html body .policy-section p{margin-bottom:12px;}
html body .policy-section ul{margin:8px 0 12px;padding-left:20px;}
html body .policy-section a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;}
/* Tables scroll sideways inside their own box on a phone instead of being clipped. */
.table-scroll{max-width:100%;margin:12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--white);}
html body .table-scroll .policy-table{display:table;min-width:560px;margin:0;font-size:14px;}
html body .policy-table th{font-size:13px;padding:10px 14px;}
html body .policy-table td{padding:10px 14px;}
html body .table-scroll tr:last-child td{border-bottom:0;}
html body .policy-section .policy-table a{overflow-wrap:normal;}   /* a link name never breaks mid-word in a narrow column */
/* Where the 560px table is wider than the box, say so; the caption stays put while the table scrolls. */
@media (max-width:599px){.table-scroll::before{content:"Scroll sideways to see every column";position:sticky;left:0;display:block;padding:8px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--grey-strong);}}
html body .policy-contact-card{border-radius:var(--radius-card);background:var(--white);}

/* b and strong: the Light face at 500, never a synthesised bold */
:where(b,strong,th,dt){font-weight:500;}
@media (max-width:767px){html body .topbar-main .wordmark{min-height:44px;display:inline-flex;align-items:center;}}