/* ==========================================================================
   DC pages v1.2.0. Design system and components for the Distinctive
   Chesterfields secondary pages. UK theme "distinctive". Pages: DC-11 Why
   Distinctive, DC-12 Our Story, DC-13 The Build. Each version's additions are
   one block at the end of the file, so an edited copy takes them by pasting.

   The kit is the DC-03 homepage's: coloured grounds, a texture, a cut corner
   on editorial photographs, an offset outline frame, two line headings, and
   flex grids that never leave one card alone on a row. A secondary page should
   read as the same system as the homepage and the category page.

   Scope: every rule starts .dc-pg, the wrapper the engine prints. The reset is
   one class plus a type, every component is at least two classes, so a
   component always outranks the reset and the reset always outranks the
   theme. Only two properties take !important in the reset, text-align and
   text-transform on headings. Link and button label colours take it at
   component level, because a theme a{color:x !important} beats anything else.

   Palette: orange and gold are the UK theme's own, measured off the live
   /en-gb/why-distinctive/ page on 10 September 2026 (#ec8d55, #ffc953). The
   US build signed off #e1834f and #e9bc4d. If the UK homepage ships the US
   values, change one set so the two pages agree.

   Type: the theme registers the faces, this file only names them. GT Eesti
   Display carries body text and the first line of a heading, GT Ultra Fine
   the second line. font-synthesis is off, so a weight the theme did not
   register is never faked into a smeared bold.

   Texture: the lattice is Chesterfield deep buttoning, a diamond of pleats
   with a button at every crossing, the same mark the live site scatters in
   the corners of its colour bands. Decoration only, behind everything.

   Enqueued as a real file with a filemtime version, because WP Rocket's
   unused CSS pass strips a large inline style block. The engine inlines this
   file only when the enqueue did not happen, and ?dc_pg_debug=1 says which.
   ========================================================================== */

.dc-pg{
  --dc-teal:#21565f;
  --dc-teal-d:#163d44;
  --dc-orange:#ec8d55;
  --dc-gold:#ffc953;
  --dc-ink:#013852;
  --dc-mut:#4f6770;
  --dc-line:#e2ded7;
  --dc-cream:#f7f4f0;
  --dc-white:#fff;

  --dc-sans:'GT Eesti Display','GTEestiDisplay','GT Eesti','Jost','Helvetica Neue',Arial,sans-serif;
  --dc-serif:'GT Ultra Fine','GTUltraFine','GT Ultra','Playfair Display',Georgia,'Times New Roman',serif;

  --dc-wrap:1400px;
  --dc-gut:24px;
  --dc-sec:112px;
  --dc-r:3px;
  --dc-cut:34px;
  --dc-off:20px;
}

