/* ==========================================================================
   DUFP · legal and contact pages
   Shares the tokens, type and chrome of index.html. Load order on those
   pages: this file, then dufp-compliance.js at the end of the body.

     1.  Custom properties, from index.html
     2.  Base and helpers, from index.html
     3.  Navigation and mobile menu, from index.html
     4.  Footer, from index.html
     5.  Document hero
     6.  Legal document body
     7.  Contact page and form
     8.  Cookie banner
     9.  Responsive
     10. Print
   ========================================================================== */

/* ---------- 1. Custom properties ---------- */
:root{
  --slate:#1a2533;
  --slate-2:#22303f;
  --orange:#d95c2b;
  --orange-deep:#bf4f1e;   /* solid blocks carrying white text, 4.82:1 */
  --orange-ink:#b0451c;     /* orange at reading size on a light ground, 5.65:1 */
  --ivory:#f7f3eb;
  --sand:#e8e0d5;
  --charcoal:#2d3436;

  --ink:var(--charcoal);
  --ink-soft:#5b6467;
  --on-dark:#f4f1ea;
  --on-dark-soft:rgba(244,241,234,.74);

  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:clamp(20px,4.6vw,72px);
  --maxw:1280px;
  --measure:760px;      /* a reading measure for legal prose, not a grid width */
  --nav-h:82px;
  --ease:cubic-bezier(.22,.68,.28,1);

  --error:#a32b1f;      /* darkened from the usual red so it clears AA */
  --error-bg:#fdf4f2;
  --ok:#1b5e20;
  --ok-bg:#f2f8f3;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,.36vw + 15.3px,17.5px);
  font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;
  letter-spacing:-.005em;color:var(--slate);margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2.5px solid var(--orange-deep);outline-offset:3px;border-radius:2px}

/* ---------- 2. Base and helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(48px,5.4vw,84px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:18px
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--orange)}
.on-slate .eyebrow{color:#fff}
.on-slate .eyebrow::before{background:currentColor}
.h1{font-size:clamp(34px,4.6vw,60px);line-height:1.06}
.h2{font-size:clamp(25px,2.9vw,36px)}
.lead{font-size:clamp(17px,1.1vw,20px);line-height:1.66;color:var(--ink-soft)}
.on-slate,.on-slate h1,.on-slate h2,.on-slate h3{color:var(--on-dark)}
.on-slate .lead{color:var(--on-dark-soft)}
.rule{width:56px;height:3px;background:var(--orange);border-radius:2px}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;border-radius:3px;
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.01em;
  background:var(--orange-deep);color:#fff;
  box-shadow:0 10px 24px rgba(191,79,30,.24);
  transition:transform .3s var(--ease),box-shadow .35s var(--ease),background .25s ease
}
.btn:hover{transform:translateY(-2px);background:#a94419;box-shadow:0 14px 30px rgba(191,79,30,.3)}
.btn:active{transform:none}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn--ghost{
  background:#fff;color:var(--slate);box-shadow:none;border:1.5px solid var(--sand)
}
.btn--ghost:hover{background:var(--ivory);color:var(--slate);border-color:var(--slate);transform:none}
.btn[disabled]{opacity:.6;cursor:default;transform:none;box-shadow:none}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--orange-ink);
  padding-bottom:2px;border-bottom:1.5px solid transparent;
  transition:border-color .3s ease,color .3s ease
}
.tlink:hover{border-color:var(--orange);color:#963b15}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate);color:#fff;padding:14px 20px;font-weight:700
}
.skip:focus{left:12px;top:12px}
.sr-only{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important
}

/* ---------- 3. Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;background:#fff;
  border-bottom:1px solid var(--sand);
  transition:height .35s var(--ease),box-shadow .35s var(--ease)
}
.nav.solid{height:70px;box-shadow:0 6px 26px rgba(26,37,51,.07)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--serif);font-size:26px;color:var(--slate)}
.logo i{color:var(--orange);font-style:normal}
.logo .wm{display:inline-flex;align-items:baseline}
.logo .cmp{flex:0 0 auto;transition:transform .6s var(--ease)}
.logo:hover .cmp{transform:rotate(42deg)}

.nav-links{display:flex;align-items:center;gap:clamp(6px,1.5vw,22px)}
.nav-links a{position:relative;padding:10px 2px;font-size:15.5px;font-weight:500;
  color:var(--slate);transition:color .28s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)
}
.nav-links a:hover{color:var(--orange-ink)}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a:not(.btn)[aria-current="page"]{color:var(--orange-ink)}
.nav .nav-cta{margin-left:8px}
/* .nav-links a is more specific than .btn, so without this the button label
   inherits the slate nav colour and lands at 3.21:1 on the orange fill. The
   current page state must not repaint it either, or it becomes orange on
   orange. */
