/* Pinnacle Performance Consulting. THE STANDARD
   A 1990s broadsheet: aged pink newsprint, Caslon throughout, justified
   columns with rules, and one spot of crimson reserved for the offer.
   Mobile first. The sheet folds to a single column and opens out at 700
   and 1050. */

:root{
  --paper:#F2EDE1;        /* aged newsprint, buff */
  --paper-lit:#F8F5EC;    /* the centre of the sheet, where light falls */
  --paper-dim:#E6DFCD;    /* toward the folds and the edges */
  --ink:#1B1613;
  --ink-2:#312822;        /* body text */
  --ink-3:#6A5A4E;        /* captions, folio, furniture */
  --spot:#98082F;         /* the only colour on the page */
  --spot-hi:#7C0625;
  --rule:rgba(27,22,19,.72);
  --rule-2:rgba(27,22,19,.34);
  --hair:rgba(27,22,19,.18);

  --display:"Libre Caslon Display",'Times New Roman',Times,serif;
  --text:"Libre Caslon Text",'Times New Roman',Times,serif;

  --pad:18px;
  --sec:clamp(32px,4.4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(16px,.36vw + 15.2px,17.5px);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:76px}

body{
  margin:0;color:var(--ink-2);
  font-family:var(--text);font-weight:400;line-height:1.52;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
  /* the sheet: lit down the middle, dimmer at the folds, with a horizontal
     crease every so often the way a paper carried under an arm picks them up */
  background-color:var(--paper);
  /* Crinkle comes entirely from lit turbulence: two fields at different
     scales, seeds and light directions. No straight rulings anywhere: a
     gradient can only draw a line across the whole sheet, which is exactly
     what made the earlier attempt look manufactured. */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%271100%27%20height=%271100%27%3E%3Cfilter%20id=%27c%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27turbulence%27%20baseFrequency=%270.005%27%20numOctaves=%275%27%20seed=%2711%27%20result=%27n%27/%3E%3CfeDiffuseLighting%20in=%27n%27%20lighting-color=%27%23ffffff%27%20surfaceScale=%276%27%3E%3CfeDistantLight%20azimuth=%27235%27%20elevation=%2735%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width=%271100%27%20height=%271100%27%20filter=%27url%28%23c%29%27%20opacity=%270.5%27/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27617%27%20height=%27617%27%3E%3Cfilter%20id=%27c%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27turbulence%27%20baseFrequency=%270.011%27%20numOctaves=%274%27%20seed=%2729%27%20result=%27n%27/%3E%3CfeDiffuseLighting%20in=%27n%27%20lighting-color=%27%23ffffff%27%20surfaceScale=%273.4%27%3E%3CfeDistantLight%20azimuth=%2768%27%20elevation=%2744%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width=%27617%27%20height=%27617%27%20filter=%27url%28%23c%29%27%20opacity=%270.32%27/%3E%3C/svg%3E"),
    /* the sheet is simply lit brighter down the middle, a soft falloff with
       no hard stops, so it reads as light on paper rather than as a fold */
    /* exactly 90deg: at any tilt the gradient line is measured across the
       rotated bounding box, so on a 7000px-tall body a 2 degree lean stretched
       the falloff far wider than it did on the viewport-tall opening */
    linear-gradient(90deg,
      var(--paper-dim) 0%, var(--paper) 14%,
      var(--paper-lit) 44%, var(--paper-lit) 58%,
      var(--paper) 86%, var(--paper-dim) 100%);
  background-size:1100px 1100px, 617px 617px, auto;
  background-blend-mode:multiply, multiply, normal;
  background-attachment:scroll;
}
/* The sheet is the crumple in the body background and nothing else. The grain
   and the brown vignette that used to sit over it are gone: they were fixed
   overlays at z-index 1, so the page carried them but the opening (z-index 100)
   did not, and the two read as different stock. */

img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 .85em}
:focus-visible{outline:2px solid var(--spot);outline-offset:3px}

.wrap{width:min(1120px,100% - var(--pad)*2);margin-inline:auto;position:relative;z-index:2}
.wrap--narrow{width:min(760px,100% - var(--pad)*2)}
.skip{position:absolute;left:-9999px;top:10px;z-index:120;background:var(--ink);color:var(--paper);padding:12px 20px}
.skip:focus{left:14px}