/* --- Defensive reset ------------------------------------------------------ */
.dc-pg,.dc-pg *,.dc-pg *::before,.dc-pg *::after{box-sizing:border-box}
.dc-pg{
  margin:0;padding:0;border:0;box-shadow:none;color:var(--dc-ink);background:var(--dc-white);
  font-family:var(--dc-sans);font-size:16px;line-height:1.65;font-weight:400;
  text-align:left;overflow-x:clip;-webkit-font-smoothing:antialiased;font-synthesis:none;
}
.dc-pg h1,.dc-pg h2,.dc-pg h3,.dc-pg h4{
  margin:0;padding:0;border:0;background:none;box-shadow:none;
  font-family:var(--dc-sans);font-weight:700;font-style:normal;line-height:1.08;letter-spacing:0;
  color:inherit;overflow-wrap:break-word;
  text-align:left !important;text-transform:uppercase !important;
}
.dc-pg h1::before,.dc-pg h2::before,.dc-pg h3::before,
.dc-pg h1::after,.dc-pg h2::after,.dc-pg h3::after{content:none}
.dc-pg p,.dc-pg ul,.dc-pg ol,.dc-pg li,.dc-pg figure,.dc-pg blockquote,.dc-pg figcaption,.dc-pg dl,.dc-pg dd{
  margin:0;padding:0;border:0;background:none;text-indent:0;list-style:none;quotes:none;
  font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;
  line-height:inherit;letter-spacing:inherit;color:inherit;text-align:inherit;text-transform:none;
}
.dc-pg li::before,.dc-pg li::after,.dc-pg blockquote::before,.dc-pg blockquote::after{content:none}
.dc-pg li::marker{content:none}
.dc-pg div,.dc-pg section,.dc-pg nav,.dc-pg span{border:0;background:none;box-shadow:none}
.dc-pg section,.dc-pg nav{margin:0;padding:0}
.dc-pg a{color:inherit;text-decoration:none;background:none;border:0;box-shadow:none}
.dc-pg b,.dc-pg strong{font-weight:700}
.dc-pg img,.dc-pg svg{display:block;max-width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.dc-pg button{
  font:inherit;color:inherit;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  cursor:pointer;text-transform:none;letter-spacing:inherit;line-height:1;white-space:normal;min-height:0;
  -webkit-appearance:none;appearance:none;
}
.dc-pg :focus-visible{outline:3px solid var(--dc-teal);outline-offset:3px}

/* --- Layout --------------------------------------------------------------- */
/* padding-block, never shorthand padding, on anything that shares an element
   with .dc-wrap. A shorthand kills the gutter (DC-02, three times). */
.dc-pg .dc-wrap{width:100%;max-width:var(--dc-wrap);margin:0 auto;padding:0 var(--dc-gut)}
.dc-pg .dc-sec{position:relative;padding-block:var(--dc-sec)}
.dc-pg .dc-sec--cream{background:var(--dc-cream)}
.dc-pg .dc-sec--orange{background:var(--dc-orange);color:var(--dc-teal-d)}
.dc-pg .dc-sec--gold{background:var(--dc-gold);color:var(--dc-teal-d)}
.dc-pg .dc-sec--teal{background:var(--dc-teal);color:#fff}
.dc-pg .dc-sec--teald{background:var(--dc-teal-d);color:#fff}
.dc-pg .dc-sec--teal :focus-visible,.dc-pg .dc-sec--teald :focus-visible,
.dc-pg .dc-hero :focus-visible{outline-color:var(--dc-gold)}
.dc-pg .dc-sec--orange :focus-visible{outline-color:var(--dc-teal-d)}

/* --- Texture: the buttoning lattice --------------------------------------- */
/* A pseudo element behind the content, so it can never take part in layout
   or catch a click. Masked to a corner so it reads as the live site's corner
   clusters rather than wallpaper. */
.dc-pg .dc-tex{isolation:isolate}
.dc-pg .dc-tex::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:repeat;background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 0% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 85% at 0% 0%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
}
.dc-pg .dc-tex--br::before{
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 100% 100%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 85% at 100% 100%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);
}
.dc-pg .dc-tex--tuft::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cpath%20d='M0%200L44%2044M44%200L0%2044'%20stroke='rgba(255,255,255,0.08)'%20stroke-width='1'%20fill='none'/%3E%3Cg%20fill='rgba(255,255,255,0.34)'%3E%3Ccircle%20cx='22'%20cy='22'%20r='1.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.8'/%3E%3Ccircle%20cx='44'%20cy='0'%20r='1.8'/%3E%3Ccircle%20cx='0'%20cy='44'%20r='1.8'/%3E%3Ccircle%20cx='44'%20cy='44'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E")}
.dc-pg .dc-tex--tuftink::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='44'%20height='44'%3E%3Cpath%20d='M0%200L44%2044M44%200L0%2044'%20stroke='rgba(22,61,68,0.11)'%20stroke-width='1'%20fill='none'/%3E%3Cg%20fill='rgba(22,61,68,0.3)'%3E%3Ccircle%20cx='22'%20cy='22'%20r='1.8'/%3E%3Ccircle%20cx='0'%20cy='0'%20r='1.8'/%3E%3Ccircle%20cx='44'%20cy='0'%20r='1.8'/%3E%3Ccircle%20cx='0'%20cy='44'%20r='1.8'/%3E%3Ccircle%20cx='44'%20cy='44'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E")}

/* --- Media kit ------------------------------------------------------------ */
/* A percentage height against an aspect-ratio parent resolves to zero in
   Chrome, so the image is absolutely positioned inside the box. */
.dc-pg .dc-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--dc-cream)}
.dc-pg .dc-pic--sq{aspect-ratio:1/1}
.dc-pg .dc-pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* The cut corner goes on the photograph box, never on anything focusable:
   clip-path clips outline and box-shadow on the same element. */
.dc-pg .dc-cut{clip-path:polygon(var(--dc-cut) 0,100% 0,100% calc(100% - var(--dc-cut)),calc(100% - var(--dc-cut)) 100%,0 100%,0 var(--dc-cut))}
/* An outline rectangle offset behind a photograph. Off below 980px, where the
   offset would reach past the gutter and put a scrollbar on a phone. */
.dc-pg .dc-fr{position:relative;isolation:isolate}
.dc-pg .dc-fr::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:var(--dc-off);left:var(--dc-off);right:calc(var(--dc-off) * -1);bottom:calc(var(--dc-off) * -1);
  border:2px solid var(--dc-orange);
}
.dc-pg .dc-fr--white::after{border-color:rgba(255,255,255,.42)}

/* --- Type ----------------------------------------------------------------- */
.dc-pg .dc-h{display:block;color:var(--dc-teal)}
.dc-pg .dc-h .dc-h__a{
  display:block;font-family:var(--dc-sans);font-weight:700;
  font-size:clamp(15px,1.45vw,20px);letter-spacing:.16em;line-height:1.2;
}
.dc-pg .dc-h .dc-h__b{
  display:block;font-family:var(--dc-serif);font-weight:700;
  font-size:clamp(32px,4.2vw,58px);letter-spacing:0;line-height:1.02;margin-top:.14em;
}
.dc-pg .dc-h--lg .dc-h__b{font-size:clamp(34px,4.6vw,64px)}
.dc-pg .dc-hd{max-width:760px;margin-bottom:56px}
.dc-pg .dc-hd--c{margin-left:auto;margin-right:auto;text-align:center}
.dc-pg .dc-hd--c .dc-h{text-align:center !important}
.dc-pg .dc-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font-size:12px;font-weight:700;letter-spacing:.22em;line-height:1.4;text-transform:uppercase;color:var(--dc-teal);
}
.dc-pg .dc-eyebrow::before{content:"";flex:0 0 28px;height:2px;background:var(--dc-orange)}
.dc-pg .dc-eyebrow--c{justify-content:center}
.dc-pg .dc-eyebrow--c::after{content:"";flex:0 0 28px;height:2px;background:var(--dc-orange)}
.dc-pg .dc-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--dc-teal);font-weight:500}
.dc-pg .dc-body{font-size:16.5px;line-height:1.75}
.dc-pg .dc-body p + p{margin-top:16px}

