@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/*
  TBR TRANSPORT LTD — British route theme
  This file deliberately sits after styles.css so the original functionality
  stays intact while the visual language can be swapped independently.
*/
:root {
  --ink: #071d3b;
  --ink-2: #0d3157;
  --ink-3: #155080;
  --paper: #f6f1e7;
  --paper-2: #e9e1d4;
  --white: #ffffff;
  --signal: #cf1736;
  --signal-dark: #aa102a;
  --red: #cf1736;
  --blue: #1f5f99;
  --muted: #5f6b78;
  --line: rgba(7, 29, 59, .15);
  --line-dark: rgba(255, 255, 255, .17);
  --shadow-sm: 0 12px 36px rgba(7, 29, 59, .09);
  --shadow-md: 0 28px 80px rgba(7, 29, 59, .16);
  --shadow-lg: 0 38px 110px rgba(7, 29, 59, .23);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
}

body {
  background:
    linear-gradient(90deg, rgba(7, 29, 59, .018) 1px, transparent 1px),
    var(--paper);
  background-size: 72px 72px;
  font-family: "Manrope", Arial, sans-serif;
}

h1, h2, h3, h4,
.brand-copy strong,
.route-point strong,
.footer-title,
.faq-question span:first-child,
.record-item strong,
.cookie-settings-row strong {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: -.025em;
}

h1 { font-size: clamp(4rem, 8.5vw, 8.6rem); line-height: .88; }
h2 { font-size: clamp(2.8rem, 5.4vw, 5.5rem); line-height: .92; }
h3 { letter-spacing: -.01em; }

::selection { color: var(--white); background: var(--red); }

.eyebrow {
  font-family: "Manrope", sans-serif;
  font-size: .7rem;
  letter-spacing: .18em;
}
.eyebrow::before {
  width: 34px;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0 55%, var(--white) 55% 68%, var(--blue) 68%);
  border-radius: 0;
}
.section-white .eyebrow::before,
.section .eyebrow::before { box-shadow: inset 0 0 0 1px rgba(7,29,59,.06); }

.btn {
  min-height: 52px;
  padding-inline: 23px;
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
  border-radius: 10px;
  box-shadow: 0 8px 0 rgba(7,29,59,.13);
  font-size: .88rem;
  letter-spacing: .015em;
}
.btn:hover {
  background: var(--signal-dark);
  border-color: var(--signal-dark);
  box-shadow: 0 11px 0 rgba(7,29,59,.14), 0 18px 35px rgba(207,23,54,.18);
}
.btn-outline {
  color: var(--ink);
  background: transparent;
  border-color: rgba(7,29,59,.42);
  box-shadow: none;
}
.btn-outline:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.btn-dark { color: var(--white); background: var(--ink); border-color: var(--ink); }
.btn-dark:hover { color: var(--white); background: var(--blue); border-color: var(--blue); }
.btn-white, .btn-paper { color: var(--ink); box-shadow: none; }

