/* Pawthority - homepage. Loaded by index.html only, after css/site.css.
 *
 * The Direction A design, as drawn. css/site.css holds the fonts, the colour and type
 * tokens, .wrap, and the shared header and footer; everything else the homepage
 * needs is here. The homepage does not load css/styles.css, so the element rules at
 * the top (a, p, img, h1-h3, select) are safe: no other page ever sees them.
 *
 * One rule to a line, in the order of the page.
 */

/* -- Base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* -- Hero and search -- */
/* The photo is treated as on the borough pages (.hero-split-* in css/styles.css),
   not as the design drew it. From 1024px the hero is two columns, 55 to 45, across
   the whole window: the photo fills the right one from top to bottom and out to the
   window's edge, behind a curved white edge. Below that the photo sits above the
   text, 280px tall with a fade at its top, and on a phone it is set in by the page
   gutter. The left padding of the text column lines it up with .wrap on every other
   section: a percentage here is of the column, which is 55% of the hero, so
   90.909% of it is half the hero's width. */
.hero{display:flex;flex-direction:column}
.hero-text{padding:clamp(2.25rem,6vw,3rem) var(--gut) clamp(3rem,7vw,5.5rem)}
.hero-photo{position:relative;order:-1;min-height:280px;background:var(--mist)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero-photo::before{content:"";position:absolute;top:0;left:0;right:0;height:32px;background:linear-gradient(to bottom,#fff,transparent);z-index:2;pointer-events:none}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(40,45,53,.08) 0%,transparent 40%,transparent 60%,rgba(40,45,53,.04) 100%);pointer-events:none}
.hero-curve{display:none}
@media (max-width:767px){.hero-photo{margin:0 var(--gut)}}
@media (min-width:1024px){
 .hero{display:grid;grid-template-columns:55fr 45fr;min-height:620px}
 .hero-text{display:flex;flex-direction:column;justify-content:center;padding:4rem clamp(3rem,5vw,4.5rem) 4rem max(var(--gut),calc(90.909% - var(--wrap)/2 + var(--gut)))}
 .hero-photo{order:0;min-height:620px}
 .hero-photo::before{content:none}
 .hero-curve{display:block;position:absolute;left:0;top:0;bottom:0;width:80px;margin-left:-64px;z-index:1;pointer-events:none}
 .hero-curve svg{display:block;width:100%;height:100%}
}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem);max-width:18ch}
.lede{margin-top:1.3rem;font-size:clamp(1.06rem,1.6vw,1.2rem);color:var(--ink-2);max-width:44ch}
.search{margin-top:2rem;display:grid;gap:.8rem;max-width:38rem;padding:1rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 18px 40px -28px rgba(8,59,54,.45)}
@media (min-width:560px){.search{grid-template-columns:auto minmax(0,1fr) auto;align-items:end}}
@media (min-width:1024px) and (max-width:1199px){.search{grid-template-columns:auto minmax(0,1fr)}.search .btn{grid-column:1/-1}}
.search{position:relative;z-index:5}
.loc-field{position:relative}
.loc-field input{width:100%;font:500 1rem var(--sans);color:var(--ink);background:#fff;border:1.5px solid #B7C6C2;border-radius:10px;padding:.7rem .85rem;min-height:50px;transition:border-color .2s}
.loc-field input:hover{border-color:var(--teal)}
.loc-field input::placeholder{color:#6A7773}
.pop{position:absolute;left:0;top:calc(100% + 6px);width:max(100%,21rem);max-width:calc(100vw - 2.5rem);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 40px -20px rgba(8,59,54,.5);padding:.35rem;z-index:30}
.pop[hidden]{display:none}
.pop-note{margin:.2rem .2rem .3rem;padding:.6rem .75rem;border-radius:8px;background:#FFF3D6;font-size:.92rem;line-height:1.45;color:var(--ink)}
.pop-note:empty{display:none}
#loc-list{list-style:none;margin:0;padding:0;max-height:19rem;overflow:auto}
#loc-list:empty{display:none}
.opt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.62rem .75rem;border-radius:8px;cursor:pointer}
.opt[aria-selected=true]{background:var(--mist);box-shadow:inset 3px 0 0 var(--teal)}
.o-main{font-weight:500}
.o-main b{font-weight:700;color:var(--teal-d)}
.o-sub{font-size:.85rem;color:var(--muted);white-space:nowrap}
.opt.fill .o-sub{color:#7A5200}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 .35rem .1rem}
select{appearance:none;-webkit-appearance:none;width:100%;font:500 1rem var(--sans);color:var(--ink);background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2313201E' stroke-width='1.8'/></svg>") no-repeat right .85rem center/12px;border:1.5px solid #B7C6C2;border-radius:10px;padding:.7rem 2.1rem .7rem .85rem;min-height:50px;cursor:pointer;transition:border-color .2s}
select:hover{border-color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7rem 1.35rem;border:0;border-radius:10px;background:var(--teal);color:#fff;font:600 1rem var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,transform .15s}
.btn:hover{background:var(--teal-d)}
.btn:active{transform:translateY(1px)}
.form-msg{grid-column:1/-1;font-size:.92rem;font-weight:600;color:#A1321F}
.form-msg:empty{display:none}
.nojs{margin-top:.75rem;font-size:.92rem;color:var(--muted)}
.hero-note{margin-top:1.1rem;font-size:.95rem;color:var(--muted);max-width:44ch}
.hero-note a{color:var(--teal-d);font-weight:600;text-underline-offset:3px}

html:not(.js) .search{display:none}

/* -- Borough map -- */
.map-panel{background:var(--mist);border-radius:22px;padding:clamp(1rem,3vw,2.25rem);margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.b{scroll-margin-top:1.5rem}
.map-foot{display:grid;gap:.4rem}
@media (min-width:760px){.map-foot{grid-template-columns:1fr auto;align-items:start;gap:2rem}}
.map-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.map-title{font-family:var(--serif);font-weight:600;font-size:1.3rem}
.map-count{font-size:.92rem;color:var(--muted)}
.map{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(3px,.6vw,6px)}
.thames{grid-row:5;grid-column:1/-1;height:clamp(10px,1.6vw,16px);display:flex;align-items:center;gap:.5rem}
.thames svg{flex:1;min-width:0;height:100%;overflow:visible}
.thames path{fill:none;stroke:#7FAFC2;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.thames span{font:italic 500 .72rem/1 var(--serif);color:#3A6778}
.js .map .thames svg{clip-path:inset(0 100% 0 0)}
.js .map.in .thames svg{clip-path:inset(0 0 0 0);transition:clip-path 1.4s var(--ease) .5s}
.tile{aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:2px;border-radius:clamp(4px,.7vw,8px);font:700 clamp(.62rem,1.45vw,.78rem)/1 var(--sans);letter-spacing:.02em;text-decoration:none}
.tile.live{background:var(--teal-l);color:var(--teal-dd);transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.tile.live:hover,.tile.live:focus-visible{background:var(--teal);color:#fff;box-shadow:0 8px 16px -10px rgba(8,59,54,.8)}
.tile.live.sel{background:var(--amber);color:var(--ink)}
.tile.off{border:1.5px dashed #A2B2AE;color:#56645F;font-weight:600}
.t-name{display:none}
@media (min-width:760px){
 .map{gap:6px}
 .tile{aspect-ratio:auto;min-height:4.2rem;padding:.35rem .4rem;font:600 .82rem/1.15 var(--sans);letter-spacing:0}
 .t-code{display:none}.t-name{display:block}
 .thames{height:20px}
}
.map-readout{margin-top:1rem;min-height:3.2em;font-size:.98rem;color:var(--ink-2)}
.map-key{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.3rem;font-size:.86rem;color:var(--muted)}
.map-key i{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-2px;margin-right:.45rem}
.k-live{background:var(--teal-l)}
.k-off{border:1.5px dashed #A2B2AE}
.k-sel{background:var(--amber)}
.tile.live.none,.tile.live.none:hover,.tile.live.none:focus-visible{background:repeating-linear-gradient(135deg,#E2EBE9 0 4px,#F6F9F8 4px 8px);color:#56645F;box-shadow:inset 0 0 0 1.5px #C5D4D0;cursor:default}
.k-none{background:repeating-linear-gradient(135deg,#E2EBE9 0 3px,#F6F9F8 3px 6px);box-shadow:inset 0 0 0 1px #C5D4D0}
.js .map .tile{opacity:0;transform:scale(.55)}
.js .map.in .tile{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(var(--d)*60ms),transform .55s cubic-bezier(.3,1.5,.5,1) calc(var(--d)*60ms)}
.js .map.done .tile.live{transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.js .map.done .tile.live:hover,.js .map.done .tile.live:focus-visible{transform:translateY(-2px)}
.tile.live.near{box-shadow:inset 0 0 0 2px var(--amber)}
.tile.off.ask{border:1.5px solid var(--amber);background:#FFF1D2;color:var(--ink)}

/* -- Sections -- */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-head{max-width:42rem;margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.section-head p{margin-top:.95rem;color:var(--ink-2);font-size:1.1rem}

/* -- Services -- */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.services a{display:grid;gap:.3rem;padding:1.35rem 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
@media (min-width:780px){.services a{grid-template-columns:minmax(13rem,.9fr) 2fr auto;align-items:baseline;gap:2.5rem;padding:1.6rem 0}}
.services a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.services a:hover::before{transform:scaleX(1)}
.svc-name{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.15rem);font-weight:600;letter-spacing:-.015em;transition:color .2s}
.svc-desc{color:var(--ink-2)}
.svc-go{font-weight:600;font-size:.95rem;color:var(--teal-d)}
.services a:hover .svc-name{color:var(--teal)}
.services .minor a{padding:1rem 0}
.services .minor .svc-name{font-size:1.3rem}
.services .minor .svc-desc{font-size:.95rem;color:var(--muted)}

/* -- Top-rated picks -- */
.picks{padding-top:0}
.pick-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
@media (min-width:860px){.pick-list{grid-template-columns:repeat(3,1fr)}}
.pick{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.4rem 1.4rem 1.25rem;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:#fff;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.pick:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 18px 34px -26px rgba(8,59,54,.6)}
.pick-svc{font-size:.85rem;font-weight:600;color:var(--muted)}
.pick-name{font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.pick-rating{margin-top:.2rem;color:var(--ink-2)}
.pick-rating b{color:var(--ink)}
.star{color:#C98A0B;margin-right:.3rem}
.pick-place{font-size:.95rem;color:var(--muted)}
.pick-go{margin-top:auto;padding-top:.8rem;font-weight:700;color:var(--teal-d)}

/* -- Screening -- */
.screen{background:var(--mist)}
.rules{list-style:none;margin:0;padding:0 0 0 2rem;display:grid;gap:2.25rem;position:relative}
.rules::before,.rules::after{content:"";position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:2px;background:#C5D4D0}
.rules::after{background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--ease)}
.rules.in::after{transform:none}
.rule{position:relative}
.rule::before{content:"";position:absolute;left:-2rem;top:.35rem;width:16px;height:16px;border-radius:50%;background:var(--mist);border:2px solid #9FB3AE;transition:background .3s,border-color .3s;transition-delay:calc(var(--i)*300ms + 150ms)}
.rules.in .rule::before{background:var(--teal);border-color:var(--teal)}
@media (min-width:900px){
 .rules{padding:2.4rem 0 0;grid-template-columns:repeat(4,1fr);gap:2.5rem}
 .rules::before,.rules::after{left:0;right:0;top:.45rem;bottom:auto;width:auto;height:2px}
 .rules::after{transform:scaleX(0);transform-origin:left}
 .rules.in::after{transform:none}
 .rule::before{left:0;top:-2.4rem}
}
.rule-val{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:600;line-height:1;color:var(--teal-d);letter-spacing:-.02em}
.rule-label{font-weight:700;margin-top:.7rem;font-size:1.02rem}
.rule-text{margin-top:.35rem;color:var(--ink-2);font-size:.98rem;max-width:30ch}
.screen-foot{margin-top:clamp(2.25rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;color:var(--muted);font-size:.95rem}
.screen-foot a{color:var(--teal-d);font-weight:700;text-underline-offset:3px}
.statement{margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid #C5D4D0;display:grid;gap:1rem}
@media (min-width:900px){.statement{grid-template-columns:1fr 2fr;gap:3rem}}
.statement h3{font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:0;color:var(--muted);line-height:1.5}
.statement p{font-family:var(--serif);font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.25;letter-spacing:-.01em;max-width:30ch}

/* -- Borough list -- */
.boroughs{display:grid;gap:.6rem;align-items:start}
@media (min-width:620px){.boroughs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.boroughs{grid-template-columns:repeat(3,1fr)}}
.b{border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s}
.b:hover,.b[open]{border-color:#A9C2BC}
.b summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.95rem 1.05rem;font-weight:600;border-radius:12px}
.b summary::-webkit-details-marker{display:none}
.b summary svg{flex:none;transition:transform .25s var(--ease)}
.b[open] summary svg{transform:rotate(45deg)}
.b ul{list-style:none;margin:0;padding:.1rem 1.05rem 1.05rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem}
.b ul a{font-size:.95rem;color:var(--teal-d);text-underline-offset:3px;text-decoration-thickness:1px}
.b ul a:hover{text-decoration-thickness:2px}
.later{margin-top:1.75rem;color:var(--muted);font-size:.95rem;max-width:60ch}

/* -- For professionals -- */
.pros{background:var(--teal-dd);color:#D9E9E5}
.pros .wrap{display:grid;gap:2.75rem}
@media (min-width:920px){.pros .wrap{grid-template-columns:1.05fr 1fr;gap:4rem;align-items:start}}
.pros h2{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);max-width:15ch}
.pros-intro{margin-top:1.1rem;font-size:1.1rem;max-width:40ch}
.btn-amber{margin-top:1.75rem;background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:#F7C665}
.pro-points{margin:0}
.pro-points div{padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.16)}
.pro-points div:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.pro-points dt{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:#fff}
.pro-points dd{margin:.25rem 0 0}
.pros :focus-visible{outline-color:#fff}

/* -- Further reading -- */
.extras .wrap{display:grid;gap:1rem}
@media (min-width:760px){.extras .wrap{grid-template-columns:1.4fr 1fr}}
.card-link{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.4rem,3vw,2rem);border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:border-color .2s,transform .25s var(--ease)}
.card-link:hover{border-color:var(--teal);transform:translateY(-2px)}
.card-kicker{font-size:.9rem;font-weight:600;color:var(--muted)}
.card-link h3{font-size:clamp(1.5rem,3vw,2rem)}
.card-link p{color:var(--ink-2)}
.card-go{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--teal-d)}

/* -- Motion -- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{transition:none!important;animation:none!important}
 .js [data-reveal],.js .map .tile{opacity:1!important;transform:none!important}
 .js .map .thames svg{clip-path:none!important}
 .rules::after{transform:none!important}
 .rule::before{background:var(--teal)!important;border-color:var(--teal)!important}
}