/* grounds, after the base type so they win at equal specificity */
.dc-pg .dc-sec--orange .dc-h,.dc-pg .dc-sec--gold .dc-h{color:var(--dc-teal-d)}
.dc-pg .dc-sec--gold .dc-h{color:var(--dc-teal)}
.dc-pg .dc-sec--teal .dc-h,.dc-pg .dc-sec--teald .dc-h{color:#fff}
.dc-pg .dc-sec--teal .dc-h .dc-h__a,.dc-pg .dc-sec--teald .dc-h .dc-h__a{color:var(--dc-gold)}
.dc-pg .dc-sec--orange .dc-eyebrow{color:var(--dc-teal-d)}
.dc-pg .dc-sec--orange .dc-eyebrow::before,.dc-pg .dc-sec--orange .dc-eyebrow::after{background:var(--dc-teal-d)}
.dc-pg .dc-sec--teal .dc-body,.dc-pg .dc-sec--teald .dc-body{color:rgba(255,255,255,.88)}

/* --- Buttons and links ---------------------------------------------------- */
.dc-pg .dc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 30px;
  font-family:var(--dc-sans);font-size:13px;font-weight:700;letter-spacing:.14em;line-height:1.2;
  text-transform:uppercase;text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:var(--dc-r);transition:background-color .18s,color .18s;
}
.dc-pg .dc-btn--teal{background:var(--dc-teal);color:#fff !important}
.dc-pg .dc-btn--teal:hover{background:var(--dc-teal-d)}
/* Dark ink on the orange: white on #ec8d55 is 2.5:1 and fails AA. */
.dc-pg .dc-btn--orange{background:var(--dc-orange);color:var(--dc-teal-d) !important}
.dc-pg .dc-btn--orange:hover{background:var(--dc-gold)}
.dc-pg .dc-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;
  color:var(--dc-teal) !important;text-decoration:none;
}
.dc-pg .dc-link::after{content:"";flex:0 0 auto;width:18px;height:2px;background:var(--dc-orange);transition:width .2s}
.dc-pg .dc-link:hover::after{width:32px}
.dc-pg .dc-sec--orange .dc-link,.dc-pg .dc-sec--gold .dc-link{color:var(--dc-teal-d) !important}
.dc-pg .dc-sec--orange .dc-link::after,.dc-pg .dc-sec--gold .dc-link::after{background:var(--dc-teal-d)}

/* --- Grids ---------------------------------------------------------------- */
/* Flex, not grid, and the BASIS decides the line break. The engine prints a
   column count per breakpoint worked out from the item count, so no row ever
   holds exactly one item while the row above holds several. flex-grow is 0,
   so nothing stretches to fill a short row. Mobile first: sm, then md at
   640px, then lg at 1100px. Never a layout custom property inline. */
.dc-pg .dc-cols{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--dc-gy,40px) var(--dc-gx,32px);margin:0;padding:0;list-style:none}
.dc-pg .dc-cols > *{flex:0 0 100%;max-width:100%;min-width:0}
.dc-pg .dc-cols--sm-2 > *{flex-basis:calc((100% - var(--dc-gx,32px)) / 2 - .5px);max-width:calc((100% - var(--dc-gx,32px)) / 2)}
.dc-pg .dc-cols--sm-3 > *{flex-basis:calc((100% - 2 * var(--dc-gx,32px)) / 3 - .5px);max-width:calc((100% - 2 * var(--dc-gx,32px)) / 3)}
@media (min-width:640px){
  .dc-pg .dc-cols--md-1 > *{flex-basis:100%;max-width:100%}
  .dc-pg .dc-cols--md-2 > *{flex-basis:calc((100% - var(--dc-gx,32px)) / 2 - .5px);max-width:calc((100% - var(--dc-gx,32px)) / 2)}
  .dc-pg .dc-cols--md-3 > *{flex-basis:calc((100% - 2 * var(--dc-gx,32px)) / 3 - .5px);max-width:calc((100% - 2 * var(--dc-gx,32px)) / 3)}
  .dc-pg .dc-cols--md-4 > *{flex-basis:calc((100% - 3 * var(--dc-gx,32px)) / 4 - .5px);max-width:calc((100% - 3 * var(--dc-gx,32px)) / 4)}
  .dc-pg .dc-cols--md-5 > *{flex-basis:calc((100% - 4 * var(--dc-gx,32px)) / 5 - .5px);max-width:calc((100% - 4 * var(--dc-gx,32px)) / 5)}
}
@media (min-width:1100px){
  .dc-pg .dc-cols--lg-1 > *{flex-basis:100%;max-width:100%}
  .dc-pg .dc-cols--lg-2 > *{flex-basis:calc((100% - var(--dc-gx,32px)) / 2 - .5px);max-width:calc((100% - var(--dc-gx,32px)) / 2)}
  .dc-pg .dc-cols--lg-3 > *{flex-basis:calc((100% - 2 * var(--dc-gx,32px)) / 3 - .5px);max-width:calc((100% - 2 * var(--dc-gx,32px)) / 3)}
  .dc-pg .dc-cols--lg-4 > *{flex-basis:calc((100% - 3 * var(--dc-gx,32px)) / 4 - .5px);max-width:calc((100% - 3 * var(--dc-gx,32px)) / 4)}
  .dc-pg .dc-cols--lg-5 > *{flex-basis:calc((100% - 4 * var(--dc-gx,32px)) / 5 - .5px);max-width:calc((100% - 4 * var(--dc-gx,32px)) / 5)}
}

