/* trjones.co.uk: the one site stylesheet (rebuild stage 2, 29 Oct 2026). Three parts, in the old
   load order: (1) the rules of the old Joomla template.css and normalize.css that the generated
   pages use (pruned by check/rebuild/stage2/prune.mjs; body text in the system sans, as the old
   site really rendered, since Gill Sans Nova never loaded), (2) our additions, (3) the postcode
   lookup styles (was postcode-lookup.css). Bump ASSET_V in scripts/lib/render.mjs on any edit. */
/* Site fonts (29 Oct 2026, Owen: "streamline the fonts and be consistent across the site").
   Self-hosted from @fontsource (SIL Open Font Licence, files and licences in fonts/), so no
   visitor request goes to Google. To try another pair, change the two variables and the
   @font-face files: every rule on the site uses var(--trj-font-body) or var(--trj-font-head). */
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/libre-franklin-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/libre-franklin-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/libre-baskerville-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/libre-baskerville-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/libre-baskerville-latin-700-normal.woff2) format("woff2"); }
:root {
   --trj-font-body: aileron, "Libre Franklin", Helvetica, Arial, sans-serif;
   /* 29 Oct 2026: one family, like the logo (Owen: "pairs well with the logo ... quite versatile").
      Libre Franklin stands in for Franklin Gothic URW (Adobe) until the web project exists.
      Baskerville is kept in @font-face above for a quick revert; unused faces are never downloaded. */
   --trj-font-head: aileron, "Libre Franklin", Helvetica, Arial, sans-serif;
   --trj-head-weight: 700; /* Aileron kit ctb2fov (Owen, 30 Oct 2026) holds 400 and 700, roman and italic only. */
   --trj-head-track: -0.005em;
}


/* ---- From the old template.css (rebuild stage 2): only the rules the generated pages use. */
HTML {
   overflow-x: hidden;
}
BODY {
   background-color: #FFFFFF;
   font-family: var(--trj-font-body);
   color: #000000;
   position: relative;
   overflow-x: hidden;
}
P, UL {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.3;
}
DIV.moduletable.backtotop {
   text-align: right;
   margin-top: 10px;
}
DIV.moduletable.backtotop A {
   color: #A7A7A7;
   text-decoration: none;
}
DIV.moduletable.backtotop P {
   margin: 0;
   overflow: hidden;
}
.container {
   position: relative;
   margin: auto;
}
.row {
   margin: auto;
}
A[href^=tel] {
   color: #000000;
   text-decoration: none;
}
A {
   color: #000000;
   text-decoration: none;
   word-wrap: break-word;
}
.main A {
   text-decoration: underline;
}
A:hover {
   color: #EE2D26;
}
.overlay {
   height: 100%;
   width: 0px;
   position: fixed;
   z-index: 3;
   top: 0;
   right: 0;
   background-color: #EE2D26;
   overflow-x: hidden;
   transition: 0.5s;
}
.overlay.open {
   width: 100%;
}
.overlay-content {
   position: relative;
   width: 100%;
   text-align: center;
   z-index: 2;
   transition: 0.2s;
}
.overlay-content A {
   padding: 6px;
   text-decoration: none;
   font-size: 0px;
   display: inline-block;
   transition: 0.3s;
   margin: auto;
}
.overlay-content.open A, .overlay-content.open SPAN.nav-header {
   color: #FFFFFF;
   font-size: 24px;
   padding: 2px;
}
.overlay-content.open UL.nav-child A {
   font-size: 22px;
   color: rgba(255, 255, 255, 0.675);
   padding: 1px;
}
.overlay-content.open A:hover {
   color: #FCD209;
}
.overlay-content UL {
   list-style: none;
   margin: 30px 0 0;
   padding: 0;
}
.overlay-content UL UL.nav-child {
   margin-top: 0;
   margin-bottom: 5px;
}
.overlay .closebtn {
   position: absolute;
   top: 0px;
   right: 20px;
   font-size: 50px;
   z-index: 3;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.306);
}
DIV#menuIcon SPAN {
   font-size: 48px;
   cursor: pointer;
   color: #FFFFFF;
}
H1, H2, H3, H4, H5 {
   margin: 0;
   padding: 0;
   font-weight: 400;
}
#slideshowrow P {
   margin: 0;
   line-height: normal;
}
#slideshowrow PICTURE IMG {
   margin: 0 0 -5px 0;
   width: 100%;
}
H2 A {
   text-decoration: none;
   line-height: 1;
}
H2 A:hover {
   color: #EE2D26;
}
#menu-row {
   background-color: #EE2D26;
}
#main-menu UL.nav {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: space-between;
   justify-content: flex-end;
}
#main-menu A, #main-menu .nav-header {
   color: #FFFFFF;
   text-transform: uppercase;
   display: block;
   padding: 12px 15px;
   cursor: pointer;
   /* 18px inherited from BODY read loud in capitals (Owen, 29 Oct 2026). */
   font-size: 15px;
   letter-spacing: .06em;
   line-height: 1.4;
}
#main-menu A:hover {
   color: #000000;
   background-color: #FCD209;
}
#main-menu LI LI A:hover {
   background-color: #EE2D26;
}
#menu-row UL.nav-child {
   background-color: #FBD109;
   position: absolute;
   margin: 0;
   padding: 0;
   list-style: none;
   visibility: hidden;
   z-index: 2;
}
#menu-row UL.nav-child A {
   color: #000000;
}
#menu-row UL.nav-child A:hover {
   color: #FFFFFF;
}
#menu-row UL.nav LI:hover UL.nav-child {
   visibility: visible;
}
#iconsrow {
   background-color: #FCD209;
   color: #EE2D26;
}
#iconsrow DIV.row {
   display: flex;
}
#iconsrow P.icon {
   font-size: 38px;
}
#iconsrow P {
   margin: 0;
   text-transform: uppercase;
}
#maintitlerow {
   background-color: #E9E9E9;
   background-color: #737261;
}
#aboutrow P {
}
#contact-info A {
   color: #EE2D26;
}
#contact-info A:hover {
   color: #FCD209;
}
DIV#maprow {
   margin-top: 15px;
}
DIV#maprow {
   margin-top: 0px;
}
DIV.sidebar DIV.moduletable {
   margin-bottom: 15px;
}
DIV.sidebar DIV.moduletable H3 {
   color: #FFFFFF;
   background-color: #EE2D26;
   font-size: 18px;
   padding: 5px 10px !important;
   border-bottom: 3px solid #E9E9E9;
   margin: 0;
}
DIV.sidebar DIV.moduletable UL LI A, .sidebar .menu SPAN.nav-header {
   display: block;
   background-color: #D4D4D4;
   border-bottom: 1px dotted #FFFFFF;
   text-decoration: none;
   padding: 5px 10px;
   font-size: 14px;
   font-weight: bold;
}
DIV.sidebar DIV.moduletable UL LI A:hover {
   background-color: #FCD209;
   color: #000000;
}
.sidebar .nav-child LI A {
   font-size: 14px;
   padding-left: 17px !important;
   font-weight: normal !important;
}
.sidebar DIV.moduletable UL {
   list-style: none;
   margin: 0;
   padding: 0;
}
#main_content H4 {
   font-size: 22px;
   margin: 20px 0px;
}
.sidebar DIV.moduletable.enquire A {
   background-color: #EE2D26;
   color: #FFFFFF;
   text-transform: uppercase;
   display: block;
   padding: 10px 10px;
   font-size: 18px;
}
.sidebar DIV.moduletable.enquire A:hover {
   background-color: #FCD209;
   color: #000000;
}
.sidebar P {
   text-align: center;
   margin: 0;
}
#testimonialsrow {
   background-color: #5E5E5E;
   color: #FFFFFF;
   clear: both;
}
#testimonialsrow DIV.moduletable {
   padding: 10px 0px 40px;
}
#testimonialsrow DIV.custom {
   display: flex;
   flex-wrap: wrap;
}
#testimonialsrow DIV.custom P {
   width: 40%;
   flex: 1 0 auto;
   padding-left: 50px;
   background-image: url(/media/trj/img/quote-marks-40.png);
   background-repeat: no-repeat;
   font-size: 16px;
   padding-right: 24px;
}
#testimonialsrow H3 {
   text-align: center;
   font-size: 24px;
}
#footer {
   background-color: #EE2D26;
   clear: both;
   padding: 53px 0px 25px;
   color: #FFFFFF;
}
DIV.custom.logobox P {
   margin-top: 0;
}
#footer DIV.footer-item.container {
   display: flex;
}
#footer H3 {
   font-size: 22px !important;
   color: #FFFFFF;
   margin-top: 0;
}
#footer P.social {
   font-size: 36px;
   margin: 0;
}
#footer P.social A {
   padding-right: 10px;
   color: #FFFFFF;
}
#footer P.social A:hover {
   color: #FBD109;
}
#footer P.social SVG {
   margin-right: 8px;
   margin-top: 20px;
}
#footer H5 {
   font-size: 18px;
   font-weight: 400;
   color: #FFFFFF;
   margin-top: 30px !important;
   margin-bottom: 0;
}
#footer UL {
   margin: 0;
   padding: 0;
   list-style: none;
}
#footer A.signup {
   background-color: #FFFFFF;
   color: #EE2D26;
   text-decoration: none;
   padding: 6px 10px;
   text-transform: uppercase;
}
#footer A.signup:hover {
   background-color: #FBD109;
   color: #000000;
}
#footer UL LI A {
   text-decoration: none;
   color: #FFFFFF;
}
#footer UL LI A:hover {
   color: #FCD209;
}
#legal {
   background-color: #585858;
   color: #FFFFFF;
}
#legal P, #legal A {
   margin: 0;
   font-size: 12px;
}
#legal A {
   color: #FFFFFF;
   text-decoration: none;
   margin-right: 15px;
}
#legal A:hover {
   color: #D1D1D1;
   text-decoration: none;
   background-color: transparent;
}
#legal DIV.moduletable {
   text-align: center;
   padding: 14px;
}
#legal DIV.moduletable.copyright {
   padding: 3px;
}
#main_content DIV.main DIV.moduletable {
   overflow: auto;
}
#inside DIV.item-page H3 {
   font-size: 24px;
   color: #000000;
   margin-bottom: 0;
}
#inside #main_content DIV.item-page DIV.page-header H2 {
   font-size: 38px;
   margin-top: 0;
}
#rowone .row {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
#rowone P {
   margin: 0;
   color: #EE2D26;
   max-width: 66%;
}
#rowone H2 {
   margin: 0;
}
#rowone DIV.moduletable .custom {
   background-repeat: no-repeat;
   background-position: bottom right;
   height: 160px;
   border: 1px solid #C9C9C9;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   padding: 15px;
}
#rowone DIV.moduletable {
   background-image: linear-gradient(white, #F4F3F1);
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   width: 100%;
   flex: 0 1 auto;
   margin-bottom: 15px;
}
#rowone A.readmore {
   background-color: #EE2D26;
   color: #FFFFFF;
   padding: 3px 5px;
   font-size: 11px;
   text-transform: uppercase;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -khtml-border-radius: 4px;
   border-radius: 4px;
   display: block;
   margin-top: 8px;
   width: 74px;
   text-align: center;
}
#rowone A.readmore:hover {
   background-color: #FCD209;
   color: #000000;
}
P.ukifda IMG {
}
.about A {
   background-color: #EE2D26;
   color: #FFFFFF;
   padding: 8px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   -khtml-border-radius: 7px;
   border-radius: 7px;
   font-size: 17px;
}
.about A:hover {
   background-color: #FCD209;
   color: #000000;
}
#aboutrow {
   background-color: #EBEBEB;
}
@media (max-width: 767px) {
   BODY {
      font-size: 16px;
   }
   DIV.container {
   }
   P {
      font-size: 18px;
   }
   #headerRowWide {
      background-color: #FFFFFF;
      border-bottom: 5px solid #EE2D26;
   }
   #headerRowWide P {
      margin: 0;
   }
   #headerRow {
      position: relative;
   }
   #headerLeft {
      z-index: 2;
      padding: 10px 0px 7px;
      margin: auto;
      width: 220px;
   }
   #headerRight {
      position: absolute;
      top: 5px;
      right: 21px;
   }
   #contact-info {
      display: none;
   }
   #headerLeft #logo IMG {
      width: 100%;
   }
   DIV#menuIcon SPAN {
      font-size: 32px;
      margin-left: 0px;
      color: #000000;
   }
   DIV#menuIcon {
      margin-top: 20px;
   }
   #iconsrow P {
      font-size: 14px;
   }
   DIV#menu-row {
      display: none;
   }
   #slideshowrow {
      overflow: hidden;
   }
   #iconsrow {
      margin-top: -1px;
   }
   #rowone {
      padding: 15px;
   }
   #iconsrow DIV.row {
      flex-wrap: wrap;
   }
   #iconsrow DIV.moduletable {
      text-align: center;
      flex: 1 1 auto;
      padding: 18px;
      width: 30%;
   }
   #aboutrow DIV.row.container {
      width: 100%;
   }
   #aboutrow {
      background-color: #EFEFF0;
   }
   #aboutrow DIV.moduletable {
      padding-top: 60px;
      padding-bottom: 40px;
   }
   #aboutrow DIV.moduletable DIV.custom {
      padding: 0px 20px 20px;
      text-align: center;
   }
   #aboutrow H3 {
      text-align: center;
      text-transform: uppercase;
      color: #000000;
      font-size: 36px;
      margin: 0;
   }
   #testimonialsrow DIV.custom {
      padding: 20px;
   }
   #testimonialsrow P {
      font-size: 16px;
   }
   #footer {
      padding: 30px 2.5%;
   }
   #footer H3 {
      font-size: 29px !important;
      margin-bottom: 0;
      margin-top: 20px;
   }
   #footer DIV.moduletable P {
      width: 70%;
      margin: auto auto 15px auto;
   }
   #footer DIV.moduletable.logobox P IMG {
      margin-bottom: 27px;
      width: 100%;
   }
   #footer LI {
      padding: 3px;
   }
   #footer LI A {
      font-size: 20px;
   }
   #footer DIV.moduletable {
      margin-bottom: 30px;
      text-align: center;
   }
   DIV.footer-item.container {
      flex-direction: column;
   }
   .blog .page-header H2 {
      font-size: 33px;
   }
   DIV.main, DIV.sidebar {
      padding: 20px;
   }
   #inside #main_content {
   }
   DIV.main DIV.moduletable {
      padding-bottom: 30px;
   }
   DIV.blog DIV.items-row {
      flex-direction: column;
      margin-top: 0;
   }
   DIV.blog DIV.items-row DIV.span4 {
      width: auto;
      margin-top: 18px;
      margin-bottom: 18px;
   }
   .item-page IMG {
      max-width: 100%;
   }
}
@media (min-width: 768px) {
   BODY {
      padding: 0;
   }
   .container {
      width: 700px;
      padding-left: 0px;
      padding-right: 0px;
   }
   #headerRowWide {
      max-height: 1200px;
      padding: 20px;
   }
   #headerRight {
      display: flex;
      align-items: center;
   }
   #headerRight #contact-info P {
      color: #EE2D26;
      text-align: right;
      font-size: 24px;
      margin: 0;
      text-transform: uppercase;
   }
   #headerRight #contact-info P.phone {
      color: #000000;
      font-size: 32px;
   }
   DIV#menuIcon {
      display: none;
   }
   DIV#slideshowrow {
      overflow: hidden;
   }
   DIV#headerRow {
      display: flex;
      justify-content: space-between;
      padding: 0% 1%;
      z-index: 2;
   }
   #headerRow DIV {
   }
   #headerRight {
   }
   #headerLeft {
      max-width: 300px;
   }
   #headerLeft #logo IMG {
      width: 100%;
   }
   #main_content DIV.items-row {
      display: flex;
      justify-content: space-between;
   }
   #iconsrow DIV.moduletable {
      text-align: center;
      flex: 1 1 auto;
      padding: 18px;
   }
   #aboutrow DIV.row {
      display: flex;
      padding: 50px 50px 25px 50px;
   }
   #aboutrow DIV.moduletable {
      text-align: center;
   }
   #aboutrow H3 {
      color: #000000;
      font-size: 38px;
      margin-bottom: 15px;
      margin-top: 0;
      text-transform: uppercase;
   }
   #aboutrow P {
      width: 75%;
      margin: auto;
      padding-bottom: 26px;
      font-size: 19px;
   }
   #footer DIV.moduletable {
      flex: 1 1 auto;
      padding: 0px 5px 5px;
      width: 20%;
   }
   #footer DIV.moduletable.logobox IMG {
      width: 60%;
   }
   #footer DIV.moduletable.logobox P.ukifda IMG {
      width: 180px;
   }
   #footer DIV.moduletable.logobox {
      text-align: center;
      width: 33%;
   }
   DIV.columns {
      display: flex;
      justify-content: space-between;
   }
   DIV.col2 {
      width: 48%;
   }
   .blog .page-header H2 {
      font-size: 18px;
   }
   #inside #main_content DIV.row.container {
      display: flex;
   }
   #main_content {
      background-color: #FFFFFF;
      padding-bottom: 1px;
      padding-top: 40px;
   }
   DIV.sidebar {
      flex: 1 1 28%;
      padding: 0px 0px 0px 20px;
   }
   DIV.main {
      padding-top: 10px;
      padding-bottom: 50px;
   }
   #inside DIV.main {
      padding-top: 0px;
      padding-bottom: 50px;
      width: 67%;
   }
   #inside.wide DIV.main {
      flex: 0 0 100%;
      width: 100%;
   }
   DIV.columns {
      display: flex;
   }
   #inside.wide .main DIV.item-page, #inside.wide DIV.main DIV.moduletable {
      padding-right: 0;
   }
   DIV.main DIV.blog {
      padding-bottom: 30px;
   }
   DIV.blog DIV.items-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
   }
   #rowone DIV.moduletable {
      width: 48.5%;
   }
   #rowone {
      padding-top: 50px;
      padding-bottom: 40px;
   }
   #main-menu A, #main-menu .nav-header {
      font-size: 14px;
      padding: 10px 7px;
      text-transform: uppercase;
   }
}
@media (min-width: 992px) {
   .container {
      width: 940px;
   }
   #footer .footer-item.container {
      display: flex;
   }
   #rowone DIV.moduletable {
      width: 32%;
   }
   #main-menu A, #main-menu .nav-header {
      font-size: 15px;
      padding: 12px 11px;
      text-transform: uppercase;
   }
}
@media (min-width: 1200px) {
   .container {
      width: 1080px;
   }
   .blog .page-header H2 {
      font-size: 28px;
   }
   #main-menu A, #main-menu .nav-header {
      font-size: 16px;
      padding: 12px 14px;
      text-transform: uppercase;
   }
}
@media (min-width: 1600px) {
   .container {
      width: 1248px;
   }
   .blog .page-header H2 {
      font-size: 32px;
   }
   DIV.blog DIV.page-header {
   }
   #main-menu A, #main-menu .nav-header {
      font-size: 16px;
      padding: 12px 18px;
      text-transform: uppercase;
   }
}
/* ---- From the old normalize.css (rebuild stage 2): only the rules the generated pages use. */
nav,
section {
    display: block;
}
[hidden] {
    display: none;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
    font-family: var(--trj-font-body);
}
body {
    margin: 0;
}
a:focus {
    outline: thin dotted;
}
a:active,
a:hover {
    outline: 0;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}
