/* Kings & Queens - the house's own pages (on top of main.css): the live footer's pages, rebuilt plainly (Jeff, 15-10-2026: "they
   dont have to be extravagant, match them up to whats on the current live site"). About, contact, FAQ, part exchange, valuation,
   service & repair, watch care, the journal and the four policies. The account's head (where you are, a big title, a line), then
   paper: a heading on the left and its words on the right, a few plain parts (a list, three steps, questions, the enquiry form,
   the showroom). The copy is the live site's. Everything is scoped under .pg / .pg-*. */

.pg{
  --pg-card:#FFFDF9;                         /* the account's whiter paper */
  --pg-line:rgba(18,21,18,.12);
  --pg-field:rgba(18,21,18,.22);
  --pg-r:20px;
  --pg-lift:0 1px 2px rgba(13,26,19,.05),0 12px 30px -20px rgba(13,26,19,.3);
  --pg-bad:#9a3f2f;
}
.pg :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.pg [hidden]{display:none!important}

/* ---------- the head: where you are, the title, its line ---------- */
.pg-top{position:relative;overflow:hidden;padding:clamp(128px,14vw,172px) 0 clamp(44px,5vw,76px)}
.pg-ro{position:absolute;right:-14vw;top:-38%;width:min(64vw,860px);opacity:.42;pointer-events:none;user-select:none}
.pg-top-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:end;gap:22px clamp(32px,5vw,96px);max-width:1360px;margin:0 auto}
.pg-crumbs{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,228,.55)}
.pg-crumbs a{transition:color calc(var(--beat)*2) linear}
.pg-crumbs a:hover{color:var(--gilt)}
.pg-crumbs [aria-current]{color:var(--vellum)}
.pg-h1{font:400 clamp(46px,6.2vw,108px)/.95 var(--display);letter-spacing:-.018em;color:var(--vellum)}
.pg-h1 em{color:var(--brass)}
.pg-h1.is-long{font-size:clamp(42px,5vw,84px)}
.pg-aside{display:grid;gap:24px;padding-bottom:6px}
.pg-lede{font-size:17px;line-height:1.62;color:rgba(243,238,228,.74)}
.pg-lede a{color:var(--gilt);transition:color calc(var(--beat)*2) linear}
.pg-lede a:hover{color:var(--vellum)}
.pg-meta{font:400 11.5px/1.7 var(--mono);letter-spacing:.08em;color:var(--sage)}
.pg-ctas{display:flex;flex-wrap:wrap;gap:12px}
.pg-ctas .btn{height:54px;padding:0 26px}

/* ---------- paper: sections of a heading and its words ---------- */
.pg-body{padding:clamp(56px,7vw,112px) 0}
.pg-in{max-width:1360px;margin:0 auto}
.pg-sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:30px;padding:clamp(48px,6vw,96px) 0;border-top:1px solid var(--pg-line)}
.pg-in > .pg-sec:first-child{padding-top:0;border-top:0}
.pg-in > .pg-sec:last-child{padding-bottom:0}
.pg-sec-h{grid-column:1 / span 5;align-self:start;position:sticky;top:112px}
.pg-sec-b{grid-column:7 / -1;min-width:0}
.pg-sec-h .lab{display:block;margin-bottom:18px;color:var(--bronze)}
.pg-h2{font:400 clamp(30px,3.2vw,52px)/1.04 var(--display);letter-spacing:-.012em;color:var(--ink)}
.pg-h2 em{color:var(--bronze)}
.pg-sec-h p{margin-top:20px;font-size:16px;line-height:1.65;color:var(--graphite)}
.pg-h3{font:400 clamp(22px,1.8vw,28px)/1.15 var(--display);letter-spacing:-.006em;color:var(--ink)}
.pg-text{font-size:17px;line-height:1.7;color:var(--graphite)}
.pg-text > * + *{margin-top:18px}
.pg-text > .pg-h3{margin-top:40px}
.pg-text > .pg-h3:first-child{margin-top:0}
.pg-text > .pg-h3 + *{margin-top:12px}
.pg-text strong,.pg-text b{font-weight:500;color:var(--ink)}
.pg-text a,.pg-list a,.pg-a a,.pg-prose a,.pg-tick a{color:var(--bronze);transition:color calc(var(--beat)*2) linear}
.pg-text a:hover,.pg-list a:hover,.pg-a a:hover,.pg-prose a:hover,.pg-tick a:hover{color:var(--brass)}
/* a plain list: a short brass rule for a bullet */
.pg-text ul,.pg-a ul,.pg-prose ul{list-style:none}
.pg-text ul li,.pg-a ul li,.pg-prose ul li{position:relative;padding-left:24px}
.pg-text ul li + li,.pg-a ul li + li,.pg-prose ul li + li{margin-top:8px}
.pg-text ul li:before,.pg-a ul li:before,.pg-prose ul li:before{content:"";position:absolute;left:2px;top:.84em;width:9px;height:1px;background:var(--brass)}
.pg-say{font:400 clamp(24px,2.1vw,34px)/1.22 var(--display);letter-spacing:-.008em;color:var(--ink)}   /* a statement set large */
.pg-say + p{margin-top:22px}