/* --- Hero ----------------------------------------------------------------- */
.dc-pg .dc-hero{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(480px,66vh,720px);background:var(--dc-teal-d);color:#fff;
}
.dc-pg .dc-hero__bg{position:absolute;inset:0;z-index:-2}
.dc-pg .dc-hero__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 38%}
/* The words sit in HTML over the photograph, so the scrim is what keeps them
   legible whatever photograph an editor picks. */
.dc-pg .dc-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,33,37,0) 34%,rgba(12,33,37,.5) 62%,rgba(12,33,37,.9) 100%);
}
.dc-pg .dc-hero--plain::after{display:none}
.dc-pg .dc-hero__in{padding-block:120px 76px}
.dc-pg .dc-hero .dc-h{color:#fff}
.dc-pg .dc-hero .dc-h .dc-h__a{color:var(--dc-gold);font-size:clamp(16px,1.6vw,22px);letter-spacing:.24em}
.dc-pg .dc-hero .dc-h .dc-h__b{font-size:clamp(38px,9vw,120px);line-height:.94;margin-top:.1em}
.dc-pg .dc-hero__lead{margin-top:22px;max-width:54ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:rgba(255,255,255,.92)}

/* --- Breadcrumb ----------------------------------------------------------- */
.dc-pg .dc-crumbs{background:#fff;border-bottom:1px solid var(--dc-line)}
.dc-pg .dc-crumbs .dc-wrap{padding-block:16px;font-size:12px;font-weight:700;letter-spacing:.13em;line-height:1.5;text-transform:uppercase;color:var(--dc-mut)}
.dc-pg .dc-crumbs a{color:var(--dc-teal) !important;text-decoration:underline;text-decoration-color:var(--dc-orange);text-decoration-thickness:2px;text-underline-offset:4px}

/* --- Intro ---------------------------------------------------------------- */
.dc-pg .dc-intro{padding-block:calc(var(--dc-sec) * .8) var(--dc-sec)}
.dc-pg .dc-intro__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,104px);row-gap:28px;align-items:start}
.dc-pg .dc-intro .dc-h{position:relative;padding-top:30px}
.dc-pg .dc-intro .dc-h::before{content:"";position:absolute;top:0;left:0;width:64px;height:4px;background:var(--dc-orange)}
.dc-pg .dc-intro__c .dc-lead + .dc-body{margin-top:22px}

/* --- Principles: ruled items on orange ------------------------------------ */
.dc-pg .dc-rules .dc-hd{margin-bottom:64px}
.dc-pg .dc-rule{--dc-gx:48px;--dc-gy:52px}
.dc-pg .dc-rule__i{display:flex;flex-direction:column;align-items:flex-start}
/* A span, so display:block is explicit: an inline element ignores width and
   height, which is how a row of icons collapses the day an SVG 404s. */
.dc-pg .dc-rule__ic{display:block;width:56px;height:56px;margin-bottom:22px}
.dc-pg .dc-rule__ic img{width:56px;height:56px;object-fit:contain}
.dc-pg .dc-rule__t{
  align-self:stretch;padding-top:18px;border-top:1px solid rgba(22,61,68,.34);
  font-size:15px;line-height:1.35;letter-spacing:.1em;color:var(--dc-teal-d);
}
.dc-pg .dc-rule__p{margin-top:12px;font-size:15px;line-height:1.7;color:var(--dc-teal-d)}
.dc-pg .dc-rule__more{margin-top:16px}

