/* ===========================================================================
   brand-2026.css
   Loaded AFTER ps.css. Two jobs:

   1. Correct the palette to the one Kim calls non-negotiable in the creative
      brief. ps.css is written against CSS custom properties, so redefining the
      tokens here re-colours every one of the 253 pages at once, rather than
      needing 253 edits.

        Orange     #FF6600   core
        Purple     #660066   core
        Dark blue  #04014A   core
        Apple green #AAC92D  secondary
        Mid grey             secondary

      The demo shipped with none of the dark blue, none of the green, and a
      near-black purple we invented in place of hers. Fixed below.

   2. Add the modules the brief asks for that did not exist: logo pull-throughs,
      the process flow, the numbered service grid, the loops corner graphic, the
      orange stripe divider, her graphic bullets, and the two-column response
      form.

   Everything here traces to a line in the brief. Where it does, the comment
   quotes it.
   =========================================================================== */

:root {
  /* ---- Her palette, exact ---- */
  --ps-orange:  #FF6600;
  --ps-purple:  #660066;
  --ps-navy:    #04014A;
  --ps-green:   #AAC92D;
  --ps-grey:    #6E7076;

  /* Derived steps. Interactive states and tints only. No new hues:
     every one of these is her colour lightened or darkened. */
  --ps-orange-lift: #FF8534;
  --ps-orange-deep: #D14E00;
  --ps-purple-lift: #8A2E8E;
  --ps-purple-deep: #4A004A;
  --ps-navy-lift:   #1A1566;
  --ps-navy-deep:   #02012E;
  --ps-green-deep:  #8AA512;

  /* Tints. "White backgrounds are fine, as are tints of any of the colours
     above, used sparingly. I do NOT want a site that is primarily pastel." */
  --ps-tint-purple: #F6EDF6;
  --ps-tint-navy:   #EDEDF5;
  --ps-tint-orange: #FFF1E8;

  /* ---- Remap the ps.css ramp onto her palette ---- */
  --plum-900: #04014A;   /* darkest ground -> her dark blue */
  --plum-800: #660066;   /* headings and the purple ground -> her purple */
  --plum-700: #660066;
  --plum-600: #7A1A7A;   /* links, needs to sit above body text */
  --plum-500: #660066;
  --plum-400: #8A2E8E;
  --plum-300: #B36FB6;
  --plum-200: #DDBFDF;
  --plum-100: #F6EDF6;

  --orange-700: #B34600;
  --orange-600: #D14E00;
  --orange-500: #FF6600;
  --orange-400: #FF8534;
  --orange-200: #FFD1B0;
  --orange-100: #FFF1E8;

  --ink: #16142A;        /* near-black carrying a navy bias, not a neutral grey */
  --ink-soft: #4B4A63;
  --paper: #FFFFFF;
  --sand: #F4F3F8;

  --header-h: 68px;      /* "I'd like quite a slim header and top menu" */
}

/* ===========================================================================
   1. TYPE. "High enough contrast that text is easy to read. Text needs to be
   big enough to read without squinting." Plus: bold headlines, left aligned.
   =========================================================================== */

body { font-size: 1.0625rem; }

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* "I prefer most headings and text to be left-aligned... I like to avoid
   centred headings and text, although things like testimonial sliders may work
   best centred." So: left by default, centring only where opted in. */
.section .head:not(.head--center) { text-align: left; }

.lede { font-size: 1.1875rem; line-height: 1.6; }

/* ===========================================================================
   2. BULLETS. "I like orange, graphic bullets, not just dots. I'd like one
   graphic for most bullets, but the option for a checkmark-type bullet."

   The default bullet is a skewed bar, taken from the rays in her logo burst
   rather than invented. The checkmark is the opt-in variant.
   =========================================================================== */

.ps-list { list-style: none; padding-left: 0; margin: 0 0 1.25rem; }

.ps-list > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
  line-height: 1.55;
}

.ps-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.85rem;
  height: 0.3rem;
  background: var(--ps-orange);
  transform: skewX(-20deg);
}

/* Checkmark variant */
.ps-list--check > li::before {
  width: 0.62rem;
  height: 0.34rem;
  background: none;
  border-left: 3px solid var(--ps-orange);
  border-bottom: 3px solid var(--ps-orange);
  transform: rotate(-45deg);
  top: 0.42em;
}

