/*
  Worthing Ltd Packaging Machinery Hire
  Premium industrial visual system — loaded after site.css.
*/

:root {
  --navy: #0c1828;
  --navy-2: #14263c;
  --teal: #d2ac78;
  --teal-dark: #8a6037;
  --cream: #f3f1ec;
  --white: #ffffff;
  --ink: #132033;
  --muted: #5b6877;
  --line: #d8d5ce;
  --radius: 8px;
  --shadow: 0 24px 60px rgba(10, 24, 40, .11);
  --gold: #d2ac78;
  --gold-deep: #9a6d3e;
  --paper: #f3f1ec;
  --surface: #ffffff;
  --deep: #081321;
}

html { scroll-padding-top: 124px; }

body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection { color: #fff; background: #8a6037; }

.shell { width: min(1200px, calc(100% - 48px)); }

.skip-link {
  color: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  color: #fff;
  background: rgba(8, 19, 33, .97);
  border: 0;
  border-bottom: 1px solid rgba(210, 172, 120, .42);
  box-shadow: 0 14px 40px rgba(4, 10, 18, .2);
  backdrop-filter: blur(14px);
}

.header-inner { min-height: 82px; gap: 34px; }

.brand {
  align-items: center;
  gap: 0;
  color: #fff;
  font-family: "Aptos Display", "Segoe UI", Arial, sans-serif;
  font-size: 25px;
  font-weight: 760;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

.brand small {
  align-self: stretch;
  display: grid;
  place-items: center;
  margin-left: 9px;
  padding: 5px 7px;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(210, 172, 120, .62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.primary-nav { gap: 33px; }

.primary-nav a {
  position: relative;
  color: #eef1f5;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: none;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .2s ease;
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] { color: var(--gold); }

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-phone {
  color: #fff;
  background: transparent;
  padding: 10px 15px;
  border: 1px solid rgba(210, 172, 120, .72);
  border-radius: 4px;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .02em;
}

.header-phone:hover,
.header-phone:focus-visible { color: var(--navy); background: var(--gold); }

.nav-toggle span:not(.sr-only) { background: #fff; }

.hire-desk-strip {
  color: #dce3ec;
  background: #122035;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hire-desk-strip .shell {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hire-desk-strip span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 9px 2px 0;
  background: var(--gold);
  border-radius: 50%;
}

h1,
h2,
h3 {
  color: inherit;
  font-family: "Aptos Display", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: none;
}

h1 { font-size: clamp(50px, 5.9vw, 82px); line-height: 1.01; }
h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; }
h3 { font-size: 25px; line-height: 1.16; }

.eyebrow {
  display: inline-block;
  margin: 0 0 19px;
  padding: 0 0 10px;
  color: var(--gold);
  background: transparent;
  border-bottom: 1px solid rgba(210, 172, 120, .72);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow.dark { color: #80582f; background: transparent; border-color: #c5a176; }

.hero {
  min-height: 720px;
  color: #fff;
  background: var(--deep);
  border-bottom: 1px solid #bda37e;
}

.hero::before { display: none; }

.hero-image {
  right: 0;
  left: 0;
  width: 100%;
  filter: saturate(.72) contrast(1.08);
}

.hero-shade {
  inset: 0;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(7, 16, 29, .98) 0%, rgba(7, 16, 29, .91) 44%, rgba(7, 16, 29, .44) 72%, rgba(7, 16, 29, .2) 100%),
    linear-gradient(0deg, rgba(7, 16, 29, .18), transparent 40%);
  clip-path: none;
}

.hero-content { padding-block: 108px 116px; }
.hero-content > * { max-width: 735px; }
.hero-content h1 { margin-bottom: 28px; text-wrap: balance; }

.hero-lead {
  max-width: 650px !important;
  color: #e0e6ed;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.65;
}

.actions { gap: 14px; }

.button {
  min-height: 54px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 9px 25px rgba(4, 10, 20, .14);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: .015em;
  text-transform: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(4, 10, 20, .2); }

.button-primary { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.button-primary:hover,
.button-primary:focus-visible { color: var(--navy); background: #e2c292; border-color: #e2c292; }

.button-secondary { color: #fff; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .48); }
.button-secondary:hover,
.button-secondary:focus-visible { color: var(--navy); background: #fff; border-color: #fff; }

.hero-points { gap: 26px; padding-top: 27px; color: #e5eaf0; }

.hero-points li {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .02em;
  text-transform: none;
}

.hero-points li::before { content: "✓"; margin-right: 8px; color: var(--gold); }

.section { padding-block: 104px; }
.section.shell { background: transparent; }

.section-intro {
  max-width: 775px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.72;
}

.section-soft {
  background: #eae7e0;
  border-block: 1px solid #d0ccc3;
}

.card-grid { gap: 24px; }

.machine-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid #d8d5ce;
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(13, 29, 48, .09);
  transition: transform .22s ease, box-shadow .22s ease;
}

.machine-card:hover { transform: translateY(-5px); box-shadow: 0 27px 60px rgba(13, 29, 48, .14); }
.machine-card::before { display: none; }
.machine-card:nth-child(2) { transform: none; }
.machine-card:nth-child(2):hover { transform: translateY(-5px); }

.machine-card img {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid #dedbd4;
  filter: saturate(.78) contrast(1.05);
  transition: transform .45s ease;
}

.machine-card:hover img { transform: scale(1.025); }
.machine-card > div { padding: 29px; }
.machine-card p { color: var(--muted); }

.machine-card a,
.text-link {
  color: #7b542f;
  font-weight: 720;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.split-layout { gap: 76px; }

.feature-figure,
.rounded-image {
  overflow: hidden;
  border: 1px solid #cfcac0;
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.feature-figure figcaption {
  padding: 19px 22px;
  color: #dce2e9;
  background: var(--navy);
  border-top: 1px solid rgba(210, 172, 120, .35);
  font-size: 13px;
}

.reason-grid {
  gap: 14px;
  border: 0;
}

.reason-grid article {
  padding: 24px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid #d3cec4;
  border-radius: 6px;
}

.reason-grid article:nth-child(2),
.reason-grid article:nth-child(3) { background: rgba(255, 255, 255, .7); }
.reason-grid span { color: #855d35; font-size: 12px; letter-spacing: .12em; }
.reason-grid h3 { margin-top: 11px; font-size: 22px; }
.reason-grid p { color: var(--muted); }

.steps-grid {
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d4d0c8;
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(13, 29, 48, .07);
}

.steps-grid article,
.steps-grid article:nth-child(even) {
  min-height: 315px;
  padding: 30px 28px;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-right: 1px solid #d8d5ce;
}

.steps-grid article:last-child { border-right: 0; }
.steps-grid article:nth-child(even) p,
.steps-grid p { color: var(--muted); }

.steps-grid span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 27px;
  color: var(--navy);
  background: #eee5d8;
  border: 1px solid #d4b98f;
  border-radius: 50%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
}

.dark-panel {
  color: #fff;
  background:
    radial-gradient(circle at 85% 18%, rgba(210, 172, 120, .1), transparent 24%),
    linear-gradient(135deg, #091421, #162a42);
  border-block: 1px solid #a78b65;
}

.dark-copy p:not(.eyebrow) { color: #d7e0e9; }
.dark-panel .eyebrow { color: var(--gold); background: transparent; border-color: rgba(210, 172, 120, .62); }

.faq-list {
  gap: 10px;
  border: 0;
}

.faq-list details {
  background: rgba(255, 255, 255, .82);
  border: 1px solid #d3d0ca;
  border-radius: 5px;
}

.faq-list details:last-child { border-bottom: 1px solid #d3d0ca; }
.faq-list summary { font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.faq-list summary::after { color: #835b34; font-weight: 500; }

.quote-section {
  color: var(--ink);
  background: #e8e4dc;
  border-block: 1px solid #cbc5ba;
}

.quote-section .eyebrow.dark { color: #80582f; background: transparent; }
.quote-section .section-intro { color: var(--muted); font-weight: 400; }
.tick-list li::before { color: var(--navy); background: var(--gold); border-radius: 50%; }

.enquiry-form {
  padding: 36px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d0ccc4;
  border-radius: 7px;
  box-shadow: var(--shadow);
}

.field label,
.consent { color: var(--ink); }

.field input,
.field select,
.field textarea {
  color: var(--ink);
  background: #fbfbfa;
  border: 1px solid #aeb5bd;
  border-radius: 4px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(154, 109, 62, .18);
  border-color: #8d6237;
}

.consent { color: #4c5968; }
.consent a { color: #744d28; }

.cta-band {
  color: #fff;
  background: linear-gradient(115deg, #6f4928, #8a6037);
  border: 0;
  border-bottom: 1px solid #6f4d2c;
}

.cta-inner .eyebrow { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .62); }
.button-light { color: var(--navy); background: #fff; }
.button-light:hover,
.button-light:focus-visible { color: #fff; background: var(--navy); }

.site-footer {
  color: #cad2dc;
  background: #081321;
  border-top: 0;
}

.site-footer .brand { color: #fff; }
.footer-grid h2 { color: var(--gold); font-weight: 700; }
.footer-grid a:not(.brand) { color: #d9e0e8; }
.footer-grid a:not(.brand):hover { color: #fff; }
.footer-bottom { border-color: rgba(210, 172, 120, .22); }

/* Interior pages */
.page-hero {
  color: #fff;
  background: linear-gradient(125deg, #091522, #19314a);
  border-bottom: 1px solid #a88d68;
}

.page-hero-image { min-height: 610px; }

.page-hero-image > img {
  inset: 0;
  width: 100%;
  border: 0;
  filter: saturate(.72) contrast(1.06);
}

.page-hero-shade {
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(7, 17, 29, .98), rgba(7, 17, 29, .87) 46%, rgba(7, 17, 29, .34) 78%);
  clip-path: none;
}

.page-hero-content > p:not(.eyebrow) { color: #dde4ec; }
.breadcrumbs { color: #cbd4de; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.breadcrumbs a { color: #fff; }

.availability-note {
  color: #4d402f;
  background: #eee7dc;
  border: 1px solid #d5c3a8;
  border-left: 4px solid #9a6d3e;
  border-radius: 3px;
}

.category-grid,
.industry-grid { gap: 25px; }

.category-card,
.industry-grid article,
.content-card,
.contact-cards a,
.brief-box {
  overflow: hidden;
  border: 1px solid #d4d1ca;
  border-radius: 7px;
  box-shadow: 0 18px 44px rgba(13, 29, 48, .08);
}

.category-card,
.industry-grid article { background: #fff; }

.category-card img,
.industry-grid article > img {
  border: 0;
  border-bottom: 1px solid #dedbd5;
  filter: saturate(.77) contrast(1.05);
}

.category-card h2,
.industry-grid h2 { font-size: 32px; }

.category-card > div,
.industry-grid article > div { padding: 30px; }

.card-kicker {
  display: inline-block;
  padding: 0 0 6px;
  color: #7b542f !important;
  background: transparent;
  border-bottom: 1px solid #c9a982;
}

.data-list { border-top: 1px solid var(--line); }
.data-list li { border-bottom: 1px solid var(--line); }
.process-list article { border-bottom: 1px solid var(--line); }
.process-list article > span { color: #91653a; font-family: inherit; font-size: 31px; font-weight: 650; }

.content-card { background: #fff; }
.contact-cards span { color: #7b542f; }

.brief-box {
  color: #fff;
  background: linear-gradient(145deg, #0c1a2a, #1b3048);
  border-color: #263c54;
}

.legal-content a,
.message-help a { color: #744d28; }

.message-page { background: linear-gradient(135deg, #e9e5dc, #f8f7f4); }

.message-card {
  border: 1px solid #cec9bf;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.message-card .brand { color: var(--navy); }
.message-card .brand small { color: #7d552e; border-color: #c5a77e; }

*:focus-visible { outline-color: var(--gold); outline-offset: 4px; }

@media (max-width: 900px) {
  .js .primary-nav {
    top: 82px;
    color: #fff;
    background: #0b1726;
    border-bottom: 1px solid rgba(210, 172, 120, .5);
    box-shadow: 0 22px 40px rgba(4, 10, 18, .24);
  }

  .primary-nav a { color: #fff; }
  .hero { min-height: 640px; padding-top: 0; }
  .hero-image { top: 0; width: 100%; height: 100%; border: 0; }
  .hero-shade { top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(7, 16, 29, .96), rgba(7, 16, 29, .65)); }
  .hero-content { padding-block: 88px 96px; }
  .steps-grid { border-bottom: 1px solid #d4d0c8; }
  .steps-grid article,
  .steps-grid article:nth-child(even) { min-height: 0; border-right: 1px solid #d8d5ce; border-bottom: 1px solid #d8d5ce; }
  .steps-grid article:nth-child(2n) { border-right: 0; }
  .page-hero-image { min-height: 540px; padding-top: 0; }
  .page-hero-image > img { top: 0; width: 100%; height: 100%; border: 0; }
  .page-hero-shade { top: 0; width: 100%; height: 100%; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 30px, 1200px); }
  .site-header .brand { font-size: 21px; letter-spacing: .08em; }
  .brand small { margin-left: 6px; }
  .hire-desk-strip .shell { min-height: 34px; justify-content: center; }
  .hire-desk-strip span:not(:first-child) { display: none; }
  h1 { font-size: clamp(43px, 13vw, 62px); }
  h2 { font-size: clamp(34px, 10.5vw, 48px); }
  .hero { min-height: 650px; padding-top: 0; }
  .hero-image { height: 100%; }
  .hero-shade { top: 0; height: 100%; background: linear-gradient(90deg, rgba(7, 16, 29, .96), rgba(7, 16, 29, .73)); }
  .hero-content { padding-block: 76px 82px; }
  .hero-lead { font-size: 18px; }
  .hero-points { gap: 8px; }
  .section { padding-block: 76px; }
  .card-grid,
  .reason-grid,
  .steps-grid,
  .footer-grid { grid-template-columns: 1fr; }
  .machine-card:nth-child(2) { transform: none; }
  .steps-grid article,
  .steps-grid article:nth-child(even) { border-right: 0; }
  .enquiry-form { padding: 23px; }
  .page-hero-image { min-height: 540px; padding-top: 0; }
  .page-hero-image > img,
  .page-hero-shade { top: 0; height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .machine-card,
  .machine-card img,
  .primary-nav a::after { transition: none; }
}