/* ---------- running head ---------- */
.runhead{
  position:sticky;top:0;z-index:40;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27617%27%20height=%27617%27%3E%3Cfilter%20id=%27c%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27turbulence%27%20baseFrequency=%270.011%27%20numOctaves=%274%27%20seed=%2729%27%20result=%27n%27/%3E%3CfeDiffuseLighting%20in=%27n%27%20lighting-color=%27%23ffffff%27%20surfaceScale=%273.4%27%3E%3CfeDistantLight%20azimuth=%2768%27%20elevation=%2744%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width=%27617%27%20height=%27617%27%20filter=%27url%28%23c%29%27%20opacity=%270.32%27/%3E%3C/svg%3E");
  background-size:617px 617px;background-blend-mode:multiply;
  border-bottom:1px solid var(--ink);
  box-shadow:0 3px 0 -1px var(--paper), 0 4px 0 -1px var(--ink);
}
.runhead__inner{display:flex;align-items:center;gap:12px;padding:7px 0}
.runhead__mark{margin-right:auto;display:flex;align-items:center;gap:9px;text-decoration:none}
.runhead__mark img{width:26px;height:26px}
.runhead__mark::after{
  content:"Pinnacle Performance";
  font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.runhead__nav{display:none}

/* ---------- the masthead ---------- */
.masthead{padding:20px 0 0;text-align:center;transform-origin:50% 0;will-change:transform,opacity}
.masthead__name{
  font-family:var(--display);font-weight:700;color:var(--ink);margin:0;
  font-size:clamp(2.1rem,10.5vw,5.6rem);line-height:.96;
  letter-spacing:.005em;text-transform:uppercase;
}
/* the small-caps trick: the first letter of each word stays full height */
.masthead__name span{font-size:.74em;letter-spacing:.02em}
.masthead__strap{
  font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:clamp(.72rem,2.4vw,.92rem);margin:8px 0 0;
}

/* ---------- the standing strapline ----------
   Occupies the folio bar exactly: same rules above and below, same type size.
   The set is cloned by the script so the crawl loops seamlessly. */
.ticker{
  position:relative;overflow:hidden;
  font-family:var(--text);font-size:clamp(.58rem,2vw,.72rem);color:var(--ink-2);
  padding:6px 0;margin-top:12px;
  border-top:1px solid var(--ink);border-bottom:3px solid var(--ink);
}
.ticker__track{display:flex;width:max-content}
.ticker.is-rolling .ticker__track{animation:crawl 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__set{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
  font:inherit;color:inherit;white-space:nowrap;
}
.ticker__set li{display:flex;align-items:center}
.ticker__set li::after{
  content:"\25C6";font-size:.62em;color:var(--spot);margin:0 1.5em;position:relative;top:-.08em;
}
@keyframes crawl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .ticker.is-rolling .ticker__track{animation:none}
}
.sechead__label--left{text-align:left}

/* ---------- page one ---------- */
.front{padding-bottom:var(--sec)}
#request .overline{margin-top:0}
.overline{
  text-align:center;font-family:var(--text);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin:18px 0 10px;
}
.banner{
  font-family:var(--display);font-weight:700;color:var(--ink);text-align:center;
  font-size:clamp(1.55rem,6.6vw,3.3rem);line-height:1.04;letter-spacing:-.005em;
  text-transform:uppercase;margin:0 auto 14px;max-width:18ch;
}
.banner--sub{font-size:clamp(1.25rem,5vw,2.3rem);max-width:22ch;margin-top:0}
.subdeck{
  text-align:center;font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:clamp(.95rem,3.2vw,1.18rem);line-height:1.45;margin:0 auto;max-width:44ch;
}

/* the first button sits right under the promise, so it is on the first screen */
.front__cta{margin-top:18px}
.front__fine{
  text-align:center;font-family:var(--text);font-style:italic;font-size:.78rem;
  color:var(--ink-3);margin:10px 0 0;
}

/* the offer, boxed like a front-page announcement */
.offer{
  border:3px double var(--ink);padding:20px 18px;margin:22px auto 0;text-align:center;
  max-width:640px;background:rgba(255,255,255,.2);position:relative;z-index:2;
}
.offer__tag{
  font-family:var(--text);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--spot);margin:0 0 10px;font-weight:700;
}
.offer__head{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.15rem,4.6vw,1.9rem);line-height:1.08;margin:0 0 10px;
}
.offer__fine{font-family:var(--text);font-style:italic;font-size:.76rem;color:var(--ink-3);margin:12px 0 0}
.offer__list{
  list-style:none;margin:0 0 16px;padding:0;display:grid;gap:5px;
  font-size:.82rem;color:var(--ink-2);
}
.offer__list li::before{content:"\00B7\00a0\00a0";color:var(--spot);font-weight:700}