/* Two-column bullets. "Bullet lists, occasionally in two columns." */
@media (min-width: 768px) {
  .ps-list--2col { column-count: 2; column-gap: 2.75rem; }
  .ps-list--2col > li { break-inside: avoid; }
}

/* On saturated grounds the bullet stays orange unless the ground IS orange */
.on-orange .ps-list > li::before { background: var(--ps-navy); }
.on-orange .ps-list--check > li::before {
  background: none;
  border-color: var(--ps-navy);
}

/* ===========================================================================
   3. SURFACES. "The approach taken by the Trivandi site, where the backgrounds
   are either saturated colours or white, and both the headlines and text are
   high contrast."
   =========================================================================== */

.on-white  { background: #FFFFFF; color: var(--ink); }
.on-navy   { background: var(--ps-navy); color: #FFFFFF; }
.on-purple { background: var(--ps-purple); color: #FFFFFF; }
.on-orange { background: var(--ps-orange); color: var(--ps-navy); }
.on-green  { background: var(--ps-green); color: var(--ps-navy); }
.on-tint   { background: var(--ps-tint-navy); color: var(--ink); }

.on-white h1, .on-white h2, .on-white h3 { color: var(--ps-purple); }
.on-tint  h1, .on-tint  h2, .on-tint  h3 { color: var(--ps-purple); }

.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4,
.on-purple h1, .on-purple h2, .on-purple h3, .on-purple h4 { color: #FFFFFF; }

.on-orange h1, .on-orange h2, .on-orange h3, .on-orange h4,
.on-green h1, .on-green h2, .on-green h3, .on-green h4 { color: var(--ps-navy); }

.on-navy a:not(.btn), .on-purple a:not(.btn) { color: #FFFFFF; text-decoration-color: var(--ps-orange); }
.on-navy a:not(.btn):hover, .on-purple a:not(.btn):hover { color: var(--ps-orange); }

/* Eyebrow. "Headlines can work alone OR can have a smaller descriptor for the
   section above the headline." */
.ps-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-orange);
  margin-bottom: 0.85rem;
}
.on-orange .ps-eyebrow, .on-green .ps-eyebrow { color: var(--ps-navy); opacity: 0.75; }

/* ===========================================================================
   4. MODULE BORDERS. Two devices, both hers.

   (a) "Another option for a module border is using this orange stripe divider
        as a top/bottom/both border on a module. This would be a good use of the
        stripes in a very restrained way."
   (b) The multi-coloured loops, "left pretty much as-is and used as a corner
        graphic within a module."
   =========================================================================== */

.ps-stripe-top, .ps-stripe-bottom { position: relative; }

.ps-stripe-top::before, .ps-stripe-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background-image: repeating-linear-gradient(
    115deg,
    var(--ps-orange) 0 10px,
    transparent 10px 22px
  );
  z-index: 2;
}
.ps-stripe-top::before { top: 0; }
.ps-stripe-bottom::after { bottom: 0; }

/* The loops sit inside a module, top right, bleeding off the corner. */
.ps-loops {
  position: absolute;
  top: 0;
  right: 0;
  width: min(46%, 520px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
.ps-loops svg { display: block; width: 100%; height: auto; }
.ps-has-loops { position: relative; overflow: hidden; }
.ps-has-loops > .container,
.ps-has-loops > .container-xl,
.ps-has-loops > .container-lg { position: relative; z-index: 1; }

@media (max-width: 767.98px) {
  .ps-loops { width: 74%; opacity: 0.55; }
}

/* ===========================================================================
   5. PULL-THROUGHS. Her single most specified component.

   "I have about 30 key client logos. These will be featured on a double
   pull-through, with the two lines going in different directions."
   "Pull-throughs should move at a medium pace and, ideally, pause on hover."
   "I think the logos should move automatically, not as people scroll."
   "Logos should not be as huge as they are on this website."
   =========================================================================== */

.ps-pt { overflow: hidden; position: relative; }

.ps-pt__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 3.5rem;
  animation: ps-pt-scroll var(--ps-pt-duration, 60s) linear infinite;
  will-change: transform;
}

.ps-pt__track--reverse { animation-direction: reverse; }

.ps-pt__row + .ps-pt__row { margin-top: 1.75rem; }

/* Logos deliberately restrained in size, per her note on the reference site */
.ps-pt__logo {
  flex: 0 0 auto;
  height: 42px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
}

@keyframes ps-pt-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Pause on hover, as asked. Also pause when off screen, which she did not ask
   for but which stops a permanent animation burning main-thread time on a page
   she wants to be fast. */
.ps-pt:hover .ps-pt__track,
.ps-pt:focus-within .ps-pt__track { animation-play-state: paused; }
.ps-pt[data-visible="false"] .ps-pt__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ps-pt__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* Fade the edges so logos enter and leave rather than being chopped */
.ps-pt::before, .ps-pt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5rem;
  z-index: 2;
  pointer-events: none;
}
.ps-pt::before { left: 0;  background: linear-gradient(90deg, var(--ps-pt-fade, #fff), transparent); }
.ps-pt::after  { right: 0; background: linear-gradient(270deg, var(--ps-pt-fade, #fff), transparent); }

.on-navy   .ps-pt { --ps-pt-fade: var(--ps-navy); }
.on-purple .ps-pt { --ps-pt-fade: var(--ps-purple); }
.on-tint   .ps-pt { --ps-pt-fade: var(--ps-tint-navy); }

/* Placeholder chips, used until the real logo files arrive from the Drive.
   Deliberately obvious so nobody mistakes them for the finished thing. */
.ps-pt__placeholder {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 1.1rem;
  border: 1px dashed currentColor;
  border-radius: 3px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
  white-space: nowrap;
}

/* ===========================================================================
   6. NUMBERED SERVICE GRID. Her "Work with me" module.
   Reference she supplied: johndsaunders.co, saturated ground, two columns,
   numbered 01 to 06, no icons anywhere.
   =========================================================================== */

.ps-numbered { display: grid; gap: 2.5rem 3.5rem; }
@media (min-width: 992px) { .ps-numbered { grid-template-columns: 1fr 1fr; } }

.ps-numbered__item { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; }

.ps-numbered__num {
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.ps-numbered__title { font-size: 1.35rem; margin-bottom: 0.6rem; }
.ps-numbered__title a { text-decoration: none; }
.ps-numbered__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ===========================================================================
   7. PROCESS FLOW. Consulting page, seven steps.
   "This should be some kind of list/chart showing a flow."
   Reference: katielittlecopy.com, which pairs a sticky headline on the left
   with a connected vertical list on the right. Her version drops the icons,
   which on that page are exactly the "little pictures of things" she hates.
   =========================================================================== */

.ps-flow { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .ps-flow { grid-template-columns: 5fr 7fr; gap: 4rem; } }

.ps-flow__aside { align-self: start; }
@media (min-width: 992px) {
  .ps-flow__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}

.ps-flow__steps { list-style: none; margin: 0; padding: 0; position: relative; }

.ps-flow__step {
  position: relative;
  padding-left: 4.25rem;
  padding-bottom: 2.25rem;
}
.ps-flow__step:last-child { padding-bottom: 0; }

/* The connector runs between markers, not through them */
.ps-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 2.9rem;
  bottom: 0.4rem;
  width: 2px;
  background: currentColor;
  opacity: 0.22;
}

.ps-flow__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  border: 2px solid var(--ps-orange);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ps-orange);
}

.ps-flow__label { font-size: 1.2rem; font-weight: 700; padding-top: 0.55rem; }

/* ===========================================================================
   8. RESPONSE FORM. Functional brief, verbatim requirements:

   "It should not be full-width. There should be room to the left for a headline
    and subhead."
   "It needs an anchor link, so 'Let's talk' buttons further up the page will go
    straight there."
   "The wording about context and 'I read every one of these personally...' is
    good, but both should be above the button and big enough to read. This tiny
    grey type isn't great."
   =========================================================================== */

.ps-respond { display: grid; gap: 2.5rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
@media (min-width: 992px) { .ps-respond { grid-template-columns: 5fr 6fr; gap: 4.5rem; } }

.ps-respond__intro { align-self: start; }
.ps-respond__headline { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1rem; }

.ps-respond__form { display: grid; gap: 1.05rem; }

.ps-respond .form-label {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.ps-respond .form-control {
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  min-width: 0;
}
.ps-respond .form-control::placeholder { color: currentColor; opacity: 0.55; }
.ps-respond .form-control:focus {
  border-color: var(--ps-orange);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: inherit;
}

.on-white .ps-respond .form-control,
.on-tint .ps-respond .form-control {
  border-color: rgba(4, 1, 74, 0.25);
  background: #FFFFFF;
}

/* Big enough to read, and above the button. Both were explicit corrections. */
.ps-respond__reassurance {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.92;
  margin: 0.4rem 0 0.2rem;
}

.ps-respond__radios { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }

/* ===========================================================================
   9. BUTTONS. Contrast-safe pairings only. White on orange is 2.9:1 and fails,
   so the orange button always carries navy text.
   =========================================================================== */

.btn { border-radius: 3px; font-weight: 800; letter-spacing: 0.01em; padding: 0.75rem 1.5rem; }

.btn-ps-orange {
  --bs-btn-bg: var(--ps-orange);
  --bs-btn-border-color: var(--ps-orange);
  --bs-btn-color: var(--ps-navy);
  --bs-btn-hover-bg: var(--ps-orange-lift);
  --bs-btn-hover-border-color: var(--ps-orange-lift);
  --bs-btn-hover-color: var(--ps-navy);
  --bs-btn-active-bg: var(--ps-orange-deep);
  --bs-btn-active-color: #FFFFFF;
}

.btn-ps-purple {
  --bs-btn-bg: var(--ps-purple);
  --bs-btn-border-color: var(--ps-purple);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--ps-purple-lift);
  --bs-btn-hover-border-color: var(--ps-purple-lift);
  --bs-btn-hover-color: #FFFFFF;
}

.btn-ps-navy {
  --bs-btn-bg: var(--ps-navy);
  --bs-btn-border-color: var(--ps-navy);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--ps-navy-lift);
  --bs-btn-hover-border-color: var(--ps-navy-lift);
  --bs-btn-hover-color: #FFFFFF;
}

.btn-ps-outline {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: currentColor;
  --bs-btn-color: inherit;
  --bs-btn-hover-bg: var(--ps-orange);
  --bs-btn-hover-border-color: var(--ps-orange);
  --bs-btn-hover-color: var(--ps-navy);
  border-width: 2px;
}

/* ===========================================================================
   10. HEADER. "I'd like quite a slim header and top menu, putting the focus on
   the above-the-fold content, rather than the admin stuff at the top."

   Pinned, because every page is now long and scrolly with calls to action all
   the way down. It hides going down and returns coming up, so it stays
   reachable without eating the fold on a phone.
   =========================================================================== */

.ps-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(4, 1, 74, 0.1);
  transition: transform 0.28s ease;
}
.ps-header[data-pinned="hidden"] { transform: translateY(-100%); }

.ps-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* "Logo with the words 'Powered by Kim Skildum-Reid' made more prominent" */
.ps-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: 0 0 auto; }
.ps-logo__mark { height: 34px; width: auto; }
.ps-logo__text { display: flex; flex-direction: column; line-height: 1; }
.ps-logo__name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ps-purple);
  text-transform: uppercase;
}
.ps-logo__name em { font-style: normal; color: var(--ps-orange); }
.ps-logo__tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ps-purple);
  letter-spacing: 0.01em;
  margin-top: 0.22rem;
}