.nav-links a.btn,.nav-links a.btn:hover,
.nav-links a.btn[aria-current="page"]{color:#fff}

.burger{display:none;width:46px;height:46px;position:relative;z-index:104;margin-right:-6px}
.burger i{position:absolute;left:12px;width:22px;height:2px;background:var(--slate);
  transition:transform .38s var(--ease),opacity .28s}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:23px;width:15px}
.burger i:nth-child(3){top:29px}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:95;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--nav-h) var(--gutter) 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s
}
body.menu-open .menu{opacity:1;visibility:visible;transform:none}
.menu a{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif);font-size:clamp(24px,6.4vw,34px);color:var(--slate);
  padding:15px 0;border-bottom:1px solid var(--sand);
  transition:color .3s ease,padding-left .3s ease
}
.menu a:hover{color:var(--orange-ink);padding-left:10px}
.menu a em{font-family:var(--sans);font-size:12px;font-style:normal;font-weight:700;
  color:var(--orange)}
.menu .m-note{margin-top:26px;color:var(--ink-soft);font-size:15px}

/* ---------- 4. Footer ---------- */
.foot{background:var(--slate);color:var(--on-dark-soft);padding-block:clamp(40px,4.4vw,60px)}
.foot .inner{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;
  justify-content:space-between}