/* the cut */
.cut{margin:24px 0 0}
.cut__frame{display:block;position:relative;overflow:hidden;border:1px solid var(--ink)}
.cut img{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 26%;
  filter:grayscale(1) contrast(1.26) sepia(.18) brightness(1.02);
  transform:translate3d(0,var(--par,0px),0) scale(1.16);will-change:transform;
}
.cut figcaption{
  text-align:center;font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:.78rem;line-height:1.4;margin-top:8px;padding-bottom:10px;border-bottom:1px solid var(--ink);
}

/* ---------- the article columns ---------- */
.story{margin-top:20px}
.story__by{
  font-family:var(--text);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px;
}
.story__by b{font-weight:700}
.cols{font-size:.86rem;line-height:1.48;text-align:justify;hyphens:auto}
.cols p{margin:0 0 .7em}
.cols>p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:3.3em;line-height:.78;padding:.04em .08em 0 0;
}
.cols h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:.86rem;letter-spacing:.04em;margin:14px 0 5px;break-after:avoid;
}

/* ---------- reader's marks ----------
   Someone has gone over the page with a pen. Each stroke is an SVG shape pushed
   out of true by a turbulence displacement, so no two edges are alike, and each
   draws itself across as its paragraph arrives. */
.hi,.pen,.ring{
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .85s cubic-bezier(.55,0,.3,1)
             calc(var(--mark-row,0s) + var(--mark-self,0s));
}
.hi{--mark-self:0s}
.pen{--mark-self:.12s}
.ring{--mark-self:.24s}
/* an explicit running order, for marks that are not in a listing, put
   mark-1, mark-2 … on the spans and they draw in that sequence */
.mark-1{--mark-row:.3s}
.mark-2{--mark-row:.62s}
.mark-3{--mark-row:.94s}
.mark-4{--mark-row:1.26s}

/* each row of the listing picks the pen up a beat after the one above it */
.listing li:nth-child(1){--mark-row:.25s}
.listing li:nth-child(2){--mark-row:.5s}
.listing li:nth-child(3){--mark-row:.75s}
.listing li:nth-child(4){--mark-row:1s}
.listing li:nth-child(5){--mark-row:1.25s}
.hi{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27320%27%20height=%2748%27%20preserveAspectRatio=%27none%27%3E%3Cfilter%20id=%27r%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.045%27%20numOctaves=%272%27%20seed=%279%27%20result=%27n%27/%3E%3CfeDisplacementMap%20in=%27SourceGraphic%27%20in2=%27n%27%20scale=%279%27%20xChannelSelector=%27R%27%20yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect%20x=%276%27%20y=%2710%27%20width=%27308%27%20height=%2728%27%20rx=%273%27%20fill=%27%23B4123F%27%20opacity=%270.26%27%20filter=%27url%28%23r%29%27/%3E%3C/svg%3E");
  background-position:0 50%;background-size:0% 106%;padding:.04em .1em;
}
.pen{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27320%27%20height=%2722%27%20preserveAspectRatio=%27none%27%3E%3Cfilter%20id=%27r%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.03%27%20numOctaves=%272%27%20seed=%274%27%20result=%27n%27/%3E%3CfeDisplacementMap%20in=%27SourceGraphic%27%20in2=%27n%27%20scale=%275%27%20xChannelSelector=%27R%27%20yChannelSelector=%27G%27/%3E%3C/filter%3E%3Cg%20filter=%27url%28%23r%29%27%20fill=%27none%27%20stroke=%27%2398082F%27%20stroke-linecap=%27round%27%3E%3Cpath%20d=%27M5%2012%20C%2070%207%2C%20150%2016%2C%20315%2010%27%20stroke-width=%272.6%27%20opacity=%270.9%27/%3E%3Cpath%20d=%27M9%2017%20C%2090%2013%2C%20170%2020%2C%20311%2015%27%20stroke-width=%271.6%27%20opacity=%270.55%27/%3E%3C/g%3E%3C/svg%3E");
  background-position:0 106%;background-size:0% .42em;padding-bottom:.12em;
}
.ring{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27300%27%20height=%2780%27%20preserveAspectRatio=%27none%27%3E%3Cfilter%20id=%27r%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.022%27%20numOctaves=%272%27%20seed=%2715%27%20result=%27n%27/%3E%3CfeDisplacementMap%20in=%27SourceGraphic%27%20in2=%27n%27%20scale=%276%27%20xChannelSelector=%27R%27%20yChannelSelector=%27G%27/%3E%3C/filter%3E%3Cpath%20filter=%27url%28%23r%29%27%20d=%27M152%208%20C%2054%208%2C%209%2025%2C%209%2041%20C%209%2061%2C%2075%2074%2C%20153%2074%20C%20241%2074%2C%20291%2058%2C%20291%2040%20C%20291%2021%2C%20233%207%2C%20141%2010%27%20fill=%27none%27%20stroke=%27%2398082F%27%20stroke-width=%272.6%27%20stroke-linecap=%27round%27%20opacity=%270.85%27/%3E%3C/svg%3E");
  background-position:50% 50%;background-size:0% 150%;padding:.16em .45em;margin:0 -.2em;
}
[data-anim].is-in .hi{background-size:100% 106%}
[data-anim].is-in .pen{background-size:100% .42em}
[data-anim].is-in .ring{background-size:100% 150%}
/* Inside a question the mark holds off until the answer is opened, then
   draws, otherwise it would already be finished behind a closed panel. */