.ps-nav { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.ps-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ps-navy);
  text-decoration: none;
  border-radius: 3px;
  white-space: nowrap;
}
.ps-nav__link:hover { color: var(--ps-purple); background: var(--ps-tint-purple); }

/* Active state on the current page and its parent */
.ps-nav__link[aria-current="page"],
.ps-nav__link.is-active {
  color: var(--ps-purple);
  box-shadow: inset 0 -3px 0 var(--ps-orange);
}

/* "Take the assessment - should be dominant" */
.ps-nav__cta {
  margin-left: 0.5rem;
  background: var(--ps-orange);
  color: var(--ps-navy);
  padding: 0.6rem 1.15rem;
  font-weight: 800;
}
.ps-nav__cta:hover { background: var(--ps-orange-lift); color: var(--ps-navy); }

/* Search is just a magnifying glass, and the language switch is low profile.
   Both per the header spec. */
.ps-utility { display: flex; align-items: center; gap: 0.25rem; }
.ps-utility__btn {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: none;
  color: var(--ps-navy);
  border-radius: 3px;
  cursor: pointer;
}
.ps-utility__btn:hover { background: var(--ps-tint-purple); color: var(--ps-purple); }

.ps-lang {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ps-navy);
  background: none;
  border: 1px solid rgba(4, 1, 74, 0.2);
  border-radius: 3px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
}
.ps-lang:hover { border-color: var(--ps-purple); color: var(--ps-purple); }