/* --- Made better: the build, as a spine ----------------------------------- */
.dc-pg .dc-spine{position:relative;display:flex;flex-direction:column;gap:clamp(72px,8vw,120px)}
.dc-pg .dc-spine::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,transparent 0,var(--dc-line) 10%,var(--dc-line) 90%,transparent 100%);
}
.dc-pg .dc-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:128px;align-items:center}
.dc-pg .dc-step__m{grid-column:1;grid-row:1}
.dc-pg .dc-step__c{grid-column:2;grid-row:1}
.dc-pg .dc-step--rev .dc-step__m{grid-column:2}
.dc-pg .dc-step--rev .dc-step__c{grid-column:1}
.dc-pg .dc-step--text .dc-step__c{grid-column:1 / -1;justify-self:center;max-width:680px;position:relative;z-index:1;background:#fff;padding:28px 0}
/* The node is a button of the lattice: a diamond, the numeral turned back. */
.dc-pg .dc-step__n{
  position:absolute;z-index:2;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--dc-teal);box-shadow:0 0 0 8px #fff;transform:rotate(45deg);
}
.dc-pg .dc-step__n > span{display:block;transform:rotate(-45deg);font-family:var(--dc-serif);font-weight:700;font-size:24px;line-height:1;color:#fff}
.dc-pg .dc-step--text .dc-step__n{top:0;margin-top:-28px}
.dc-pg .dc-step__k{margin-bottom:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dc-mut)}
.dc-pg .dc-step__t{margin-bottom:20px;font-size:clamp(22px,2.1vw,30px);line-height:1.12;letter-spacing:.02em;color:var(--dc-teal)}
.dc-pg .dc-step__more{margin-top:22px}
.dc-pg .dc-spine__more{display:flex;justify-content:center;margin-top:clamp(56px,6vw,88px)}

/* --- Reviews and client logos, the gold band ------------------------------- */
.dc-pg .dc-proof__in{display:grid;grid-template-columns:minmax(0,1fr);row-gap:64px}
.dc-pg .dc-proof__in--two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:112px}
.dc-pg .dc-proof__col{position:relative;min-width:0}
.dc-pg .dc-proof__in--two .dc-proof__logos::before{content:"";position:absolute;top:0;bottom:0;left:-56px;width:1px;background:rgba(22,61,68,.28)}
.dc-pg .dc-proof .dc-hd{margin-bottom:0}
.dc-pg .dc-proof__more{margin-top:26px}

.dc-pg .dc-car{margin-top:34px}
.dc-pg .dc-car__track{
  position:relative;display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;
  scrollbar-color:rgba(22,61,68,.45) transparent;padding-bottom:12px;
}
/* Without the script the track still swipes and scrolls, with a scrollbar;
   with it, the arrows take over and the scrollbar goes. */
.dc-pg .dc-car.is-ready .dc-car__track{scrollbar-width:none;padding-bottom:0}
.dc-pg .dc-car.is-ready .dc-car__track::-webkit-scrollbar{display:none}
.dc-pg .dc-rev{
  position:relative;overflow:hidden;flex:0 0 100%;min-width:0;display:flex;flex-direction:column;
  scroll-snap-align:start;scroll-snap-stop:always;
  padding:34px 36px 30px;background:#fff;border-left:4px solid var(--dc-teal);
}
.dc-pg .dc-rev::after{
  content:"\201C";position:absolute;top:-10px;right:22px;pointer-events:none;
  font-family:var(--dc-serif);font-size:120px;line-height:1;color:var(--dc-gold);
}
.dc-pg .dc-rev__s{position:relative;z-index:1;display:flex;gap:4px;margin-bottom:16px;color:var(--dc-teal)}
.dc-pg .dc-rev__s i{display:block;width:16px;height:16px;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.dc-pg .dc-rev__s i.is-off{opacity:.22}
.dc-pg .dc-rev__q{position:relative;z-index:1;font-size:16px;line-height:1.7;color:var(--dc-ink)}
.dc-pg .dc-rev__q p + p{margin-top:12px}
.dc-pg .dc-rev__a{margin-top:auto;padding-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--dc-teal)}
.dc-pg .dc-car__nav{display:none;align-items:center;gap:14px;margin-top:18px}
.dc-pg .dc-car.is-ready .dc-car__nav{display:flex}
.dc-pg .dc-car__btn{
  display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1px solid rgba(22,61,68,.5);border-radius:var(--dc-r);color:var(--dc-teal-d);background:transparent;
  transition:background-color .18s,color .18s;
}
.dc-pg .dc-car__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dc-pg .dc-car__btn:hover:not([disabled]){background:var(--dc-teal-d);color:#fff}
.dc-pg .dc-car__btn[disabled]{opacity:.35;cursor:default}
.dc-pg .dc-car__count{min-width:4.5em;text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--dc-teal-d)}

/* Ruled logo grid. Borders on the cells rather than a gap over a background,
   so a short last row leaves clean space instead of a dark block. Cells are
   3:2 because logos are wide: squares made ten logos 870px tall on a phone. */
.dc-pg .dc-logos{--dc-gx:0px;--dc-gy:0px;margin-top:34px;border-top:1px solid rgba(22,61,68,.2);border-left:1px solid rgba(22,61,68,.2)}
.dc-pg .dc-logo{
  display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:12px 16px;
  background:#fff;border-right:1px solid rgba(22,61,68,.2);border-bottom:1px solid rgba(22,61,68,.2);
}
.dc-pg .dc-logo img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.9;transition:filter .2s,opacity .2s}
.dc-pg .dc-logo:hover img{filter:none;opacity:1}