/* the reasons: a numbered list, each with its lead in ink */
.pg-list{list-style:none;counter-reset:pg;border-top:1px solid var(--pg-line)}
.pg-list li{counter-increment:pg;display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px 18px;padding:24px 0;border-bottom:1px solid var(--pg-line)}
.pg-list li:before{content:counter(pg,decimal-leading-zero);grid-row:1 / span 2;font:400 12px/1.9 var(--mono);letter-spacing:.08em;color:var(--bronze)}
.pg-list b{font:500 17.5px/1.4 var(--sans);color:var(--ink)}
.pg-list span{font-size:16px;line-height:1.65;color:var(--graphite)}

/* three steps, side by side */
.pg-steps{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);list-style:none}
.pg-steps li{display:grid;align-content:start;gap:14px;padding:clamp(26px,2.6vw,38px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
.pg-steps i{font:400 44px/1 var(--display);font-style:normal;color:var(--brass)}
.pg-steps b{font:400 clamp(22px,1.8vw,27px)/1.15 var(--display);color:var(--ink)}
.pg-steps span{font-size:16px;line-height:1.65;color:var(--graphite)}

/* links on to the house's other services */
.pg-links{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.pg-links a{display:grid;align-content:start;gap:12px;padding:clamp(26px,2.6vw,38px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07);transition:box-shadow calc(var(--beat)*3) var(--sweep),transform calc(var(--beat)*3) var(--sweep)}
.pg-links a:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(13,26,19,.06),0 24px 44px -24px rgba(13,26,19,.4),inset 0 0 0 1px rgba(184,153,95,.5)}
.pg-links b{display:flex;align-items:center;justify-content:space-between;gap:16px;font:400 clamp(24px,2vw,30px)/1.15 var(--display);color:var(--ink)}
.pg-links b svg.i{width:20px;height:20px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.pg-links a:hover b svg.i{transform:translateX(4px)}
.pg-links span{font-size:16px;line-height:1.65;color:var(--graphite)}

/* ---------- questions: the product page's accordion, a size down ---------- */
.pg-faq{border-bottom:1px solid var(--pg-line)}
.pg-q{border-top:1px solid var(--pg-line)}
.pg-q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;cursor:pointer;font:400 clamp(21px,1.7vw,26px)/1.25 var(--display);color:var(--ink);transition:color calc(var(--beat)*2) linear}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary:hover{color:var(--bronze)}
.pg-q summary svg.i{width:20px;height:20px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.pg-q.is-open summary svg.i,.pg-q[open]:not(.js-acc) summary svg.i{transform:rotate(45deg)}
.pg-a{padding-bottom:26px;max-width:640px;overflow:hidden;font-size:16px;line-height:1.7;color:var(--graphite)}
.pg-a > * + *{margin-top:12px}
.pg-faq-g + .pg-faq-g{margin-top:clamp(40px,4vw,64px)}
.pg-faq-g > .lab{display:block;margin-bottom:16px;color:var(--bronze)}

/* the FAQ's own page: the topics on the left, the questions on the right */
.pg-topics{list-style:none;display:grid;gap:4px}
.pg-topics a{display:flex;align-items:center;gap:12px;padding:7px 0;font:500 15px/1.3 var(--sans);color:var(--graphite);transition:color calc(var(--beat)*2) linear}
.pg-topics a:before{content:"";width:14px;height:1px;background:var(--pg-line);transition:width calc(var(--beat)*3) var(--sweep),background-color calc(var(--beat)*2) linear}
.pg-topics a:hover,.pg-topics a.on{color:var(--ink)}
.pg-topics a:hover:before,.pg-topics a.on:before{width:26px;background:var(--brass)}
.pg-faq-g{scroll-margin-top:110px}

/* ---------- the showroom: a dark band, the photograph and the two ways to arrange a visit ---------- */
.pg-band{position:relative;overflow:hidden;padding:clamp(64px,8vw,128px) 0}
.pg-band-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:36px;align-items:center;max-width:1360px;margin:0 auto}
.pg-band-ph{grid-column:1 / span 6;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px}
.pg-band-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.pg-band-ph:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(220,198,154,.18);pointer-events:none}
.pg-band-t{grid-column:8 / -1;display:grid;gap:22px;justify-items:start}
.pg-band-t .lab{color:var(--brass)}
.pg-band .pg-h2{color:var(--vellum)}
.pg-band .pg-h2 em{color:var(--brass)}
.pg-band p{font-size:17px;line-height:1.65;color:rgba(243,238,228,.74)}
.pg-band p a{color:var(--gilt);transition:color calc(var(--beat)*2) linear}
.pg-band p a:hover{color:var(--vellum)}
.pg-band ul{list-style:none;display:grid;gap:8px;margin-top:-6px}
.pg-band li{position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:rgba(243,238,228,.74)}
.pg-band li:before{content:"";position:absolute;left:2px;top:.8em;width:9px;height:1px;background:var(--brass)}

/* ---------- the enquiry form: the account's fields (boxed, labels above) ---------- */
.pg-form{display:grid;gap:22px}
.pg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.pg-f{display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-f-w{grid-column:1 / -1}
.pg-f label{font:500 14px/1.3 var(--sans);color:var(--ink)}
.pg-opt{font-weight:400;color:var(--taupe)}
.pg-f input,.pg-f textarea{display:block;width:100%;height:56px;padding:0 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--pg-field);font:400 16px/1.4 var(--sans);color:var(--ink);transition:box-shadow calc(var(--beat)*2) linear}
.pg-f textarea{height:auto;min-height:140px;padding:15px 16px;resize:vertical;border:0;outline:0}
.pg-f input:hover,.pg-f textarea:hover{box-shadow:inset 0 0 0 1px rgba(18,21,18,.38)}
.pg-f input:focus,.pg-f textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--brass),0 0 0 4px rgba(184,153,95,.2)}
.pg-f [aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--pg-bad)}
.pg-err{font:400 13.5px/1.4 var(--sans);color:var(--pg-bad)}
.pg-ticks{display:grid;gap:14px}
.pg-tick{display:flex;align-items:flex-start;gap:12px;font:400 15px/1.5 var(--sans);color:var(--graphite);cursor:pointer}
.pg-tick input{appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--pg-field);cursor:pointer;transition:background-color calc(var(--beat)*2) linear}
.pg-tick input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCC69A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
.pg-tick input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--pg-bad)}
.pg-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.pg-send .btn{height:56px}
.pg-done{display:grid;gap:10px;padding:clamp(24px,2.6vw,34px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(184,153,95,.45)}
.pg-done b{display:flex;align-items:center;gap:12px;font:400 clamp(22px,1.9vw,28px)/1.2 var(--display);color:var(--ink)}
.pg-done b svg.i{width:22px;height:22px;color:var(--bronze)}
.pg-done span{font-size:16px;line-height:1.6;color:var(--graphite)}

/* ---------- contact: the showroom's card beside the form ---------- */
.pg-contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,4vw,64px) clamp(32px,5vw,96px);align-items:start}
.pg-contact > div{display:grid;gap:22px;min-width:0}
.pg-visit{display:grid;align-content:start;gap:26px;padding:clamp(26px,2.8vw,40px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
.pg-visit address{font:400 clamp(22px,1.8vw,27px)/1.3 var(--display);font-style:normal;color:var(--ink)}
.pg-visit dl{display:grid;gap:14px}
.pg-visit dl div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;padding-top:14px;border-top:1px solid var(--pg-line)}
.pg-visit dt{font:400 11px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.pg-visit dd{font-size:16px;line-height:1.6;color:var(--ink)}
.pg-visit dd a{transition:color calc(var(--beat)*2) linear}
.pg-visit dd a:hover{color:var(--bronze)}
.pg-visit figure{aspect-ratio:3/2;overflow:hidden;border-radius:12px}
.pg-visit figure img{width:100%;height:100%;object-fit:cover}
/* the contact page's map (parts/pg-map.php): Google's, behind this card until the banner's consent or a click (js/page.js) */
.pg-mapw{margin-top:clamp(48px,5vw,80px)}
.pg-map{position:relative;aspect-ratio:16/6;min-height:360px;overflow:hidden;border-radius:var(--pg-r);background:var(--pg-card);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
.pg-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-map-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:28px;text-align:center}
.pg-map-ph > svg.i{width:30px;height:30px;color:var(--bronze)}
.pg-map-a{font:400 clamp(21px,1.7vw,26px)/1.3 var(--display);color:var(--ink)}
.pg-map-n{font-size:15px;line-height:1.6;color:var(--graphite)}
.pg-map-b{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.pg-map-b .btn{height:52px;padding:0 24px}
.pg-map.is-on .pg-map-ph{display:none}

/* ---------- the policies: the contents on the left, the document on the right ---------- */
.pg-doc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--g) clamp(32px,5vw,96px);align-items:start}
.pg-toc{position:sticky;top:112px}
.pg-toc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.pg-toc summary::-webkit-details-marker{display:none}
.pg-toc summary .lab{color:var(--bronze)}
.pg-toc summary svg.i{width:18px;height:18px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.pg-toc[open] summary svg.i{transform:rotate(45deg)}
@media (min-width:901px){ .pg-toc summary{pointer-events:none;cursor:default} .pg-toc summary svg.i{display:none} }   /* beside the text it stays open */
.pg-toc ol{list-style:none;display:grid;gap:2px;margin-top:16px;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:thin}
.pg-toc a{display:flex;align-items:center;gap:12px;padding:6px 0;font:500 14px/1.35 var(--sans);color:var(--graphite);transition:color calc(var(--beat)*2) linear}
.pg-toc a:before{content:"";flex:none;width:12px;height:1px;background:var(--pg-line);transition:width calc(var(--beat)*3) var(--sweep),background-color calc(var(--beat)*2) linear}
.pg-toc a:hover,.pg-toc a.on{color:var(--ink)}
.pg-toc a:hover:before,.pg-toc a.on:before{width:24px;background:var(--brass)}
.pg-prose{max-width:760px;font-size:17px;line-height:1.72;color:var(--graphite)}
.pg-prose > * + *{margin-top:16px}
.pg-prose h2{scroll-margin-top:110px;margin-top:56px;font:400 clamp(26px,2.3vw,36px)/1.12 var(--display);letter-spacing:-.008em;color:var(--ink)}
.pg-prose h2:first-child{margin-top:0}
.pg-prose h3{scroll-margin-top:110px;margin-top:32px;font:500 18px/1.4 var(--sans);color:var(--ink)}
.pg-prose h2 + *,.pg-prose h3 + *{margin-top:12px}
.pg-prose strong{font-weight:500;color:var(--ink)}
.pg-prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.pg-prose th{padding:12px 14px 12px 0;text-align:left;font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);border-bottom:1px solid var(--pg-line)}
.pg-prose td{padding:14px 14px 14px 0;vertical-align:top;border-bottom:1px solid var(--pg-line);color:var(--graphite)}
.pg-prose td:first-child{font-weight:500;color:var(--ink)}
.pg-prose .pg-caps{font:500 14.5px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}   /* the live policy's capitals */

/* ---------- the journal: the latest articles, twelve at a time ---------- */
.pg-posts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) var(--g)}
.pg-post a{display:grid;align-content:start;gap:14px}
.pg-post-im{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--stone)}
.pg-post-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--sweep)}
.pg-post a:hover .pg-post-im img{transform:scale(1.045)}
.pg-post-m{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.pg-post-m time{color:var(--taupe)}
.pg-post-t{font:400 clamp(22px,1.75vw,28px)/1.18 var(--display);letter-spacing:-.006em;color:var(--ink);transition:color calc(var(--beat)*2) linear}
.pg-post a:hover .pg-post-t{color:var(--bronze)}
.pg-post-x{font-size:15.5px;line-height:1.62;color:var(--graphite);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-post .link{margin-top:2px;color:var(--ink)}
.pg-post a:hover .link{color:var(--bronze)}
.pg-post a:hover .link svg.i:last-child{transform:translate(3px,-3px)}
.pg-more{display:flex;justify-content:center;margin-top:clamp(48px,5vw,80px)}
.pg-more .btn[aria-busy="true"]{opacity:.55;pointer-events:none}
.pg-intro{max-width:760px;margin-bottom:clamp(48px,5vw,80px)}

/* the enquiry form, sent: a field people never see (robots fill it), the busy button, a failure under it */
.pg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pg-send .btn[aria-busy="true"]{opacity:.6;cursor:progress}
.pg-form-e{flex:1 1 240px}

/* ---------- an article from the journal: its photograph, then its words (written for the old site: kept as they are) ---------- */
.pg-h1.is-art{font-size:clamp(34px,4vw,64px);line-height:1.04}
.pg-art{max-width:860px}
.pg-art-im{margin-bottom:clamp(36px,4vw,56px);aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--stone)}
.pg-art-im img{width:100%;height:100%;object-fit:cover}
.pg-art-tx{max-width:none}
.pg-art-tx :where(p,ul,ol,figure,blockquote,.pg-tw,hr,iframe){margin-top:18px}
.pg-art-tx > :first-child,.pg-art-tx > :first-child > :first-child{margin-top:0}
.pg-art-tx :where(div) > h2{margin-top:56px}
.pg-art-tx :where(h4,h5,h6){margin-top:28px;font:500 16.5px/1.4 var(--sans);color:var(--ink)}
.pg-art-tx :where(h1,h2,h3,h4,h5,h6) + *{margin-top:12px}
.pg-art-tx :where(div) > h3{margin-top:32px}
.pg-art-tx ol{padding-left:1.3em}
.pg-art-tx ol > li{padding-left:6px}
.pg-art-tx ol > li::marker{font:400 13px var(--mono);color:var(--bronze)}
.pg-art-tx li + li{margin-top:8px}
.pg-art-tx li > :where(p,ul,ol){margin-top:8px}
.pg-art-tx li > p:first-child{margin-top:0}
.pg-art-tx img{height:auto;border-radius:4px}
.pg-art-tx figcaption{margin-top:10px;font:400 11px/1.6 var(--mono);letter-spacing:.08em;color:var(--taupe)}
.pg-art-tx hr{height:1px;margin:44px 0;border:0;background:var(--pg-line)}
.pg-art-tx blockquote:not([class]){padding-left:22px;border-left:1px solid var(--brass);font:400 clamp(20px,1.6vw,24px)/1.45 var(--display);color:var(--ink)}
.pg-art-tx iframe{max-width:100%}
.pg-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pg-tw table{min-width:520px}
.pg-art-back{margin-top:clamp(48px,5vw,72px);padding-top:28px;border-top:1px solid var(--pg-line)}
.pg-art-back .link{color:var(--ink)}
.pg-art-back .link:hover{color:var(--bronze)}
.pg-art-back .link svg.i{transition:transform calc(var(--beat)*3) var(--sweep)}
.pg-art-back .link:hover svg.i{transform:translateX(-4px)}

/* ---------- smaller screens ---------- */
@media (max-width:1099px){
  .pg-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .pg-top-in{grid-template-columns:minmax(0,1fr)}
  .pg-sec-h,.pg-sec-b,.pg-band-ph,.pg-band-t{grid-column:1 / -1}
  .pg-sec-h{position:static}
  .pg-band-ph{aspect-ratio:3/2}
  .pg-links{grid-template-columns:minmax(0,1fr)}
  .pg-doc{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .pg-toc{position:static;padding:18px 20px;background:var(--pg-card);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.09)}
  .pg-toc ol{max-height:none;gap:0}
  .pg-contact{grid-template-columns:minmax(0,1fr)}
  .pg-map{aspect-ratio:auto;height:440px;min-height:0}
  /* a head that is only its label sits on its words, as a label sits on its heading (it floated 48px above them) */
  .pg-sec-h > .lab:only-child{margin-bottom:0}
  .pg-sec:has(> .pg-sec-h > .lab:only-child){row-gap:18px}
  /* one rule between sections: a list or questions ending a section leave their last line to the next section's */
  .pg-sec:not(:last-child) > .pg-sec-b > .pg-list:last-child li:last-child{padding-bottom:0;border-bottom:0}
  .pg-sec:not(:last-child) > .pg-sec-b > .pg-faq:last-child{border-bottom:0}
  /* a finger's 44px for every small link: the padding reaches into the space around it, so nothing moves */
  .pg-crumbs a{padding:15px 0;margin:-15px 0}
  .pg-visit dd a{display:inline-block;padding:10px 0;margin:-10px 0}
  :is(.pg-visit,.pg-art-back,.pg-intro) .link{padding:14px 0;margin:-14px 0}
  .pg-topics{gap:0}
  .pg-topics a{min-height:44px;padding:0}
  .pg-toc a{min-height:44px;padding:4px 0}
  .pg-ticks{gap:0}
  .pg-tick{padding:11px 0}
}
@media (max-width:600px){
  .pg-fields{grid-template-columns:minmax(0,1fr)}
  .pg-posts{grid-template-columns:minmax(0,1fr)}
  /* a label too long for the screen goes onto two lines inside its button (it pushed the button past the margin) */
  .pg-ctas .btn{flex:1 1 100%;min-width:0;height:auto;min-height:54px;padding:14px 22px;white-space:normal;line-height:1.35;text-align:center}
  .pg-band-t > .pg-ctas{justify-self:stretch}                    /* a band's single button runs the width too */
  .pg-visit dl div{grid-template-columns:minmax(0,1fr);gap:4px}
  /* the form's button, the map's two and "Load more" run the width, as the buttons above them do */
  .pg-send .btn,.pg-map-b .btn{flex:1 1 100%}
  .pg-map-b{justify-self:stretch}
  .pg-more .btn{width:100%}
  /* tables: two or three columns fit the screen; four or more scroll from edge to edge, so they are seen to scroll */
  .pg-tw{margin-left:calc(var(--m)*-1);margin-right:calc(var(--m)*-1);padding:0 var(--m)}
  .pg-tw table{min-width:0}
  .pg-tw table:has(tr > :nth-child(4)){min-width:520px}
}

/* =====================================================================================================================
   Live's SEO content (inc/seo-content.php, parts/seo-*.php; port checklist 2.2-2.6): the long-form copy under a page with
   its "Read more" fold, a house's guide and a model's page under their watches, and the trust, local and guide pages. Live's
   words in the house's paper: its keypoints, checklists, steps, notes, chips, photographs and questions as the house draws
   them. Also loaded on the homepage, the collections and the sell page when they carry it, so it brings its own tokens.
   ===================================================================================================================== */
.seo{--pg-card:#FFFDF9;--pg-line:rgba(18,21,18,.12);--pg-r:20px;--pg-lift:0 1px 2px rgba(13,26,19,.05),0 12px 30px -20px rgba(13,26,19,.3)}
.seo :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* straight after another light section: one gap, and a hairline where the copy begins */
:is(.sec-paper,.sec-light) + .seo{padding-top:0}
:is(.sec-paper,.sec-light) + .seo > .pg-in > :first-child{padding-top:clamp(48px,6vw,96px);border-top:1px solid var(--pg-line)}
:is(.ct-list,.journal) + .seo > .pg-in > :first-child{padding-top:clamp(44px,4.4vw,72px)}   /* they end on a deep margin of their own */
.cat.has-q .seo{display:none}                                  /* a search's results: the copy is the collection's own */

/* ---------- the long-form copy: its heading, its opening lines, the rest behind "Read more" ---------- */
.seo-more{margin-top:30px}
.seo-more > summary{list-style:none;height:52px;padding:0 24px}
.seo-more > summary::-webkit-details-marker{display:none}
.seo-more > summary.btn svg.i{width:16px;height:16px}
.seo-more > summary.btn:hover svg.i{transform:none}
.seo-more[open] > summary.btn svg.i,.seo-more[open] > summary.btn:hover svg.i{transform:rotate(45deg)}
.seo-more:not([open]) .seo-more-c,.seo-more[open] .seo-more-o{display:none}
.seo-more-b{margin-top:clamp(36px,4vw,56px)}
.seo-more-b > * + *{margin-top:18px}
.seo-tx h2{font:400 clamp(25px,2.2vw,34px)/1.15 var(--display);letter-spacing:-.008em;color:var(--ink)}
.seo-tx h3{font:500 18px/1.4 var(--sans);color:var(--ink)}
.seo-more-b > h2{margin-top:clamp(44px,4.4vw,64px)}
.seo-more-b > h2:first-child{margin-top:0}
.seo-more-b > h3{margin-top:30px}
.seo-more-b > :is(h2,h3) + *{margin-top:12px}
.seo-tx ol:not(.seo-list){list-style:none;counter-reset:seo}
.seo-tx ol:not(.seo-list) li{counter-increment:seo;position:relative;padding-left:40px}
.seo-tx ol:not(.seo-list) li + li{margin-top:10px}
.seo-tx ol:not(.seo-list) li:before{content:counter(seo,decimal-leading-zero);position:absolute;left:0;top:.3em;font:400 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--bronze)}
:is(.seo-tx,.seo-art) p em{color:inherit}                       /* italic in a sentence (the closing notes) stays the text's colour */
.seo-visit{margin-top:28px;font-size:16px;line-height:1.65;color:var(--graphite)}
.seo-visit a{color:var(--bronze);transition:color calc(var(--beat)*2) linear}
.seo-visit a:hover{color:var(--brass)}

/* ---------- a model's page and a page's article: live's heading, then the text with its contents beside it ---------- */
.seo-head{display:grid;gap:16px;max-width:920px;margin-bottom:clamp(40px,4.4vw,72px)}
.seo-head .lab{color:var(--bronze)}
.seo-lede{max-width:720px;font-size:18px;line-height:1.6;color:var(--graphite)}
.seo-doc.is-solo{grid-template-columns:minmax(0,1fr)}
.seo-doc.is-solo > .pg-prose{width:100%;margin:0 auto}
.seo-toc .lab{color:var(--bronze)}
.seo-art > .pg-keys:first-child + p,.seo-art > p:first-child{font-size:18.5px;line-height:1.66;color:var(--ink)}

/* "In short": the page's keypoints */
.pg-keys{padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(184,153,95,.42)}
.pg-keys .lab{display:block;margin-bottom:14px;color:var(--bronze)}
.pg-keys ul{font-size:16px;line-height:1.6}

/* a checklist: a brass tick, a hairline between */
:is(.pg-prose,.pg-text) ul.pg-checks{border-top:1px solid var(--pg-line)}
:is(.pg-prose,.pg-text) ul.pg-checks li{padding:13px 0 13px 34px;border-bottom:1px solid var(--pg-line)}
:is(.pg-prose,.pg-text) ul.pg-checks li + li{margin-top:0}
:is(.pg-prose,.pg-text) ul.pg-checks li:before{left:5px;top:1.36em;width:11px;height:6px;background:none;border-left:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);transform:rotate(-45deg)}
/* what is not covered: a cross on paper, two to a row */
:is(.pg-prose,.pg-text) ul.pg-crosses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:is(.pg-prose,.pg-text) ul.pg-crosses li{margin:0;padding:14px 16px 14px 44px;background:var(--pg-card);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(18,21,18,.08);font-size:15.5px;line-height:1.5}
:is(.pg-prose,.pg-text) ul.pg-crosses li + li{margin-top:0}
:is(.pg-prose,.pg-text) ul.pg-crosses li:before,:is(.pg-prose,.pg-text) ul.pg-crosses li:after{content:"";position:absolute;left:18px;top:50%;width:12px;height:1.5px;background:var(--taupe);transform:rotate(45deg)}
:is(.pg-prose,.pg-text) ul.pg-crosses li:after{transform:rotate(-45deg)}
/* steps: numbered in brass rings */
.seo-list{list-style:none;counter-reset:seol}
.seo-list li{counter-increment:seol;position:relative;min-height:36px;padding:5px 0 0 54px}
.seo-list li + li{margin-top:18px}
.seo-list li:before{content:counter(seol,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--brass);font:400 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--bronze)}
/* step cards (what helps a watch hold its value, three ways to a valuation) */
.seo-steps{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.seo-steps li{display:grid;align-content:start;gap:10px;padding:22px 22px 24px;background:var(--pg-card);border-radius:16px;box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
.seo-steps i{font:400 30px/1 var(--display);font-style:normal;color:var(--brass)}
.pg-prose .seo-steps h3{margin:0;font:400 21px/1.2 var(--display);color:var(--ink)}
.pg-prose .seo-steps h3 + *,.seo-steps p{margin:0}
.seo-steps p{font-size:15.5px;line-height:1.6}
/* a note: a brass rule down its side */
.pg-note{padding:20px 24px;background:var(--pg-card);border-radius:0 14px 14px 0;box-shadow:inset 2px 0 0 var(--brass)}
.pg-note > * + *{margin-top:8px}
.pg-note-t{font:400 clamp(20px,1.6vw,23px)/1.25 var(--display);color:var(--ink)}
.pg-note.is-quiet{background:transparent;box-shadow:inset 2px 0 0 var(--stone)}
.pg-small{font-size:14.5px;line-height:1.6;color:var(--graphite)}
.pg-cta .btn{height:auto;min-height:54px;padding:14px 26px;white-space:normal;text-align:left;line-height:1.35}
/* links on, as chips (no underline: a brass ring on hover) */
.pg-chips{display:flex;flex-wrap:wrap;gap:10px}
.pg-chips a{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--pg-line);font:500 14.5px/1.3 var(--sans);color:var(--ink);transition:box-shadow calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear}
.pg-chips a:hover{box-shadow:inset 0 0 0 1px var(--brass);color:var(--bronze)}
/* photographs: the watch on white, its line under it */
.pg-fig{margin:0}
.pg-fig img{display:block;width:100%;height:auto;border-radius:4px;background:#fff}
.pg-fig a{display:block;transition:opacity calc(var(--beat)*2) linear}
.pg-fig a:hover{opacity:.86}
.pg-fig figcaption{margin-top:10px;font:400 14px/1.5 var(--sans);color:var(--graphite)}
.pg-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pg-figs .pg-fig img{aspect-ratio:1/1;object-fit:contain}
/* live's four promises */
:is(.pg-prose,.pg-text) ul.pg-trust,ul.pg-trust{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:is(.pg-prose,.pg-text) ul.pg-trust li{display:grid;align-content:start;gap:8px;margin:0;padding:22px 24px;background:var(--pg-card);border-radius:16px;box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
:is(.pg-prose,.pg-text) ul.pg-trust li:before{content:none}
ul.pg-trust strong{font:400 21px/1.2 var(--display);color:var(--ink)}
ul.pg-trust span{font-size:15.5px;line-height:1.6;color:var(--graphite)}
/* the showroom's card */
.pg-vcard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;padding:clamp(24px,2.6vw,36px);background:var(--pg-card);border-radius:var(--pg-r);box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(184,153,95,.42)}
.pg-vcard-c > * + *{margin-top:10px}
.pg-vcard .lab{color:var(--bronze)}
.pg-vcard address{font:400 clamp(20px,1.6vw,24px)/1.35 var(--display);font-style:normal;color:var(--ink)}
.pg-vcard dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--pg-line);font-size:15.5px;line-height:1.5}
.pg-vcard dt{color:var(--graphite)}
.pg-vcard dd{text-align:right;color:var(--ink)}
.pg-vcard-a{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:12px}
.pg-vcard-a .btn{height:52px;padding:0 24px}
/* what is for sale now (live's stock list), as the collection's cards */
.seo-stock-n{font-size:16px;color:var(--graphite)}
.seo-stock-n strong{font-weight:500;color:var(--ink)}
.seo-stock-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px var(--g);margin-top:18px}
.pg-prose .seo-stock .cc{color:var(--ink)}
.pg-prose .seo-stock .cc-meta h3{margin:0;font:400 clamp(22px,1.6vw,28px)/1.08 var(--display);color:var(--ink)}
.pg-prose .seo-stock .cc-meta h3 + *{margin-top:0}
.pg-prose .seo-stock .cc-meta h3 em{color:var(--bronze)}
.seo-stock-all{margin-top:20px}
.pg-prose .seo-stock-all .link{color:var(--ink)}
.pg-prose .seo-stock-all .link:hover{color:var(--bronze)}
.seo-stock.is-empty{padding:20px 24px;background:var(--pg-card);border-radius:0 14px 14px 0;box-shadow:inset 2px 0 0 var(--brass)}
.seo-stock.is-empty .pg-chips{margin-top:12px}
/* the Google reviews */
.seo-rate{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.seo-rate b{font-weight:400;color:var(--ink)}
.seo-stars{color:var(--brass);letter-spacing:.14em}
.seo-revs-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.seo-rev{display:grid;align-content:start;gap:12px;margin:0;padding:22px 24px;background:var(--pg-card);border-radius:16px;box-shadow:var(--pg-lift),inset 0 0 0 1px rgba(18,21,18,.07)}
.seo-rev blockquote{font:400 clamp(19px,1.5vw,22px)/1.4 var(--display);color:var(--ink)}
.seo-rev figcaption{display:grid;gap:2px;font-size:14px;line-height:1.5;color:var(--graphite)}
.seo-rev figcaption b{font-weight:500;color:var(--ink)}
/* /watches/: the ten models, each with its newest watch */
.seo-models{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(28px,3vw,48px) var(--g)}
.seo-model{display:grid;align-content:start;gap:8px;color:var(--ink)}
.seo-model-im{position:relative;display:block;aspect-ratio:4/5;margin-bottom:8px;overflow:hidden;background:radial-gradient(120% 80% at 50% 8%,#FFFFFF 0,var(--vellum) 46%,var(--stone) 100%)}
.seo-model-im img{position:absolute;left:50%;top:50%;height:78%;width:auto;max-width:84%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 18px rgba(18,21,18,.18));transition:transform calc(var(--beat)*8) var(--sweep)}
.seo-model .lab{color:var(--bronze)}
.seo-model b{display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 clamp(20px,1.5vw,24px)/1.15 var(--display);transition:color calc(var(--beat)*2) linear}
.seo-model b svg.i{flex:none;width:18px;height:18px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.seo-model > span:last-child{font-size:14.5px;color:var(--graphite)}
@media (hover:hover){
  .seo-model:hover .seo-model-im img{transform:translate(-50%,-50%) scale(1.04)}
  .seo-model:hover b{color:var(--bronze)}
  .seo-model:hover b svg.i{transform:translateX(4px)}
}
/* cards on to the related pages (live's "Useful pages", "Keep reading"): the house's linked cards, three to a row */
.pg-links.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-links.seo-cards .lab{font:500 12px/1.2 var(--sans);color:var(--bronze)}      /* .pg-links span would set them as text */
.pg-links.seo-cards .seo-n{font:400 40px/1 var(--display);color:var(--brass);opacity:.7}

@media (max-width:1099px){
  .seo-models{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-links.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .seo-toc{display:none}                                       /* as live: the contents are for a wide screen */
  .pg-links.is-3{grid-template-columns:minmax(0,1fr)}
  /* after another light section the copy starts a pixel higher: at a fractional edge the dark page showed through as a line */
  :is(.sec-paper,.sec-light) + .seo{margin-top:-1px;padding-top:1px}
  /* a photograph keeps the text's spacing (.pg-fig's margin:0 took it, so it sat on the paragraph or card above) */
  .pg-prose > * + .pg-fig{margin-top:16px}
  .pg-text > * + .pg-fig{margin-top:18px}
  .pg-sec:not(:last-child) > .pg-sec-b > ul.pg-checks:last-child li:last-child{padding-bottom:0;border-bottom:0}   /* one rule between sections */
  /* 44px for a finger */
  .pg-chips a{min-height:44px}
  .seo-stock-all .link{padding:14px 0;margin:-14px 0}
  .pg-vcard-c a{display:inline-block;padding:8px 0;margin:-8px 0}
}
@media (max-width:600px){
  .seo-models{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .seo-steps,ul.pg-trust,:is(.pg-prose,.pg-text) ul.pg-trust,:is(.pg-prose,.pg-text) ul.pg-crosses,.seo-revs-g,.pg-vcard{grid-template-columns:minmax(0,1fr)}
  .seo-stock-g{gap:28px 12px}
  .pg-figs{gap:10px}
  .seo-more > summary{width:100%}
  .pg-vcard-a .btn{flex:1 1 100%}                              /* the showroom card's two buttons, the width and the same size */
}
/* the guides' hub: its five guides, two and then three */
.pg-links.is-hub{grid-template-columns:repeat(6,minmax(0,1fr))}
.pg-links.is-hub > a{grid-column:span 2}
.pg-links.is-hub > a:nth-child(-n+2){grid-column:span 3}
@media (max-width:1099px){ .pg-links.is-hub{grid-template-columns:repeat(2,minmax(0,1fr))} .pg-links.is-hub > a,.pg-links.is-hub > a:nth-child(-n+2){grid-column:auto} }
@media (max-width:900px){ .pg-links.is-hub{grid-template-columns:minmax(0,1fr)} }