/* Services submenu. "I do like the sub-links with descriptions that you have on
   the draft website... This would ONLY be for the services menu. Everything
   else - resources, etc - is self-descriptive." */
.ps-drop { position: relative; }
.ps-drop__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 30rem;
  background: #FFFFFF;
  border: 1px solid rgba(4, 1, 74, 0.12);
  border-top: 3px solid var(--ps-orange);
  border-radius: 3px;
  box-shadow: 0 18px 44px rgba(4, 1, 74, 0.16);
  padding: 0.6rem;
  display: none;
  z-index: 40;
}
.ps-drop.is-open .ps-drop__panel { display: block; }

.ps-drop__item {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 3px;
  text-decoration: none;
  color: var(--ps-navy);
}
.ps-drop__item:hover { background: var(--ps-tint-purple); color: var(--ps-navy); }
.ps-drop__item[aria-current="page"] { background: var(--ps-tint-orange); box-shadow: inset 3px 0 0 var(--ps-orange); }
.ps-drop__item strong { display: block; font-size: 0.98rem; color: var(--ps-purple); }
.ps-drop__item span { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.12rem; }

@media (max-width: 991.98px) {
  .ps-nav { display: none; }
  .ps-drop__panel { position: static; min-width: 0; box-shadow: none; display: block; }
}