[data-anim].is-in .q:not([open]) .hi{background-size:0% 106%}
[data-anim].is-in .q:not([open]) .pen{background-size:0% .42em}
[data-anim].is-in .q:not([open]) .ring{background-size:0% 150%}

.anim-off .hi{background-size:100% 106%}
.anim-off .pen{background-size:100% .42em}
.anim-off .ring{background-size:100% 150%}
@media (prefers-reduced-motion:reduce){
  .hi{background-size:100% 106%}
  .pen{background-size:100% .42em}
  .ring{background-size:100% 150%}
}

/* ---------- the section break ----------
   Between two runs of paper, a rule broken by a lozenge, the mark a paper
   uses to close one piece and open the next. Not used where a black spread
   already divides the page. */
.front + .sec::before,
.sec + .sec::before{
  content:"\25C6";
  display:block;text-align:center;line-height:1;
  font-size:.66rem;color:var(--spot);
  margin:calc(var(--sec) * -0.54) 0 calc(var(--sec) * 0.44);
  background:
    linear-gradient(var(--rule-2),var(--rule-2)) no-repeat left  0.34em / calc(50% - 34px) 1px,
    linear-gradient(var(--rule-2),var(--rule-2)) no-repeat right 0.34em / calc(50% - 34px) 1px;
}

/* .coupon__fine survives the Blueprint: the booking and confirmation
   pages still use it for their closing note. */
.coupon__fine{
  font-family:var(--text);font-style:italic;font-size:.74rem;line-height:1.5;
  color:var(--ink-3);margin:16px 0 0;text-align:center;
}
button.btn{cursor:pointer;font-family:var(--display)}

@media (min-width:700px){
}

/* ---------- the booking calendar ----------
   GoHighLevel's calendar, straight on the paper; its own hairline is the
   frame. It breaks out of the narrow reading column so the calendar and the
   times sit side by side, which keeps it short. form_embed.js grows the frame
   to fit; the minimum keeps room for it while it loads. */
.booking{
  margin:26px 0 0;
  width:min(1080px, 100vw - var(--pad)*2);
  margin-left:calc(50% - min(540px, 50vw - var(--pad)));
  /* The container reserves the calendar's height itself. Without this it
     collapses to zero until the third party widget reports back, which both
     jumps the layout and throws off the scroll that lands on it. */
  min-height:620px;
}
.booking iframe{display:block;width:100%;min-height:620px}
@media (max-width:600px){
  .booking,.booking iframe{min-height:760px}
}
.booking br{display:none}

/* ---------- section heads ---------- */
.sec{padding:var(--sec) 0}
.sechead{text-align:center;margin-bottom:20px}
.sechead__label{
  font-family:var(--text);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px;
}
.sechead__title{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.3rem,5vw,2.2rem);line-height:1.06;margin:0;
  padding-bottom:12px;position:relative;
}
.sechead__title::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;
  transform:scaleX(0);transition:transform .85s cubic-bezier(.65,0,.35,1) .12s;
}
.sechead.is-in .sechead__title::after{transform:none}
.anim-off .sechead__title::after{transform:none}
.sechead__note{
  font-family:var(--text);font-style:italic;color:var(--ink-2);font-size:.92rem;
  margin:10px auto 0;max-width:52ch;
}

