/* ============================================================
   SITE FOOTER: "The Dateline"
   One footer on every page. The markup lives in scripts/site-footer.html and is
   stamped into the pages by scripts/stamp-footer.mjs; site-footer.js brings the
   season line to life. This sheet is linked from inside the footer itself, so it
   never holds up the first paint of the page above it. The one-line script after
   the link makes every browser wait for this sheet before it builds the footer
   (Chrome does anyway; Safari and Firefox would draw it bare, then jump).
   Brand tokens come from styles.css :root; the fallbacks keep the footer whole
   if that sheet is ever missing.

   Three blocks, each in one colour (owner, 12 Nov 2026: "a white block then the
   blue ... and dark"): white for the season ahead, the site's hero blue for the
   two doors, navy for everything else. Labels are plain sentence case; the one
   bright note is the brand blue that marks a chosen day or town on the line.

   Nothing here may move when the scripts wake up: the readout, the town picker,
   the line and the sign-up switch all hold their room from the first paint.
   ============================================================ */

.site-footer{background:var(--navy-900,#081A33);color:#fff;padding:0;font-family:var(--font-body,Inter,system-ui,sans-serif);line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.sf{
  --sf-white:var(--white,#FFFFFF);
  --sf-blue:var(--hero-blue,#01479F);
  --sf-navy:var(--navy-900,#081A33);
  --sf-hot:var(--blue-600,#1E6FD6);      /* a chosen day or town on the line: 4.9:1 on white */
  /* ink for the navy block (the blue block shares it); the white block sets its own below */
  --sf-ink:#fff;
  --sf-2:rgba(255,255,255,.84);      /* secondary text: 12:1 on the navy */
  --sf-3:rgba(255,255,255,.72);      /* quiet text: 9:1 (never faint) */
  --sf-rule:rgba(255,255,255,.14);   /* hairlines */
  --sf-rule-2:rgba(255,255,255,.36); /* field borders, the rings: 3.3:1 on the navy */
  --sf-focus:#fff;
  --sf-display:var(--font-display,Sora,system-ui,sans-serif);
  --sf-ease:var(--e-out,cubic-bezier(.2,.7,.2,1));
  --sf-fast:var(--t-fast,140ms);
  --sf-base:var(--t-base,260ms);
  --sf-date:clamp(30px,3.6vw,46px);  /* the readout's date */
  padding:0 0 32px;   /* side gutters are the page's own .wrap, so the footer lines up with the page */
}
.sf [hidden]{display:none!important}
/* Shown whole or not at all. A browser may draw a page while its HTML is still arriving; a footer drawn
   half-read sets out its columns twice (the link columns sit to the right, so each one that arrives moves the
   rest). The legal list is the last thing in the footer: until it has been read, the footer keeps its room
   and shows nothing. A browser without :has() skips this rule and draws as it reads. */
.sf:not(:has(> .sf-base > .sf-legal)){visibility:hidden}
:where(.sf) :where(h2,p,ul,li,address){margin:0;padding:0}
:where(.sf) :where(ul){list-style:none}
:where(.sf) :where(a){color:inherit;text-decoration:none}
:where(.sf) :where(address){font-style:normal}
.sf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sf :focus-visible{outline:3px solid var(--sf-focus);outline-offset:3px;box-shadow:none;border-radius:4px}

/* A block's colour runs edge to edge while its content keeps to the page's .wrap: the shadow paints it
   sideways, the clip holds it to the block's own height, and neither makes the page any wider. */
.sf-season,.sf-doors{background:var(--sf-band);box-shadow:0 0 0 100vmax var(--sf-band);clip-path:inset(0 -100vmax)}

/* Small arrows, drawn the way the site's buttons draw theirs */
.sf-arr,.sf-out,.sf-up,.sf-ring::after{display:inline-block;flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--sf-i) center/contain no-repeat;mask:var(--sf-i) center/contain no-repeat;
  transition:transform var(--sf-base) var(--sf-ease),opacity var(--sf-fast)}
.sf-arr,.sf-ring::after{--sf-i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M3 8h10M9 4l4 4-4 4'/></svg>")}
.sf-out{--sf-i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M5 11l6-6M6 5h5v5'/></svg>");width:11px;height:11px;margin-left:6px;opacity:.55}
.sf-up{--sf-i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M8 13V3M4 7l4-4 4 4'/></svg>")}

/* ---------- 1. The season ahead: the white block ---------- */
.sf-season{
  --sf-band:var(--sf-white);
  --sf-ink:var(--sf-navy);
  --sf-2:#33405A;                    /* secondary text: 10:1 on white */
  --sf-3:var(--slate,#5A6478);       /* quiet text: 5.9:1 */
  --sf-rule:var(--line,#E6EAF2);
  --sf-rule-2:rgba(8,26,51,.2);
  --sf-focus:var(--sf-blue);
  --sf-pad-t:clamp(44px,5.5vw,68px);
  --sf-pad-b:clamp(36px,4vw,48px);
  position:relative;color:var(--sf-ink);padding:var(--sf-pad-t) 0 var(--sf-pad-b)}
/* where it meets the page (usually the site's pale grey, sometimes white): a hairline, edge to edge */
.sf-season::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sf-rule);box-shadow:0 0 0 100vmax var(--sf-rule);clip-path:inset(0 -100vmax)}
.sf-kick{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;min-height:22px;margin-bottom:12px}
.sf-kick h2{font:600 15px/22px var(--sf-display);letter-spacing:-.01em;color:var(--sf-ink)}
.sf-note{font:500 15px/22px var(--font-body,Inter,sans-serif);color:var(--sf-3)}
.sf-note:not(:empty)::before{content:"";display:inline-block;width:3px;height:3px;margin-right:12px;border-radius:50%;background:currentColor;vertical-align:middle}      /* a drawn dot: a typed one would be read out */
.sf-cap{font:500 13px/22px var(--font-body,Inter,sans-serif);color:var(--sf-3)}
.sf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.sf-read{min-width:0;flex:1 1 auto}
.sf-date{font:600 var(--sf-date)/1.1 var(--sf-display);letter-spacing:-.028em;color:var(--sf-ink);font-variant-numeric:tabular-nums}
.sf-fairs{display:flex;flex-wrap:wrap;gap:0 28px;min-height:28px;margin-top:12px;font:500 18px/28px var(--sf-display);letter-spacing:-.01em}
.sf-fairs a{display:inline-flex;align-items:center;gap:8px;color:var(--sf-blue);white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--sf-fast)}
.sf-fairs a:hover{text-decoration-color:currentColor}
.sf-fairs a:hover .sf-arr{transform:translateX(4px)}
.sf-ctx{min-height:22px;margin-top:2px;font-size:15px;line-height:22px;color:var(--sf-2)}
.sf-ctx a{color:var(--sf-ink);text-decoration:underline;text-decoration-color:var(--sf-rule-2);text-underline-offset:4px;transition:text-decoration-color var(--sf-fast)}
.sf-ctx a:hover{text-decoration-color:currentColor}

.sf-find{flex:0 0 280px;display:grid;gap:10px}
.sf .sf-find[hidden]{display:grid!important;visibility:hidden}      /* not there yet, but its room is kept */
.sf-find label{font:600 14px/20px var(--sf-display);color:var(--sf-ink)}
/* the one control in the white block: its outline reaches 3.2:1 on white, so it reads as a field at a glance */
.sf-find select{-webkit-appearance:none;appearance:none;width:100%;height:50px;margin:0;padding:0 46px 0 16px;border:1px solid rgba(8,26,51,.48);border-radius:12px;
  background:var(--sf-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23081A33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/></svg>") right 16px center/14px no-repeat;
  color:var(--sf-ink);font:500 16px/1 var(--font-body,Inter,sans-serif);cursor:pointer;text-overflow:ellipsis;
  transition:border-color var(--sf-fast),background-color var(--sf-fast)}
.sf-find select:hover{border-color:var(--sf-navy);background-color:var(--bg,#F6F8FC)}
.sf-find option{color:var(--ink,#0E1626);background:#fff}

/* The dateline: one mark for every event still to come, laid out across the months */
.sf-line{position:relative;height:86px;margin-top:26px;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.sf-line::before{content:"";position:absolute;left:0;right:0;top:57px;height:1px;background:var(--sf-rule-2)}
.sf-line.is-live{cursor:pointer;touch-action:pan-y}
.sf-ticks{position:absolute;left:0;top:11px;width:100%;height:46px;overflow:visible;display:block}
.sf-ticks path{fill:none;stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.sf-t{color:rgba(8,26,51,.82);transition:color var(--sf-base)}
.sf-t-past{color:rgba(8,26,51,.2)}
.sf-ticks .sf-t-hot{color:var(--sf-hot);stroke-width:2px}
.sf-line.has-town .sf-t{color:rgba(8,26,51,.2)}
.sf-today{position:absolute;top:54px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--sf-white);box-shadow:0 0 0 1.5px var(--sf-hot)}
.sf-pin{position:absolute;top:0;width:1px;height:57px;margin-left:-.5px;background:var(--sf-hot);opacity:.55;pointer-events:none}
.sf-pin::before{content:"";position:absolute;left:-4.5px;top:0;border:5px solid transparent;border-top:7px solid var(--sf-hot);border-bottom:0}
.sf-months{position:absolute;left:0;right:0;top:58px;height:28px}
.sf-months span{position:absolute;top:0;width:0;height:6px;border-left:1px solid var(--sf-rule-2)}
.sf-months span::after{content:attr(data-l);position:absolute;left:-1px;top:13px;font:500 13px/1 var(--font-body,Inter,sans-serif);letter-spacing:.01em;color:var(--sf-3);white-space:nowrap}
.sf-months span[data-jan]{height:10px;border-left-color:rgba(8,26,51,.5)}
/* how much each label says depends on the room a month has (site-footer.js sets data-fit):
   l "Jan 2027", m "Jan '27", s "Jan", x "J", q "J" on the quarter months only */
.sf-months[data-fit="l"] span[data-y]::after{content:attr(data-l) " " attr(data-y)}
.sf-months[data-fit="m"] span[data-jan]::after{content:attr(data-l) " \2019" attr(data-yy)}
.sf-months[data-fit="x"] span::after,.sf-months[data-fit="q"] span::after{content:attr(data-s)}
.sf-months[data-fit="q"] span:not([data-q])::after{content:none}
.sf-cap{position:absolute;top:var(--sf-pad-t);right:0}      /* "Every mark is an event": added with the marks */

/* ---------- 2. Two doors: the blue block ---------- */
.sf-doors{
  --sf-band:var(--sf-blue);
  --sf-rule:rgba(255,255,255,.22);
  --sf-rule-2:rgba(255,255,255,.5);  /* the rings: 3.3:1 on the blue */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  padding:6px 0}      /* the doors' focus rings fit inside the block */
.sf-door{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;color:#fff}
.sf-door-t{min-width:0}
.sf-door b{display:block;font:600 clamp(20px,2vw,24px)/1.2 var(--sf-display);letter-spacing:-.02em}
/* The door's two lines are not balanced. Their last words are tied together in the markup, so a plain fill
   breaks them where they read best, in every browser: "Find an event / near you", "Always free for candidates. /
   No CV required.". Balancing gave "Find an / event near you" and split the first sentence. */
.sf-door small{display:block;margin-top:5px;font-size:15px;line-height:1.5;color:var(--sf-2)}
.sf-ring{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--sf-rule-2);
  transition:background-color var(--sf-base) var(--sf-ease),border-color var(--sf-base) var(--sf-ease),color var(--sf-base) var(--sf-ease),transform var(--sf-fast) var(--sf-ease)}
.sf-ring::after{content:"";width:16px;height:16px}
.sf-door:hover .sf-ring,.sf-door:focus-visible .sf-ring{background:#fff;border-color:#fff;color:var(--sf-blue)}
.sf-door:hover .sf-ring::after{transform:translateX(2px)}
.sf-door:active .sf-ring{transform:scale(.94)}

/* ---------- 3. Brand, newsletter, directory: the navy block ---------- */
.sf-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px 72px;padding:56px 0 44px}
.sf-logo{display:inline-block;vertical-align:top}
.sf-logo img{display:block;width:142px;height:47px;max-width:none}
.sf-tag{margin-top:12px;font:500 17px/1.4 var(--sf-display);letter-spacing:-.01em;color:#fff}
.sf-tag span{white-space:nowrap}
.sf-nb{white-space:nowrap}      /* a phrase that must not break at its hyphens */

.sf-nl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 44px 52px;margin-top:28px;max-width:420px}
.sf-nl-label{grid-column:1/-1;grid-row:1;font:600 15px/1.4 var(--sf-display);color:#fff}
.sf-nl-hint,.sf-nl .nl-aud{grid-column:1/-1;grid-row:2;align-self:center;margin:0}
.sf-nl-hint{font-size:14px;line-height:1.4;color:var(--sf-3)}
.sf-nl .nl-aud~.sf-nl-hint{display:none}
.sf-nl input[type=email]{grid-column:1/-1;grid-row:3;width:100%;height:52px;margin:0;padding:0 132px 0 18px;border:1px solid var(--sf-rule-2);border-radius:14px;background:rgba(255,255,255,.06);
  color:#fff;font:500 16px/1 var(--font-body,Inter,sans-serif);transition:border-color var(--sf-fast),background-color var(--sf-fast)}
.sf-nl input[type=email]::placeholder{color:var(--sf-3);opacity:1}
.sf-nl input[type=email]:hover{border-color:rgba(255,255,255,.55)}
.sf-nl input[type=email]:focus{background:rgba(255,255,255,.1)}
.sf-btn{grid-column:2;grid-row:3;align-self:center;justify-self:end;height:40px;margin:0 6px 0 0;padding:0 20px;border:0;border-radius:10px;background:#fff;color:var(--sf-navy);
  font:600 14.5px/1 var(--sf-display);cursor:pointer;transition:background-color var(--sf-fast),transform var(--sf-fast) var(--sf-ease)}
.sf-btn:hover{background:var(--blue-100,#E7F1FE)}
.sf-btn:active{transform:scale(.97)}
.sf-btn[disabled]{opacity:.6;cursor:default}
/* the audience switch site.js adds to every newsletter form */
.sf-nl .nl-aud{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;font-size:13.5px}
.sf-nl .nl-aud-lbl{margin-right:6px;opacity:1;color:var(--sf-3)}
.sf-nl .nl-aud-opt{height:30px;padding:0 14px;border:1px solid var(--sf-rule-2);border-radius:999px;background:transparent;color:var(--sf-2);opacity:1;
  font:600 13px/1 var(--font-body,Inter,sans-serif);cursor:pointer;transition:background-color var(--sf-fast),color var(--sf-fast),border-color var(--sf-fast)}
.sf-nl .nl-aud-opt:hover{border-color:rgba(255,255,255,.6);color:#fff;opacity:1}
.sf-nl .nl-aud-opt[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--sf-navy)}
.sf-nl-done{grid-column:1/-1;grid-row:2/4;align-self:center;display:flex;align-items:center;gap:12px;font:500 16px/1.45 var(--sf-display);color:#fff}
.sf-nl-done::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23081A33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 8.4l2.6 2.6L12 5.6'/></svg>") center/18px no-repeat}
.sf-nl.is-done input[type=email],.sf-nl.is-done .sf-btn,.sf-nl.is-done .nl-aud,.sf-nl.is-done .sf-nl-hint{visibility:hidden}
.sf-brand .ukcf-email-hint{max-width:420px;margin-top:10px;font-size:14px;color:var(--sf-2)}

.sf-nav{display:flex;justify-content:space-between;align-items:flex-start;gap:36px 44px}
.sf-col{min-width:0}
.sf .sf-nav h2{margin-bottom:10px;font:600 15px/22px var(--sf-display);letter-spacing:-.01em;color:#fff}
.sf .sf-list{display:grid;gap:0}
.sf .sf-list a{display:inline-flex;align-items:center;min-height:36px;padding:6px 0;font-size:15.5px;line-height:1.35;color:rgba(255,255,255,.8);overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 5px)/0 1px no-repeat;transition:color var(--sf-fast),background-size var(--sf-base) var(--sf-ease)}
.sf .sf-list a:hover{color:#fff;background-size:100% 1px}
.sf .sf-list a:hover .sf-out{transform:translate(2px,-2px);opacity:1}
/* the page you are on: brighter, with its rule drawn. Not bolder: a bolder word is a wider one, and the
   columns beside it would shift when the script marks it */
.sf .sf-list a[aria-current]{color:#fff;background-size:100% 1px}

/* ---------- 4. Trust ---------- */
.sf-trust{display:flex;align-items:center;gap:8px 32px;padding:18px 0;border-top:1px solid var(--sf-rule);font-size:14.5px;line-height:1.5;color:var(--sf-2)}
.sf-award{position:relative;padding-left:30px}
.sf-award::before{content:"";position:absolute;left:0;top:50%;width:18px;height:18px;margin-top:-9px;background:#fff;
  --sf-i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polygon points='12,1 14.5,8.5 22.5,8.5 16.2,13.2 18.7,20.7 12,16 5.3,20.7 7.8,13.2 1.5,8.5 9.5,8.5'/></svg>");
  -webkit-mask:var(--sf-i) center/contain no-repeat;mask:var(--sf-i) center/contain no-repeat}
.sf-award b{margin-right:6px;font:600 14.5px/1.5 var(--sf-display);color:#fff}
.sf-award+.sf-since{padding-left:32px;border-left:1px solid var(--sf-rule)}
.sf-since{text-wrap:balance}
.sf-top{display:inline-flex;align-items:center;gap:10px;min-height:40px;margin-left:auto;font:600 14px/1 var(--sf-display);color:#fff}
.sf-top:hover .sf-up{transform:translateY(-3px)}

/* ---------- 5. The small print ---------- */
.sf-base{padding-top:20px;border-top:1px solid var(--sf-rule);font-size:13px;line-height:1.75;color:var(--sf-3)}
.sf-base address{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.sf-base address a{display:inline-flex;align-items:center;min-height:32px;color:var(--sf-2);text-decoration:underline;text-decoration-color:var(--sf-rule-2);text-underline-offset:4px;transition:color var(--sf-fast),text-decoration-color var(--sf-fast)}
.sf-base address a:hover{color:#fff;text-decoration-color:#fff}
.sf .sf-legal{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:4px}
.sf .sf-legal a{display:inline-flex;align-items:center;min-height:32px;color:var(--sf-2);font-size:13px;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--sf-fast),text-decoration-color var(--sf-fast)}
.sf .sf-legal a:hover{color:#fff;text-decoration-color:currentColor}
.sf .sf-legal a[aria-current]{color:#fff;text-decoration-color:currentColor}

/* The floating "Personalise" chip (981px and up) sits bottom right, over the end of the page:
   the small print keeps clear of that corner at every width */
@media (min-width:981px){
  .sf-base{padding-right:200px}
}

/* ---------- Wide: the readout stays on single lines beside the town picker ---------- */
@media (min-width:901px){
  .sf-date,.sf-ctx{white-space:nowrap}
  .sf-fairs{flex-wrap:nowrap}
  .sf-kick{padding-right:200px}      /* room for the line's caption, top right */
}
@media (min-width:681px){
  .sf-kick{flex-wrap:nowrap}
  .sf-note{white-space:nowrap}
  /* two doors side by side: a rule between them, whichever of the two a visitor sees */
  .sf-door+.sf-door{padding-left:40px;border-left:1px solid var(--sf-rule)}
  .sf-door:first-child{padding-right:40px}
  body.p-emp .sf-door[data-aud="employer"]{padding-left:0;border-left:0}
}

/* ---------- Tablet ---------- */
@media (max-width:1120px){
  .sf-main{grid-template-columns:minmax(0,1fr);gap:40px}
  .sf-brand{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,420px);gap:0 40px;align-items:start}
  .sf-logo{grid-column:1;grid-row:1}
  .sf-tag{grid-column:1;grid-row:2}
  .sf-nl{grid-column:2;grid-row:1/4;margin-top:0}
  .sf-brand .ukcf-email-hint{grid-column:2}
  .sf-trust{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .sf-award,.sf-since{grid-column:1}
  .sf-award+.sf-since{padding-left:0;border-left:0}
  .sf-top{grid-column:2;grid-row:1/3;margin-left:0}
}
@media (max-width:900px){
  /* the event names and the line under them may each run to two lines here: hold the room for both */
  .sf-read{min-height:calc(var(--sf-date)*1.1 + 114px)}
  .sf-fairs a{white-space:normal}
  /* the line's caption sits under it, in room that is always kept */
  .sf-season{padding-bottom:calc(var(--sf-pad-b) + 28px)}
  .sf-cap{top:auto;right:auto;left:0;bottom:var(--sf-pad-b)}
}

/* ---------- Phone ---------- */
@media (max-width:680px){
  .sf{--sf-date:clamp(28px,8.8vw,36px)}
  .sf-kick{min-height:46px;margin-bottom:10px;align-content:flex-start}
  .sf-note{flex-basis:100%}
  .sf-note:not(:empty)::before{content:none}
  .sf-head{display:block}
  .sf-fairs{font-size:17px;gap:0 22px}
  .sf-fairs a{position:relative}
  .sf-fairs a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}      /* a taller touch target, same layout */
  .sf-nl .nl-aud-opt{height:36px}
  .sf-find{margin-top:14px}
  .sf-line{margin-top:22px}
  .sf-doors{grid-auto-flow:row}
  .sf-door{padding:20px 0}
  .sf-door+.sf-door{border-top:1px solid var(--sf-rule)}
  .sf-door small{font-size:14.5px}
  .sf-main{padding:44px 0 36px;gap:36px}
  .sf-brand{display:block}
  .sf-nl{margin-top:26px;max-width:none}
  .sf-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .sf .sf-nav h2{margin-bottom:6px}
  .sf .sf-list a{min-height:40px;padding:8px 0;font-size:16px;background-position:0 calc(100% - 7px)}
  .sf-trust{gap:8px 16px;padding:20px 0}
  .sf-award::before{top:2px;margin-top:0}
  .sf-award b{display:block;margin-right:0}
  .sf-top{grid-row:1;width:44px;height:44px;justify-content:center;border:1px solid var(--sf-rule-2);border-radius:50%}
  .sf-top span:first-child{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .sf-base{line-height:1.65}
  .sf-base address{margin-top:8px}
  .sf-base address a{min-height:40px}
  .sf .sf-legal{margin-top:6px;gap:0 20px}
  .sf .sf-legal a{min-height:40px}
}

@media (prefers-reduced-motion:reduce){
  .sf *,.sf *::before,.sf *::after{transition:none!important;animation:none!important}
}
@media (prefers-reduced-motion:no-preference){
  /* the marks draw in from "today" the first time the line comes into view */
  .sf-line.is-live .sf-ticks{clip-path:inset(-12px 100% 0 0);transition:clip-path 1.1s var(--sf-ease)}
  .sf-line.is-live.is-in .sf-ticks{clip-path:inset(-12px 0 0 0)}
  .sf-pin{transition:left 90ms linear}
}
@media (forced-colors:active){
  /* the blocks' colours are the system's here: a rule keeps them apart */
  .sf-season,.sf-doors{border-top:1px solid CanvasText}
  .sf-ticks path{stroke:CanvasText}
  .sf-ticks .sf-t-hot{stroke:Highlight}
  .sf-pin{background:Highlight}
  .sf-ring,.sf-nl input[type=email],.sf-btn,.sf-top{border:1px solid ButtonText}
  .sf-find select{-webkit-appearance:auto;appearance:auto;padding-right:16px;background-image:none}
  /* the arrows and the star are shapes cut from a fill: keep the fill, in the text's own colour */
  .sf-arr,.sf-out,.sf-up,.sf-ring::after,.sf-award::before{forced-color-adjust:none;background:currentColor}
}
@media print{
  .site-footer{background:none;color:#000}
  .sf{padding:16px 0 0;--sf-2:#000;--sf-3:#000}
  .sf-season,.sf-doors,.sf-main,.sf-top,.sf-legal,.sf-award::before{display:none!important}
  .sf-trust,.sf-base{border-color:#999;color:#000}
  .sf-award{padding-left:0}
  .sf-award b,.sf-base address a{color:#000}
}