/* ===========================================================================
   11. INTRO MODULE. Replaces the page hero.

   "Page content will start directly below a narrow-ish header/menu bar. There
    won't be a big header block with the page title."
   "I like the prominent top/intro module on all pages... I don't want the top
    module to be AS large as these, but I do want them to have the space to make
    an impact." (honoco.nz)
   "For many of the pages, the H1 will be smaller than the headline on the page."
   =========================================================================== */

.ps-intro { padding-block: clamp(3rem, 7vw, 5.5rem); position: relative; }

.ps-intro__h1 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  color: var(--ps-orange);
}
.on-orange .ps-intro__h1, .on-green .ps-intro__h1 { color: var(--ps-navy); }

.ps-intro__headline {
  font-size: clamp(2.3rem, 5.6vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 1.3rem;
  max-width: 20ch;
}

.ps-intro__subhead {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  font-weight: 500;
  max-width: 54ch;
  margin: 0 0 1.5rem;
}

.ps-intro__body { max-width: 60ch; }
.ps-intro__body p { margin-bottom: 1rem; }

/* ===========================================================================
   12. PULL QUOTES. "I'm a fan of pull quotes on my articles, and this needs to
   be accommodated." Also used as standalone modules on pages.
   =========================================================================== */

.ps-pullquote {
  font-size: clamp(1.4rem, 2.8vw, 2.15rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-left: 5px solid var(--ps-orange);
  padding-left: 1.5rem;
  margin: 2rem 0;
  max-width: 26ch;
}
.ps-pullquote--wide { max-width: 34ch; }
.ps-pullquote cite {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  font-style: normal;
  opacity: 0.8;
  margin-top: 0.9rem;
  letter-spacing: 0;
}

/* ===========================================================================
   13. TESTIMONIALS. "Should advance manually." Corrected from the auto-advance
   in the draft.
   =========================================================================== */

.ps-quotes { position: relative; }
.ps-quotes__viewport { overflow: hidden; }
.ps-quotes__track { display: flex; transition: transform 0.45s ease; }
.ps-quotes__slide { flex: 0 0 100%; min-width: 0; padding: 0 0.5rem; }

.ps-quotes__text {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.45;
  font-weight: 600;
}
.ps-quotes__cite { display: block; margin-top: 1.1rem; font-size: 0.95rem; opacity: 0.85; }
.ps-quotes__cite strong { display: block; font-size: 1rem; }

.ps-quotes__controls { display: flex; gap: 0.5rem; align-items: center; margin-top: 1.75rem; }
.ps-quotes__btn {
  width: 2.9rem;
  height: 2.9rem;
  border: 2px solid currentColor;
  background: none;
  color: inherit;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ps-quotes__btn:hover:not(:disabled) { background: var(--ps-orange); border-color: var(--ps-orange); color: var(--ps-navy); }
.ps-quotes__btn:disabled { opacity: 0.3; cursor: default; }
.ps-quotes__count { font-size: 0.9rem; font-variant-numeric: tabular-nums; opacity: 0.75; margin-left: 0.4rem; }

@media (min-width: 768px) { .ps-quotes__slide { flex-basis: 50%; } }

/* ===========================================================================
   14. ACCORDIONS. She screenshotted the draft's accordion into the brief as the
   pattern she wants, so the structure stays and only the colour changes.
   =========================================================================== */

.ps-acc { border-top: 1px solid currentColor; }
.ps-acc__item { border-bottom: 1px solid currentColor; }
.ps-acc__item { border-color: rgba(255, 255, 255, 0.18); }
.on-white .ps-acc, .on-white .ps-acc__item,
.on-tint .ps-acc, .on-tint .ps-acc__item { border-color: rgba(4, 1, 74, 0.15); }

.ps-acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  background: none;
  border: 0;
  color: inherit;
  font-weight: 700;
  font-size: 1.08rem;
  text-align: left;
  cursor: pointer;
}
.ps-acc__sign { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; color: var(--ps-orange); font-weight: 400; }
.on-orange .ps-acc__sign { color: var(--ps-navy); }
.ps-acc__panel { display: none; padding-bottom: 1.4rem; max-width: 68ch; }
.ps-acc__item.is-open .ps-acc__panel { display: block; }

/* ===========================================================================
   15. FOOTER. Structure per the brief, minus the numbers on the links, which
   she noticed on the reference and could not see a reason for.
   =========================================================================== */

.ps-footer { background: var(--ps-navy); color: #FFFFFF; padding-block: 3.5rem 2rem; }
.ps-footer a { color: #FFFFFF; text-decoration: none; }
.ps-footer a:hover { color: var(--ps-orange); text-decoration: underline; }

.ps-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .ps-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.ps-footer__col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-orange);
  margin-bottom: 1rem;
}
.ps-footer__list { list-style: none; padding: 0; margin: 0; }
.ps-footer__list li { margin-bottom: 0.55rem; }
.ps-footer__list ul { list-style: none; padding-left: 1rem; margin: 0.55rem 0 0; opacity: 0.85; font-size: 0.94rem; }

.ps-footer__ack {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.95rem;
  max-width: 78ch;
  opacity: 0.92;
}
.ps-footer__legal {
  margin-top: 1.25rem;
  font-size: 0.86rem;
  opacity: 0.72;
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.ps-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.ps-social a {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  display: grid;
  place-items: center;
}
.ps-social a:hover { background: var(--ps-orange); border-color: var(--ps-orange); color: var(--ps-navy); }

/* ===========================================================================
   16. PLACEHOLDER MARKER. Where her brief still says "Xyz" the page shows this
   rather than copy we made up.
   =========================================================================== */

.ps-todo {
  border: 2px dashed var(--ps-orange);
  background: var(--ps-tint-orange);
  color: var(--ps-navy);
  padding: 1.1rem 1.35rem;
  border-radius: 3px;
  font-size: 0.95rem;
  max-width: 60ch;
}
.ps-todo strong {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ps-orange-deep);
  margin-bottom: 0.35rem;
}

/* ===========================================================================
   17. SCROLL REVEAL. "Animations are fine, but prefer more subtle animations."
   Nothing above the fold animates, for the performance reason already agreed.
   =========================================================================== */

.ps-reveal { opacity: 0; transform: translateY(14px); }
.ps-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }

@media (prefers-reduced-motion: reduce) {
  .ps-reveal, .ps-reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   18. HOUSEKEEPING
   =========================================================================== */

.ps-section { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); position: relative; }
.ps-section--tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }

:focus-visible { outline: 3px solid var(--ps-orange); outline-offset: 2px; }

img, svg, video { max-width: 100%; }
img, video { height: auto; }

.ps-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ps-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 2000;
}
.ps-skip:focus { left: 0; }

/* ===========================================================================
   19. TOUCH TARGETS. Measured on the built page: nav links came out at 43px,
   the search and language controls at 33 to 35px, and the footer social icons
   at 38px. All under the 44px minimum, which matters on a phone.
   =========================================================================== */

.ps-nav__link { min-height: 44px; }
.ps-utility__btn, .ps-lang { min-height: 44px; min-width: 44px; }
.ps-lang { display: inline-flex; align-items: center; }
.ps-social a { width: 44px; height: 44px; }
.ps-footer__list a { display: inline-block; padding-block: 0.35rem; }
.ps-drop__item { min-height: 44px; }

/* The prototype banner. Kept, but recoloured to the corrected palette so it
   stops being the one piece of the old scheme still on screen. */
.proto-bar { background: var(--ps-navy) !important; color: #fff !important; }
.proto-bar a { color: var(--ps-orange) !important; }

/* ===========================================================================
   20. MOBILE NAVIGATION. The desktop nav is hidden under 992px, so without this
   there is no way to reach anything on a phone.
   =========================================================================== */

.ps-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ps-navy);
  cursor: pointer;
}
.ps-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