.utility-bar {
  color: rgba(255,255,255,.84);
  background: var(--red);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.utility-bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ink) 0 33.333%, var(--white) 33.333% 66.666%, var(--red) 66.666%);
}
.status-dot { background: var(--white); box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.utility-links a:hover { color: var(--white); text-decoration: underline; }

.site-header {
  color: var(--ink);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(7,29,59,.12);
  backdrop-filter: blur(18px) saturate(1.2);
}
.site-header.scrolled { background: rgba(255,255,255,.985); box-shadow: 0 14px 45px rgba(7,29,59,.1); }
.brand img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 7px 18px rgba(7,29,59,.16); }
.brand-copy strong { font-size: 1.08rem; letter-spacing: .02em; }
.brand-copy small { color: #687484; font-size: .62rem; letter-spacing: .13em; }
.nav-links a { color: rgba(7,29,59,.7); font-weight: 750; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { height: 3px; bottom: -10px; background: var(--red); }
.nav-toggle { color: var(--ink); background: var(--paper); border-color: var(--line); }
.site-header .btn-sm { min-height: 44px; box-shadow: none; }

/* Hero: cream editorial layout + UK motorway sign language */
.hero {
  min-height: calc(100svh - 116px);
  color: var(--ink);
  background:
    linear-gradient(118deg, transparent 0 55%, rgba(31,95,153,.07) 55% 58%, transparent 58%),
    var(--paper);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  background:
    linear-gradient(rgba(7,29,59,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,29,59,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, black, transparent 68%);
}
.hero::after {
  width: 9px;
  height: 84%;
  top: 8%;
  right: auto;
  left: 0;
  background: linear-gradient(var(--red) 0 39%, var(--white) 39% 47%, var(--blue) 47% 100%);
}
.hero-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(38px, 6vw, 92px); padding-block: 66px; }
.hero-kicker { color: var(--blue); }
.hero-title { max-width: 720px; margin-bottom: 30px; text-transform: uppercase; }
.hero-title .accent {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .08em;
  text-decoration-color: rgba(207,23,54,.22);
}
.hero-lead { max-width: 650px; color: #4f5d6c; font-size: clamp(1rem, 1.45vw, 1.18rem); }
.hero-chips li {
  color: var(--ink);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(7,29,59,.14);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(7,29,59,.06);
}
.hero-chips i { color: var(--red); }
.hero-visual { min-height: 680px; }
.hero-image {
  inset: 18px 0 14px 6%;
  padding: 10px;
  background: var(--white);
  border: 1px solid rgba(7,29,59,.15);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: rotate(.7deg);
}
.hero-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 10px;
  border: 2px solid rgba(255,255,255,.68);
  border-radius: 10px;
  pointer-events: none;
}
.hero-image::after {
  inset: 10px;
  background: linear-gradient(180deg, rgba(7,29,59,.02), rgba(7,29,59,.48));
  border-radius: 10px;
}
.hero-image img { height: 100%; object-position: 54% 50%; border-radius: 10px; }
.hero-badge {
  top: 4px;
  left: -8px;
  width: 116px;
  height: 116px;
  color: var(--white);
  background: var(--red);
  border: 8px solid var(--white);
  border-radius: 50%;
  transform: rotate(-7deg);
  box-shadow: 0 15px 38px rgba(7,29,59,.23);
}
.hero-badge::after { content: ""; }
.hero-badge span { display: grid; gap: 1px; max-width: 88px; }
.hero-badge strong { font: 800 2rem/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.hero-badge small { font: 700 .56rem/1.15 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.route-card {
  right: -18px;
  bottom: 50px;
  width: min(410px, 92%);
  padding: 22px 24px 18px;
  color: var(--white);
  background: #1769aa;
  border: 4px solid var(--white);
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(7,29,59,.36), inset 0 0 0 1px rgba(255,255,255,.45);
  backdrop-filter: none;
}
.route-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 6px;
  pointer-events: none;
}
.route-card-top, .route-points, .road-shields, .route-svg { position: relative; z-index: 1; }
.route-card-top span { color: rgba(255,255,255,.78); }
.route-live { color: var(--white); }
.route-live::before { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.15); }
.route-point small { color: rgba(255,255,255,.68); }
.route-point strong { color: var(--white); font-size: 1.55rem; letter-spacing: .01em; }
.route-arrow { color: var(--white); }
.road-shields { display: flex; gap: 8px; margin-top: 17px; }
.road-shield {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  height: 29px;
  padding-inline: 10px;
  color: var(--ink);
  background: var(--white);
  border-radius: 5px;
  font: 800 .82rem/1 "Manrope", sans-serif;
  letter-spacing: .02em;
}
.road-shield.motorway { color: var(--white); background: #071d8a; border: 1px solid rgba(255,255,255,.8); }
.route-line-bg { stroke: rgba(255,255,255,.3); }
.route-line-progress { stroke: var(--white); }
.route-node { fill: #1769aa; stroke: var(--white); }
.photo-caption {
  position: absolute;
  z-index: 5;
  top: 62px;
  right: -8px;
  display: grid;
  gap: 2px;
  padding: 11px 14px 11px 20px;
  color: var(--ink);
  background: #ffd62e;
  border: 3px solid var(--ink);
  border-radius: 7px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(1.5deg);
}
.photo-caption::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 3px; background: var(--ink); }
.photo-caption span { font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.photo-caption strong { font-family: "Barlow Condensed", sans-serif; font-size: 1rem; }

.company-strip { background: var(--ink); border-top: 7px solid var(--red); }
.company-strip-grid { position: relative; }
.company-strip-grid::before {
  content: "GB";
  position: absolute;
  right: 14px;
  bottom: -30px;
  color: rgba(255,255,255,.04);
  font: 800 9rem/1 "Barlow Condensed", sans-serif;
}
.company-fact { position: relative; }
.company-fact small { color: rgba(255,255,255,.5); }
.company-fact strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.12rem; letter-spacing: .015em; }
.copy-mini { color: rgba(255,255,255,.58); }
.copy-mini:hover { color: var(--white); }

.ticker { color: var(--white); background: var(--red); border: 0; }
.ticker-track span { font-family: "Manrope", sans-serif; font-size: .72rem; letter-spacing: .15em; }
.ticker-track i { color: var(--white); font-size: .32rem; }

/* Main content */
.section { padding: 108px 0; }
.section-white { background: #fffdfa; }
.section-blue {
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 42px 42px,
    var(--ink-2);
}
.section-blue::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--red) 0 22%, var(--white) 22% 30%, var(--blue) 30% 100%);
}
.section-head p { color: #64707d; }

.service-grid { gap: 16px; }
.service-card {
  min-height: 350px;
  padding: 31px 28px 27px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(7,29,59,.15);
  border-radius: 8px;
  box-shadow: 8px 8px 0 rgba(7,29,59,.06);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--red);
}
.service-card::after { color: rgba(7,29,59,.055); font-size: 5rem; }
.service-card.featured {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 8px 8px 0 rgba(207,23,54,.55);
}
.service-card.featured::before { background: var(--red); }
.service-card.featured::after { color: rgba(255,255,255,.055); }
.service-icon {
  width: 54px;
  height: 54px;
  color: var(--white);
  background: var(--blue);
  border-radius: 7px;
  box-shadow: 5px 5px 0 rgba(7,29,59,.12);
}
.service-card.featured .service-icon { color: var(--ink); background: var(--white); }
.service-card h3 { font-size: 1.8rem; text-transform: uppercase; }
.service-card.featured .text-link { color: #fff; }
.text-link { color: var(--red); }

.editorial-media { min-height: 670px; }
.editorial-media-main {
  inset: 0 10% 0 0;
  padding: 9px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.editorial-media-main img { border-radius: 5px; filter: saturate(.92) contrast(1.04); }
.editorial-media-small {
  right: -2%;
  bottom: 38px;
  width: 50%;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  transform: rotate(-3deg);
}
.editorial-media-small img { border-radius: 4px; }
.editorial-stamp {
  top: 23px;
  right: 2%;
  width: 128px;
  height: 128px;
  color: var(--white);
  background: var(--red);
  border: 8px double var(--white);
  border-radius: 50%;
  font-size: .62rem;
  line-height: 1.25;
  transform: rotate(8deg);
}
.editorial-copy > p { color: #5c6976; }
.check-list li { border-color: rgba(7,29,59,.12); }
.check-list i { color: var(--white); background: var(--blue); border-radius: 7px; }

.loads-toolbar p { color: rgba(255,255,255,.68); }
.slider-btn { color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; }
.slider-btn:hover { color: var(--ink); background: var(--white); }
.load-card { min-height: 440px; border: 5px solid var(--white); border-radius: 8px; box-shadow: 9px 9px 0 rgba(0,0,0,.16); }
.load-card-image { height: 224px; }
.load-card-image img { filter: saturate(.86) contrast(1.06); }
.load-card-body { padding: 23px 22px 25px; }
.load-card-kicker { color: var(--red); }
.load-card h3 { font-size: 1.75rem; text-transform: uppercase; }
.swiper-pagination-bullet { background: rgba(255,255,255,.48); }
.swiper-pagination-bullet-active { background: var(--red); }

.process-line { height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 31px); opacity: .17; }
.step-no {
  color: var(--white);
  background: var(--blue);
  border: 7px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(7,29,59,.16), 6px 7px 0 rgba(7,29,59,.08);
  font-family: "Barlow Condensed", sans-serif;
}
.process-step:nth-child(2) .step-no,
.process-step:nth-child(4) .step-no { color: var(--white); background: var(--red); }
.process-step h3 { font-size: 1.5rem; text-transform: uppercase; }

.company-panel {
  background:
    linear-gradient(120deg, transparent 0 72%, rgba(255,255,255,.04) 72%),
    var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 12px 12px 0 rgba(207,23,54,.62);
}
.company-panel::before {
  width: 430px;
  height: 430px;
  top: -220px;
  right: -80px;
  background: radial-gradient(circle, rgba(31,95,153,.5), transparent 69%);
}
.company-panel::after {
  content: "REGISTERED IN ENGLAND";
  position: absolute;
  right: 28px;
  bottom: 12px;
  color: rgba(255,255,255,.05);
  font: 800 clamp(3rem, 6vw, 6rem)/1 "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.company-panel-grid { position: relative; z-index: 1; }
.company-record { background: rgba(255,255,255,.035); border-radius: 7px; }
.record-item { min-height: 120px; }
.record-item strong { font-size: 1.2rem; letter-spacing: .01em; }
.record-link { color: var(--white); text-decoration-color: var(--red); }

.area-grid { gap: 42px; }
.area-tags li { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.map-shell { min-height: 540px; background: #dbe4eb; border: 8px solid var(--white); border-radius: 10px; box-shadow: var(--shadow-md); }
.map-shell::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(7,29,59,.18);
}
.map-road-label {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-width: 220px;
  padding: 12px 15px;
  color: var(--white);
  background: #19713a;
  border: 3px solid var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(7,29,59,.24), inset 0 0 0 1px rgba(255,255,255,.6);
}
.map-road-label span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 31px;
  color: var(--ink);
  background: var(--white);
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 900;
}
.map-road-label strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; line-height: 1; }
.map-road-label small { color: rgba(255,255,255,.73); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.map-placeholder { background: linear-gradient(rgba(219,228,235,.84), rgba(219,228,235,.84)), radial-gradient(circle at 30% 40%, #fff, transparent 55%); }
.map-placeholder-inner { border-radius: 8px; }

.faq-list { border-top: 3px solid var(--ink); }
.faq-item { border-color: rgba(7,29,59,.16); }
.faq-question span:first-child { font-size: 1.22rem; text-transform: uppercase; }
.faq-plus { color: var(--white); background: var(--blue); border: 0; border-radius: 7px; }
.faq-item.open .faq-plus { color: var(--white); background: var(--red); }

.contact-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 44px 44px,
    var(--ink);
  border-top: 8px solid var(--red);
}
.contact-section::before { background: radial-gradient(circle, rgba(31,95,153,.33), transparent 68%); }
.contact-detail { border-radius: 7px; }
.contact-detail > i { color: var(--white); background: var(--red); border-radius: 6px; }
.form-panel {
  border: 1px solid rgba(7,29,59,.13);
  border-radius: 10px;
  box-shadow: 12px 12px 0 rgba(31,95,153,.65), 0 35px 90px rgba(0,0,0,.22);
}
.form-panel h3 { font-size: 2rem; text-transform: uppercase; }
.field input, .field select, .field textarea { border-radius: 6px; background: #fbfaf7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31,95,153,.1); }

.site-footer { background: #041329; border-top: 1px solid rgba(255,255,255,.12); }
.site-footer::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--red) 0 28%, var(--white) 28% 35%, var(--blue) 35% 100%);
}
.footer-links a:hover, .footer-links button:hover { color: var(--white); }

/* Legal / utility pages */
.page-hero {
  background:
    linear-gradient(125deg, transparent 0 60%, rgba(255,255,255,.05) 60%),
    var(--ink);
  border-bottom: 8px solid var(--red);
}
.page-hero::before {
  content: "GB";
  position: absolute;
  right: 5vw;
  bottom: -34px;
  color: rgba(255,255,255,.045);
  font: 800 15rem/1 "Barlow Condensed", sans-serif;
}
.page-hero::after { background: radial-gradient(circle, rgba(31,95,153,.35), transparent 68%); }
.page-hero h1 { text-transform: uppercase; }
.legal-toc { border-radius: 8px; box-shadow: 7px 7px 0 rgba(7,29,59,.07); }
.legal-note { background: #eaf0f5; border-left-color: var(--red); border-radius: 0 6px 6px 0; }
.utility-page {
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%) 0 0 / 46px 46px,
    var(--ink);
}
.utility-card { border-radius: 12px; box-shadow: 12px 12px 0 rgba(207,23,54,.66); }
.utility-code { color: var(--white); background: var(--red); border-radius: 8px; }
.modal-dialog { border-radius: 10px; }
.cookie-inner { background: rgba(4,19,41,.98); border-radius: 9px; }
.switch input:checked + span { background: var(--red); }

@media (max-width: 1080px) {
  .nav-links { border-radius: 9px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 880px; }
  .hero-visual { min-height: 650px; }
  .hero-image { left: 0; }
  .photo-caption { right: 12px; }
}

@media (max-width: 820px) {
  .section { padding: 82px 0; }
  .hero-grid { padding-block: 64px 78px; }
  .hero-title { font-size: clamp(4rem, 14vw, 6.6rem); }
  .hero-visual { min-height: 560px; }
  .hero-image { inset: 12px 0 10px; }
  .hero-badge { left: 10px; }
  .route-card { right: 10px; }
  .photo-caption { top: 45px; }
}

@media (max-width: 620px) {
  .utility-bar::after { bottom: -3px; height: 3px; }
  .brand img { width: 42px; height: 42px; }
  .hero { background: var(--paper); }
  .hero::after { width: 6px; }
  .hero-grid { padding-top: 52px; }
  .hero-title { font-size: clamp(3.7rem, 18vw, 5.5rem); }
  .hero-lead { font-size: 1rem; }
  .hero-chips { grid-template-columns: 1fr; }
  .hero-visual { min-height: 475px; }
  .hero-image { padding: 6px; border-radius: 11px; transform: none; }
  .hero-image::before, .hero-image::after { inset: 6px; border-radius: 6px; }
  .hero-image img { border-radius: 6px; }
  .hero-badge { display: grid; top: -8px; left: 8px; width: 90px; height: 90px; border-width: 6px; }
  .hero-badge strong { font-size: 1.55rem; }
  .hero-badge small { font-size: .47rem; }
  .photo-caption { display: none; }
  .route-card { right: 8px; bottom: 14px; left: 8px; width: auto; padding: 18px 19px 15px; border-width: 3px; }
  .route-point strong { font-size: 1.25rem; }
  .road-shields { margin-top: 12px; }
  .route-svg { margin-top: 2px; }
  .service-card { min-height: 315px; box-shadow: 5px 5px 0 rgba(7,29,59,.06); }
  .editorial-media { min-height: 490px; }
  .editorial-media-main { right: 5%; }
  .editorial-media-small { right: 0; width: 46%; }
  .editorial-stamp { width: 100px; height: 100px; right: 1%; border-width: 6px; }
  .load-card { box-shadow: 6px 6px 0 rgba(0,0,0,.16); }
  .company-panel { box-shadow: 7px 7px 0 rgba(207,23,54,.62); }
  .company-panel::after { display: none; }
  .map-road-label { top: 12px; left: 12px; min-width: 194px; padding: 9px 11px; }
  .form-panel { box-shadow: 7px 7px 0 rgba(31,95,153,.65), 0 25px 65px rgba(0,0,0,.19); }
}

/* Local fallback for the mobile menu icon if the icon CDN is unavailable. */
.nav-toggle i { display: none; }
.nav-toggle::before {
  content: "";
  width: 20px;
  height: 14px;
  background: linear-gradient(var(--ink) 0 2px, transparent 2px 6px, var(--ink) 6px 8px, transparent 8px 12px, var(--ink) 12px 14px);
}