h3 {
    font-size: 1.17em;
    margin: 1em 0;
}
h4 {
    font-size: 1em;
    margin: 1.33em 0;
}
h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}
strong {
    font-weight: bold;
}
p {
    margin: 1em 0;
}
small {
    font-size: 75%;
}
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
ul {
    margin: 1em 0;
}
ul {
    padding: 0 0 0 40px;
}
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
svg:not(:root) {
    overflow: hidden;
}
form {
    margin: 0;
}
fieldset {
    border: 1px solid #C0C0C0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px;
}
button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}
button,
input {
    line-height: normal;
}
button {
    -webkit-appearance: button;
    cursor: pointer;
    *overflow: visible;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    *height: 13px;
    *width: 13px;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
}

/* ==== (2) Additions for the rebuilt trjones.co.uk.
   Colours are the template's own: red #EE2D26, yellow #FCD209, navy #1A1A1A. */

/* Pay Invoice button (Marcus's request): same look as the sidebar "Get in touch" button. */
a.trj-paybtn {
   display: inline-block;
   background-color: #EE2D26;
   color: #FFFFFF;
   text-transform: uppercase;
   text-decoration: none;
   padding: 8px 16px;
   font-size: 16px;
   line-height: 1.2;
}
a.trj-paybtn:hover, a.trj-paybtn:focus {
   background-color: #FCD209;
   color: #000000;
}
#contact-info a.trj-paybtn { color: #FFFFFF; }
#contact-info a.trj-paybtn:hover, #contact-info a.trj-paybtn:focus { color: #000000; }
#headerRight #contact-info p.trj-pay-header {
   font-size: 16px;
   margin-top: 8px;
   text-align: right;
}

/* Front page band under the slideshow. */
#trj-payrow {
   background-color: #1A1A1A;
   color: #FFFFFF;
   padding: 14px 20px;
}
#trj-payrow div.row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px 24px;
}
#trj-payrow p { margin: 0; text-align: center; }
#trj-payrow p.trj-payrow-text { font-size: 18px; }
a.trj-paybtn.trj-paybtn-lg { font-size: 20px; padding: 10px 26px; font-weight: 700; }

/* Spam honeypot: off screen for people, still in the form for bots. */
.trj-hp {
   position: absolute !important;
   left: -10000px !important;
   width: 1px; height: 1px;
   overflow: hidden;
}

/* Form messages (the handler's replies). */
.trj-form-error {
   color: #B23533;
   font-weight: 700;
   margin: 0 0 12px;
}
.trj-form-thanks {
   border-left: 4px solid #FCD209;
   padding: 6px 14px;
   margin: 12px 0;
}
.trj-form button[disabled], .trj-pay-form button[disabled] { opacity: .6; cursor: wait; }

/* Express Order / Pay Invoice: the old module opened a popup; the panel opens in the page.
   Without JavaScript it is simply always open. */
