:root{--ink:#231F20;--gold:#C68B3C;--gold2:#D9A94C;--red:#731112;--red-deep:#5A0D0E;--cream:#F8F1E4;--paper:#FAF6EE;--line:#D6CCB8;}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.65;
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;font-weight:600;line-height:1.15}
a{color:var(--red)}
img{max-width:100%;height:auto}
/* --- WP core-block shim --- */
.wp-block-columns{display:flex;flex-wrap:wrap;gap:2em;align-items:normal;margin:0 0 1.2em}
.wp-block-column{flex:1 1 240px;min-width:0}
@media(max-width:781px){.wp-block-columns:not(.is-not-stacked-on-mobile){flex-direction:column;gap:1.2em}}
.wp-block-buttons{display:flex;gap:.8em;flex-wrap:wrap;margin:1em 0}
.wp-block-button__link,.wp-block-button a{display:inline-block;padding:.72em 1.7em;border-radius:6px;text-decoration:none;background:var(--gold);color:#231F20;font-weight:700;border:1px solid transparent}
.wp-block-button.is-style-outline .wp-block-cover{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;padding:2.4em 1.4em;overflow:hidden;background-size:cover;background-position:center;color:#fff}
.wp-block-cover img.wp-block-cover__image-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wp-block-cover .wp-block-cover__background{position:absolute;inset:0;z-index:0;background:rgba(20,16,14,.55)}
.wp-block-cover__inner-container{position:relative;z-index:1;width:100%;max-width:920px;margin:0 auto}
.wp-block-group{margin:0 auto}
.wp-block-group.has-background{padding:1.4em}
.wp-block-image{margin:0 0 1em}.wp-block-image img{border-radius:6px}
.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}
.aligncenter{margin-left:auto;margin-right:auto}
figure{margin:0 0 1em}
/* --- nav --- */
.du-nav{background:var(--ink);border-bottom:1px solid var(--gold);position:sticky;top:0;z-index:1000}
.du-nav-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.5em 1.2em;gap:.6em;flex-wrap:wrap}
.du-logo{display:flex;align-items:center;gap:.6em;text-decoration:none}
.du-logo img{height:42px;width:42px;display:block;background:var(--cream);border-radius:50%;padding:2px}
.du-logo b{font-family:Georgia,serif;color:var(--cream);font-size:1.12em;font-weight:600;white-space:nowrap;letter-spacing:.01em}
.du-right{display:flex;align-items:center;gap:.1em;flex-wrap:wrap}
.du-links a{color:#e7d8bd;text-decoration:none;font-size:.9em;margin-left:1.05em;font-weight:500}
.du-links a:hover{color:var(--gold)}
.du-pill{margin-left:1.15em;display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#1c1816;font-weight:700;padding:6px 13px;border-radius:999px;text-decoration:none;font-size:.85em}
.du-pill img{height:18px;width:18px;display:block}
/* --- footer --- */
.du-foot{background:var(--ink);color:#c9bda6;border-top:1px solid var(--gold);margin-top:0}
.du-foot-in{max-width:1000px;margin:0 auto;padding:2.6em 1.4em;text-align:center}
.du-foot .fb{font-family:Georgia,serif;color:var(--cream);font-size:1.3em;margin:0 0 .1em}
.du-foot .ft{color:var(--gold);font-style:italic;margin:0 0 1.3em}
.du-foot a{color:var(--gold);text-decoration:none;margin:0 .45em;font-size:.92em}
.du-foot .fine{color:#8a7f6b;font-size:.82em;margin-top:1.2em}
@media(max-width:720px){.du-logo b{font-size:.98em}}

/* ---------------------------------------------------------------------------
   WORDPRESS COLOUR PRESETS - restored 2026-07-30

   The site was converted out of WordPress, and the conversion kept the preset
   CLASSES in the markup but dropped the stylesheet that defines them. So any
   element styled the WordPress way - class="has-white-color has-text-color"
   with no inline colour - fell back to the dark body colour.

   On a dark hero that means invisible text. It is why the headline on
   /experience/ and /podcast/ could not be read, and why the home page hero
   looked wrong: 15 elements across four pages, including three h1s.

   Defining the presets fixes every one of them at the source rather than
   patching each page. Keep these ahead of any future conversion work.
--------------------------------------------------------------------------- */
.has-text-color{color:inherit}
.has-white-color{color:#fff}
.has-black-color{color:#231F20}
.has-gold-color{color:#C68B3C}
.has-cream-color{color:#F8F1E4}

.has-white-background-color{background-color:#fff}
.has-black-background-color{background-color:#231F20}
.has-gold-background-color{background-color:#C68B3C}
.has-cream-background-color{background-color:#F8F1E4}

/* A button carrying the preset must beat wp-element-button's own colour. */
.wp-block-button__link.has-white-color{color:#fff}


/* ---------------------------------------------------------------------------
   MOBILE NAVIGATION - added 2026-07-30

   There was none. The only rule below 720px shrank the link font; the nav still
   laid out all seven links plus the Perfect Pour pill and let them wrap, which
   on a phone consumed three or four lines before the page even started.

   Checkbox-driven so it works with JavaScript disabled. The input sits directly
   before <header> so the sibling combinator can reach the menu.
--------------------------------------------------------------------------- */
.du-navtog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.du-burger{display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;width:42px;height:38px;cursor:pointer;border:1px solid rgba(198,139,60,.45);
  border-radius:8px;margin-left:auto}
.du-burger span{display:block;width:17px;height:2px;background:var(--gold);border-radius:2px}

@media(max-width:860px){
  .du-nav-in{flex-wrap:wrap;padding:.55em .9em}
  .du-burger{display:flex}

  /* the whole right-hand cluster becomes the drawer */
  .du-right{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;
    gap:0;padding:.2em 0 .6em}
  .du-navtog:checked ~ .du-nav .du-right{display:flex}

  .du-links{display:flex;flex-direction:column;align-items:stretch}
  .du-links a{margin:0;padding:.85em .2em;font-size:1rem;
    border-bottom:1px solid rgba(198,139,60,.22)}
  .du-pill{margin:.8em 0 0;justify-content:center}
}


/* ===========================================================================
   THE HERO COMPONENT - one definition for the whole site (2026-08-04)

   Replaces eleven per-page hero classes. The scrim, the type scale, the gold
   rule and the spacing live here; a page supplies only its photograph:

     <section class="du-hero" style="--hero-img:url('/assets/…/hero-home.jpg')">

   Page-local hero CSS should be deleted as each page is converted. Anything
   still carrying its own copy will drift again the moment one is edited.
   =========================================================================== */
/* ~20% shorter - see du_hero_shrink.py. The selling sections were below the fold. */
.du-hero{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(330px,46vh,470px);padding:58px 24px;text-align:center;color:#fff;
  background-image:linear-gradient(rgba(35,31,32,.58),rgba(35,31,32,.86)),var(--hero-img);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  border-bottom:1px solid var(--gold)}
.du-hero__in{max-width:860px;margin:0 auto;width:100%}
.du-hero__eyebrow{margin:0 0 22px;color:var(--gold);font-size:.85rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase}
.du-hero__title{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(2rem,4.6vw,3.15rem);line-height:1.08;color:#fff;
  text-shadow:0 2px 24px rgba(20,16,16,.45)}
.du-hero__sub{margin:20px auto 0;max-width:640px;font-size:1.1rem;line-height:1.6;
  color:#EFE6D6}
.du-hero__sub strong{color:#fff;font-weight:600}

/* Actions. One primary, the rest ghost - three identical solid buttons is what
   made the home page look unconsidered. */
.du-hero__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

@media(max-width:640px){
  .du-hero{min-height:clamp(340px,52vh,460px);padding:60px 18px}
  .du-hero__sub{font-size:1rem}
  /* row + wrap, NOT column + stretch. Column-stretch was the real cause of the
     full-width buttons on a phone - removing width:100% alone did nothing. */
  .du-hero__actions{flex-direction:row;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:8px}
}

/* The gold background declared for .wp-block-button__link was immediately
   cancelled by the outline rule that followed it, because that selector was not
   scoped to outline buttons. Scoped now, so a default button is gold again. */
.is-style-outline .wp-block-button__link,.is-style-outline a{
  background:transparent;border-color:currentColor;color:inherit}


/* ===========================================================================
   SECTION COMPONENTS - generalised from the Method page (2026-08-04)

   Method was the only page with a real vocabulary; everything else used inline
   WordPress styles. These are its patterns, promoted so any page can use them:

     .du-wrap             the 1100px measure
     .du-band[--cream|--sand|--dark]   full-width colour bands
     .du-section + .du-section-header + .du-eyebrow   heading with gold rule
     .du-pillars[--2|--3] + .du-pillar                the card grid
     .du-callout          the dark feature block
     .du-jump             the "looking for X?" strip
     .du-arrow            the trailing-arrow link
   =========================================================================== */
.du-wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.du-band{padding:3.25rem 2rem}
.du-band--cream{background:var(--cream)}
.du-band--sand{background:#EAE0CC}
.du-band--paper{background:var(--paper)}
.du-band--dark{background:var(--ink);color:#fff}

.du-section{margin:0}
.du-section + .du-section{margin-top:3.25rem}
.du-section-header{margin:0 0 1.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--gold)}
.du-eyebrow{display:block;font-size:.65rem;letter-spacing:.2em;color:var(--red);
  text-transform:uppercase;font-weight:600;margin-bottom:7px}
.du-band--dark .du-eyebrow{color:var(--gold)}
.du-section-header h2{margin:0;font-family:Georgia,'Times New Roman',serif;
  font-size:1.85rem;font-weight:500;color:var(--ink);line-height:1.2}
.du-band--dark .du-section-header h2{color:#fff}
.du-section p{font-size:1rem;line-height:1.65;color:var(--ink);margin:0 0 1rem}
/* John 2026-08-05: no oversized first paragraphs anywhere - lead
   paragraphs render at body size sitewide, same as the homepage. */
.du-section p.lead{font-size:1rem;line-height:1.65}
.du-band--dark .du-section p{color:rgba(248,241,228,.92)}
/* Pillar CARDS keep their own light ground inside a dark band, so their
   text must stay ink - without this, the band's cream text wins on
   specificity and the card copy is cream-on-cream (invisible). Hit
   for-brands, experience and podcast. John caught it 2026-08-05. */
.du-band--dark .du-section .du-pillar p{color:#7A7370}
.du-band--dark .du-section .du-pillar h3{color:var(--ink)}

.du-pillars{display:grid;gap:22px;margin:1.35rem 0 0}
.du-pillars--2{grid-template-columns:repeat(2,1fr)}
.du-pillars--3{grid-template-columns:repeat(3,1fr)}
.du-pillar{background:var(--cream);border:1px solid var(--line);
  border-top:4px solid var(--red);border-radius:10px;padding:28px 26px;
  display:flex;flex-direction:column}
.du-band--cream .du-pillar{background:#fff}
.du-pillar h3{margin:0 0 10px;font-family:Georgia,serif;font-size:1.3rem;
  font-weight:500;color:var(--ink)}
.du-pillar p{margin:0 0 14px;font-size:.95rem;line-height:1.58;color:#7A7370}
.du-pillar .du-arrow{margin-top:auto}

.du-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--red);
  font-weight:600;font-size:.9rem;letter-spacing:.02em;text-decoration:none}
.du-arrow::after{content:"\2192";transition:transform .18s}
.du-arrow:hover{color:var(--red-deep)}
.du-arrow:hover::after{transform:translateX(3px)}
.du-band--dark .du-arrow{color:var(--gold)}
.du-band--dark .du-arrow:hover{color:var(--gold2)}

.du-callout{background:var(--ink);color:#fff;padding:46px 38px;border-radius:10px;
  border:1px solid var(--gold);margin:0}
.du-callout .du-eyebrow{color:var(--gold)}
.du-callout h2{margin:0 0 14px;font-family:Georgia,serif;font-size:1.9rem;
  font-weight:500;color:#fff}
.du-callout p{font-size:1.05rem;line-height:1.65;color:rgba(248,241,228,.92);
  margin:0 0 12px;max-width:780px}
.du-callout p:last-child{margin-bottom:0}

.du-jump{max-width:1100px;margin:1.5rem auto 0;padding:14px 22px;background:var(--cream);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.du-jump p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.4}
.du-jump strong{color:var(--red);font-weight:600}

@media(max-width:820px){
  .du-pillars--3{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .du-band{padding:2.4rem 1.1rem}
  .du-pillars--2,.du-pillars--3{grid-template-columns:1fr}
  .du-section-header h2{font-size:1.5rem}
  .du-callout{padding:30px 22px}
}

/* ---- home page pieces that the component set did not yet cover ---------- */
.du-center{text-align:center;margin-top:1.8rem}
.du-center-left{margin-top:1.4rem}
.du-note{margin-top:1.2rem;font-size:.9rem;color:#7A7370}
.du-role{margin:0 0 10px!important;font-size:.85rem!important;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red)!important;font-weight:600}

/* the five-class strip */
.du-classes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:1.6rem 0 0}
.du-class{display:flex;flex-direction:column;gap:7px;padding:18px 16px;border-radius:8px;
  background:rgba(248,241,228,.06);border:1px solid rgba(198,139,60,.4);
  text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.du-class:hover{background:rgba(248,241,228,.12);border-color:var(--gold);transform:translateY(-2px)}
.du-class__n{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.du-class__t{font-family:Georgia,serif;font-size:1.05rem;color:#fff;line-height:1.25}
.du-class__q{font-size:.82rem;font-style:italic;color:rgba(248,241,228,.72);line-height:1.4}

/* the counter */
.du-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:1.6rem 0 0;text-align:center}
.du-stat{padding:26px 18px;background:#fff;border:1px solid var(--line);border-radius:10px}
.du-stat__n{display:block;font-family:Georgia,serif;font-size:2.6rem;line-height:1;color:var(--red)}
.du-stat__l{display:block;margin-top:10px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7A7370;font-weight:600}

@media(max-width:900px){.du-classes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .du-stats{grid-template-columns:1fr}
  .du-stat__n{font-size:2.2rem}
}

/* ===========================================================================
   BUTTONS - in the page's own language (2026-08-04)

   Small caps at the same .16em tracking as the section eyebrows, a gold hairline
   inset on the filled variant, gold outlines rather than generic white, and a
   trailing arrow that travels on hover like .du-arrow does.
   =========================================================================== */
.du-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.72rem 1.35rem;border:1px solid transparent;border-radius:2px;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s}
.du-btn::after{content:"\2192";font-size:.95rem;letter-spacing:0;
  transition:transform .2s}
.du-btn:hover::after{transform:translateX(4px)}

/* filled - the one action that matters most on a screen */

/* outline - gold, not white. On brand and quieter than a second fill. */

/* for dark bands and the callout */

.du-hero__actions .du-btn{min-width:0}

/* A standalone CTA should belong to its section, not float under it. The rule
   above it does that - the same gold hairline used by every section header. */
.du-cta{margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid rgba(198,139,60,.34);
  display:flex;justify-content:center}
.du-band--dark .du-cta{border-top-color:rgba(198,139,60,.4)}
.du-callout .du-cta{margin-top:1.9rem;padding-top:1.6rem}

@media(max-width:620px){
  /* NOT width:100%. Three stacked full-width blocks consumed the whole phone
     screen before a word of content appeared. They wrap naturally instead. */
  .du-btn{padding:.62rem 1.05rem;font-size:.63rem;letter-spacing:.11em;gap:.4em}
  .du-btn::after{font-size:.85rem}
  .du-hero__actions{gap:8px}
}

/* The hero should not be a full screen of photograph on a phone. */
@media(max-width:620px){
  .du-hero{min-height:0;padding:44px 18px 40px}
  .du-hero__title{font-size:1.75rem}
  .du-hero__sub{font-size:.95rem;margin-top:14px}
  .du-hero__eyebrow{font-size:.62rem;margin-bottom:14px}
  .du-hero__actions{margin-top:22px}
}

/* ===========================================================================
   BUTTONS, take two (2026-08-04)

   Three identical rectangles is not a style problem, it is a hierarchy problem.
   One action keeps a shape; the alternatives become links.
   =========================================================================== */

/* PRIMARY - a framed field, like a label. The inset keyline is the same gold
   hairline that rules every section header, so it belongs to the page. */
.du-btn--primary{position:relative;background:var(--red);color:#fff;
  border-color:var(--red);padding:.85rem 1.85rem;
  box-shadow:0 2px 10px rgba(60,10,10,.22)}
.du-btn--primary::before{content:"";position:absolute;inset:4px;
  border:1px solid rgba(198,139,60,.55);pointer-events:none;
  transition:inset .22s ease,border-color .22s ease}
.du-btn--primary:hover{background:var(--red-deep);border-color:var(--red-deep);
  color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(60,10,10,.34)}
.du-btn--primary:hover::before{inset:6px;border-color:rgba(198,139,60,.95)}

/* SECONDARY - no box. Gold caps over a hairline that fills across on hover. */
.du-btn--ghost{background:none;border:0;border-radius:0;color:var(--gold);
  padding:.5rem .15rem .55rem;position:relative;box-shadow:none}
.du-btn--ghost::before{content:"";position:absolute;left:0;right:0;bottom:.28rem;
  height:1px;background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .26s ease}
.du-btn--ghost::after{opacity:.75}
.du-btn--ghost:hover{background:none;color:#fff;transform:none;box-shadow:none}
.du-btn--ghost:hover::before{transform:scaleX(1)}
.du-btn--ghost:hover::after{opacity:1}
.du-hero__actions .du-btn--ghost{margin:0 .95rem}

/* STANDALONE CTA - keeps a shape because it stands alone, framed like the
   primary but in gold so it reads as secondary to a page's main action. */
.du-btn--gold{position:relative;background:transparent;color:var(--gold);
  border-color:rgba(198,139,60,.75);padding:.85rem 1.85rem}
.du-btn--gold::before{content:"";position:absolute;inset:4px;
  border:1px solid rgba(198,139,60,.3);pointer-events:none;
  transition:inset .22s ease,border-color .22s ease}
.du-btn--gold:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);
  transform:translateY(-1px);box-shadow:0 8px 22px rgba(198,139,60,.28)}
.du-btn--gold:hover::before{inset:6px;border-color:rgba(35,31,32,.32)}

@media(max-width:620px){
  .du-btn--primary,.du-btn--gold{padding:.7rem 1.25rem}
  .du-btn--primary::before,.du-btn--gold::before{inset:3px}
  .du-hero__actions .du-btn--ghost{margin:0 .5rem}
}

/* The five-class strip: two across on a phone, not five full-width slabs. */
@media(max-width:620px){
  .du-classes{grid-template-columns:repeat(2,1fr);gap:9px}
  .du-class{padding:14px 12px}
  .du-class__t{font-size:.95rem}
  .du-class__q{font-size:.76rem}
}

/* Hero internals, tightened to suit the shorter band. */
.du-hero__title{font-size:clamp(1.9rem,4.1vw,2.8rem)}
.du-hero__sub{margin-top:16px;font-size:1.04rem}
.du-hero__eyebrow{margin-bottom:18px}
.du-hero__actions{margin-top:26px}
@media(max-width:620px){.du-hero{padding:38px 18px 34px}}

/* du-prose: long-form copy inside a section. Caps the measure at a readable
   line length (~70ch instead of the wrap's full 1060px / ~129 chars) and
   smooths the lead-to-body size step when several paragraphs stack.
   Added 2026-08-05 for the homepage What-we-do block. */
/* One size for every paragraph in the block - John 2026-08-05: the
   lead/body step read as a mistake, not hierarchy. */
.du-prose p,.du-prose p.lead{max-width:70ch;font-size:1.0625rem;line-height:1.7}

/* du-split / du-senses: on wide screens the What-we-do band pairs the
   reading-width prose with a numbered five-senses rail so the right half
   of the band works instead of sitting empty (John 2026-08-05). Numerals
   are maroon, NOT gold - gold fails contrast on cream. */
.du-split{display:grid;grid-template-columns:minmax(0,70ch) minmax(200px,1fr);gap:24px 72px;align-items:center}
.du-senses{border-left:1px solid rgba(35,31,32,.14);padding-left:44px}
.du-senses-t{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#731112;margin-bottom:6px}
.du-senses ol{list-style:none;margin:0;padding:0}
.du-senses li{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(35,31,32,.08);font-family:Georgia,'Times New Roman',serif;font-size:1.2rem;color:var(--ink)}
.du-senses li:last-child{border-bottom:0}
.du-senses .n{font-family:inherit;font-size:.72rem;letter-spacing:.1em;color:#731112}
.du-senses .fifth i{font-size:.8rem;color:#7A7370;margin-left:auto;font-style:italic}
@media(max-width:950px){.du-split{display:block}.du-senses{border-left:0;padding-left:0;margin-top:26px}.du-senses ol{display:flex;flex-wrap:wrap;gap:2px 28px}.du-senses li{border-bottom:0;padding:5px 0;font-size:1.05rem}.du-senses .fifth i{margin-left:8px}}