.foot .logo{color:var(--on-dark)}
.foot .logo i{color:var(--orange)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.foot-links a,.foot-links button{
  padding:8px 14px;font-size:14.4px;font-weight:500;color:rgba(244,241,234,.82);
  transition:color .3s ease,background .3s ease
}
.foot-links a:hover,.foot-links button:hover{color:#fff;background:rgba(244,241,234,.1)}
.foot-links a[aria-current="page"]{color:#fff;background:rgba(244,241,234,.14)}
.foot .copy{width:100%;margin:0;padding-top:20px;
  border-top:1px solid rgba(244,241,234,.16);font-size:13.6px}

/* ---------- 5. Document hero ---------- */
.dochero{background:var(--ivory);border-bottom:1px solid var(--sand);
  padding-top:calc(var(--nav-h) + clamp(38px,4.6vw,68px));
  padding-bottom:clamp(34px,4vw,58px)}
.dochero h1{max-width:22ch;margin-bottom:18px}
.dochero .stamp{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;
  font-size:13.4px;color:var(--ink-soft)
}
.dochero .stamp b{font-weight:700;color:var(--slate)}

/* ---------- 6. Legal document body ---------- */
.doc{max-width:var(--measure)}
.doc>*+*{margin-top:0}
.doc .note--advice{
  margin:0 0 2.2em;padding:16px 20px;background:var(--ivory);
  border-left:4px solid var(--orange);font-size:15.4px;color:var(--ink-soft)
}
.doc h2{
  font-size:clamp(22px,2.3vw,29px);margin:2.1em 0 .55em;
  padding-top:.7em;border-top:1px solid var(--sand)
}
.doc h2:first-of-type{border-top:0;padding-top:0;margin-top:1.5em}
.doc h3{font-size:clamp(18px,1.5vw,21px);margin:1.5em 0 .4em}
.doc p,.doc li{color:var(--ink)}
.doc .lede{
  background:var(--ivory);border-left:4px solid var(--orange);
  padding:18px 22px;margin:0 0 2em;font-size:16.6px;color:var(--ink-soft)
}
.doc ul,.doc ol{margin:0 0 1.15em;padding-left:22px}
.doc li{margin-bottom:7px}
.doc dl{margin:0 0 1.3em}
.doc dt{font-family:var(--serif);font-size:19px;color:var(--slate);margin-top:1.1em}
.doc dt:first-child{margin-top:0}
.doc dd{margin:0 0 .5em;color:var(--ink-soft)}
/* WCAG 2.5.8. A link that stands on its own line is a tap target in its own
   right, so it carries height. Links inside a sentence are exempt and are
   deliberately left alone: padding those forces the lines apart. */
.doc dd>a:only-child{display:inline-block;padding:4px 0}
.doc .note{
  background:#fff;border:1px solid var(--sand);border-left:4px solid var(--orange);
  padding:16px 20px;margin:1.5em 0;font-size:15.8px
}
.doc .note strong{display:block;font-family:var(--serif);font-size:18px;
  color:var(--slate);margin-bottom:4px;font-weight:400}

/* contents. Two columns of small caps entries, in the eyebrow's voice. */
.toc{background:var(--ivory);border-top:2px solid var(--orange);
  padding:22px 24px;margin:0 0 2.4em}
.toc h2{font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  border-top:0;padding-top:0;margin:0 0 .7em}
.toc ol{margin:0;padding-left:1.25em;columns:2;column-gap:30px}
.toc li{margin-bottom:.2em;break-inside:avoid;color:var(--ink-soft)}
.toc a{font-size:15px;color:var(--slate);display:inline-block;padding:4px 0;
  border-bottom:1.5px solid transparent;transition:border-color .3s ease,color .3s ease}
.toc a:hover{color:var(--orange-ink);border-color:var(--orange)}

/* tables. Ruled, not boxed, matching the impact figures on the home page. */
.table-scroll{overflow-x:auto;margin:0 0 1.6em}
table{border-collapse:collapse;width:100%;min-width:520px;margin:0;font-size:15.4px}
caption{
  text-align:left;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:10px
}
th,td{text-align:left;padding:13px 16px 13px 0;vertical-align:top;
  border-bottom:1px solid var(--sand)}
th{font-family:var(--sans);font-weight:700;color:var(--slate);font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--orange)}
td{color:var(--ink-soft)}
tbody tr:last-child td{border-bottom:1px solid var(--sand)}
td>a:only-child{display:inline-block;padding:4px 0}

/* ---------- 7. Contact page and form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(34px,4.6vw,80px);align-items:start}
.info{list-style:none;margin:0;padding:0}
.info li{border-top:1px solid var(--sand)}
.info li:last-child{border-bottom:1px solid var(--sand)}
.info a,.info .row{display:flex;gap:16px;align-items:flex-start;padding:20px 0;
  transition:padding-left .35s var(--ease)}
.info a:hover{padding-left:8px}
.info .ic{flex:0 0 auto;color:var(--orange);margin-top:3px}
.info .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.info .val{display:block;font-family:var(--serif);font-size:19px;color:var(--slate);
  line-height:1.45}
.info a:hover .val{color:var(--orange-ink)}
.aside-note{margin:26px 0 0;font-size:14.6px;color:var(--ink-soft)}

/* Underline only fields, exactly as on the home page. */
.form{display:grid;gap:clamp(20px,2.4vw,28px);max-width:640px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,28px)}
/* margin:0 matters. Without it the global paragraph margin, plus
   p:last-child clearing it, makes the last field in a row taller than its
   sibling and the inputs stop lining up. */
.field{display:grid;gap:7px;margin:0}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.field .opt{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:12.5px}
.field .req{color:var(--orange-ink)}
.field .hint{display:block;font-weight:400;letter-spacing:normal;text-transform:none;
  font-size:13.4px;color:var(--ink-soft);margin-top:3px}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--slate);
  background:transparent;border:0;border-bottom:1.5px solid var(--sand);
  padding:10px 2px 12px;border-radius:0;
  transition:border-color .3s ease
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235b6467' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;padding-right:26px
}
.field textarea{resize:vertical;min-height:118px;line-height:1.62}
.field input::placeholder,.field textarea::placeholder{color:#7c8385}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--orange)
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2.5px solid var(--orange-deep);outline-offset:3px
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-bottom-color:var(--error);border-bottom-width:2px}
.field-error{display:none;margin:0;font-size:13.8px;font-weight:700;color:var(--error)}
.field-error.show{display:block}

