/* Didge website.
   The designed pages (home, platform, Ridgy, sensors, company, contact) use the same grid the Squarespace site
   used: 24 columns on desktop and 8 on phones, with each block placed in recorded cells (--d desktop, --m phone).
   Sizes below were measured on the live site at 1440px and 390px and scale smoothly between the two. */
:root {
  --ink: #fff;
  --plum: #361732;
  --magenta: #b429a5;
  --line: rgba(255, 255, 255, .2);
  --head: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --h1: clamp(56.5px, calc(45.886px + 2.7246vw), 90.26px);
  --h2: clamp(41.32px, calc(34.679px + 1.7029vw), 62.41px);
  --h3: clamp(26.13px, calc(23.472px + .6811vw), 34.56px);
  --h4: clamp(22.08px, calc(20.483px + .4087vw), 27.14px);
  --large: clamp(18.53px, calc(17.868px + .1703vw), 20.641px);
  --small: 14.27px;
  --gut: 6vw;
  --cw: 88vw;
}
@media (min-width: 768px) { :root { --gut: 4vw; --cw: min(1547px, 92vw); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: var(--ink); font: 400 16px/1.5 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 500; letter-spacing: -.02em; margin: 2rem 0; }
h1 { font-size: var(--h1); line-height: 1.008; }
h2 { font-size: var(--h2); line-height: 1.08; }
h3 { font-size: var(--h3); line-height: 1.152; }
h4 { font-size: var(--h4); line-height: 1.171; }
h1 strong, h2 strong, h3 strong, h4 strong { font-weight: 700; }
p { margin: 1rem 0; }
.t-large { font-size: var(--large); }
.t-small { font-size: var(--small); }
blockquote { margin: 0 40px; }
.rt .gap { margin: 1rem 0; }
.rt.plain a { text-decoration: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; }
:focus-visible { outline: 2px solid #b6f23a; outline-offset: 3px; }
.hl { background: linear-gradient(#d23bd0, #d23bd0) 0 100% / 100% .07em no-repeat; padding-bottom: .04em; }

/* ---------------------------------------------------------------- header */
.site-header { background: #000; position: relative; z-index: 50; }
.site-header .bar { display: flex; align-items: center; gap: 29px; min-height: max(100px, calc(66.3px + 2.34vw)); padding: 0 var(--gut); }
.brand img { width: 133px; height: 60px; object-fit: contain; }
.primary { display: flex; flex-wrap: wrap; gap: 0 29px; flex: 1; }
.primary a { text-decoration: none; padding: 1.6px 0; line-height: 1.5; }
.primary a:hover, .primary a[aria-current] { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.tools { display: flex; align-items: center; gap: 29px; margin-left: auto; }
.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 20px; height: 20px; }
.lang summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg) translateY(-3px); margin-left: 4px; }
.lang .menu { position: absolute; right: 0; top: calc(100% + 10px); background: #000; border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 190px; z-index: 5; }
.lang .menu a { display: block; padding: 9px 12px; border-radius: 6px; text-decoration: none; }
.lang .menu a:hover { background: #1b1b1b; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; padding: 6px; cursor: pointer; }
.menu-toggle svg { width: 30px; height: 30px; }
@media (max-width: 1020px) {
  .site-header .bar { flex-wrap: wrap; gap: 12px; min-height: 106px; }
  .brand img { width: 110px; height: 50px; }
  .menu-toggle { display: block; }
  .login { display: none !important; }
  .tools { gap: 14px; }
  .primary { display: none; order: 3; flex-basis: 100%; flex-direction: column; padding: 0 0 18px; }
  .primary.open { display: flex; }
  .primary a { padding: 12px 0; font-size: 1.25rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; font: 600 13.41px/1.2 var(--body); border-radius: 10px; padding: 24px 35.2px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: opacity .2s; }
.btn:hover { opacity: .8; }
.btn-primary { background: #fff; color: #000; }
.btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.btn-lg { font-size: 16px; padding: 18px 20.8px; min-height: 57px; }
.btn-plum { background: var(--plum); color: #fff; padding: 20px 28px; }
.btn-block { width: 100%; }
.login { text-transform: uppercase; letter-spacing: .085em; font-size: 12.544px; }

/* ---------------------------------------------------------------- the section grid */
.sec { position: relative; isolation: isolate; overflow-x: clip; display: flex; flex-direction: column; justify-content: var(--va, center);
  min-height: var(--minh, 0); padding: var(--ptm, var(--pt, 0)) 0 var(--pbm, var(--pb, 0)); }
main > .sec:first-child { min-height: calc(var(--minh, 0px) - 100px); }
@media (min-width: 768px) { .sec { padding: var(--pt, 0) 0 var(--pb, 0); } }
.sec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.sec.t-white { color: var(--plum); }
.sec.glow { background: radial-gradient(46% 100% at 50% 108%, #5a47e8 0%, #4333c4 20%, #2a2086 42%, #130e44 66%, #06051a 86%, #000 100%); }
.fe { display: grid; position: relative; gap: var(--gap);
  grid-template-columns: minmax(calc(var(--gut) - var(--gap)), 1fr) repeat(8, minmax(0, calc((var(--cw) - 7 * var(--gap)) / 8))) minmax(calc(var(--gut) - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rm), minmax(24px, auto)); }
.b { grid-area: var(--m); z-index: var(--zm, var(--z, 1)); position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: var(--j, flex-start); }
.b.hide-m { display: none; }
@media (min-width: 768px) {
  .fe { grid-template-columns: minmax(calc(var(--gut) - var(--gap)), 1fr) repeat(24, minmax(0, calc((var(--cw) - 23 * var(--gap)) / 24))) minmax(calc(var(--gut) - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rd), minmax(calc(var(--cw) * .0215), auto)); }
  .b { grid-area: var(--d); z-index: var(--z, 1); }
  .b.hide-m { display: flex; }
  .b.hide-d { display: none; }
}

/* text */
.rt :is(h1, h2, h3, h4, p, li), .acc .body :is(p, li) { white-space: pre-wrap; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child, .rt blockquote > :last-child { margin-bottom: 0; }
.rt blockquote > :first-child { margin-top: 0; }
.rt ul, .rt ol { padding-left: 2.5em; }
.b.tinted { border-radius: var(--r, 0); overflow: hidden; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.b.tinted .rt { flex: 1; display: flex; flex-direction: column; justify-content: var(--j, flex-start); }

/* images */
.b.image, .b.shape, .b.video { container-type: size; }
.imgw { position: absolute; inset: 0; overflow: hidden; }
.imgw img { width: 100%; height: 100%; }
.imgw a { display: block; width: 100%; height: 100%; }
.circle .imgw { inset: auto; top: 50%; left: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%); border-radius: 50%; }
.shape { position: absolute; inset: 0; }
.b.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b.icon svg { width: 3em; height: 3em; }
.b.embed iframe { width: 100%; height: 100%; min-height: 800px; border: 0; }

/* buttons in the grid */
.b.button { align-items: var(--a, center); justify-content: center; }
.b.button .stretch { align-self: stretch; flex: 1; padding-top: 0; padding-bottom: 0; }

/* accordion */
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px 0; font: 500 var(--h4)/1.171 var(--head); letter-spacing: -.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: 2px; }
.acc-plus summary::after { background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1px 100% no-repeat; }
.acc-plus details[open] summary::after { background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1px no-repeat; }
.acc-arrow summary::after { width: 9px; height: 9px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.acc-arrow details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.acc .body { padding: 0 0 30px; max-width: 26em; }
.acc .body > :first-child { margin-top: 0; }
.acc .body > :last-child { margin-bottom: 0; }

/* scrolling text */
.b.scroll { justify-content: center; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee ul { display: flex; gap: 64px; width: max-content; margin: 0; padding: 0 32px; list-style: none; animation: marquee 70s linear infinite; }
.marquee.rev ul { animation-direction: reverse; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { font: 500 clamp(21.06px, calc(19.73px + .341vw), 24.64px)/1.2 var(--head); letter-spacing: -.02em; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - 32px)); } }
@media (prefers-reduced-motion: reduce) { .marquee ul { animation: none; } }

/* client logos */
.logos { display: grid; grid-template-columns: repeat(var(--nm, 2), 1fr); }
.logos img { width: calc(100% - 40px); margin: 10px 20px 50px; aspect-ratio: 187 / 105; object-fit: contain; }
@media (min-width: 768px) { .logos { grid-template-columns: repeat(var(--n, 6), 1fr); } }

/* charts */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart svg text { fill: rgba(255, 255, 255, .6); font: 13px var(--body); }
.chart .grid line { stroke: rgba(255, 255, 255, .1); }
.chart .legend { display: flex; gap: 18px; justify-content: center; margin: 14px 0 18px; }
.chart .legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background: var(--c); }
.chart figcaption { font-size: var(--small); font-style: italic; }

/* team (Company page) */
.team-sec { padding: clamp(60px, 9vw, 130px) var(--gut); }
.team-sec h2 { text-align: center; margin: 0 0 clamp(40px, 7vw, 100px); }
.team { display: grid; grid-template-columns: 1fr; gap: 110px; list-style: none; margin: 0; padding: 0; }
.team li { text-align: center; }
.team img { width: 100%; max-width: 270px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; }
.team h3 { font-size: 19.456px; line-height: 1.1; margin: 0 0 14px; }
@media (min-width: 768px) { .team h3 { margin-bottom: 7px; } }
.team p { font-size: var(--small); margin: 0; }
@media (min-width: 768px) { .team { grid-template-columns: repeat(5, 1fr); gap: 120px 100px; max-width: 1547px; margin: 0 auto; } .team li { padding: 0 12.5%; } .team img { max-width: 140px; } }

/* ---------------------------------------------------------------- forms */
.enquiry label { display: block; margin-bottom: 14px; }
.enquiry label > span { display: block; font-size: 14px; margin-bottom: 5px; }
.enquiry label > span small, .enquiry legend small { font-size: 12px; opacity: .8; margin-left: 4px; }
.enquiry fieldset { border: 0; padding: 0; margin: 0; }
.enquiry legend { padding: 0; font-size: 14px; margin-bottom: 4px; }
.enquiry label.tick { display: flex; align-items: center; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.enquiry label.tick input { width: 14px; height: 14px; padding: 0; border-radius: 3px; flex: none; accent-color: #fff; }
.enquiry input, .enquiry select, .enquiry textarea { width: 100%; font: inherit; color: #fff; background: #2a1128; border: 1px solid transparent; border-radius: 25.84px; padding: 10px 20px; }
.enquiry textarea { border-radius: 18px; min-height: 86px; }
.enquiry select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 24px) 55%, calc(100% - 17px) 55%; background-size: 7px 7px; background-repeat: no-repeat; }
.enquiry ::placeholder { color: rgba(255, 255, 255, .6); }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus { outline: none; border-color: #fff; }
.enquiry .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.enquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry [aria-invalid="true"] { border-color: #ff6b8a; }
.enquiry h3 { font-size: var(--h4); margin: 0 0 24px; }
.form-status { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: #ff9bb0; }
.form-done h4 { margin-top: 0; }
.light .enquiry input, .light .enquiry select, .light .enquiry textarea { background: #f4eef3; color: var(--plum); }
.light .enquiry select { background-image: linear-gradient(45deg, transparent 50%, var(--plum) 50%), linear-gradient(135deg, var(--plum) 50%, transparent 50%); }
.light .enquiry ::placeholder { color: rgba(54, 23, 50, .6); }
.light .enquiry input:focus, .light .enquiry select:focus, .light .enquiry textarea:focus { border-color: var(--plum); }
.light .form-status { color: #b00020; }

/* ---------------------------------------------------------------- white pages: products and privacy */
.light main { background: #fff; color: var(--plum); }
.wrap { padding: 0 var(--gut); max-width: calc(1547px + 2 * var(--gut)); margin: 0 auto; }
.catalogue { padding: 47px 0 90px; }
.catalogue h1 { font-size: var(--h2); line-height: 1.08; text-align: center; margin: 0 0 20px; }
.tabs { display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 20px; }
.tabs a { text-decoration: none; padding: 0 13px; border-right: 1px solid rgba(54, 23, 50, .35); line-height: 1.5; }
.tabs a:last-child { border-right: 0; }
.tabs a:hover, .tabs a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 22px; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 36px; } }
.product-card { display: flex; flex-direction: column; }
.product-card .thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card h3 { font-size: var(--h4); line-height: 1.171; margin: 18px 0 2px; }
.product-card h3 a { text-decoration: none; }
.product-card .price { font-size: 12.5px; font-weight: 600; margin: 0 0 8px; }
.product-card .btn { margin-top: auto; padding: 0; min-height: 55px; border-radius: 10px; }
.product-card h3 + .btn { margin-top: 12px; }

.product { padding: 44px 0 70px; }
.crumbs { margin: 0 0 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 6px; }
.product-top { display: grid; gap: 30px; }
.gallery { display: flex; flex-direction: column-reverse; gap: 10px; }
.gallery #gallery-main { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs button { padding: 0; border: 0; width: 50px; height: 28px; cursor: pointer; background: #000; opacity: .7; }
.thumbs button[aria-current], .thumbs button:hover { opacity: 1; outline: 1px solid var(--plum); outline-offset: 2px; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: var(--h2); line-height: 1.2; margin: 0 0 22px; }
.product-info .price { font: 500 var(--h4)/1.2 var(--head); letter-spacing: -.02em; margin: 0 0 16px; }
.product-info .summary { margin: 0 0 24px; }
.product-info .btn { width: 100%; min-height: 55px; padding: 0 20px; }
@media (min-width: 768px) {
  .product-top { grid-template-columns: 50fr 46.7fr; gap: 3.3%; align-items: start; }
  .gallery { flex-direction: row; gap: 9px; }
  .thumbs { flex-direction: column; flex-wrap: nowrap; flex: none; width: 50px; }
  .gallery #gallery-main { flex: 1; min-width: 0; }
}
.product-body { margin-top: clamp(70px, 14vw, 215px); }
.product-enquire { max-width: 760px; margin-top: 80px; scroll-margin-top: 30px; }
.related { padding: 0 0 90px; }
.related h2 { font-size: var(--h3); margin: 0 0 28px; }

.prose h1, .prose h2 { font-size: var(--h2); line-height: 1.08; }
.prose ul, .prose ol { padding-left: 2.5em; }
.prose li p { margin: .25rem 0; }
.prose li { margin: 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.prose td, .prose th { border: 1px solid rgba(54, 23, 50, .25); padding: 8px 10px; text-align: left; }
.privacy { padding: 127px 0 90px; background: #f6eaf5; }
.privacy li p { margin: 1rem 0; }
.privacy h1 { margin: 0 0 32px; }
.privacy h3, .privacy h4, .privacy a { color: var(--magenta); }

.page-head { padding: 120px 0; text-align: center; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: #000; }
.site-footer .rt a { text-underline-offset: 3px; }
.site-footer .legal { text-align: center; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; margin: 0; }
.b.social { align-items: flex-start; justify-content: center; }
.b.social a { width: 55px; height: 55px; display: grid; place-items: center; background: #fff; color: #000; border-radius: 10px; }
.b.social svg { width: 26px; height: 26px; }
.enquiry label.tick > span { margin: 0; font-size: inherit; }

/* phones: shop and product pages as on the live site */
.cat-select { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.cat-select select { flex: 1; font: inherit; color: rgba(54, 23, 50, .7); background: #f6eaf5 linear-gradient(45deg, transparent 50%, var(--plum) 50%) calc(100% - 24px) 55% / 7px 7px no-repeat, #f6eaf5; background-image: linear-gradient(45deg, transparent 50%, var(--plum) 50%), linear-gradient(135deg, var(--plum) 50%, transparent 50%); background-position: calc(100% - 24px) 55%, calc(100% - 17px) 55%; background-size: 7px 7px; background-repeat: no-repeat; border: 0; border-radius: 26px; padding: 11px 18px; appearance: none; -webkit-appearance: none; }
@media (max-width: 767px) {
  .catalogue { padding-top: 40px; }
  .catalogue h1 { text-align: left; margin-bottom: 14px; }
  .tabs { display: none; }
  .product-card .thumb { aspect-ratio: 1; }
  .product { padding-top: 24px; }
  .crumbs { display: none; }
  .gallery { flex-direction: column; }
  .product-info { display: flex; flex-direction: column; }
  .product-info h1 { margin-bottom: 18px; }
  .product-info .btn { order: 1; }
  .product-info .summary { order: 2; margin: 24px 0 0; }
}
@media (min-width: 768px) { .cat-select { display: none; } }
