/* Hills type and finish, shared by both sites: Apple system font on Apple devices, Inter everywhere else. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2')}
:root{--font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Helvetica Neue','Segoe UI',Roboto,Arial,sans-serif}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:17px;line-height:1.5;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font);font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.hero h1{font-weight:700;letter-spacing:-.03em}
input,select,textarea,button{font-family:var(--font)}
.btn,.btn-outline,.btn-ghost,button.btn,.tab{letter-spacing:-.01em}
.eyebrow{letter-spacing:.08em}

/* softer, deeper surfaces */
.card,.tile,.side-box,.svc-card,.group-card,.filter-box,.values div{border-radius:18px}
.card{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07)}
.card:hover{box-shadow:0 2px 4px rgba(0,0,0,.05),0 18px 44px rgba(0,0,0,.12)}
.promo-photo,.wide-photo,.office-photo,.gallery-main,.feature-post img,.map-box,.map-box iframe{border-radius:18px}
.search-panel{box-shadow:0 24px 60px rgba(0,0,0,.28);border-radius:14px}
.search-panel .search-box{border-radius:0 14px 0 0}
.search-panel .strip{border-radius:0 0 14px 14px}
.site-footer .social{flex-wrap:wrap;gap:8px}

@media (min-width:900px){
body{font-size:17px}
.hero h1{font-size:64px;line-height:1.05;letter-spacing:-.03em}
.hero-inner>p{font-size:21px;line-height:1.45}
.block h2,.blast h2{font-size:44px;line-height:1.1;letter-spacing:-.025em;font-weight:600}
.block p.sub{font-size:19px}
.site-header nav a{font-size:15px;font-weight:500}
.btn{font-size:16px;font-weight:600}
}
@media (max-width:720px){
body{font-size:16px}
.hero h1{letter-spacing:-.025em}
}
/* phone: the logo strapline stays on one line, and steps aside on the narrowest screens */
@media (max-width:480px){.logo .logo-tag{font-size:10.5px;letter-spacing:0;white-space:nowrap}}
@media (max-width:374px){.logo .logo-tag{display:none}}

/* ---------- compact type scale (13 Nov 2026): reading text matches the menu size ---------- */
body{font-size:15px;line-height:1.55}
h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:20px}
h3{font-size:20px}
.hero p{font-size:17px}
.sub,.lead-text,.subhero .lead,.promo-text,.empty{font-size:17px}
.subhero h1{font-size:clamp(28px,3.4vw,40px)}
.tile{font-size:15px}.tile-title{font-size:20px}.tile-link{font-size:15px}
.card-title{font-size:18px}.card-text{font-size:15px}.card-date{font-size:13px}
.checks,.steps li,.trio p,.hours,.chips span,.chips a.chip-link{font-size:15px}
.prose{font-size:16px}.prose h2{font-size:26px}
.prop-title{font-size:16px}.prop-price{font-size:22px}.prop-meta,.prop-link{font-size:14px}
.prop-address{font-size:18px}.detail span{font-size:16px}.values div{font-size:20px}
.field input,.field select,.field textarea,.search-box input[type=text],.search-box select{font-size:15px}
table.fees tbody th,table.fees td{font-size:15px}
.footer-col h2{font-size:17px}.footer-col a{font-size:14px}.footer-small,.footer-small a,.footer-marks p{font-size:13px}
.strip{font-size:16px}.tab{font-size:15px}
.feature-title{font-size:clamp(22px,2.4vw,30px)}.art-head h1{font-size:clamp(28px,3.6vw,42px)}
.stat-num{font-size:clamp(28px,3.4vw,40px)}.stat-label{font-size:14px}
.review blockquote{font-size:15px}.faq summary{font-size:16px}
.btn,.btn-outline,.btn-ghost,button.btn{font-size:15px;padding:12px 24px}
@media (min-width:900px){
body{font-size:15px}
.hero h1{font-size:48px;line-height:1.08}
.hero-inner>p{font-size:18px;line-height:1.5}
.block h2,.blast h2{font-size:32px;line-height:1.15}
.block p.sub{font-size:17px}
.site-header nav a{font-size:15px}
.btn{font-size:15px}
.stat-num{font-size:40px}.stat-label{font-size:14px}
footer,footer a{font-size:14px}
}
@media (max-width:720px){
body{font-size:15px}
h2{font-size:24px}h3{font-size:19px}
.hero h1{font-size:clamp(26px,7.4vw,32px)}
.hero p{font-size:15px}
.btn,.btn-outline,button.btn{font-size:15px}
.mobile-list a{font-size:18px}
.sub,.lead-text,.subhero .lead{font-size:16px}
}
.blast-lead,.blast-lead a{font-size:17px}
.hc-main p.sub,.hc-main section p.sub{font-size:17px}

/* hero: London time-lapse still (shown on phones and before the film starts) */
.hero{background-image:url('/wp-content/uploads/2026/11/hills-hero-london-timelapse.jpg')!important;background-position:center 55%}
.hero-shade{background:rgba(20,16,26,.58)}

/* news cards show each article's own picture from the feed */
.news-card img{display:block;width:100%;height:190px;object-fit:cover}
.news-card::before{content:none;display:none}