@media (max-width: 991.98px) {
  .ps-burger { display: block; }

  .ps-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #FFFFFF;
    border-bottom: 3px solid var(--ps-orange);
    box-shadow: 0 18px 40px rgba(4, 1, 74, 0.18);
    padding: 0.75rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .ps-header.is-open .ps-nav { display: flex; }

  .ps-nav__link { justify-content: space-between; padding: 0.85rem 0.75rem; }
  .ps-nav__cta { margin: 0.5rem 0 0; justify-content: center; }

  .ps-drop__panel {
    border: 0;
    border-left: 3px solid var(--ps-orange);
    border-radius: 0;
    padding: 0 0 0 0.75rem;
    margin: 0 0 0.5rem 0.75rem;
    display: none;
  }
  .ps-drop.is-open .ps-drop__panel { display: block; }

  /* Intro modules lose some of their height on a phone so the first module
     below the fold is discoverable. */
  .ps-intro { padding-block: 2.5rem 3rem; }
  .ps-intro__headline { max-width: none; }
}

/* ===========================================================================
   21. NARROW HEADER. Measured at 320, 360 and 390: the logo lockup, burger,
   search and language switch together overran the container by about 22px, so
   the whole page could scroll sideways. Tightened rather than hidden, because
   the language switch is one of the three things the brief puts in the header.
   =========================================================================== */

@media (max-width: 575.98px) {
  .ps-header__inner { gap: 0.4rem; }
  .ps-logo { gap: 0.45rem; min-width: 0; }
  .ps-logo__mark { height: 28px; }
  .ps-logo__name { font-size: 0.9rem; letter-spacing: -0.03em; }
  .ps-logo__tag { font-size: 0.63rem; }
  .ps-burger { width: 40px; }
  .ps-utility { gap: 0; }
  .ps-utility__btn { width: 40px; }
  .ps-lang { padding: 0.3rem 0.35rem; font-size: 0.75rem; letter-spacing: 0; }
}

@media (max-width: 359.98px) {
  .ps-logo__tag { display: none; }   /* below 360 there is genuinely no room */
  .ps-logo__name { font-size: 0.8rem; }
  .ps-logo__mark { height: 24px; }
  .ps-burger { width: 36px; }
  .ps-utility__btn { width: 34px; }
  .ps-lang { padding: 0.3rem 0.25rem; font-size: 0.7rem; }
  .container { --bs-gutter-x: 1.5rem; }
}

/* The slider viewport clips its own track, so slides reported past the right
   edge are not real overflow. Belt and braces so a future change cannot make
   them real. */
.ps-quotes__viewport { max-width: 100%; }
.ps-quotes__slide { min-width: 0; }