/* ---------- the black spread ---------- */
.spread{background:var(--ink);color:#D8CCC0;padding:var(--sec) 0;position:relative;z-index:2}
.spread .sechead__title{color:#F2E7DB}
.spread .sechead__label{color:#A8978A}
.spread .sechead__note{color:#C2B4A6}
.spread__head{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#F6EDE2;
  font-size:clamp(1.5rem,6vw,2.7rem);line-height:1.05;text-align:center;margin:0 auto 20px;max-width:20ch;
}
.spread .cols{color:#C8BAAC}
.spread .cols>p:first-of-type::first-letter{color:#F6EDE2}
.spread .cols h4{color:#F6EDE2}
.pull{
  font-family:var(--display);font-style:italic;font-weight:700;color:#F6EDE2;
  font-size:clamp(1.1rem,4.2vw,1.5rem);line-height:1.3;text-align:center;
  margin:22px auto 0;max-width:36ch;padding-top:16px;border-top:1px solid rgba(246,237,226,.4);
}

/* ---------- buttons ---------- */
.actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.actions--center{align-items:center;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;
  font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--spot);color:#F4E8DC;text-decoration:none;
  padding:15px 26px;border:2px solid var(--spot);border-radius:12px;
  min-height:44px;   /* iOS tap target */
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--spot-hi);border-color:var(--spot-hi)}
.btn--pale{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--pale:hover{background:transparent;color:var(--paper)}
.btn--xs{padding:7px 14px;font-size:.66rem;letter-spacing:.08em;width:auto;border-width:1px;min-height:44px}
.btn--lg{padding:17px 32px;font-size:.88rem}

/* ---------- classified-style lists ---------- */
.listing{list-style:none;margin:0;padding:0}
.listing li{padding:12px 0;border-top:1px solid var(--rule-2)}
.listing li:last-child{border-bottom:1px solid var(--rule-2)}
.listing h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:.92rem;letter-spacing:.03em;margin:0 0 4px;
}
.listing p{margin:0;font-size:.85rem;line-height:1.46;color:var(--ink-2)}
.listing__n{font-family:var(--display);font-weight:700;color:var(--spot);margin-right:.5em}
.spread .listing li{border-color:rgba(246,237,226,.28)}
.spread .listing h4{color:#F6EDE2}
.spread .listing p{color:#B3a496;color:#B3A496}
.spread .listing__n{color:#E7DFC9}

/* ---------- the two-column debate ---------- */
.debate{display:grid;gap:18px;margin-top:6px}
.debate__side{border:1px solid var(--ink);padding:18px 16px}
.debate__side--against{border-style:dashed}
.debate__tag{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:1rem;letter-spacing:.08em;text-align:center;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--ink);
}
.debate__side--for .debate__tag{color:var(--spot);border-bottom-color:var(--spot)}
.debate ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.debate li{font-size:.86rem;line-height:1.46;padding-left:16px;position:relative;color:var(--ink-2)}
.debate li::before{position:absolute;left:0;color:var(--ink-3)}
/* a drawn tick for the side we want them on, a cross for the other */
.debate__side--for li::before{
  content:"";top:.42em;width:10px;height:5px;
  border-left:2px solid var(--spot);border-bottom:2px solid var(--spot);transform:rotate(-45deg);
}
.debate__side--against li::before{content:"\00D7";font-size:1.05em;line-height:1;top:.08em}
/* the line under the two boxes: set at the boxes' size, centred, with air above */
.standfirst{
  font-size:.86rem;line-height:1.5;color:var(--ink-2);text-align:center;
  max-width:52ch;margin:28px auto 0;
}


/* ---------- the comparison ----------
   Tabular matter: a stacked list on a phone, a ruled table once there is room. */
.compare{width:100%;border-collapse:collapse;margin:0;font-size:.88rem}
.compare thead{display:none}
.compare tbody,.compare tr,.compare th,.compare td{display:block;width:100%}
.compare tr{padding:14px 0;border-top:1px solid var(--rule-2)}
.compare tr:last-child{border-bottom:1px solid var(--rule-2)}
.compare th[scope="row"]{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:.78rem;letter-spacing:.06em;text-align:left;margin:0 0 8px;padding:0;
}
.compare td{padding:4px 0 4px 15px;position:relative;color:var(--ink-2);line-height:1.45}
.compare td::before{
  content:attr(data-h);display:block;
  font-family:var(--text);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px;
}
.compare td:first-of-type{color:var(--ink-3)}
.compare td:first-of-type::after{
  content:"";position:absolute;left:0;top:1.35em;bottom:.35em;width:2px;background:var(--rule-2);
}
.compare td:last-of-type::after{
  content:"";position:absolute;left:0;top:1.35em;bottom:.35em;width:2px;background:var(--spot);
}
.assure-line{
  text-align:center;font-family:var(--text);font-style:italic;color:var(--ink-3);
  font-size:.82rem;margin:14px 0 0;
}

/* ---------- client results ----------
   A strip of plates that slides sideways on its own and can be pushed along
   by hand. The plates
   arrive already set on black, so they sit on the spread in full colour,
   unlike the newsprint cuts. One and a bit per screen on a phone, so the
   next one showing at the edge says there is more. */
.results{
  position:relative;
  /* it slides on its own, and can be swiped or scrolled by hand to move faster */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;
}
.results::-webkit-scrollbar{display:none}
.results.is-dragging{cursor:grabbing;user-select:none}
.results.is-dragging img{pointer-events:none}
.results__track{
  list-style:none;margin:0;padding:0;
  display:flex;width:max-content;
  /* No gap: each plate carries its own margin instead, so half the track is
     exactly where the second copy begins and the loop closes without a jump. */
}
.results__item img{-webkit-user-drag:none}
.results__item{flex:0 0 auto;width:min(74vw,300px);margin-right:14px}
.results__item figure{margin:0}
.results__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid rgba(246,237,226,.28)}
.results__item figcaption{
  display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-bottom:8px;
  border-bottom:1px solid rgba(246,237,226,.28);
  font-family:var(--text);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#A8978A;
}
.results__item figcaption span{font-family:var(--display);font-weight:700;color:#F6EDE2;letter-spacing:.14em}
.results__fine{
  text-align:center;font-family:var(--text);font-style:italic;color:#A8978A;
  font-size:.78rem;margin:14px auto 0;max-width:52ch;
}

/* ---------- profile ---------- */
.profile{display:grid;gap:22px}
.profile__head{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:var(--ink);
  font-size:clamp(1.25rem,4.8vw,1.95rem);line-height:1.08;margin:0 0 12px;
}
.sign{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--ink);margin:14px 0 0}

/* ---------- Q&A ---------- */
.q{border-top:1px solid var(--rule-2)}
.q:last-of-type{border-bottom:1px solid var(--rule-2)}
.q summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 0;font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.26;
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--spot)}
.q summary::after{content:"+";font-family:var(--display);font-weight:700;font-size:1.3em;line-height:1;color:var(--spot);flex:none}
.q[open] summary::after{content:"\2212"}
.q__a{padding:0 0 16px}
.q__a p{margin:0 0 .6em;font-size:.88rem;line-height:1.5}
.q__a p:last-child{margin:0}

/* ---------- the Q&A when it sits on a dark spread ----------
   .q was written for the paper, so its ink was near-black on near-black the
   moment the section moved onto a black ground. */
.spread .q{border-top-color:rgba(246,237,226,.26)}
.spread .q:last-of-type{border-bottom-color:rgba(246,237,226,.26)}
.spread .q summary{color:#F6EDE2}
.spread .q summary:hover{color:#E7DFC9}
.spread .q summary::after{color:#E7DFC9}
.spread .q__a p{color:#C8BAAC}
.spread .q__a .hi{color:#F6EDE2}
.spread .results__fine a{color:#E7DFC9}

/* ---------- back page ---------- */
.backpage{background:var(--ink);color:#D8CCC0;padding:var(--sec) 0;text-align:center;position:relative;z-index:2}
.backpage__inner{border:3px double rgba(242,231,219,.5);padding:30px 18px;display:grid;justify-items:center}
.backpage__mark{width:52px;height:52px;margin:0 0 16px}
.backpage__head{
  font-family:var(--display);font-weight:700;text-transform:uppercase;color:#F6EDE2;
  font-size:clamp(1.35rem,5.6vw,2.4rem);line-height:1.08;margin:0 0 10px;max-width:20ch;
}
.backpage__deck{font-family:var(--text);font-style:italic;font-size:1rem;color:#C2B4A6;margin:0 0 4px;max-width:36ch}
.backpage__fine{font-size:.78rem;color:#9C8C7E;margin:14px 0 0}
.backpage__fine a{color:#E7DFC9}

/* ---------- colophon ---------- */
.colophon{border-top:3px solid var(--ink);padding:30px 0 26px;position:relative;z-index:2}
.colophon__plate{text-align:center;padding-bottom:16px;border-bottom:1px solid var(--rule-2)}
.colophon__name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.88rem;letter-spacing:.14em;color:var(--ink);margin:0}
.colophon__sub{font-family:var(--text);font-style:italic;font-size:.74rem;color:var(--ink-3);margin:4px 0 0}
.colophon__contact{margin:18px 0;padding:0;display:grid}
.colophon__contact>div{padding:9px 0;border-bottom:1px solid var(--hair);display:grid;gap:2px}
.colophon__contact dt{font-family:var(--text);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.colophon__contact dd{margin:0;font-size:.85rem;color:var(--ink);overflow-wrap:anywhere}
.colophon__contact a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.colophon__legal{font-size:.64rem;line-height:1.45;color:var(--ink-3);margin:0}
.colophon__meta{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--text);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule-2);
}

/* ---------- standing CTA + press line ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27617%27%20height=%27617%27%3E%3Cfilter%20id=%27c%27%20x=%270%27%20y=%270%27%20width=%27100%25%27%20height=%27100%25%27%3E%3CfeTurbulence%20type=%27turbulence%27%20baseFrequency=%270.011%27%20numOctaves=%274%27%20seed=%2729%27%20result=%27n%27/%3E%3CfeDiffuseLighting%20in=%27n%27%20lighting-color=%27%23ffffff%27%20surfaceScale=%273.4%27%3E%3CfeDistantLight%20azimuth=%2768%27%20elevation=%2744%27/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect%20width=%27617%27%20height=%27617%27%20filter=%27url%28%23c%29%27%20opacity=%270.32%27/%3E%3C/svg%3E");
  background-size:617px 617px;background-blend-mode:multiply;
  border-top:1px solid var(--ink);
  /* the running head's double rule, mirrored along the foot of the sheet */
  box-shadow:0 -3px 0 -1px var(--paper), 0 -4px 0 -1px var(--ink);
  transform:translateY(112%);transition:transform .3s ease;
  padding-bottom:env(safe-area-inset-bottom);
}
.dock.is-up{transform:none}
.dock__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px var(--pad)}
.dock p{
  margin:0;font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:.76rem;line-height:1.3;
}
.dock p b{
  font-family:var(--display);font-style:normal;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;
}
/* ---------- cookie consent ----------
   A strip along the foot of the screen, on the same stock and with the same
   double rule as the dock. It never covers the page or stops it scrolling,
   so a visitor can read and book before choosing. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:0 12px max(12px,env(safe-area-inset-bottom));
  pointer-events:none;
}
.consent[hidden]{display:none}
.consent:focus{outline:none}
.consent__inner{
  pointer-events:auto;
  width:min(760px,100%);margin:0 auto;padding:14px 16px;
  background-color:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--ink), 0 14px 40px -14px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:12px;
}
.consent__tag{
  font-family:var(--text);font-style:normal;font-weight:700;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--spot);
  margin-right:4px;
}
.consent__text{margin:0;font-style:italic;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
/* Accept and Decline are the same size and the same weight. */
.consent__actions{display:flex;gap:8px;flex:none}
.consent__btn{flex:1 1 0;min-width:0;padding:10px 18px;font-size:.68rem;letter-spacing:.12em;border-width:2px}
.consent__btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.consent__btn--ink:hover{background:#3A302A;border-color:#3A302A;color:var(--paper)}
@media (min-width:700px){
  .consent{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .consent__inner{flex-direction:row;align-items:center;gap:22px;padding:14px 18px 14px 22px}
  .consent__btn{flex:none;min-width:108px}
}
.colophon__meta button.cookie-link{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
  /* a 16px text button is not a tap target; pad it out to 44 */
  min-height:44px;display:inline-flex;align-items:center;
}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--spot)}

/* ---------- scroll choreography ---------- */
.js [data-anim]{opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1)}
.js [data-anim="up"]{transform:translateY(16px)}
.js [data-anim].is-in{opacity:1;transform:none}
.js [data-anim="stagger"]{opacity:1}
.js [data-anim="stagger"]>*{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.25,1)}
.js [data-anim="stagger"].is-in>*{opacity:1;transform:none}
.js [data-anim="stagger"].is-in>*:nth-child(1){transition-delay:.04s}
.js [data-anim="stagger"].is-in>*:nth-child(2){transition-delay:.11s}
.js [data-anim="stagger"].is-in>*:nth-child(3){transition-delay:.18s}
.js [data-anim="stagger"].is-in>*:nth-child(4){transition-delay:.25s}
.js [data-anim="stagger"].is-in>*:nth-child(5){transition-delay:.32s}

.js [data-anim="plate"]{opacity:1}
.js [data-anim="plate"] .masthead__name{opacity:0;transform:scale(1.04);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.25,1)}
.js [data-anim="plate"].is-in .masthead__name{opacity:1;transform:none}

.js [data-anim="lines"]{opacity:1}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.w-i{display:inline-block;transform:translateY(110%);transition:transform .62s cubic-bezier(.2,.7,.25,1)}
.is-in .w-i{transform:none}

.js [data-anim="wipe"]{opacity:1}
.js [data-anim="wipe"] img{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
.js [data-anim="wipe"].is-in img{clip-path:inset(0 0 0 0)}

.anim-off [data-anim],.anim-off [data-anim="stagger"]>*{opacity:1!important;transform:none!important}
.anim-off .w-i,.anim-off .masthead__name{transform:none!important;opacity:1!important}

/* ---------- 700px ---------- */
@media (max-width:539px){
  .runhead__mark::after{display:none}
}

@media (min-width:700px){
  :root{--pad:28px}
  .actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}
  .btn{width:auto}
  .cols{columns:2;column-gap:26px;column-rule:1px solid var(--rule-2)}
  .cols p,.cols h4{break-inside:avoid-column}
  .debate{grid-template-columns:1fr 1fr}
  .results__item{width:300px;margin-right:18px}
  .offer{padding:28px 30px}
  .offer__list{display:inline-grid;text-align:left}
  .cut img{aspect-ratio:16/9}
  .compare{table-layout:fixed}
  .compare thead{display:table-header-group}
  .compare tbody{display:table-row-group}
  .compare tr{display:table-row;padding:0}
  .compare th,.compare td{display:table-cell;vertical-align:top;padding:12px 14px;border-top:1px solid var(--rule-2)}
  .compare thead th{
    font-family:var(--text);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-3);text-align:left;border-top:0;border-bottom:3px solid var(--ink);padding-bottom:8px;
  }
  .compare thead th:last-child{color:var(--spot)}
  .compare th[scope="row"]{width:28%;margin:0;padding-left:0;font-size:.74rem}
  .compare thead th:nth-child(1){width:28%}
  .compare thead th:nth-child(2),.compare thead th:nth-child(3){width:36%}
  .compare td{width:36%}
  .compare td::before{display:none}
  .compare td::after{display:none}
  .compare td:last-of-type{background:rgba(152,8,47,.05);border-left:2px solid var(--spot)}
  .compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:1px solid var(--rule-2)}
  .colophon__contact{grid-template-columns:1.6fr .7fr 1fr;gap:0 24px}
  .colophon__contact>div{border-bottom:0;padding:10px 0 0}
}

/* ---------- 1050px: the full sheet ---------- */
@media (min-width:1050px){
  :root{--pad:40px}
  .runhead__inner{gap:22px;padding:7px 0}
  .runhead__nav{display:flex;align-items:center;gap:0}
  .runhead__nav a{
    font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-2);text-decoration:none;padding:0 12px;position:relative;
    white-space:nowrap;   /* nav items were breaking over two lines */
  }
  .runhead__nav a + a::before{
    content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:1px;background:var(--rule-2);
  }
  .runhead__nav a:hover{color:var(--spot)}
  .masthead{padding-top:28px}
  .cols{columns:3;column-gap:30px}
  .results__item{width:340px;margin-right:22px}
  .dock{display:none}
}

/* between the nav appearing and there being room for it, the mark and the
   call to action carry the bar on their own */
@media (min-width:1050px) and (max-width:1139px){
  .runhead__nav{display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js [data-anim],.js [data-anim="stagger"]>*{opacity:1;transform:none}
  .w-i,.masthead__name{transform:none;opacity:1}
  .js [data-anim="wipe"] img{clip-path:none}
  .dock{transition:none}
}