.js .trj-pay-panel { display: none; }
.js .trj-pay-panel.open { display: block; }
.trj-pay-panel { margin: 16px 0 20px; max-width: 880px; }
.trj-pay-wrp { margin: 8px 0 4px; }
button.trj-pay-open {
   display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 220px; padding: 10px 24px;
   border: 0; border-radius: 6px; background: #EE2D26; color: #FFFFFF; font: inherit; font-size: 19px; font-weight: 700;
   text-transform: uppercase; cursor: pointer;
}
button.trj-pay-open:hover, button.trj-pay-open:focus-visible { background: #FCD209; color: #000000; }
button.trj-pay-open:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
button.trj-pay-open[aria-expanded=true] { background: #1A1A1A; color: #FFFFFF; }
@media (max-width: 699px) { button.trj-pay-open { width: 100%; } }

/* ===================================================================================
   Forms (restyle, 28 Oct 2026, from Owen's mock-up). Shared by the full-page forms (.trj-f)
   and, where noted, the home panel. Numbered step cards, an icon inside each text field,
   option cards built on real radios, a reassurance strip by the submit button.
   Phone first: one column; the field grid goes to two columns when the CARD is wide enough
   (container query), so it works the same in the wide and the sidebar templates.
   =================================================================================== */
.trj-f, .trj-f *, .trj-f *::before, .trj-f *::after { box-sizing: border-box; }
.trj-f { max-width: 880px; margin: 8px 0 24px; color: #1A1A1A; font-size: 16px; line-height: 1.4; }
.trj-f-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.trj-f-title { font-size: 22px; line-height: 1.25; color: #1A1A1A; margin: 0 0 6px; font-weight: 700; }
.trj-f-intro { margin: 0 0 12px; }
.trj-f-reqnote { font-size: 14px; color: #555555; margin: 0 0 10px; }
.trj-f-req { color: #B23533; margin-left: 2px; font-weight: 700; }
.trj-f-card {
   container-type: inline-size; background: #FFFFFF; border: 1px solid #E0E0E0; border-radius: 10px;
   padding: 18px 16px 4px; margin: 0 0 16px; box-shadow: 0 2px 10px rgba(23, 21, 19, .07);
}
.trj-f-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; }
.trj-f-num {
   flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
   border-radius: 50%; background: #EE2D26; color: #FFFFFF; font-weight: 700; font-size: 17px; line-height: 1;
}
.trj-f-head h3 { margin: 4px 0 2px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #1A1A1A; text-transform: none; }
.trj-f-head p { margin: 0; font-size: 15px; color: #555555; }
.trj-f-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@container (min-width: 520px) {
   .trj-f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .trj-f-grid > .trj-f-wide { grid-column: 1 / -1; }
}
.trj-f-field { margin: 0 0 16px; min-width: 0; }
fieldset.trj-f-field { border: 0; padding: 0; min-width: 0; }
.trj-f-field > label, .trj-f-field > legend { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0 0 6px; padding: 0; color: #1A1A1A; }
.trj-f-note { font-weight: 400; color: #555555; }
.trj-f-ctl { position: relative; }
.trj-f-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #6B6B6B; pointer-events: none; z-index: 1; }
.trj-f-area .trj-f-ico { top: 14px; transform: none; }
.trj-f input[type=text], .trj-f input[type=tel], .trj-f input[type=email], .trj-f input[type=number], .trj-f select, .trj-f textarea {
   display: block; width: 100%; min-height: 48px; height: auto; margin: 0; padding: 10px 12px; border: 1px solid #8A8A8A; border-radius: 6px;
   background: #FFFFFF; color: #1A1A1A; font: inherit; font-size: 16px; line-height: 1.3; box-shadow: none;
}
.trj-f textarea { min-height: 96px; resize: vertical; }
.trj-f .trj-f-has-ico input, .trj-f .trj-f-has-ico select, .trj-f .trj-f-has-ico textarea { padding-left: 42px; }
.trj-f .trj-f-has-unit input { padding-right: 80px; }
.trj-f .trj-f-has-prefix input { padding-left: 32px; }
.trj-f-unit {
   position: absolute; top: 1px; right: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 14px;
   background: #F3F4F6; border-left: 1px solid #D0D0D0; border-radius: 0 5px 5px 0; color: #333333; font-size: 15px; pointer-events: none;
}
.trj-f-prefix { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-weight: 700; color: #6B6B6B; pointer-events: none; }
.trj-f ::placeholder, .trj-panel ::placeholder { color: #767676; opacity: 1; }
.trj-f input:focus, .trj-f select:focus, .trj-f textarea:focus {
   border-color: #1A1A1A; box-shadow: 0 0 0 1px #1A1A1A; outline: 3px solid #FCD209; outline-offset: 1px;
}
/* Home order panel: never yellow (2 Nov 2026). Block (5) sets the real ring; this is the fallback. */
.trj-panel input:not([type=radio]):not([type=checkbox]):focus, .trj-panel select:focus, .trj-panel textarea:focus {
   border-color: #1A1A1A; box-shadow: 0 0 0 1px #1A1A1A; outline: 2px solid #1A1A1A; outline-offset: 2px;
}
.trj-f-field.trj-invalid input, .trj-f-field.trj-invalid select, .trj-f-field.trj-invalid textarea { border: 2px solid #B23533; }
.trj-f-hint { font-size: 14px; color: #555555; margin: 6px 0 0; }
.trj-f-msg { font-size: 14px; color: #B23533; font-weight: 700; margin: 6px 0 0; }
.trj-f-msg::before { content: "! "; }
/* Form pages use the sector template, whose ".trj-sector p { margin: 0 0 1em }" outranks the two rules above
   and put the hint flush against its field. Same 6px gap as the home panel (Owen, 2 Nov 2026). */
.trj-sector .trj-f-hint, .trj-sector .trj-f-msg { margin-top: 6px; }
/* Hints on the form pages at 14px like everywhere else: ".trj-sector p { font-size: 17px }" outranked the
   single-class rule (2 Nov 2026). Bottom margin back to the base rule's 0. */
.trj-sector .trj-f-hint { font-size: 14px; margin-bottom: 0; }
/* Error lines the same: 14px, not the sector 17px (2 Nov 2026). */
.trj-sector .trj-f-msg { font-size: 14px; margin-bottom: 0; }

/* Option cards: a real radio inside each label (keyboard and screen readers work as normal).
   The frame is a sibling after the radio, so :checked and :focus-visible can style it. */
.trj-f-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 280px) { .trj-f-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 480px) { .trj-f-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Order form Product cards (2 Nov 2026): one column on phones, 2 x 2 once there is room for the sub-lines. */
@container (min-width: 480px) { .trj-f-opts-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trj-f-opt {
   position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px;
   padding: 12px 14px; margin: 0; cursor: pointer; font-weight: 400; color: #1A1A1A;
}
.trj-f-opt input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #1A1A1A; cursor: pointer; }
/* No ring on the tiny radio, ever: the ".trj-f input:focus" yellow showed on every mouse or tap click (Owen 2 Nov).
   Keyboard focus is the dark ring round the whole card, on the frame below. */
.trj-f-opt input:focus, .trj-f-opt input:focus-visible { outline: none; box-shadow: none; }
.trj-f-opt-text { min-width: 0; }
.trj-f-opt-text strong { display: block; font-weight: 700; font-size: 16px; line-height: 1.25; }
.trj-f-opt-text small { display: block; font-size: 14px; line-height: 1.3; color: #555555; margin-top: 2px; }
.trj-f-opt-frame { position: absolute; inset: 0; z-index: -1; border: 1px solid #8A8A8A; border-radius: 8px; background: #FFFFFF; pointer-events: none; }
.trj-f-opt:hover .trj-f-opt-frame { border-color: #1A1A1A; }
/* Selected is neutral ink and grey, never red: red reads as an error (Owen 2 Nov). */
.trj-f-opt input:checked ~ .trj-f-opt-frame { border: 2px solid #1A1A1A; background: #F2F2F2; }
.trj-f-opt input:focus-visible ~ .trj-f-opt-frame { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-f-group.trj-invalid .trj-f-opt-frame { border-color: #B23533; }

/* Single tick boxes (consent, offers). The whole label is the tap target. */
.trj-f-check { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trj-f-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: #1A1A1A; }
.trj-f-check label { flex: 1 1 0; min-width: 0; margin: 0; font-weight: 400; font-size: 15px; cursor: pointer; }
.trj-f-check input:focus { outline: none; box-shadow: none; }
.trj-f-check input:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-f-check .trj-f-msg { flex-basis: 100%; }
.trj-f-after { padding: 0 4px; }

/* Reassurance strip and submit button (home panel too). */
.trj-f-submit-row { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; }
.trj-f-safe { display: flex; gap: 12px; align-items: center; background: #F3F1EE; border-radius: 10px; padding: 12px 14px; }
.trj-f-safe-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #1A1A1A; color: #FFFFFF; }
.trj-f-safe-svg { width: 20px; height: 20px; }
.trj-f-safe p { margin: 0; font-size: 14px; line-height: 1.35; color: #1A1A1A; }
.trj-f-safe strong { display: block; font-size: 15px; color: #1A1A1A; }
/* Payment forms: Visa and Mastercard marks at the end of the strip, wrapping under the text
   when the strip is narrow (28 Oct 2026). */
.trj-f-safe-pay { flex-wrap: wrap; }
.trj-f-safe-pay p { flex: 1 1 180px; }
.trj-f-cards { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.trj-f-cardmark { display: block; width: 38px; height: 24px; }
.trj-f-submit {
   display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 24px;
   border: 0; border-radius: 6px; background: #EE2D26; color: #FFFFFF; font: inherit; font-size: 19px; font-weight: 700;
   text-transform: uppercase; cursor: pointer;
}
.trj-f-submit:hover, .trj-f-submit:focus-visible { background: #FCD209; color: #000000; }
.trj-f-submit:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-f-btn-ico { flex: 0 0 auto; width: 20px; height: 20px; }
@media (max-width: 480px) { .trj-f-submit { font-size: 17px; padding: 12px 14px; gap: 8px; } }
/* Side by side only when the FORM is wide enough (the contact form sits in a half column). */
.trj-f { container-type: inline-size; }
@container (min-width: 700px) {
   .trj-f-submit-row { flex-direction: row; align-items: center; }
   .trj-f-safe { flex: 1 1 auto; }
   .trj-f-submit { flex: 0 0 auto; width: auto; min-width: 250px; }
}

/* ===================================================================================
   Express Ordering panel (home page hero) and phone sticky bar. Stage 2, 28 Oct 2026.
   Phone first: the panel sits under the headline, before the slideshow. From 1100px wide it
   is laid over the right of the slideshow (grid overlay, so a long step 2 grows the hero
   instead of covering the page below). Without JavaScript every part is visible and works.
   =================================================================================== */
.trj-panel [hidden] { display: none !important; }
.trj-panel { box-sizing: border-box; position: relative; z-index: 5; color: #1A1A1A; font-size: 16px; line-height: 1.35; }
.trj-panel *, .trj-panel *::before, .trj-panel *::after { box-sizing: border-box; }
.trj-p-head { padding: 16px 16px 12px; }
.trj-p-head h1 { font-size: 24px; line-height: 1.2; font-weight: 700; color: #1A1A1A; margin: 0 0 4px; text-transform: none; }
.trj-p-head p { font-size: 16px; margin: 0; color: #1A1A1A; }
.trj-p-card { background: #FFFFFF; border-top: 4px solid #EE2D26; }
.trj-p-tabs { display: flex; border-bottom: 1px solid #E0E0E0; }
.trj-p-tabs [role=tab] {
   flex: 1 1 0; min-height: 48px; padding: 6px 4px; border: 0; background: #F3F3F3; color: #1A1A1A;
   font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; border-bottom: 3px solid transparent;
}
.trj-p-tabs [role=tab][aria-selected=true] { background: #FFFFFF; border-bottom-color: #EE2D26; color: #1A1A1A; }
.trj-p-tabs [role=tab]:focus-visible, .trj-panel button:focus-visible, .trj-panel a:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; box-shadow: none; }
.trj-p-body { padding: 14px 16px 6px; }
.trj-p-nojs { font-size: 20px; font-weight: 700; color: #1A1A1A; margin: 6px 0 10px; }
.js .trj-p-nojs { display: none; }
.trj-p-pane + .trj-p-pane { margin-top: 18px; }
.js .trj-p-pane + .trj-p-pane { margin-top: 0; }
.trj-panel fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.trj-panel legend, .trj-panel label, .trj-p-amount > label { font-weight: 700; font-size: 15px; padding: 0; color: #1A1A1A; }
.trj-p-field { margin: 0 0 12px; }
.trj-p-field > label, .trj-panel legend { display: block; margin: 0 0 4px; }
.trj-panel input[type=text], .trj-panel input[type=tel], .trj-panel input[type=email], .trj-panel input[type=number], .trj-panel select, .trj-panel textarea {
   display: block; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid #8A8A8A; border-radius: 3px;
   font: inherit; font-size: 16px; background: #FFFFFF; color: #1A1A1A; margin: 0;
}
.trj-panel textarea { min-height: 64px; resize: vertical; }
.trj-panel [aria-invalid=true] { border-color: #B23533; border-width: 2px; }
.trj-p-hint { font-size: 14px; color: #555555; margin: 6px 0 0; }
.trj-p-area { color: #1A1A1A; font-weight: 700; }
.trj-p-msg { font-size: 14px; color: #B23533; font-weight: 700; margin: 6px 0 0; }
.trj-p-msg::before { content: "! "; }

/* Product tiles (2x2), toggles and pills: real radios, visually replaced, still focusable. */
.trj-p-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trj-p-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.trj-p-stack { flex-direction: column; }
.trj-p-tile, .trj-p-pill { position: relative; display: block; margin: 0; font-weight: 400; cursor: pointer; }
.trj-p-toggle .trj-p-pill { flex: 1 1 auto; }
.trj-p-tile input, .trj-p-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.trj-p-tile span, .trj-p-pill span {
   display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px 10px;
   border: 1px solid #8A8A8A; border-radius: 3px; background: #FFFFFF; font-size: 15px; line-height: 1.2;
}
.trj-p-stack .trj-p-pill span { justify-content: flex-start; text-align: left; }
.trj-p-tile input:checked + span, .trj-p-pill input:checked + span { border: 2px solid #1A1A1A; background: #F2F2F2; font-weight: 700; }
.trj-p-tile input:focus-visible + span, .trj-p-pill input:focus-visible + span { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-p-amount { margin-top: 8px; }
.trj-p-chips { display: none; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.js .trj-p-chips { display: flex; }
.trj-p-chip { min-height: 44px; min-width: 64px; padding: 4px 12px; border: 1px solid #8A8A8A; border-radius: 22px; background: #FFFFFF; font: inherit; font-size: 15px; cursor: pointer; }
.trj-p-chip[aria-pressed=true] { border: 2px solid #EE2D26; background: #FFF4F3; font-weight: 700; }
.trj-p-check { display: flex; gap: 10px; align-items: center; font-weight: 400 !important; margin: 4px 0 12px; }
.trj-p-check input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }

.trj-p-btn {
   display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 4px 0 6px; border: 0; border-radius: 3px; background: #EE2D26; color: #FFFFFF;
   font: inherit; font-size: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.trj-p-btn:hover, .trj-p-btn:focus { background: #B8201A; color: #FFFFFF; }
.trj-p-btn[disabled] { opacity: .6; cursor: wait; }
.trj-p-continue { display: none; }
.js .trj-p-continue { display: flex; }
.trj-p-note { font-size: 14px; margin: 2px 0 6px; color: #1A1A1A; }
.trj-p-full { font-size: 14px; margin: 0 0 8px; }
.trj-p-full a, .trj-p-strip a { color: #1A1A1A; font-weight: 700; }
.trj-p-h { font-size: 18px; font-weight: 700; margin: 0; color: #1A1A1A; line-height: 1.25; text-transform: none; }
/* Restyle 28 Oct 2026: numbered step headings, icons in fields, option cards, padlock strip. */
.trj-p-stephead { display: flex; gap: 10px; align-items: center; margin: 0 0 8px; }
.trj-p-stephead .trj-f-num { width: 28px; height: 28px; font-size: 15px; }
.trj-p-stephead p { margin: 2px 0 0; font-size: 14px; color: #555555; }
.trj-p-step2 .trj-p-stephead { align-items: flex-start; margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid #E0E0E0; }
/* .trj-f-ctl doubled: must beat the laptop compaction rule below (padding: 6px 10px). */
.trj-panel .trj-f-ctl.trj-f-has-ico input, .trj-panel .trj-f-ctl.trj-f-has-ico select, .trj-panel .trj-f-ctl.trj-f-has-ico textarea { padding-left: 40px; }
.trj-panel .trj-f-ctl.trj-f-has-prefix input { padding-left: 30px; }
.trj-panel .trj-f-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trj-panel .trj-f-opt { min-height: 44px; padding: 9px 10px; gap: 8px; font-size: 15px; }
.trj-panel .trj-f-opt input { width: 18px; height: 18px; }
.trj-panel .trj-f-opt-text strong { font-size: 15px; }
.trj-panel .trj-f-opt-text small { font-size: 13px; font-weight: 400; }
.trj-panel .trj-f-safe { padding: 8px 10px; gap: 10px; margin: 2px 0 8px; }
.trj-panel .trj-f-safe-ico { width: 32px; height: 32px; }
.trj-panel .trj-f-safe-svg { width: 17px; height: 17px; }
.trj-panel .trj-f-safe p { font-size: 13.5px; }
.trj-panel .trj-f-safe strong { font-size: 14px; }
.trj-p-payment .trj-f-opt-frame { border-radius: 6px; }
.trj-p-step2:focus { outline: none; }
.trj-p-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.trj-p-error { margin: 0 0 8px; color: #B23533; font-weight: 700; }
.trj-p-error p { margin: 0; font-size: 15px; }
.trj-p-done { padding: 8px 0 10px; }
.trj-p-done:focus { outline: none; }
.trj-p-done p { margin: 0 0 10px; font-size: 16px; }
.trj-p-done .trj-p-done-main { font-size: 18px; border-left: 4px solid #FCD209; padding-left: 12px; }

/* Urgent strip under the panel: the two other jobs people arrive for. */
.trj-p-strip {
   display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center;
   margin: 0; padding: 10px 16px; background: #1A1A1A; color: #FFFFFF; font-size: 15px;
}
.trj-p-strip a { color: #FFFFFF; text-decoration: underline; }
.trj-p-strip a.trj-p-paylink { color: #FCD209; }

@media (min-width: 560px) {
   .trj-p-grid { grid-template-columns: 1fr 1fr; }
   .trj-p-grid .trj-p-wide { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
   .trj-panel { max-width: 640px; margin: 0 auto; }
}
/* Laptop and up: the card over the right of the slideshow, compact so step 1 is above the fold
   at 1366x768. */
@media (min-width: 1100px) {
   .trj-hero { display: grid; }
   .trj-hero > #slideshowrow, .trj-hero > .trj-panel { grid-area: 1 / 1; }
   .trj-hero > .trj-panel {
      justify-self: end; align-self: start; width: 480px; margin: 8px max(16px, calc((100% - 1080px) / 2)) 14px 0;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
   }
   .trj-p-head { background: #1A1A1A; padding: 10px 16px 9px; }
   .trj-p-head h1 { color: #FFFFFF; font-size: 20px; margin: 0 0 2px; }
   .trj-p-head p { color: #FFFFFF; font-size: 15px; }
   .trj-p-tabs [role=tab] { min-height: 40px; font-size: 15px; }
   .trj-p-body { padding: 10px 16px 2px; }
   .trj-p-field { margin-bottom: 9px; }
   .trj-panel input[type=text], .trj-panel input[type=tel], .trj-panel input[type=email], .trj-panel input[type=number], .trj-panel select { min-height: 40px; padding: 6px 10px; }
   .trj-p-tile span, .trj-p-pill span { min-height: 38px; padding: 4px 8px; font-size: 14px; }
   .trj-p-tiles, .trj-p-toggle { gap: 6px; }
   .trj-p-chip { min-height: 34px; }
   .trj-p-btn { min-height: 44px; font-size: 17px; margin: 2px 0 4px; }
   .trj-p-step1 .trj-p-stephead { margin-bottom: 2px; }
   .trj-p-body { padding-top: 8px; }
   .trj-p-stephead .trj-f-num { width: 24px; height: 24px; font-size: 14px; }
   .trj-p-step1 .trj-p-h { font-size: 16px; }
   .trj-panel .trj-f-opt { min-height: 40px; padding: 5px 8px; }
   .trj-panel .trj-f-opt-text small { font-size: 12.5px; margin-top: 0; }
   .trj-p-hint { font-size: 13px; margin-top: 6px; }
   .trj-p-note, .trj-p-full { font-size: 13px; margin-bottom: 4px; }
   .trj-p-strip { padding: 8px 16px; font-size: 13.5px; flex-wrap: nowrap; }
}
@media (min-width: 1600px) {
   .trj-hero > .trj-panel { margin-right: max(16px, calc((100% - 1248px) / 2)); }
}

/* Inner pages on phones: sticky "Order oil" and "Call" bar (the panel itself is not sticky). */
.trj-sticky { display: none; }
@media (max-width: 767px) {
   .trj-sticky {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
      padding-bottom: env(safe-area-inset-bottom); background: #1A1A1A; box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
   }
   .trj-sticky a {
      flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 52px;
      font-size: 17px; font-weight: 700; text-decoration: none; color: #FFFFFF;
   }
   .trj-sticky a.trj-sticky-order { background: #EE2D26; text-transform: uppercase; }
   #inside { padding-bottom: 56px; }
}

/* ---- Home page order bar (29 Oct 2026, Owen's mockups; phase 2: four tabs).
   Red bar with step 1 (amount, postcode, Next); step 2 is a white panel that opens beneath it.
   Phones: the bar sits under the header, before the slideshow. Laptops: it overlaps the bottom
   of the slideshow. */
.trj-ob { max-width: 1080px; margin: 0 auto; }
.trj-ob-h1 { font-size: 22px; line-height: 1.2; font-weight: 700; color: #1A1A1A; margin: 0; padding: 14px 16px 10px; text-transform: none; }
.trj-ob-bar { background: #EE2D26; color: #FFFFFF; }
.trj-ob-title { font-size: 20px; font-weight: 700; color: #FFFFFF; margin: 0; padding: 14px 16px 2px; text-transform: none; line-height: 1.2; }
.trj-ob-s1 { padding: 8px 16px 14px; }
.trj-ob-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.trj-ob-s1 .trj-p-field > label { color: #FFFFFF; }
.trj-ob-s1 .trj-p-hint { color: #FFFFFF; }
.trj-ob-s1 .trj-p-area { color: #FFFFFF; font-weight: 700; }
.trj-ob-s1 .trj-p-msg { display: inline-block; background: #FFFFFF; color: #B23533; padding: 2px 8px; border-radius: 3px; }
.trj-ob-s1 .trj-p-msg[hidden] { display: none; }
.trj-ob-next {
   display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 4px 0 0;
   border: 0; border-radius: 4px; background: #1A1A1A; color: #FFFFFF; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.trj-ob-next:hover, .trj-ob-next:focus { background: #B8201A; color: #FFFFFF; }
.trj-ob-next .trj-f-btn-ico { width: 18px; height: 18px; }
html:not(.js) .trj-ob-nextwrap { display: none; }
.trj-ob-urgent { margin: 0; padding: 8px 16px 12px; font-size: 14px; color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, .35); }
.trj-ob-urgent a { color: #FFFFFF; font-weight: 700; text-decoration: underline; }
.trj-ob-pane { order: 0; }
.trj-ob-bar { display: flex; flex-direction: column; }
.trj-ob-title { order: -2; }
.trj-ob-pane { order: -1; }
/* Phase 2 tabs on the red bar: 2 x 2 on phones, one row from 768px. The chosen tab is the bar's
   own red with a yellow underline; the others sit on a darker red. */
.trj-ob-tabs { order: -2; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #B8201A; padding: 2px 2px 0; }
.trj-ob-tabs[hidden] { display: none; }
.trj-ob-tabs [role=tab] {
   min-height: 46px; padding: 8px 10px; border: 0; border-bottom: 4px solid transparent; border-radius: 0;
   background: #C9261F; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.15; cursor: pointer; text-align: center;
}
.trj-ob-tabs [role=tab]:hover { background: #D92B23; }
.trj-ob-tabs [role=tab][aria-selected=true] { background: #EE2D26; border-bottom-color: #FCD209; }
.trj-ob-tabs [role=tab]:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -5px; box-shadow: none; }
.trj-ob-pane[hidden] { display: none; }
/* Order oil step 1: litres and the "Fill my tank" tick sit together. */
.trj-ob-s1 .trj-ob-litres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.trj-ob-s1 .trj-ob-litres .trj-f-ctl { flex: 1 1 120px; }
.trj-ob-s1 .trj-ob-litres .trj-f-ctl[hidden] { display: none; }
.trj-ob-s1 .trj-ob-fill { color: #FFFFFF; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.trj-ob-s2 { background: #FFFFFF; color: #1A1A1A; padding: 16px; border: 1px solid #E0E0E0; border-top: 0; }
.trj-ob-s2:focus { outline: none; }
.trj-ob-s2head { margin: 0 0 12px; }
.trj-ob-s2head p { margin: 4px 0 0; font-size: 15px; color: #555555; }
.trj-ob-addr-status:empty { display: none; }
.trj-ob-addr-status { margin: 0 0 10px; font-size: 15px; color: #1A1A1A; font-weight: 700; }
.trj-pl-slot:empty { display: none; }
.trj-pl-slot { margin: 0 0 8px; }
.trj-ob-submit .trj-p-btn { margin-top: 4px; }
.trj-ob-s2 .trj-p-btn { background: #EE2D26; }
.trj-ob-s2 .trj-p-btn:hover, .trj-ob-s2 .trj-p-btn:focus { background: #B8201A; color: #FFFFFF; }

@media (min-width: 768px) {
   .trj-ob-tabs { display: flex; padding: 4px 4px 0; gap: 4px; }
   .trj-ob-tabs [role=tab] { flex: 1 1 0; font-size: 17px; }
   /* Two or three fields then Next, whichever tab. */
   .trj-ob-row { display: flex; gap: 0 14px; align-items: flex-start; }
   .trj-ob-row > .trj-p-field { flex: 1 1 0; min-width: 0; }
   .trj-ob-row > .trj-ob-howmuch { flex-grow: 1.5; }
   .trj-ob-nextwrap { flex: none; }
   .trj-ob-nextwrap { padding-top: 24px; }
   .trj-ob-next { width: auto; min-width: 140px; padding: 0 22px; margin: 0; }
   .trj-ob-s2 { padding: 20px 24px; }
   .trj-ob-submit { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
   .trj-ob-submit .trj-f-safe { margin: 0; }
   .trj-ob-submit .trj-p-btn { width: auto; min-width: 220px; padding: 0 24px; margin: 0; }
}
/* Laptop and up: the slideshow first, the bar pulled up over its lower edge. */
@media (min-width: 1100px) {
   .trj-hero.trj-hero { display: flex; flex-direction: column; }
   .trj-hero > #slideshowrow { order: 1; }
   .trj-hero > .trj-ob { order: 2; width: calc(100% - 32px); max-width: 1080px; margin: -64px auto 18px; justify-self: auto; align-self: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
   .trj-ob-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
   .trj-ob .trj-panel input[type=number], .trj-ob input { min-height: 46px; }
}

/* ---- Order bar polish (29 Oct 2026, Owen's review of phase 1). CSS only, so it applies to every
   tab phase 2 adds. Compact fields sized to their values, Next lined up exactly with the inputs
   (an invisible label-sized spacer sits above it), one 8px radius throughout, and the bar sits on
   yellow that runs straight into the trust bar, with no white strip. */
.trj-ob { --trj-r: 8px; --trj-ctl-h: 44px; }
.trj-ob-bar { border-radius: var(--trj-r); }
.trj-ob-tabs { border-radius: var(--trj-r) var(--trj-r) 0 0; overflow: hidden; }
.trj-ob-tabs [role=tab] { border-radius: var(--trj-r) var(--trj-r) 0 0; }
.trj-ob-s1 .trj-p-field > label { white-space: nowrap; }
.trj-ob-s1 .trj-p-field { margin-bottom: 10px; }
.trj-ob-s1 .trj-p-hint { font-size: 13px; line-height: 1.3; }
.trj-ob .trj-ob-s1 input:not([type=checkbox]):not([type=radio]), .trj-ob .trj-ob-s1 select { height: var(--trj-ctl-h); min-height: var(--trj-ctl-h); padding-top: 0; padding-bottom: 0; border-radius: var(--trj-r); }
.trj-ob-next { height: var(--trj-ctl-h); min-height: var(--trj-ctl-h); margin: 0; border-radius: var(--trj-r); }
.trj-ob-s2 { border-radius: var(--trj-r); border: 0; margin: 0 8px 8px; }
.trj-panel.trj-ob .trj-ob-s2 :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .trj-p-btn) { border-radius: var(--trj-r); }
/* Phones and tablets: the bar is a rounded card on a yellow ground under the headline. */
.trj-ob { background: #FCD209; padding: 0 12px 12px; }
.trj-ob-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.trj-ob-row > .trj-ob-nextwrap, .trj-ob-row > .trj-ob-product { grid-column: 1 / -1; }
.trj-ob-row > .trj-ob-nextwrap { padding-top: 2px; }
@media (min-width: 768px) {
   .trj-ob { --trj-ctl-h: 40px; }
   .trj-ob-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; }
   .trj-ob-row > .trj-p-field { flex: 0 0 auto; width: 200px; }
   .trj-ob-row > .trj-ob-amount { width: 190px; }
   .trj-ob-row > .trj-ob-pc { width: 180px; }
   .trj-ob-row > .trj-ob-product { width: 230px; }
   .trj-ob-row > .trj-ob-nextwrap { flex: 0 0 auto; padding-top: 0; }
   /* Same font, line height and gap as a field label, so Next starts exactly where the inputs do. */
   .trj-ob-nextwrap::before { content: "\00a0"; display: block; font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0 0 4px; }
   .trj-ob-next { min-width: 120px; padding: 0 20px; font-size: 17px; }
}
/* Laptops: the hero is yellow below the slideshow, so the bar sits on yellow that joins the trust bar. */
@media (min-width: 1100px) {
   .trj-hero.trj-hero { background: #FCD209; }
   .trj-hero > #slideshowrow { background: #FFFFFF; }
   .trj-hero > .trj-ob { background: transparent; padding: 0; margin-bottom: 0; border-radius: var(--trj-r); }
   .trj-ob .trj-ob-s1 input:not([type=checkbox]):not([type=radio]), .trj-ob .trj-ob-s1 select { min-height: var(--trj-ctl-h); }
}

/* ---- Order bar error messages (29 Oct 2026, Owen: "a bit clunky"). Every field in the bar and
   its white step 2 has one note line: the hint, or the error in its place (panel.js sets
   .trj-p-bad on the field, which hides the hint but keeps its height). The message keeps its line
   while hidden (visibility, not display), so nothing moves when an error appears. Not colour
   alone: the field gains a ring or thicker border and an icon, and the message carries the same
   icon. On the red bar the message sits on navy, because white on #EE2D26 is only 4.2:1. */
.trj-ob .trj-p-field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.trj-ob .trj-p-field > .trj-p-hint, .trj-ob .trj-p-field > .trj-p-msg { grid-row: 3; grid-column: 1; align-self: start; }
.trj-ob .trj-p-bad > .trj-p-hint { visibility: hidden; }
.trj-ob .trj-p-msg { display: flex; align-items: center; gap: 6px; justify-self: start; margin: 6px 0 0; min-height: 18px; font-size: 13px; line-height: 18px; font-weight: 700; color: #B23533; }
.trj-ob .trj-p-msg[hidden] { display: flex !important; visibility: hidden; }
.trj-ob .trj-p-msg::before { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23B23533'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23FFFFFF'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / 16px 16px; }
.trj-ob .trj-ob-s2 .trj-p-field { margin-bottom: 8px; }
/* Step 1, on the red bar: a navy pill, one line, never wraps. */
.trj-ob .trj-ob-s1 .trj-p-field { margin-bottom: 6px; }
.trj-ob .trj-ob-s1 .trj-p-msg { display: flex; box-sizing: border-box; min-height: 24px; white-space: nowrap; background: #1A1A1A; color: #FFFFFF; padding: 3px 9px 3px 5px; border-radius: var(--trj-r); }
.trj-ob .trj-ob-s1 .trj-p-msg[hidden] { display: flex !important; visibility: hidden; }
.trj-ob .trj-ob-s1 .trj-p-msg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23FCD209'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23132D48'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23132D48'/%3E%3C/svg%3E"); }
.trj-ob .trj-ob-s1 [aria-invalid=true] { box-shadow: 0 0 0 3px #1A1A1A; border-width: 1px; }
/* The invalid input carries the icon too, inside on the right. */
.trj-ob .trj-ob-s1 input[aria-invalid=true]:not([type=checkbox]):not([type=radio]), .trj-ob .trj-ob-s2 input[aria-invalid=true]:not([type=checkbox]):not([type=radio]) { padding-right: 36px; background: #FFFFFF no-repeat right 10px center / 18px 18px; }
.trj-ob .trj-ob-s1 input[aria-invalid=true]:not([type=checkbox]):not([type=radio]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23132D48'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23FFFFFF'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
.trj-ob .trj-ob-s2 input[aria-invalid=true]:not([type=checkbox]):not([type=radio]) { border: 2px solid #B23533; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23B23533'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23FFFFFF'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
/* No browser spinner arrows on the bar's number boxes (amount, litres). */
.trj-ob input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.trj-ob input[type=number]::-webkit-inner-spin-button, .trj-ob input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* ---- Order panel width and tab icons (29 Oct 2026, Owen: "the whole thing feels a bit unnecessarily
   wide. Also consider icons."). Layout and tabs only: no error styling here. The panel, Your details
   step included, is at most 840px and centred; step 1 fields share the row with Next at its end; each
   tab carries a line icon from the field icon set, and the chosen tab is white. */
.trj-ob { --trj-ob-max: 840px; }
.trj-ob-bar { max-width: var(--trj-ob-max); margin-inline: auto; }
.trj-ob-tabs [role=tab] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.trj-ob-tab-ico { width: 20px; height: 20px; flex: none; }
.trj-ob-tabs [role=tab][aria-selected=true] { background: #FFFFFF; color: #B8201A; border-bottom-color: #FCD209; }
.trj-ob-tabs [role=tab][aria-selected=true]:hover { background: #FFFFFF; }
@media (min-width: 768px) {
   .trj-ob-row { flex-wrap: nowrap; }
   .trj-ob-row > .trj-p-field, .trj-ob-row > .trj-ob-amount, .trj-ob-row > .trj-ob-pc { flex: 1 1 0; width: auto; min-width: 0; }
   .trj-ob-row > .trj-ob-product { flex: 0 0 244px; width: 244px; }
   .trj-ob-row > .trj-ob-howmuch { flex: 1.4 1 0; }
   .trj-ob-s1 .trj-ob-litres { flex-wrap: nowrap; align-items: flex-start; gap: 0 10px; }
   .trj-ob-s1 .trj-ob-litres .trj-f-ctl { flex: 1 1 96px; min-width: 0; }
   .trj-ob-s1 .trj-ob-fill { height: var(--trj-ctl-h); }
   .trj-ob .trj-ob-s1 .trj-ob-fill input { min-height: 0; }
   .trj-ob-row > .trj-ob-invoice { flex: 1.2 1 0; }
   .trj-ob-next { min-width: 128px; }
   .trj-ob-s1 .trj-p-field > label { overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1100px) {
   .trj-hero > .trj-ob { max-width: var(--trj-ob-max); }
}

/* ---- £ on the amount fields (29 Oct 2026, Owen: "check alignment seems off slightly. The pound with
   the value."). The £ was bold, grey and centred by transform, so it read as an icon beside the
   number and sat a pixel high. It is now set in the value's own type (16px, regular) and centred in
   the field the same way the input centres its text, both on a whole-pixel 20px line so neither
   rounds differently: one baseline at 40px (laptop) and 44px (phone), empty, filled and in error.
   It greys with the placeholder while the field is empty, so "£500" reads as one hint, and darkens
   with the typed value. About a word space between £ and the number. */
.trj-ob .trj-f-has-prefix .trj-f-prefix { top: 0; bottom: 0; left: 12px; transform: none; display: flex; align-items: center; font-size: 16px; font-weight: 400; line-height: 20px; color: #1A1A1A; }
.trj-ob .trj-f-has-prefix:has(input:placeholder-shown) .trj-f-prefix { color: #767676; }
.trj-ob .trj-ob-s1 .trj-f-ctl.trj-f-has-prefix input { padding-left: calc(16px + 0.556em); line-height: 20px; }

/* ---- Express order simplified (29 Oct 2026, Owen: "lots of bold competing for attention" and "the
   drop-down arrow in all the fields is a little bit close to the right-hand side of the container").
   Step 2: field labels are the strongest text after the step heading; status lines are regular
   weight (the quiet "Enter address manually" link and the address summary are in
   postcode-lookup.css). Every select on the site: the browser's own arrow is replaced by a chevron
   in the field icon colour, inset 12px from the right, the same as the left icons (.trj-f-ico,
   left: 12px), with 40px right padding so the text never runs under it. Focus and error rings are
   unchanged: they style the border and outline, not the background. */
.trj-ob-addr-status { font-weight: 400; }
:is(.trj-f, .trj-panel) select:not([multiple]) {
   -webkit-appearance: none; -moz-appearance: none; appearance: none;
   padding-right: 40px;
   background-color: #FFFFFF;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
   text-overflow: ellipsis;
}
:is(.trj-f, .trj-panel) select:not([multiple])::-ms-expand { display: none; }

/* ---- Tab icons optically centred on their labels (29 Oct 2026, Owen: "the alignment is still off",
   the droplet on Order oil). Flex centred each 20px icon box on the label's line box, which sits
   lower than the capitals, so every icon hung 1 to 2px below the cap centre, and the narrow drop
   left a wider gap and read small. Each icon now has its ink centred on the label's cap height,
   the same clear gap to the label, and the drop is drawn at 22px with its stroke kept to the set's
   weight. Measured by pixel in every tab, chosen and not, laptop and phone. */
.trj-ob-tabs [role=tab] { --trj-ico-dy: -1px; }
@media (min-width: 768px) { .trj-ob-tabs [role=tab] { --trj-ico-dy: -1.4px; } }
.trj-ob-tab-ico { transform: translateY(calc(var(--trj-ico-dy) + var(--trj-ico-own, 0px))); margin-inline: var(--trj-ico-ml, 0px) var(--trj-ico-mr, 0px); }
#trj-tab-express .trj-ob-tab-ico { --trj-ico-own: -0.5px; --trj-ico-ml: -0.5px; --trj-ico-mr: -1px; }
#trj-tab-order .trj-ob-tab-ico { width: 22px; height: 22px; stroke-width: 1.64; --trj-ico-own: 0.3px; --trj-ico-ml: -3.5px; --trj-ico-mr: -3.4px; }
#trj-tab-quote .trj-ob-tab-ico { --trj-ico-ml: -2.8px; --trj-ico-mr: -1.9px; }
#trj-tab-pay .trj-ob-tab-ico { --trj-ico-ml: -1.3px; --trj-ico-mr: -0.8px; }

/* ---- Order panel side padding (29 Oct 2026, Owen: "Can we add a bit more spacing there so it doesn't
   feel so cramped?"). Step 1 (labels, fields, hints and errors, Next) and the "Run out?" row sat 16px
   from the red edge. One inset for both, the same on each side: 22px on phones (18px below 375px,
   where "Amount to spend (£)" would otherwise run into the Postcode column), 28px from 768px. The
   desktop row pays for its extra 24px from Next, whose 128px floor was wider than its content, so
   Order oil keeps "e.g. 900" and its litres hint on one line. The tab row still runs edge to edge,
   and the panel keeps its 840px limit. */
.trj-ob { --trj-ob-px: 22px; }
@media (max-width: 374px) { .trj-ob { --trj-ob-px: 18px; } }
@media (min-width: 768px) { .trj-ob { --trj-ob-px: 28px; } .trj-ob-next { min-width: 112px; } }
.trj-ob-s1, .trj-ob-urgent { padding-left: var(--trj-ob-px); padding-right: var(--trj-ob-px); }

/* ---- Owen's visual fixes (29 Oct 2026, Chloe) ------------------------------------------------
   1. Next hides once step 2 is open (panel.js adds .trj-ob-open; step 1 then re-checks on change).
      On laptops it keeps its space (visibility) so no field moves; on phones Next is its own row
      under the fields, so it goes and only step 2 moves up. Hidden either way means not focusable. */
.trj-ob-open .trj-ob-nextwrap { display: none; }
@media (min-width: 768px) { .trj-ob-open .trj-ob-nextwrap { display: block; visibility: hidden; } }
/* 2 and 4. Every arrow button and every tab: the label's box is trimmed to cap height to baseline
   (text-box), so flex centring puts the capitals, not the font's line box, on the icon's centre and
   the button's. The arrow's drawn line stops 5/24 short of its box each side, so it gives back
   that much on the outside and the icon + label group centres by ink. Browsers without text-box
   keep the previous look. */
.trj-p-btn, .trj-ob-next, .trj-f-submit, .trj-ob-tabs [role=tab] { display: inline-flex; align-items: center; justify-content: center; line-height: 1.15; }
.trj-p-btn, .trj-ob-next, .trj-f-submit { display: flex; }
.trj-ob-tabs [role=tab] { display: flex; }
:is(.trj-p-btn, .trj-ob-next, .trj-f-submit, .trj-ob-tabs [role=tab]) > span { display: block; text-box: trim-both cap alphabetic; }
:is(.trj-p-btn, .trj-ob-next, .trj-f-submit) > .trj-f-btn-ico { margin-right: -3px; }
.trj-ob-next > .trj-f-btn-ico { margin-right: -2px; }
.trj-ob-tabs [role=tab] { --trj-ico-dy: 0px; }
/* 3. The chosen tab is quieter: no white block. It takes the bar's own red, so tab and form read as
   one piece, with a yellow bar along its top and a bold label; the others are a darker red with a
   regular-weight label. Not colour alone: the bar, the weight and the join to the form all mark it.
   White on #EE2D26 is 4.8:1, white on #B8201A 6.5:1. */
.trj-ob-tabs { background: #A81C17; }
.trj-ob-tabs [role=tab] { background: #B8201A; color: #FFFFFF; font-weight: 400; border-bottom: 0; box-shadow: none; }
.trj-ob-tabs [role=tab]:hover { background: #C9261F; }
.trj-ob-tabs [role=tab][aria-selected=true], .trj-ob-tabs [role=tab][aria-selected=true]:hover { background: #EE2D26; color: #FFFFFF; font-weight: 700; box-shadow: inset 0 4px 0 #FCD209; }
.trj-ob-tabs [role=tab]:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -5px; }

/* ---- No yellow on the order bar (29 Oct 2026, Owen: "We are overcomplicating the look and feel with
   the yellow"). The chosen tab loses its yellow top bar and the bar loses its yellow ground (phones:
   the card's surround; laptops: the hero below the slideshow), so the red tab and the red panel
   read as one shape on white. The yellow trust bar further down is unchanged. Not colour alone: the
   chosen tab joins the panel with no seam, its label is bold, and it carries a white underline;
   the others are regular weight with no underline. The focus ring is white, not yellow. */
.trj-ob { background: #FFFFFF; }
.trj-ob-tabs [role=tab][aria-selected=true], .trj-ob-tabs [role=tab][aria-selected=true]:hover { box-shadow: none; }
.trj-ob-tabs [role=tab][aria-selected=true] > span { text-decoration: underline 2px #FFFFFF; text-underline-offset: 6px; }
.trj-ob-tabs [role=tab]:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -5px; }
@media (min-width: 1100px) {
   .trj-hero.trj-hero { background: #FFFFFF; }
   .trj-hero > .trj-ob { background: transparent; margin-bottom: 24px; }
}

/* ---- Close on step 2 (29 Oct 2026, Owen: "a little button just to collapse this form again").
   Top right of the white panel, beside its heading. A real button with a visible word and an up
   chevron, so it never relies on colour; navy on white is 13.6:1. Its focus ring is navy, not
   yellow. On narrow phones the heading wraps beside it rather than under it. */
.trj-ob-s2top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trj-ob-s2top .trj-p-h { margin: 0; flex: 1 1 auto; min-width: 0; }
.trj-panel .trj-ob-close { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: -4px 0 0 0; padding: 0 10px 0 6px; background: #FFFFFF; color: #1A1A1A; border: 1px solid #D0CDC8; border-radius: var(--trj-r, 8px); font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; width: auto; }
.trj-panel .trj-ob-close[hidden] { display: none; }
.trj-panel .trj-ob-close:hover { background: #F4F3F1; border-color: #1A1A1A; color: #1A1A1A; }
.trj-panel .trj-ob-close:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; box-shadow: none; }
.trj-ob-close-ico { width: 18px; height: 18px; }
@media (min-width: 768px) { .trj-panel .trj-ob-close { margin: -6px -8px 0 0; } }

/* Rebuild stage 1 (29 Oct 2026): Font Awesome replaced by inline SVG (icons.mjs faIcon).
   The SVGs are sized in em like the glyphs were, so template.css font sizes still apply.
   template.css styled the phone menu marks as <i> blocks; .trj-ico-box carries those rules. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
svg.trj-ico { display: inline-block; vertical-align: -0.125em; overflow: visible; }
#menuIcon svg.trj-ico, .closebtn svg.trj-ico { vertical-align: middle; }
#footer p.social svg.trj-ico { margin: 0; }
#menuIcon [role=button]:focus-visible, .overlay .closebtn:focus-visible { outline: 3px solid #FBD109; outline-offset: 2px; }
@media (max-width: 767px) {
   #menuIcon .trj-ico-box { display: flex; align-items: center; justify-content: center; width: 28px; height: 34px; background-color: #F3F3F3; }
   .closebtn .trj-ico-box { display: flex; align-items: center; justify-content: center; width: 35px; height: 46px; background-color: #EE5953; }
}

/* ---- Home hero (rebuild stage 2, 29 Oct 2026). Replaces the old slideshow module (slider 19) and its
   script library: the first slide as plain HTML (scripts/lib/hero.mjs), no JavaScript. Measurements are
   the slider's own: 2:1 box up to 600px tall (317px floor on small phones), photo cover at
   72% 29% and 76% over black, content in a 1200px row inset 30px (20px on phones), headline
   Roboto 56px, subline Roboto Light 29px (70% on tablets, 60% on phones), "warm" in Libre
   Baskerville with the yellow hand-drawn circle, Read more in Libre Franklin. The circle draws
   itself and the button slides in, as before, in CSS only; both are still under reduced motion. */
/* #slideshowrow prefix: the old template rule #slideshowrow P (margin 0, line-height normal) must lose. */
#slideshowrow .trj-hi { position: relative; display: flex; width: 100%; align-items: center; overflow: hidden; aspect-ratio: 2 / 1; max-height: 600px; background: #000000; color: #FFFFFF; text-align: left; }
#slideshowrow .trj-hi-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 29%; opacity: .76; }
#slideshowrow .trj-hi-in { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 20px 20px 30px; }
#slideshowrow .trj-hi-col { width: min(550px, calc(50vw - 50px)); }
#slideshowrow .trj-hi p { padding: 0; color: #FFFFFF; }
#slideshowrow .trj-hi-h { margin: 0; font-family: var(--trj-font-head); font-size: clamp(34px, 4.1vw, 52px); font-weight: 400; line-height: 1.1; }
#slideshowrow .trj-hi-sub { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25em; margin: 15px 0 0; font-family: var(--trj-font-body); font-size: 29px; font-weight: 300; line-height: 1.2; }
#slideshowrow .trj-hi-hl { position: relative; font-family: var(--trj-font-head); font-weight: 700; }
#slideshowrow .trj-hi-hl-t { position: relative; z-index: 2; padding: 0 10px; }
#slideshowrow .trj-hi-hl svg { position: absolute; z-index: 1; top: 50%; left: 50%; width: 105%; height: 120%; transform: translate(-50%, -50%); overflow: visible; }
#slideshowrow .trj-hi-hl path { fill: none; stroke: #FED208; stroke-width: 10px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trj-hi-draw 8s ease-in-out infinite; }
@keyframes trj-hi-draw { 0%, 25% { stroke-dashoffset: 1; opacity: 1; } 40%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
#slideshowrow .trj-hi-cta { margin: 30px 0 0; animation: trj-hi-in .6s ease-out .4s both; }
@keyframes trj-hi-in { from { opacity: 0; transform: translateX(50px); } }
#slideshowrow .trj-hi-cta a { display: inline-block; padding: 1em 1.5em; border-radius: 5px; background: #EE3026; color: #FFFFFF; font-family: var(--trj-font-body); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; text-decoration: none; transition: all .5s ease; }
#slideshowrow .trj-hi-cta a:hover, #slideshowrow .trj-hi-cta a:focus { padding: 1em 3em; background: #FFFFFF; color: #FF165E; text-decoration: none; }
#slideshowrow .trj-hi-cta a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
@media (max-width: 1199px) {
   #slideshowrow .trj-hi-sub { font-size: 20.3px; }
   #slideshowrow .trj-hi-cta a { font-size: 11.2px; }
}
@media (max-width: 767px) {
   #slideshowrow .trj-hi-in { padding: 30px 20px 50px; }
   #slideshowrow .trj-hi-col { width: auto; }
   #slideshowrow .trj-hi-sub { font-size: 17.4px; }
}
@media (max-width: 575px) { #slideshowrow .trj-hi { aspect-ratio: auto; min-height: 317px; } }
@media (prefers-reduced-motion: reduce) {
   #slideshowrow .trj-hi-hl path { animation: none; stroke-dashoffset: 0; }
   #slideshowrow .trj-hi-cta { animation: none; }
   #slideshowrow .trj-hi-cta a { transition: none; }
}

/* ==== (3) Postcode lookup (was postcode-lookup.css). */
/* "Find address" postcode lookup (postcode-lookup.js adds every element styled here, so none of
   this applies without JavaScript). TR Jones navy #1A1A1A, red #EE2D26, focus yellow #FCD209, as
   in trj.css. Tap targets 48px. */
.trj-pl-host [hidden] { display: none !important; }
.trj-pl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.trj-pl-row > .trj-f-ctl, .trj-pl-row > input { flex: 1 1 11em; max-width: 20em; min-width: 0; }
.trj-pl-btn {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px;
   margin: 0; border: 2px solid #1A1A1A; border-radius: 6px; background: #1A1A1A; color: #FFFFFF;
   font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.trj-pl-btn:hover, .trj-pl-btn:focus-visible { background: #FCD209; border-color: #FCD209; color: #000000; }
.trj-pl-btn:focus-visible, .trj-pl-manual:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; box-shadow: none; }
.trj-pl-btn[disabled] { opacity: .7; cursor: wait; }
/* "Enter address manually" and "Change": a quiet secondary link (29 Oct 2026, Owen: it was "of
   the same weight and strength, arguably stronger than first name"). Regular weight, 14px, grey
   #555555 (7.5:1 on white), underlined; still a real button with a 48px tap height on phones.
   Only as wide as its text (2 Nov 2026, Owen: the pointer showed right across the row on the
   home panel's Pay invoice tab, where the field is a grid and stretched it): width fit-content
   and justify-self start hold in block, grid and flex parents alike. */
.trj-pl-manual {
   display: inline-flex; align-items: center; width: fit-content; max-width: 100%; justify-self: start;
   min-height: 48px; padding: 0 2px; margin: 0; border: 0; background: none;
   color: #555555; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.3; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.trj-pl-manual:hover { color: #1A1A1A; }
@media (min-width: 768px) { .trj-pl-manual { min-height: 32px; } }
/* Status lines in regular weight; errors in the field message style. */
.trj-pl-status { margin: 8px 0 0; font-size: 15px; line-height: 1.35; color: #1A1A1A; font-weight: 400; }
.trj-pl-status.trj-pl-bad { color: #B23533; font-weight: 700; font-size: 14px; }
/* For screen readers only (the "found" and "filled" lines on the home page). */
.trj-pl-status.trj-pl-sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Summary mode (Express order): the chosen address, read only, with "Change". The address boxes
   are hidden while the list waits, and while the summary shows; JavaScript off, they never are. */
.trj-pl-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 0 0 14px; }
.trj-pl-sum-h { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 700; font-size: 15px; line-height: 1.3; color: #1A1A1A; }
.trj-pl-sum-addr { margin: 0; padding: 10px 12px; font-size: 16px; line-height: 1.4; color: #1A1A1A; background: #F6F5F3; border: 1px solid #E0E0E0; border-radius: 8px; }
.trj-pl-sum .trj-pl-change { justify-self: start; }
form[data-trj-addr-state=wait] [data-trj-addr], form[data-trj-addr-state=pick] [data-trj-addr], form[data-trj-addr-state=sum] [data-trj-addr] { display: none; }
.trj-pl-status:empty { display: none; }
.trj-pl-results { margin: 10px 0 0; }
.trj-pl-results label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 15px; color: #1A1A1A; }
.trj-pl-results select { width: 100%; min-height: 48px; }
.trj-pl-carried { padding: 10px 12px 4px; margin-bottom: 14px; background: #F3F1EE; border-radius: 8px; }
.trj-pl-carried-pc { margin: 0 0 8px; font-size: 15px; }
.trj-pl-carried-pc strong { white-space: nowrap; }
@media (max-width: 480px) {
   .trj-pl-row > .trj-f-ctl, .trj-pl-row > input { max-width: none; flex-basis: 100%; }
   .trj-pl-btn { flex: 1 1 100%; }
}

/* ==== (4) Order panel across the photo and yellow strip join (29 Oct 2026, Owen: "Supposed to
   overlap the arrow and the yellow section"). Like the old site: the photo has a red edge line along
   its foot (the old slider's progress bar), and on laptops the red panel straddles that join, its
   top over the photo and the rest over the yellow trust strip, with the line running behind it.
   Laptops: the panel stays in normal flow, pulled up a fixed --trj-ob-up into the photo, and the
   hero is yellow from the photo down, so the yellow runs on into #iconsrow with no seam. Whatever
   tab or step is open, the yellow grows with the panel and the strip's icons always start below
   it (--trj-ob-gap). The photo is capped by the screen height so the tabs, fields and Next stay
   inside a 1366x768 screen. Phones and tablets keep the panel above the photo (first thing under
   the header); they get the red line only. */
#slideshowrow .trj-hi::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--trj-edge, 5px); background: #EE2D26; }
@media (min-width: 1100px) {
   .trj-hero.trj-hero { --trj-ob-up: 64px; --trj-ob-gap: 22px; --trj-edge: 6px; display: flex; flex-direction: column; padding: 0 0 var(--trj-ob-gap); background: #FCD209; }
   .trj-hero > #slideshowrow { order: 1; position: relative; z-index: 0; background: #000000; }
   .trj-hero > #slideshowrow .trj-hi { max-height: max(380px, min(600px, calc(100svh - 300px))); }
   .trj-hero > .trj-ob { order: 2; position: relative; z-index: 1; box-sizing: border-box; width: calc(100% - 32px); max-width: var(--trj-ob-max); margin: calc(-1 * var(--trj-ob-up)) auto 0; padding: 0; background: transparent; border-radius: var(--trj-r); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }
   #iconsrow { margin-top: 0; }
}

/* ==== (5) Order panel redesign (29 Oct 2026, Chloe, from Owen's mockup: "don't copy them slavishly,
   but take the good stuff"). Presentation only. The red tab bar stays; everything under it is one
   white body: step 1 ("1. Your order") then step 2 ("2. Delivery details") below a thin divider, no
   card inside a card. Red is kept for the chosen tab, the buttons and small accents (step numbers,
   links). No in-field icons except the step 1 postcode pin. One-line padlock note with the Visa and
   Mastercard marks on the payment tabs, then a full-width red button. Errors are red on white (icon,
   2px border and text, so never colour alone). No yellow anywhere in the panel: inputs show a dark
   border on focus and a dark 2px ring with offset on :focus-visible (#1A1A1A on white, 17:1).
   Buttons are #D42A22 (white text 5.0:1, AA; the brand #EE2D26 is 4.2:1), darker #B8201A on hover.
   Under 480px every step 1 field takes the full width, which ends the clipped postcode and invoice
   placeholders and the "Check your postcode" message running past its column. Laptops keep block
   (4)'s straddle, pulled up further so the tabs and step heading sit over the photo. */
.trj-ob { --trj-btn: #D42A22; --trj-btn-h: #B8201A; --trj-ink: #1A1A1A; --trj-muted: #555555; --trj-rule: #E0E0E0; --trj-err: #B23533; }
.trj-ob-bar { background: #FFFFFF; color: var(--trj-ink); overflow: hidden; border: 1px solid var(--trj-rule); box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.trj-ob-tabs { margin: -1px -1px 0; }
.trj-ob-pane { background: #FFFFFF; }

/* Step headings. */
.trj-ob-sh { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.trj-ob-num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #FDE8E7; color: #B8201A; font-size: 15px; font-weight: 700; line-height: 1; }
.trj-ob-sh-t { flex: 1 1 auto; min-width: 0; }
.trj-panel.trj-ob .trj-ob-sh .trj-p-h { margin: 3px 0 0; font-size: 18px; line-height: 1.2; font-weight: 700; color: var(--trj-ink); }
.trj-ob-sh p { margin: 3px 0 0; font-size: 14px; line-height: 1.35; color: var(--trj-muted); }
.trj-ob-s2head { margin: 0; }
.trj-panel.trj-ob .trj-ob-sh .trj-ob-close { margin: -2px 0 0; }
.trj-panel.trj-ob .trj-p-nojs { margin: 0 0 12px; font-size: 20px; color: var(--trj-ink); }

/* Step 1 on white. */
.trj-ob-s1 { padding-top: 18px; padding-bottom: 6px; }
.trj-ob-s1 .trj-p-field > label, .trj-ob-s1 .trj-ob-fill { color: var(--trj-ink); }
.trj-ob-s1 .trj-p-hint { color: var(--trj-muted); }
.trj-ob-s1 .trj-p-area { color: var(--trj-ink); }

/* Step 2: same white body, a divider inset to the content edge. */
.trj-ob .trj-ob-s2 { margin: 0 var(--trj-ob-px); padding: 18px 0 8px; border: 0; border-top: 1px solid var(--trj-rule); border-radius: 0; background: #FFFFFF; }
.trj-ob-addr-status { margin: 0 0 8px; }
.trj-ob .trj-pl-slot { margin: 0 0 6px; }
.trj-ob .trj-pl-results { margin: 0; }
.trj-ob .trj-pl-results label { margin: 0 0 4px; }
.trj-ob .trj-pl-manual { color: #B8201A; }
.trj-ob .trj-pl-manual:hover { color: #8F1813; }
/* Lookup slot order: summary, list, its status or error line, then "Enter address manually", so an
   error sits straight under the list it is about (the DOM order is postcode-lookup.js's). */
.trj-ob .trj-pl-auto { display: flex; flex-direction: column; }
.trj-ob .trj-pl-auto > .trj-pl-sum { order: 0; }
.trj-ob .trj-pl-auto > .trj-pl-results { order: 1; }
.trj-ob .trj-pl-auto > .trj-pl-status { order: 2; margin: 6px 0 0; }
.trj-ob .trj-pl-auto > .trj-pl-manual { order: 3; align-self: flex-start; }
/* Postcode in error: the red icon on the right replaces the pin, so the placeholder keeps its room. */
.trj-ob .trj-f-has-ico:has(input[aria-invalid=true]) > .trj-f-ico { display: none; }
.trj-panel.trj-ob .trj-f-ctl.trj-f-has-ico input[aria-invalid=true] { padding-left: 12px; }

/* Tighter field rhythm (the error line under each field keeps its reserved height). */
.trj-ob .trj-p-grid { gap: 0 14px; }
.trj-ob .trj-ob-s2 .trj-p-field { margin-bottom: 4px; }
.trj-ob .trj-p-field > label { margin-bottom: 5px; }
.trj-ob .trj-p-msg { margin-top: 6px; }

/* Inputs: grey border, 8px radius, no icons (postcode pin in step 1 only). */
.trj-panel.trj-ob :is(input[type=text], input[type=tel], input[type=email], input[type=number], select, textarea) { border: 1px solid #8A8A8A; border-radius: var(--trj-r); background-color: #FFFFFF; }
.trj-panel.trj-ob :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: none; border-color: var(--trj-ink); box-shadow: none; }
.trj-panel.trj-ob :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus-visible { outline: 2px solid var(--trj-ink); outline-offset: 2px; }
.trj-panel.trj-ob :is(button:not([role=tab]), a):focus-visible { outline: 2px solid var(--trj-ink); outline-offset: 2px; box-shadow: none; }

/* Buttons: one red, no yellow on hover or focus. */
.trj-panel.trj-ob :is(.trj-ob-next, .trj-p-btn) { background: var(--trj-btn); color: #FFFFFF; border: 0; border-radius: var(--trj-r); box-shadow: none; }
.trj-panel.trj-ob :is(.trj-ob-next, .trj-p-btn):is(:hover, :focus) { background: var(--trj-btn-h); color: #FFFFFF; }
.trj-panel.trj-ob .trj-ob-submit { display: block; margin: 4px 0 8px; }
.trj-panel.trj-ob .trj-ob-submit .trj-p-btn { width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 0 18px; font-size: 18px; text-transform: none; }

/* The one-line padlock note. */
.trj-ob-safe { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 0 0; border-top: 1px solid var(--trj-rule); }
.trj-ob-safe-ico { flex: none; width: 18px; height: 18px; color: var(--trj-ink); stroke-width: 2; }
.trj-ob-safe p { flex: 1 1 0; min-width: 0; margin: 0; font-size: 14px; line-height: 1.3; color: var(--trj-ink); }
.trj-ob-safe .trj-f-cards { flex: none; margin-left: auto; }

/* The answering service line: a quiet grey foot to the panel. */
.trj-panel.trj-ob .trj-ob-urgent { display: block; margin: 0; padding-top: 11px; padding-bottom: 12px; background: #F4F4F5; border-top: 1px solid var(--trj-rule); color: var(--trj-ink); font-size: 14px; line-height: 1.35; text-align: center; }
.trj-ob-urgent-ico { display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; color: var(--trj-muted); }
.trj-panel.trj-ob .trj-ob-urgent a { color: #B8201A; font-weight: 700; white-space: nowrap; }

/* Errors on white: red text and icon under the field, 2px red border with the icon inside. */
.trj-ob .trj-ob-s1 .trj-p-msg { min-height: 18px; padding: 0; background: none; color: var(--trj-err); border-radius: 0; white-space: normal; }
.trj-ob .trj-ob-s1 .trj-p-msg::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23B23533'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23FFFFFF'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
.trj-panel.trj-ob .trj-ob-s1 [aria-invalid=true] { box-shadow: none; border: 2px solid var(--trj-err); }
.trj-panel.trj-ob .trj-ob-s1 input[aria-invalid=true]:not([type=checkbox]):not([type=radio]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23B23533'/%3E%3Crect x='7' y='3.5' width='2' height='6' rx='1' fill='%23FFFFFF'/%3E%3Ccircle cx='8' cy='12' r='1.15' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
/* Doubled class: must beat the focus rule above, so an invalid field stays red while focused. */
.trj-panel.trj-ob.trj-ob :is(input:not([type=checkbox]):not([type=radio]), select, textarea)[aria-invalid=true]:focus { border-color: var(--trj-err); box-shadow: none; }

/* Tick boxes: an older laptop rule gives every .trj-ob input a 46px min-height, which pushed the
   offers box below its label's first line. */
.trj-panel.trj-ob .trj-p-check input { min-height: 0; margin-top: 0; }
.trj-panel.trj-ob .trj-p-check { margin: 2px 0 10px; font-size: 15px; }
/* Tick boxes take the panel's dark ring too, not the browser's own (2 Nov 2026). */
.trj-panel.trj-ob input[type=checkbox]:focus-visible { outline: 2px solid var(--trj-ink); outline-offset: 2px; }

/* The in-place confirmation, on white. */
.trj-panel.trj-ob .trj-p-done { padding: 18px var(--trj-ob-px) 8px; background: #FFFFFF; color: var(--trj-ink); }
.trj-panel.trj-ob .trj-p-done .trj-p-done-main { border-left-color: var(--trj-btn); }
.trj-panel.trj-ob .trj-p-done a { color: #B8201A; }

/* Find address (Pay invoice step 2, where the postcode sits with the address): a secondary
   button, outlined like Close, so red stays for the one primary action. */
.trj-panel.trj-ob .trj-pl-btn { background: #FFFFFF; color: var(--trj-ink); border: 1px solid #8A8A8A; border-radius: var(--trj-r); }
.trj-panel.trj-ob .trj-pl-btn:hover, .trj-panel.trj-ob .trj-pl-btn:focus-visible { background: #F4F3F1; border-color: var(--trj-ink); color: var(--trj-ink); }

/* Phones: every step 1 field full width. */
@media (max-width: 479px) {
   .trj-panel.trj-ob .trj-ob-submit .trj-p-btn { font-size: 16px; padding: 0 12px; gap: 6px; }
   .trj-ob-row { grid-template-columns: minmax(0, 1fr); }
   .trj-ob-sh { gap: 10px; }
   /* Postcode and other step 1 lines never run past the panel on narrow phones (2 Nov 2026). */
   .trj-ob .trj-ob-s1 .trj-p-field, .trj-ob .trj-ob-s1 .trj-f-ctl { min-width: 0; max-width: 100%; }
   .trj-ob .trj-ob-s1 .trj-p-msg, .trj-ob .trj-ob-s1 .trj-p-hint, .trj-ob .trj-ob-s1 .trj-p-area { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
}
/* Laptops: a slightly smaller heading, so step 1 and Next stay inside 1366x768. */
@media (min-width: 768px) {
   .trj-ob-num { width: 26px; height: 26px; font-size: 14px; }
   .trj-panel.trj-ob .trj-ob-sh .trj-p-h { margin-top: 2px; font-size: 17px; }
   .trj-ob-sh p { font-size: 13.5px; }
   .trj-ob-sh { margin-bottom: 12px; }
}
@media (min-width: 1100px) {
   .trj-hero.trj-hero { --trj-ob-up: 112px; }
   /* 16px lower than block (4), for the step 1 heading: Next ends about 22px above a 768px screen. */
   .trj-hero > #slideshowrow .trj-hi { max-height: max(380px, min(600px, calc(100svh - 316px))); }
   .trj-ob-bar { border: 0; box-shadow: none; }
   .trj-ob-tabs { margin: 0; }
}

/* ==== (6) Trust strip bottom padding (29 Oct 2026, Chloe; Owen: "a little bit more yellow underneath
   the text here"). Bottom only: the yellow under the labels now slightly exceeds the yellow above the
   icons. Phones and tablets: 22px above the icons (strip top), 18px below was the cell padding alone,
   now 26px. Laptops (from 1100px): about 44px of yellow from the panel foot to the icons, so 46px below. */
#iconsrow { padding-bottom: 8px; }
@media (min-width: 1100px) {
   #iconsrow { padding-bottom: 28px; }
}

/* Two-step order and quote forms (forms.js steps(), 29 Oct 2026). Only exists with JS on. */
.trj-f-hide { display: none !important; }
.trj-f-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; counter-reset: none; }
.trj-f-steps li {
   flex: 1 1 0; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px;
   border-radius: 6px; background: #F1F1F1; color: #5A5A5A; font-size: 15px; font-weight: 700; line-height: 1.25;
}
.trj-f-steps-n {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
   border-radius: 50%; background: #FFFFFF; color: #5A5A5A; font-size: 14px;
}
.trj-f-steps li.trj-f-steps-on { background: #1A1A1A; color: #FFFFFF; }
.trj-f-steps li.trj-f-steps-on .trj-f-steps-n { background: #EE2D26; color: #FFFFFF; }
.trj-f-steps li.trj-f-steps-done .trj-f-steps-n { background: #1F7A3A; color: #FFFFFF; }
.trj-f-stepnav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.trj-f-card > .trj-f-stepnav:first-child { margin: 0 0 14px; }
.trj-f-stepnav .trj-f-next { margin-left: auto; }
.trj-f-back {
   border: 0; background: none; padding: 6px 0; font: inherit; font-size: 16px; font-weight: 700; color: #1A1A1A;
   text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.trj-f-back:hover { color: #B8201A; }
.trj-f-back:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
.trj-f-card h3[tabindex="-1"]:focus { outline: none; }
@container (min-width: 700px) { .trj-f-stepnav .trj-f-next { width: auto; min-width: 250px; } }

/* Privacy policy and small print articles carry inline Verdana from a pasted Word document. */
[style*="Verdana"] { font-family: var(--trj-font-body) !important; }
/* Page headings on the pages still in the old layout use the heading font, like the redesigned ones. */
#main_content .page-header H1, #main_content .page-header H2, #main_content .item-page > H2, #main_content .item-page H1 { font-family: var(--trj-font-head); font-weight: 400; }

/* Home order panel as wide as the trust icons beneath it (the page container), Owen 29 Oct 2026. */
@media (min-width: 1200px) { .trj-ob { --trj-ob-max: 1080px; } }
@media (min-width: 1600px) { .trj-ob { --trj-ob-max: 1248px; } }
@media (min-width: 992px) { .trj-ob .trj-p-hint { white-space: nowrap; } }
/* Order oil tab, product line under the select (2 Nov 2026): wraps inside the 244px column, or it runs into the Litres hint. */
@media (min-width: 992px) { .trj-ob .trj-ob-product .trj-p-hint { white-space: normal; } }
/* Postcode "outside our usual area" note (2 Nov 2026): wraps inside the panel on every tab, or at 1280 it ran past
   the panel edge and pushed the Get a quote form sideways. */
.trj-ob .trj-ob-pc .trj-p-hint { white-space: normal; overflow-wrap: break-word; max-width: 100%; min-width: 0; }

/* Home panel step headings, Owen 29 Oct 2026: no step numbers; heading and help on one line. */
.trj-ob-num { display: none; }
.trj-ob-sh { align-items: center; margin-bottom: 14px; }
.trj-ob-sh-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.trj-panel.trj-ob .trj-ob-sh .trj-p-h { margin: 0; }
.trj-ob-sh p { margin: 0; }

/* Headings in the heavy weight of the one family (all templates). */
#main_content .page-header H1, #main_content .page-header H2, #main_content .item-page > H2, #main_content .item-page H1,
#slideshowrow .trj-hi-h { font-weight: var(--trj-head-weight); letter-spacing: var(--trj-head-track); }
#slideshowrow .trj-hi-hl { font-weight: 800; }

/* ==== Home on phones: the hero first, the order panel directly beneath it (29 Oct 2026, Owen:
   "Form needs to go beneath hero on mobile."). Phones only; tablets and laptops are unchanged. */
@media (max-width: 767px) {
   .trj-hero.trj-hero { display: flex; flex-direction: column; }
   .trj-hero > #slideshowrow { order: 1; }
   .trj-hero > .trj-panel { order: 2; width: 100%; }
}
/* Landscape phones (30 Oct 2026, Owen: "On landscape phone the hero image is below the form
   incorrectly"). An iPhone on its side is 667 to 932 wide, inside the tablet range (768 to 1099)
   that puts the panel first, so the photo dropped under the form. Keyed on height: no tablet or
   laptop screen is under 500px tall, so only phones on their side match. Same order as portrait
   phones (photo, heading, panel), and the photo is capped so it never fills more than the screen. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1099px) {
   .trj-hero.trj-hero { display: flex; flex-direction: column; }
   .trj-hero > #slideshowrow { order: 1; }
   .trj-hero > .trj-panel { order: 2; width: 100%; }
   .trj-hero > #slideshowrow .trj-hi { max-height: max(300px, calc(100svh - 40px)); }
}

/* ==== Full-screen menu above everything (29 Oct 2026, Owen: "Menu opens behind form on mobile.").
   The overlay was z-index 3 while the order panel is 5 and the phone sticky bar 1000, so both painted
   over it. Now it sits on top of the whole page, fills the visible screen (dvh, so the phone's
   toolbars do not cut it off), scrolls inside itself when the menu is taller than the screen, and
   the page behind is locked while it is open (html.trj-nav-open, set by openNav). Closed, it is
   hidden from keyboard and screen readers once the slide-out finishes. */
.overlay { z-index: 10000; height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: hidden; transition: width .5s, visibility 0s linear .5s; }
.overlay.open { visibility: visible; transition: width .5s, visibility 0s; }
.overlay-content.open { padding: 40px 0 calc(32px + env(safe-area-inset-bottom)); }
html.trj-nav-open, html.trj-nav-open body { overflow: hidden; }

/* Footer, redesigned 30 Oct 2026 (lib/footer.mjs). Dark ground with the brand red as a top band,
   so it reads as one block after any page, including the dark closing bands. */
.trj-ft { background: #171513; color: #D8D1C4; border-top: 6px solid #EE2D26; font-size: 16px; line-height: 1.55; }
.trj-ft a { color: #FFFFFF; text-decoration: none; }
.trj-ft a:hover { color: #FCD209; text-decoration: underline; text-underline-offset: 3px; }
.trj-ft a:focus-visible { outline: 3px solid #FCD209; outline-offset: 2px; }
.trj-ft ul { list-style: none; margin: 0; padding: 0; }
.trj-ft li { margin: 0; }
.trj-ft p { margin: 0 0 12px; }
.trj-ft h2 {
   margin: 0 0 16px; font-family: var(--trj-font-body); font-size: 13px; font-weight: 700; letter-spacing: .18em;
   text-transform: uppercase; color: #FFFFFF;
}
.trj-ft-main {
   box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 48px 20px 36px;
   display: grid; gap: 36px 32px; grid-template-columns: 1fr;
}
.trj-ft-logo img { display: block; width: 185px; height: auto; margin-bottom: 22px; }
.trj-ft-contact li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.trj-ft-ico { flex: none; margin-top: 4px; color: #EE2D26; }
.trj-ft-quick ul { columns: 2; column-gap: 24px; }
.trj-ft-quick li, .trj-ft-small li { padding: 4px 0; break-inside: avoid; }
.trj-ft-btn {
   display: inline-block; padding: 10px 22px; border: 2px solid #FFFFFF; border-radius: 2px;
   font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.trj-ft .trj-ft-btn:hover { background: #FFFFFF; color: #171513; text-decoration: none; }
.trj-ft h2.trj-ft-h-social { margin-top: 26px; }
.trj-ft-social { display: flex; gap: 10px; }
.trj-ft-social a {
   display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
   border: 1px solid #4A443C; border-radius: 50%;
}
.trj-ft .trj-ft-social a:hover { background: #EE2D26; border-color: #EE2D26; color: #FFFFFF; }
.trj-ft-trust { border-top: 1px solid #2E2A25; }
.trj-ft-trust-in {
   box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 22px 20px;
   display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.trj-ft-trust img { display: block; background: #FFFFFF; border-radius: 4px; padding: 4px; }
.trj-ft-trust p { margin: 0; flex: 1 1 280px; font-size: 14px; color: #BDB5A7; }
.trj-ft-legal {
   box-sizing: border-box; background: #0F0E0D; padding: 14px 20px; display: flex; flex-wrap: wrap;
   justify-content: center; gap: 4px 24px; font-size: 13px; color: #9E968A; text-align: center;
}
.trj-ft-legal p { margin: 0; }
.trj-ft-legal a { color: #BDB5A7; }
@media (min-width: 600px) { .trj-ft-main { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) {
   .trj-ft-main { grid-template-columns: 1.3fr 1.3fr 1fr .8fr; padding: 56px 32px 44px; }
   .trj-ft-trust-in, .trj-ft-legal { padding-left: 32px; padding-right: 32px; }
   .trj-ft-legal { justify-content: space-between; max-width: none; }
}
/* Phones: room for the fixed Order / Call bar. */
@media (max-width: 767px) { .trj-ft-legal { padding-bottom: 76px; } }
.trj-ft p { font-size: inherit; line-height: inherit; }
.trj-ft-legal { padding-left: max(20px, calc((100% - 1170px) / 2 + 20px)); padding-right: max(20px, calc((100% - 1170px) / 2 + 20px)); }
@media (min-width: 992px) { .trj-ft-legal { padding-left: max(32px, calc((100% - 1170px) / 2 + 32px)); padding-right: max(32px, calc((100% - 1170px) / 2 + 32px)); } }

/* Phone header, 30 Oct 2026 (Owen's mock-up: "Simpler header. Logo, phone and menu."):
   logo left, call and menu icons right, red rule under. Desktop unchanged. */
.trj-hd-call { display: none; }
@media (max-width: 767px) {
   #headerRowWide { padding: 0; }
   DIV#headerRow { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; width: auto; }
   #headerLeft { margin: 0; padding: 0; width: 168px; }
   #headerRight { position: static; display: flex; align-items: center; gap: 4px; }
   .trj-hd-call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #1A1A1A; border-radius: 6px; }
   .trj-hd-call svg { width: 26px; height: 26px; }
   .trj-hd-call:focus-visible { outline: 3px solid #FBD109; outline-offset: 2px; }
   DIV#menuIcon { margin: 0; }
   DIV#menuIcon > span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; }
   #menuIcon .trj-ico-box { width: auto; height: auto; background: none; }
   DIV#menuIcon SPAN { font-size: 30px; color: #1A1A1A; }
}

/* Phone menu drawer (lib/drawer.mjs, 30 Oct 2026). Red panel from the right over a dimmed page.
   Closed it is invisible and out of the tab order (visibility), so nothing behind it is blocked. */
.trj-dw { position: fixed; inset: 0; z-index: 10000; visibility: hidden; transition: visibility 0s linear .32s; }
.trj-dw.open { visibility: visible; transition: none; }
.trj-dw-scrim { position: absolute; inset: 0; background: rgba(16, 15, 14, .55); opacity: 0; transition: opacity .32s ease; }
.trj-dw.open .trj-dw-scrim { opacity: 1; }
.trj-dw-panel {
   position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); box-sizing: border-box;
   display: flex; flex-direction: column; background: #E03127; color: #FFFFFF;
   padding: calc(14px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
   overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
   transform: translateX(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
   box-shadow: -12px 0 32px rgba(0, 0, 0, .25); font-family: var(--trj-font-body);
}
.trj-dw.open .trj-dw-panel { transform: none; }
.trj-dw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.trj-dw-logo img { display: block; width: 150px; height: auto; }
.trj-dw-close {
   display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
   border: 0; border-radius: 6px; background: transparent; color: #FFFFFF; cursor: pointer;
}
.trj-dw-close svg { width: 26px; height: 26px; }
.trj-dw-list { list-style: none; margin: 0; padding: 0; flex: 1 0 auto; }
.trj-dw-list > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.trj-dw-link {
   display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 6px 0; box-sizing: border-box;
   border: 0; background: none; color: #FFFFFF; font: inherit; font-size: 18px; font-weight: 700; text-align: left;
   text-decoration: none; cursor: pointer;
}
.trj-dw a.trj-dw-link:hover, .trj-dw-toggle:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.trj-dw-ico { display: inline-flex; width: 26px; justify-content: center; flex: none; }
.trj-dw-ico svg { width: 24px; height: 24px; }
.trj-dw-chev { margin-left: auto; display: inline-flex; transition: transform .2s ease; }
.trj-dw-toggle[aria-expanded="true"] .trj-dw-chev { transform: rotate(180deg); }
.trj-dw-sub { list-style: none; margin: 0 0 12px; padding: 0 0 0 40px; }
.trj-dw-sub li { margin: 0; }
.trj-dw-sub a { display: block; padding: 7px 0; color: #FFFFFF; font-size: 16px; text-decoration: none; opacity: .92; }
.trj-dw-sub a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.trj-dw a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.trj-dw a:focus-visible, .trj-dw button:focus-visible { outline: 3px solid #FCD209; outline-offset: 2px; }
.trj-dw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.trj-dw-call { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; }
.trj-dw-call span { display: flex; flex-direction: column; line-height: 1.25; }
.trj-dw-call strong { font-size: 16px; }
.trj-dw-call small { font-size: 12px; opacity: .9; }
.trj-dw-pay {
   display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid #FFFFFF; border-radius: 6px;
   color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.trj-dw .trj-dw-pay:hover { background: #FFFFFF; color: #E03127; }
html.trj-nav-open, html.trj-nav-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .trj-dw-panel, .trj-dw-scrim, .trj-dw-chev { transition: none; } }

/* Header menu button: three plain bars (30 Oct 2026). A burger-to-cross morph was tried and dropped:
   the drawer covers the button, so nobody sees it (Owen). */
.trj-burger { position: relative; display: inline-block; width: 26px; height: 20px; }
.trj-burger i {
   position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: currentColor;
   transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, top .3s cubic-bezier(.2, .8, .2, 1);
}
.trj-burger i:nth-child(1) { top: 0; }
.trj-burger i:nth-child(2) { top: 8.5px; }
.trj-burger i:nth-child(3) { top: 17px; }
DIV#menuIcon > span { color: #1A1A1A; }
@media (prefers-reduced-motion: reduce) { .trj-burger i { transition: none; } }

/* Drawer footer phone: white on red (a global tel: link colour was turning it black). */
.trj-dw a.trj-dw-call, .trj-dw a.trj-dw-call strong, .trj-dw a.trj-dw-call small, .trj-dw a.trj-dw-call svg { color: #FFFFFF !important; }

/* Home testimonials (lib/testimonials.mjs, 30 Oct 2026): quote cards on a warm light ground. */
.trj-tm { background: #FAF8F4; border-top: 1px solid #E6E1D8; }
.trj-tm-in { box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 48px 20px 52px; }
.trj-tm-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #B8201A; }
.trj-tm h2 { margin: 0 0 28px; font-family: var(--trj-font-head); font-weight: var(--trj-head-weight, 700); font-size: 28px; line-height: 1.2; color: #1A1A1A; }
.trj-tm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.trj-tm-grid li { margin: 0; }
.trj-tm figure {
   margin: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
   padding: 24px 24px 22px; background: #FFFFFF; border: 1px solid #E6E1D8; border-top: 4px solid #EE2D26; border-radius: 4px;
}
.trj-tm-mark { color: #EE2D26; }
.trj-tm blockquote { margin: 0; flex: 1; }
.trj-tm blockquote p { margin: 0; font-size: 17px; line-height: 1.6; color: #1A1A1A; }
.trj-tm figcaption { font-size: 15px; font-weight: 700; color: #555555; }
.trj-tm figcaption::before { content: ""; display: inline-block; width: 18px; height: 2px; background: #EE2D26; vertical-align: middle; margin-right: 10px; }
@media (min-width: 768px) {
   .trj-tm-in { padding: 64px 32px 68px; }
   .trj-tm h2 { font-size: 34px; }
   .trj-tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 1200px) { .trj-tm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Google reviews (30 Oct 2026): six cards, 3 x 2 on desktop; one swipeable row on phones with the
   next card peeking in. No auto-play. */
.trj-tm figcaption span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: #7A7A7A; }
.trj-tm figcaption::before { vertical-align: top; margin-top: 10px; }
.trj-tm figcaption { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.trj-tm figcaption span { flex-basis: 100%; padding-left: 28px; }
.trj-tm-more { margin: 24px 0 0; }
.trj-tm-more a { font-weight: 700; color: #B8201A; text-decoration: none; }
.trj-tm-more a:hover { text-decoration: underline; }
.trj-tm-grid:focus-visible { outline: 3px solid #FCD209; outline-offset: 4px; }
@media (max-width: 767px) {
   .trj-tm-in { padding-left: 0; padding-right: 0; }
   .trj-tm-eyebrow, .trj-tm h2, .trj-tm-more { padding-left: 20px; padding-right: 20px; }
   .trj-tm-grid {
      display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
      padding: 0 20px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
   }
   .trj-tm-grid::-webkit-scrollbar { display: none; }
   .trj-tm-grid li { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (min-width: 768px) and (max-width: 1199px) { .trj-tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .trj-tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Phone header (30 Oct 2026, Owen): fixed at the top, slides away while scrolling down, back on
   any scroll up, slimmer once off the top. Script in render.mjs FOOT; body padding = header height. */
@media (max-width: 767px) {
   #headerRowWide { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: transform .25s ease, box-shadow .25s ease; }
   body { padding-top: var(--trj-hd-h, 76px); }
   html.trj-hd-scrolled #headerRowWide { box-shadow: 0 2px 12px rgba(0, 0, 0, .12); }
   html.trj-hd-scrolled DIV#headerRow { padding-top: 7px; padding-bottom: 6px; }
   html.trj-hd-scrolled #headerLeft { width: 132px; }
   #headerLeft, DIV#headerRow { transition: width .25s ease, padding .25s ease; }
   html.trj-hd-hidden #headerRowWide { transform: translateY(-100%); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { #headerRowWide, #headerLeft, DIV#headerRow { transition: none; } }

.trj-tm figcaption::before { display: none; }
.trj-tm figcaption span { padding-left: 0; }

/* Desktop header strip (30 Oct 2026, Owen's mock-up): two facts, the phone with a label, and a
   bolder Pay invoice button; menu shows the current section. Phones keep their own header. */
.trj-hd-info { display: flex; align-items: center; gap: 0; font-family: var(--trj-font-body); }
#headerRight #contact-info p.trj-hd-fact, .trj-hd-fact {
   display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 22px; border-right: 1px solid #E0E0E0;
   font-size: 15px !important; line-height: 1.3; color: #1A1A1A !important; text-transform: none !important; text-align: left !important;
}
.trj-hd-fact svg, .trj-hd-phone svg { flex: none; color: #EE2D26; width: 30px; height: 30px; }
#contact-info a.trj-hd-phone {
   display: flex; align-items: center; gap: 12px; padding: 0 24px; color: #1A1A1A; text-decoration: none;
}
.trj-hd-phone span { display: flex; flex-direction: column; line-height: 1.2; }
.trj-hd-phone small { font-size: 13px; color: #555555; }
.trj-hd-phone strong { font-size: 24px; font-weight: 700; color: #1A1A1A; letter-spacing: .01em; }
#contact-info a.trj-hd-phone:hover strong { color: #B8201A; }
#contact-info a.trj-hd-pay {
   display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 6px;
   background: #E03127; color: #FFFFFF; font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;
   box-shadow: 0 2px 6px rgba(224, 49, 39, .25);
}
#contact-info a.trj-hd-pay:hover, #contact-info a.trj-hd-pay:focus-visible { background: #B8201A; color: #FFFFFF; }
#contact-info a.trj-hd-pay:focus-visible, #contact-info a.trj-hd-phone:focus-visible { outline: 3px solid #FCD209; outline-offset: 3px; }
#contact-info .trj-hd-pay-ico { width: 22px; height: 22px; }
/* Menu: underline the current section. */
#main-menu UL.nav > LI.active > A { box-shadow: inset 0 -3px 0 #FFFFFF; }
@media (max-width: 1199px) { .trj-hd-fact { display: none !important; } }
@media (min-width: 768px) {
   #headerRowWide { padding-top: 16px; padding-bottom: 16px; }
   #headerLeft { max-width: 270px; }
}
.trj-hd-fact span, .trj-hd-phone span, .trj-hd-phone strong { white-space: nowrap; }
#headerRight #contact-info p.trj-hd-fact { padding: 0 16px; font-size: 14px !important; }
#contact-info a.trj-hd-phone { padding: 0 18px; }
.trj-hd-phone strong { font-size: 22px; }
.trj-hd-fact svg, .trj-hd-phone svg { width: 28px; height: 28px; }
@media (min-width: 1200px) { #headerLeft { max-width: 220px; } }
@media (min-width: 1200px) and (max-width: 1599px) { .trj-hd-fact-a { display: none !important; } }
@media (min-width: 1600px) { #headerLeft { max-width: 260px; } }
/* Small print moved into the bottom strip (Owen, 30 Oct 2026); three columns above. */
.trj-ft-small ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.trj-ft-small li { padding: 0; }
.trj-ft-small li + li::before { content: "·"; margin: 0 10px; color: #6E675D; }
@media (min-width: 992px) { .trj-ft-main { grid-template-columns: 1.3fr 1.4fr 1fr; } }
.trj-ft-small, .trj-ft-small li, .trj-ft-small a { font-size: 13px !important; line-height: 1.6; }
@media (max-width: 767px) {
   .trj-ft-small ul { column-gap: 18px; }
   .trj-ft-small li + li::before { display: none; }
}

/* Main menu left-aligned under the logo (Owen, 30 Oct 2026). */
#main-menu UL.nav { justify-content: flex-start; }
/* Pull the row left by the link padding so "HOME" lines up with the logo's left edge. */
@media (min-width: 768px) { #main-menu UL.nav { margin-left: -7px; } }
@media (min-width: 992px) { #main-menu UL.nav { margin-left: -11px; } }
@media (min-width: 1200px) { #main-menu UL.nav { margin-left: -14px; } }
@media (min-width: 1600px) { #main-menu UL.nav { margin-left: -18px; } }

/* Stepped forms (30 Oct 2026, Owen: "your order, your order, 1, 1"): the progress bar carries the
   step number and name; inside the card only the help line shows. */
.trj-f-stepped .trj-f-card .trj-f-num { display: none; }
.trj-f-stepped .trj-f-card .trj-f-head h3 {
   position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.trj-f-stepped .trj-f-card .trj-f-head { margin-bottom: 14px; }
.trj-f-stepped .trj-f-card .trj-f-head > div { padding-left: 0; margin-left: 0; }

/* Room under the Next button inside the card (Owen, 30 Oct 2026). */
.trj-f-card > .trj-f-stepnav:last-child { margin-bottom: 14px; }

/* Navy footer (30 Oct 2026, Owen liked the form navy; "You do what you think is best"). Navy #1A1A1A
   is the forms' and phone bar's colour, so the site runs on red, yellow and navy. */
.trj-ft { background: #1A1A1A; color: #D8D1C4; }
.trj-ft-trust { border-top-color: #2E2A25; }
.trj-ft-trust p { color: #BDB5A7; }
.trj-ft-legal { background: #0F0E0D; color: #9E968A; }
.trj-ft-legal a { color: #D8D1C4; }
.trj-ft-small li + li::before { color: #6E675D; }
.trj-ft-social a { border-color: #4A443C; }
.trj-ft .trj-ft-btn:hover { color: #1A1A1A; }

/* Footer trust line: narrow column beside the badge, smaller (Owen, 30 Oct 2026). */
.trj-ft-trust-in { justify-content: flex-start; flex-wrap: nowrap; gap: 18px; }
.trj-ft-trust p { flex: 0 1 auto; max-width: 340px; font-size: 13px !important; line-height: 1.5 !important; }
.trj-ft-trust img { width: 110px; height: auto; flex: none; }

/* Home trust strip (30 Oct 2026): icon + bold title + short line, thin dividers, strong yellow. */
#iconsrow.trj-trust { background: #FCD209; padding: 0; }
.trj-trust-in {
   list-style: none; box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 22px 20px;
   display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
}
.trj-trust-in li { display: flex; align-items: center; gap: 14px; margin: 0; }
.trj-trust-ico { flex: none; display: inline-flex; color: #D42A22; }
.trj-trust-ico svg { width: 34px; height: 34px; }
.trj-trust-t { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--trj-font-body); }
.trj-trust-t strong { font-size: 17px; font-weight: 700; color: #1A1A1A; }
.trj-trust-t span { font-size: 14px; color: #3A3A3A; }
@media (min-width: 992px) {
   .trj-trust-in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 26px 32px; }
   .trj-trust-in li { justify-content: center; padding: 0 18px; }
   .trj-trust-in li + li { border-left: 1px solid rgba(26, 26, 26, .18); }
}
@media (max-width: 991px) { .trj-trust-t strong { font-size: 15px; } .trj-trust-t span { font-size: 13px; } .trj-trust-ico svg { width: 28px; height: 28px; } .trj-trust-in li { gap: 10px; } }

/* Home welcome (30 Oct 2026): text left, tanker photo right. */
#aboutrow.trj-wl { background: #FFFFFF; padding: 0; }
.trj-wl-in { box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 28px; align-items: center; }
.trj-wl-eyebrow { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #B8201A !important; text-align: left !important; }
.trj-wl h2 { margin: 0 0 16px; font-family: var(--trj-font-head); font-weight: var(--trj-head-weight, 700); font-size: 30px; line-height: 1.15; color: #1A1A1A; text-align: left; text-transform: none; }
.trj-wl-text p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #1A1A1A; text-align: left; }
.trj-wl-cta { margin-top: 22px !important; }
.trj-wl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 4px; background: #D42A22; color: #FFFFFF !important; font-weight: 700; text-decoration: none !important; }
.trj-wl-btn:hover { background: #B8201A; }
.trj-wl-btn:focus-visible { outline: 3px solid #FCD209; outline-offset: 3px; }
.trj-wl-photo { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.trj-wl-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 50%; }
@media (min-width: 992px) {
   .trj-wl-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 72px 32px; }
   .trj-wl h2 { font-size: 40px; }
}
#aboutrow.trj-wl .trj-wl-text p, #aboutrow.trj-wl .trj-wl-text h2 { padding: 0 !important; max-width: none; }
#aboutrow.trj-wl .trj-wl-eyebrow { margin-bottom: 12px !important; }
.trj-wl-photo img { aspect-ratio: 767 / 422; object-position: 50% 50%; }
#aboutrow.trj-wl .trj-wl-text p { margin: 0 0 14px !important; width: auto !important; }
#aboutrow.trj-wl .trj-wl-text p.trj-wl-cta { margin-top: 24px !important; }

/* Home services cards and coverage band (30 Oct 2026). */
#rowone.trj-sv { background: #F6F5F3; padding: 0; border-top: 1px solid #E6E1D8; }
.trj-sv-in, .trj-cv-in { box-sizing: border-box; max-width: 1170px; margin: 0 auto; padding: 48px 20px; }
.trj-sv-eyebrow { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #B8201A !important; }
.trj-sv h2, .trj-cv h2 { margin: 0 0 24px; font-family: var(--trj-font-head); font-weight: var(--trj-head-weight, 700); font-size: 28px; line-height: 1.15; color: #1A1A1A; text-transform: none; text-align: left; }
.trj-sv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.trj-sv-grid li { margin: 0; }
.trj-sv-card {
   display: flex; flex-direction: column; height: 100%; background: #FFFFFF; border: 1px solid #E6E1D8; border-radius: 6px;
   overflow: hidden; text-decoration: none !important; color: #1A1A1A; transition: box-shadow .2s ease, transform .2s ease;
}
.trj-sv-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.trj-sv-card:focus-visible { outline: 3px solid #FCD209; outline-offset: 3px; }
.trj-sv-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E9E9E9; }
.trj-sv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trj-sv-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 14px 16px; font-family: var(--trj-font-body); }
.trj-sv-body strong { font-size: 17px; line-height: 1.2; }
.trj-sv-body > span:not(.trj-sv-more) { font-size: 14px; line-height: 1.45; color: #555555; flex: 1; }
.trj-sv-more { font-size: 14px; font-weight: 700; color: #B8201A; }
.trj-cv { background: #FFFFFF; }
.trj-cv-in { display: grid; gap: 28px; align-items: center; }
.trj-cv-text p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #1A1A1A; }
.trj-cv-map { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.trj-cv-map img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .trj-sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 992px) {
   .trj-sv-in, .trj-cv-in { padding: 64px 32px; }
   .trj-sv h2, .trj-cv h2 { font-size: 36px; }
   .trj-cv-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
}
@media (min-width: 1200px) { .trj-sv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .trj-sv-card { transition: none; } .trj-sv-card:hover { transform: none; } }
#rowone.trj-sv h2 { margin-bottom: 28px !important; }
.trj-cv-map { max-width: 520px; justify-self: end; }
/* Coverage band: Anglesey photo (Owen's, Llanddwyn), text, map. */
.trj-cv-photo { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.trj-cv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 768px) and (max-width: 1199px) {
   .trj-cv-in { grid-template-columns: 1fr 1fr; gap: 28px 36px; }
   .trj-cv-text { grid-column: 1 / -1; order: -1; }
}
@media (min-width: 1200px) {
   .trj-cv-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
   .trj-cv-map { max-width: none; }
}
/* Coverage: text left, Anglesey photo right (Owen, 30 Oct 2026: map dropped). */
@media (min-width: 768px) { .trj-cv-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; gap: 48px !important; } .trj-cv-text { grid-column: auto !important; order: 0 !important; } }
.trj-cv-photo img { aspect-ratio: 16 / 10; }

/* Header Pay invoice button removed (Owen, 30 Oct 2026): both facts fit from 1200px. */
@media (min-width: 1200px) and (max-width: 1599px) { .trj-hd-fact-a { display: flex !important; } }
#contact-info a.trj-hd-phone { padding-right: 0; }

/* Cookie pop-up (30 Oct 2026): GA4 loads only after Accept (render.mjs consentScript). Navy card,
   red top edge, Accept and Reject the same size and weight. Sits above the phone order bar. */
.trj-ck {
   position: fixed; z-index: 1100; left: 12px; right: 12px; bottom: 12px; box-sizing: border-box;
   max-width: 520px; padding: 20px 22px 22px; background: #1A1A1A; color: #FFFFFF;
   border-top: 4px solid #EE2D26; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
   font-family: var(--trj-font-body);
}
.trj-ck[hidden] { display: none; }
.trj-ck h2 { margin: 0 0 8px; color: #FFFFFF; font-size: 18px !important; line-height: 1.3; font-weight: 700; }
.trj-ck p { margin: 0 0 16px; color: #FFFFFF; font-size: 15px !important; line-height: 1.5; }
.trj-ck a { color: #FFFFFF; text-decoration: underline; }
.trj-ck-btns { display: flex; gap: 10px; }
.trj-ck-btns button {
   flex: 1 1 0; min-height: 46px; padding: 10px 16px; border: 2px solid #FFFFFF; border-radius: 2px;
   background: #FFFFFF; color: #1A1A1A; font: 700 15px/1.2 var(--trj-font-body); cursor: pointer;
}
.trj-ck-btns button:hover { background: #FCD209; border-color: #FCD209; }
.trj-ck-btns button:focus-visible, .trj-ck a:focus-visible { outline: 3px solid #FCD209; outline-offset: 2px; }
@media (min-width: 768px) { .trj-ck { left: 24px; right: auto; bottom: 24px; } }

/* Confirmation card (2 Nov 2026, Owen: personalise the thank-you). After every form (home panel,
   full forms) and on /thank-you. Drawn by /media/trj/confirm.js; /thank-you's generic card is
   static (scripts/lib/confirm.mjs). White card, yellow top edge, a tick in the TR Jones yellow,
   the greeting as the heading, a short summary list, the reference on a pale yellow band, then
   the next step and the phone line. Children are scoped under .trj-cf to beat older p rules. */
.trj-cf, .trj-cf * { box-sizing: border-box; }
.trj-cf {
   max-width: 720px; margin: 12px 0 24px; padding: 22px 20px 18px; background: #FFFFFF; color: #1A1A1A;
   border: 1px solid #E0E0E0; border-top: 4px solid #FCD209; border-radius: 10px;
   box-shadow: 0 2px 10px rgba(23, 21, 19, .07); font-family: var(--trj-font-body); font-size: 16px; line-height: 1.45;
}
.trj-form-thanks.trj-cf { border-left: 1px solid #E0E0E0; padding: 22px 20px 18px; }
.trj-cf:focus { outline: none; }
.trj-cf .trj-cf-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.trj-cf .trj-cf-tick {
   flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
   border-radius: 50%; background: #FCD209; color: #1A1A1A;
}
.trj-cf .trj-cf-tick svg { width: 26px; height: 26px; stroke-width: 2.6; }
.trj-cf .trj-cf-h {
   margin: 0; padding: 0; font-family: var(--trj-font-head); font-weight: var(--trj-head-weight, 700); letter-spacing: var(--trj-head-track);
   font-size: 22px; line-height: 1.25; color: #1A1A1A; text-transform: none; text-align: left;
}
.trj-cf .trj-cf-h:focus { outline: none; }
.trj-cf .trj-cf-lede { margin: 0 0 6px; font-size: 15px; line-height: 1.4; color: #555555; }
.trj-cf .trj-cf-list { margin: 0 0 16px; padding: 0; border-top: 1px solid #E0E0E0; }
.trj-cf .trj-cf-row { display: grid; grid-template-columns: minmax(104px, 36%) minmax(0, 1fr); gap: 2px 14px; padding: 9px 0; border-bottom: 1px solid #EEEEEE; }
.trj-cf .trj-cf-row dt { margin: 0; font-size: 15px; color: #555555; }
.trj-cf .trj-cf-row dd { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A1A; overflow-wrap: anywhere; }
.trj-cf .trj-cf-ref {
   display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 16px; padding: 12px 14px;
   background: #FFF7CF; border-radius: 6px; font-size: 15px; line-height: 1.3; color: #1A1A1A;
}
.trj-cf .trj-cf-ref-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.35; color: #555555; overflow-wrap: anywhere; }
.trj-cf .trj-cf-ref-v { font-size: 20px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trj-cf .trj-cf-next, .trj-cf .trj-cf-line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: #1A1A1A; }
.trj-cf .trj-cf-ico-wrap { flex: 0 0 22px; display: flex; padding-top: 1px; color: #D42A22; }
.trj-cf .trj-cf-ico-wrap svg { width: 20px; height: 20px; }
.trj-cf .trj-cf-line { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #E0E0E0; font-size: 15px; }
.trj-cf .trj-cf-line a { color: #B8201A; font-weight: 700; white-space: nowrap; }
.trj-cf .trj-cf-home { margin: 16px 0 0; }
.trj-cf .trj-cf-home a {
   display: inline-flex; align-items: center; min-height: 46px; padding: 10px 22px; border-radius: 6px;
   background: #D42A22; color: #FFFFFF; font-weight: 700; font-size: 16px; text-decoration: none;
}
.trj-cf .trj-cf-home a:hover { background: #B8201A; }
.trj-cf a:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 2px; }
@media (min-width: 768px) {
   .trj-cf { padding: 26px 28px 22px; }
   .trj-form-thanks.trj-cf { padding: 26px 28px 22px; }
   .trj-cf .trj-cf-h { font-size: 26px; }
   .trj-cf .trj-cf-tick { width: 52px; height: 52px; }
   .trj-cf .trj-cf-tick svg { width: 30px; height: 30px; }
}
/* In the home order panel the card is the panel's white body, under the red bar. */
.trj-panel.trj-ob .trj-p-done.trj-cf { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 22px var(--trj-ob-px) 18px; }
@media (min-width: 768px) { .trj-panel.trj-ob .trj-p-done.trj-cf .trj-cf-body { max-width: 640px; } }
/* The "Anything else we need to know" row keeps the customer's line breaks; normal weight, it is prose. */
.trj-cf .trj-cf-row-note dd { white-space: pre-line; font-weight: 400; }

/* ==== (T-tabround) Phone order tabs fully rounded (2 Nov 2026, Chloe; Owen: rounded tops with flat
   bottoms look wrong when the tabs stack 2 x 2). Under 768px only: every corner takes the bar's 8px
   radius, and the tab block gains a 2px foot (the same width as the gap) so the lower row's bottom
   corners read against the dark red rather than butting into the white form. From 768px the single
   row keeps its rounded tops and flat bottoms exactly as before. */
@media (max-width: 767.98px) {
   .trj-ob-tabs { padding-bottom: 2px; }
   .trj-ob-tabs [role=tab] { border-radius: var(--trj-r); }
}

/* /failed: cancelled and declined blocks (2 Nov 2026). Button in the site's order red. */
.trj-fail-back { margin: 20px 0 12px; }
a.trj-fail-btn { display: inline-block; background: #D42A22; color: #FFFFFF; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; }
a.trj-fail-btn:is(:hover, :focus) { background: #B8201A; color: #FFFFFF; }
.trj-fail-line a { white-space: nowrap; }

/* ==== Home Order oil: Fill my tank (2 Nov 2026, Owen: "the checkbox doesn't look like the rest of
   the form's styling"; row now Product, Postcode, Fill my tank, Next). The tick box sits in a box
   with the inputs' height, grey border and 8px radius, and takes the option cards' checked look
   (2px dark border, light grey fill, dark tick). The real checkbox stays, so the label click,
   keyboard and screen readers work as before; focus rings the whole box. The "Litres" label keeps
   its line but is not shown while ticked (panel.js sets .trj-ob-filltank), so the box lines up with
   the inputs beside it, and the box fills its column so there is no gap before Next. */
.trj-ob .trj-ob-filltank > label[for=trj-p-litres] { visibility: hidden; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill { box-sizing: border-box; display: inline-flex; flex: none; align-items: center; gap: 8px; height: var(--trj-ctl-h); padding: 0 14px 0 12px; border: 1px solid #8A8A8A; border-radius: var(--trj-r); background: #FFFFFF; color: var(--trj-ink); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill:hover { border-color: #1A1A1A; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill:has(input:checked) { border: 2px solid #1A1A1A; padding: 0 13px 0 11px; background: #F2F2F2; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill input[type=checkbox] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #1A1A1A; cursor: pointer; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill input[type=checkbox]:focus-visible { outline: none; }
.trj-panel.trj-ob .trj-ob-s1 .trj-ob-fill:has(input:focus-visible) { outline: 2px solid var(--trj-ink); outline-offset: 2px; }
.trj-ob .trj-ob-filltank .trj-ob-fill { flex: 1 1 auto; width: 100%; }
@media (min-width: 768px) {
   .trj-ob-row > .trj-ob-howmuch.trj-ob-filltank { flex: 1 1 0; }
}
/* Phones stack the fields, so there is no row to line up with: the label goes altogether. */
@media (max-width: 479px) {
   .trj-ob .trj-ob-filltank > label[for=trj-p-litres] { display: none; }
}