/* Checkbox rows. 24px minimum, WCAG 2.5.8. */
.check{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;margin:0}
.check input[type=checkbox]{
  width:24px;height:24px;margin:1px 0 0;flex:0 0 auto;
  accent-color:var(--orange-deep);border:1px solid #8d9295
}
.check label{margin:0;font-size:15.4px;line-height:1.6;color:var(--ink);
  font-weight:400;letter-spacing:normal;text-transform:none}
.check a{color:var(--orange-ink);border-bottom:1.5px solid var(--orange);font-weight:700}
.check .field-error{grid-column:1 / -1}

/* Off screen rather than display:none, because some automated clients skip
   hidden inputs and the trap then catches nothing. */
.honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:4px}
.form-note{margin:0;font-size:13.4px;color:var(--ink-soft);max-width:32ch}

.form-summary{
  display:none;margin:0;padding:18px 22px;background:var(--error-bg);
  border-left:4px solid var(--error)
}
.form-summary.show{display:block}
.form-summary h2{font-family:var(--serif);font-size:20px;color:var(--error);
  border-top:0;padding-top:0;margin:0 0 .4em}
.form-summary ul{margin:0;padding-left:20px}
.form-summary li{margin-bottom:5px;color:var(--error)}
.form-summary a{color:var(--error);font-weight:700;border-bottom:1.5px solid currentColor}

.form-ok,.form-bad{margin:0;padding:16px 20px;font-size:15.4px;display:none}
.form-ok{background:var(--ok-bg);border-left:4px solid var(--ok);color:#14401a}
.form-bad{background:var(--error-bg);border-left:4px solid var(--error);color:#7d2018}
.form-ok.show,.form-bad.show{display:block}
.form-ok strong,.form-bad strong{display:block;font-family:var(--serif);font-size:19px;
  font-weight:400;margin-bottom:3px}
.form-ok strong{color:#14401a}
.form-bad strong{color:var(--error)}
.form-bad a{color:var(--error);font-weight:700;border-bottom:1.5px solid currentColor}

/* ---------- 8. Cookie banner ---------- */
/* Fixed to the viewport rather than sitting in the footer: a consent choice
   the visitor has to scroll to find is not a choice. Accept and Reject carry
   identical weight. */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:#fff;border-top:3px solid var(--orange);
  box-shadow:0 -12px 40px rgba(26,37,51,.16);
  transform:translateY(101%);transition:transform .42s var(--ease);
  max-height:88svh;overflow-y:auto
}
.cc.show{transform:none}
.cc-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(20px,2.6vw,32px) var(--gutter)
}
.cc h2{font-size:clamp(21px,2vw,26px);margin:0 0 .45em}
.cc p{font-size:15.4px;color:var(--ink-soft);max-width:74ch}
.cc p a{color:var(--orange-ink);border-bottom:1.5px solid var(--orange);font-weight:700}
.cc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cc-actions .btn{padding:13px 26px;font-size:15px}
.cc-panel{display:none;margin-top:22px;padding-top:20px;border-top:1px solid var(--sand)}
.cc-panel.show{display:block}
.cc-cat{display:grid;grid-template-columns:auto 1fr;gap:13px;
  padding:14px 0;border-bottom:1px solid var(--sand)}
.cc-cat:last-of-type{border-bottom:0}
.cc-cat input[type=checkbox]{width:24px;height:24px;margin:2px 0 0;
  accent-color:var(--orange-deep);border:1px solid #8d9295}
.cc-cat label{font-family:var(--serif);font-size:19px;color:var(--slate);display:block}
.cc-cat .desc{margin:2px 0 0;font-size:14.4px;color:var(--ink-soft)}
.cc-save{margin-top:18px}

/* ---------- 9. Responsive ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .burger{display:block}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .toc ol{columns:1}
  .form .row2{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .cc-actions .btn{width:100%}
  .foot .inner{flex-direction:column;align-items:flex-start}
  .doc h2{margin-top:1.7em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .cc{transform:none;display:none}
  .cc.show{display:block}
}

/* ---------- 10. Print ---------- */
@media print{
  .nav,.menu,.burger,.foot,.cc,.skip,.toc{display:none!important}
  body{font-size:11.5pt;color:#000}
  .dochero{background:#fff;border:0;padding-top:0}
  .doc{max-width:none}
  .doc h2{break-after:avoid}
  table{min-width:0;font-size:10pt}
  a{text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}