/* --- Feature split (Handmade in Britain) ---------------------------------- */
.dc-pg .dc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,7vw,112px);row-gap:44px;align-items:center}
.dc-pg .dc-split--rev .dc-split__m{order:2}
.dc-pg .dc-split--solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.dc-pg .dc-split__m,.dc-pg .dc-split__c{min-width:0}
.dc-pg .dc-feature__ic{display:block;width:52px;margin-bottom:24px}
.dc-pg .dc-feature__ic img{width:52px;height:auto}
.dc-pg .dc-feature .dc-body{margin-top:26px}
.dc-pg .dc-feature__cta{margin-top:34px}

/* --- Banner (Not for everyone) -------------------------------------------- */
.dc-pg .dc-banner{
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-height:clamp(420px,56vw,820px);padding:48px 24px 54px;background:var(--dc-teal-d);color:#fff;text-align:center;
}
.dc-pg .dc-banner__bg{position:absolute;inset:0;z-index:-2}
.dc-pg .dc-banner__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 42%}
.dc-pg .dc-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,30,34,0) 36%,rgba(10,30,34,.6) 76%,rgba(10,30,34,.84) 100%);
}
.dc-pg .dc-banner__c{display:flex;flex-direction:column;align-items:center;gap:24px}
.dc-pg .dc-banner .dc-h{color:#fff;text-align:center !important}
.dc-pg .dc-banner .dc-h .dc-h__a{color:#fff;font-size:clamp(30px,4.4vw,64px);letter-spacing:.04em;line-height:1}
.dc-pg .dc-banner .dc-h .dc-h__b{font-size:clamp(38px,6vw,88px);line-height:.96}
.dc-pg .dc-banner__logo{width:clamp(140px,14vw,196px);height:auto}

/* --- Statement (Clare Laidlaw) -------------------------------------------- */
.dc-pg .dc-stmt .dc-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.dc-pg .dc-stmt__glyph{display:block;width:46px;height:44px;margin-bottom:24px;fill:var(--dc-orange);stroke:none}
.dc-pg .dc-stmt__q{font-size:clamp(17px,1.35vw,19.5px);line-height:1.75;color:var(--dc-teal-d)}
.dc-pg .dc-stmt__q p + p{margin-top:14px}
.dc-pg .dc-stmt__by{display:flex;align-items:center;gap:16px;margin-top:30px;padding-top:24px;border-top:1px solid var(--dc-line)}
.dc-pg .dc-stmt__av{flex:0 0 60px;width:60px;height:60px;border-radius:50%;object-fit:cover}
.dc-pg .dc-stmt__who{display:flex;flex-direction:column;gap:3px;font-size:14px;line-height:1.4;color:var(--dc-mut)}
.dc-pg .dc-stmt__who b{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dc-teal)}

/* --- Action cards on teal -------------------------------------------------- */
.dc-pg .dc-cards .dc-wrap{padding-top:30px}
.dc-pg .dc-tri{--dc-gx:26px;--dc-gy:58px}
.dc-pg .dc-tri__c{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:236px;
  padding:64px 32px 30px;background:#fff;border-top:4px solid var(--dc-orange);
  transition:transform .2s,box-shadow .2s;
}
.dc-pg .dc-tri__c.has-link:hover{transform:translateY(-3px);box-shadow:0 26px 48px -30px rgba(0,0,0,.6)}
.dc-pg .dc-tri__i{
  position:absolute;top:-30px;left:32px;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;background:var(--dc-orange);color:var(--dc-teal-d);
}
.dc-pg .dc-tri__i svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dc-pg .dc-tri__c .dc-h{color:var(--dc-teal)}
.dc-pg .dc-tri__c .dc-h .dc-h__a{color:var(--dc-teal);font-size:15px;letter-spacing:.14em}
.dc-pg .dc-tri__c .dc-h .dc-h__b{color:var(--dc-teal);font-size:clamp(24px,2.2vw,30px);line-height:1.05}
.dc-pg .dc-tri__p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--dc-mut)}
.dc-pg .dc-tri__link{
  margin-top:auto;padding-top:26px;display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;
  color:var(--dc-teal) !important;text-decoration:none;
}
/* The whole card is the link, with no anchor nested inside another. */
.dc-pg .dc-tri__link::before{content:"";position:absolute;inset:0;z-index:1}
.dc-pg .dc-tri__link::after{content:"";width:18px;height:2px;background:var(--dc-orange);transition:width .2s}
.dc-pg .dc-tri__c:hover .dc-tri__link::after{width:32px}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1099px){
  .dc-pg{--dc-sec:96px}
  .dc-pg .dc-step{column-gap:96px}
  .dc-pg .dc-proof__in--two{grid-template-columns:minmax(0,1fr)}
  .dc-pg .dc-proof__in--two .dc-proof__logos::before{top:-32px;bottom:auto;left:0;right:0;width:auto;height:1px}
}
@media (max-width:980px){
  .dc-pg{--dc-sec:80px}
  .dc-pg .dc-intro__in,
  .dc-pg .dc-split,
  .dc-pg .dc-stmt .dc-split{grid-template-columns:minmax(0,1fr)}
  .dc-pg .dc-split--rev .dc-split__m{order:0}
  .dc-pg .dc-fr::after{display:none}
  .dc-pg .dc-spine::before{left:27px}
  .dc-pg .dc-step{grid-template-columns:minmax(0,1fr);row-gap:28px;padding-left:80px}
  .dc-pg .dc-step__m,.dc-pg .dc-step--rev .dc-step__m{grid-column:1;grid-row:1}
  .dc-pg .dc-step__c,.dc-pg .dc-step--rev .dc-step__c{grid-column:1;grid-row:2}
  .dc-pg .dc-step--text .dc-step__c{grid-row:1;justify-self:stretch;padding:0}
  .dc-pg .dc-step__n,.dc-pg .dc-step--text .dc-step__n{left:27px;top:0;width:42px;height:42px;margin:0 0 0 -21px;box-shadow:0 0 0 6px #fff}
  .dc-pg .dc-step__n > span{font-size:19px}
}
@media (max-width:639px){
  .dc-pg{--dc-gut:20px;--dc-sec:64px;--dc-cut:22px}
  .dc-pg .dc-hero{min-height:480px}
  .dc-pg .dc-hero__in{padding-block:96px 44px}
  .dc-pg .dc-hd{margin-bottom:40px}
  .dc-pg .dc-rules .dc-hd{margin-bottom:44px}
  .dc-pg .dc-spine::before{left:19px}
  .dc-pg .dc-step{padding-left:54px}
  .dc-pg .dc-step__n,.dc-pg .dc-step--text .dc-step__n{left:19px;width:34px;height:34px;margin-left:-17px;box-shadow:0 0 0 5px #fff}
  .dc-pg .dc-step__n > span{font-size:16px}
  .dc-pg .dc-rev{padding:28px 24px 24px}
  .dc-pg .dc-rev::after{font-size:96px;right:14px}
  .dc-pg .dc-logo{padding:14px}
  .dc-pg .dc-banner{min-height:420px;padding:40px 18px 44px}
  .dc-pg .dc-tri__c{min-height:0;padding:60px 24px 26px}
  .dc-pg .dc-tri__i{left:24px}
}

@media (prefers-reduced-motion:reduce){
  .dc-pg *,.dc-pg *::before,.dc-pg *::after{transition:none !important;scroll-behavior:auto !important}
}

/* --- Print ---------------------------------------------------------------- */
@media print{
  .dc-pg .dc-hero{min-height:0;background:none;color:var(--dc-teal-d)}
  .dc-pg .dc-hero__bg,.dc-pg .dc-hero::after,.dc-pg .dc-tex::before,.dc-pg .dc-banner::after,.dc-pg .dc-fr::after{display:none}
  .dc-pg .dc-hero .dc-h,.dc-pg .dc-hero .dc-h .dc-h__b,.dc-pg .dc-hero__lead{color:var(--dc-teal-d)}
  .dc-pg .dc-hero__in{padding-block:24px}
  .dc-pg .dc-car__track{display:block;overflow:visible}
  .dc-pg .dc-rev{margin-bottom:14px}
  .dc-pg .dc-car__nav{display:none !important}
  .dc-pg .dc-rev,.dc-pg .dc-step,.dc-pg .dc-tri__c,.dc-pg .dc-rule__i,.dc-pg .dc-logo{break-inside:avoid}
  .dc-pg .dc-tri__c.has-link:hover{transform:none;box-shadow:none}
}

/* ==========================================================================
   v1.1.0, DC-12: the dated timeline (Our Story). Everything below is new.
   ========================================================================== */

/* Must clear whatever the theme pins to the top. 124px is the figure in the
   Distinctive context doc: MEASURE the live sticky header, do not trust it. */
.dc-pg{--dc-rail-top:124px}

.dc-pg .dc-tl .dc-hd{margin-bottom:72px}
.dc-pg .dc-tl__in{display:grid;grid-template-columns:minmax(0,1fr)}
.dc-pg .dc-tl__rail{display:none}
.dc-pg .dc-tl__list{display:flex;flex-direction:column;gap:clamp(96px,11vw,160px)}

/* One milestone: copy and artwork side by side, alternating. */
.dc-pg .dc-ms{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  column-gap:clamp(40px,5vw,88px);row-gap:36px;align-items:center;
  scroll-margin-top:calc(var(--dc-rail-top) + 24px);
}
.dc-pg .dc-ms--rev .dc-ms__c{order:2}
.dc-pg .dc-ms--text{grid-template-columns:minmax(0,1fr);max-width:720px}
.dc-pg .dc-ms__c{position:relative;isolation:isolate;padding-block:36px 12px;min-width:0}
/* The numeral is decoration: aria-hidden, behind the copy, never the only
   place the order is shown (the dates and the list order carry it). */
.dc-pg .dc-ms__ghost{
  position:absolute;z-index:-1;top:-.3em;left:-.05em;pointer-events:none;user-select:none;
  font-family:var(--dc-serif);font-weight:700;font-size:clamp(150px,17vw,272px);line-height:1;
  letter-spacing:-.02em;color:var(--dc-teal);opacity:.075;
}
.dc-pg .dc-ms__date{font-size:13px;letter-spacing:.2em;margin-bottom:16px}
.dc-pg .dc-ms__t{margin-bottom:22px;font-size:clamp(26px,2.7vw,40px);line-height:1.06;letter-spacing:.01em;color:var(--dc-teal)}
.dc-pg .dc-ms__c .dc-body{max-width:54ch}
/* The artwork is shown whole: no box, no crop, no cut corner. Its own
   transparent margins and shadow sit on the ground. */
.dc-pg .dc-ms__m{min-width:0}
.dc-pg .dc-ms__m img,.dc-pg .dc-ms__img{width:100%;max-width:580px;height:auto;margin:0 auto}

/* The dates rail, desktop only. Sticky needs no overflow:hidden above it:
   .dc-pg uses overflow-x:clip for exactly that reason. */
@media (min-width:1100px){
  .dc-pg .dc-tl__in--rail{grid-template-columns:168px minmax(0,1fr);column-gap:64px}
  .dc-pg .dc-tl__in--rail .dc-tl__rail{display:block}
}
.dc-pg .dc-tl__nav{position:sticky;top:calc(var(--dc-rail-top) + 40px)}
.dc-pg .dc-tl__nav ol{position:relative;display:flex;flex-direction:column;gap:24px;padding-block:4px}
.dc-pg .dc-tl__nav ol::before{content:"";position:absolute;top:12px;bottom:12px;left:7px;width:1px;background:rgba(22,61,68,.24)}
.dc-pg .dc-tl__nav a{
  position:relative;display:flex;align-items:center;gap:18px;
  font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;
  color:var(--dc-mut) !important;text-decoration:none;transition:color .2s;
}
/* Each entry is a button of the lattice, filled when it is the one being read. */
.dc-pg .dc-tl__nav a::before{
  content:"";flex:0 0 11px;width:11px;height:11px;margin-left:2px;transform:rotate(45deg);
  background:var(--dc-cream);border:1.5px solid var(--dc-teal);transition:background-color .2s,border-color .2s,transform .2s;
}
.dc-pg .dc-tl__nav a:hover,.dc-pg .dc-tl__nav a.is-on{color:var(--dc-teal) !important}
.dc-pg .dc-tl__nav a.is-on::before{background:var(--dc-orange);border-color:var(--dc-orange);transform:rotate(45deg) scale(1.35)}
.dc-pg .dc-tl:not(.dc-sec--cream) .dc-tl__nav a::before{background:#fff}

@media (max-width:980px){
  .dc-pg .dc-ms{grid-template-columns:minmax(0,1fr)}
  .dc-pg .dc-ms--rev .dc-ms__c{order:0}
  .dc-pg .dc-ms__m img,.dc-pg .dc-ms__img{max-width:520px}
}
@media (max-width:639px){
  .dc-pg .dc-tl__list{gap:88px}
  .dc-pg .dc-ms__c{padding-block:28px 0}
  .dc-pg .dc-ms__ghost{font-size:148px}
}
@media print{
  .dc-pg .dc-tl__rail{display:none !important}
  .dc-pg .dc-tl__in--rail{grid-template-columns:minmax(0,1fr)}
  .dc-pg .dc-ms{break-inside:avoid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dc-pg .dc-ms__ghost{display:none}
}

/* ==========================================================================
   v1.2.0, DC-13: the timeline on the dark ground (The Build), and the build
   steps on cream. Everything below is new.
   ========================================================================== */

/* Dark timeline. White and gold ink on #163d44: white is 11.8:1, gold 7.7:1. */
.dc-pg .dc-tl.dc-sec--teald .dc-ms__t{color:#fff}
.dc-pg .dc-tl.dc-sec--teald .dc-ms__date{color:var(--dc-gold)}
.dc-pg .dc-tl.dc-sec--teald .dc-ms__ghost{color:#fff;opacity:.06}
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav ol::before{background:rgba(255,255,255,.2)}
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav a{color:rgba(255,255,255,.64) !important}
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav a:hover,
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav a.is-on{color:#fff !important}
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav a::before{background:var(--dc-teal-d);border-color:rgba(255,255,255,.55)}
.dc-pg .dc-tl.dc-sec--teald .dc-tl__nav a.is-on::before{background:var(--dc-orange);border-color:var(--dc-orange)}

/* A rail label that runs to two lines (Bespoke service) keeps its diamond on
   the first line, and the rail is wide enough that most labels never wrap. */
@media (min-width:1100px){ .dc-pg .dc-tl__in--rail{grid-template-columns:188px minmax(0,1fr)} }
.dc-pg .dc-tl__nav a{align-items:flex-start}
.dc-pg .dc-tl__nav a::before{margin-top:2px}

/* Build steps on cream: the ring round each node, and the paper behind a text
   step, take the ground colour, or they show as white patches on the spine. */
.dc-pg .dc-sec--cream .dc-step__n{box-shadow:0 0 0 8px var(--dc-cream)}
.dc-pg .dc-sec--cream .dc-step--text .dc-step__c{background:var(--dc-cream)}
@media (max-width:980px){ .dc-pg .dc-sec--cream .dc-step__n{box-shadow:0 0 0 6px var(--dc-cream)} }
@media (max-width:639px){ .dc-pg .dc-sec--cream .dc-step__n{box-shadow:0 0 0 5px var(--dc-cream)} }