:root {
  --primary-color: #333;
  --accent-color: #b3300c;
  --background-color: #f5f5f5;
  --text-color: #333;
  --white: #fff;
  --tab-background-color: #eef0f4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}

article, ol {
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: break-word;
  text-align: justify;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: var(--accent-color);
  font-size: 1.5rem;
  margin-top: 1em;
}

h3 {
  margin-top: 1em;
  font-size: 1.2rem;
  font-weight: 700;
}

/* FOOTER contact section with link to policies */
footer {
  margin-top: 30px;
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

footer p {
  margin: 10px 0;
}

footer a, a.shake {
  text-decoration: none;
  color: var(--text-color);
  margin: 0 8px;
  font-size: 0.9rem;
  transition: color 0.5s;
}

footer a:hover, .icon-shake:hover{
  animation: shake 0.5s;
  color: var(--accent-color);
}

section a {
  /* color: var(--text-color);*/
  color: inherit;
  text-decoration: none;
}

a.shake:hover {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.5s;
}

/* Policies section initially hidden */
#policies {
  opacity: 1; /*0*/
  pointer-events: none;
  overflow: hidden;
  background: #eef0f4;
  padding: 20px;
  margin-top: 40px;
  border-radius: 8px;
  max-height: 2000px; /* large enough height to show content */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

#policies h3 {
  margin-bottom: 10px;
}

  /* Responsive styling */
@media(max-width: 600px) {
  body { padding: 20px; }
  .cards-container {
    flex-direction: column;
    align-items: center;
  }
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

/* Container for two flip cards in a row */
.cards-container {
  display: flex;
  gap: 40px; /* space between cards */
  flex-wrap: wrap; /* wrap on small screens */
  justify-content: center;
  margin-top: 20px;
}

/* Flip card styles */
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 320px;
  perspective: 1000px; /* 3D perspective */
}

/* Front content */
.flip-card-front {
  background: #fff;
  flex-direction: column;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Hover flip: add on hover instead of click for demo */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Front and back sides */
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--white); /* #fff;*/
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Front: Avatar image */
.flip-card-front img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

/* Back: Info text */
.flip-card-back {
  color: var(--text-color);
  text-align: justify;
  transform: rotateY(180deg);
}

.flip-card-back h4 {
  font-size: 1.1rem;
  color: var(--primary-color);
}

.flip-card-back p {
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--text-color);
}

/* Tabs container */
.tabs-container {
  max-width: 800px;
  padding: 20px;
}

/* Tabs header buttons */
.tabs-header {
  margin: 0;
  border: none; /* if borders are set elsewhere */
  display: flex;
}

.tab-button {
  flex: 1;
  padding-bottom: 16px;
  cursor: pointer;
  background: var(--tab-background-color);
  color: var(--text-color);
  border: none;
  outline: none;
  transition: background 0.3s, color 0.3s;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: -2px 0px 0px rgba(0,0,0,0.1);
}

.tab-button:hover {
  background:var(--background-color);
  color: var(--accent-color);
  animation: shake 0.5s;
}

button:hover {
  animation: shake 0.5s;
  opacity: 80%;
}

.tab-button.active {
  background-color: var(--white); /* #fff;*/
  cursor: default;
  text-decoration: none;
  color: var(--text-color);
  animation: none;
}

section {
  margin: 0; /* ensure no margin */
  box-shadow: none; /* remove box-shadow that could appear as a line */
  border: none; /* remove borders if any */
  border-top: none; /* explicitly remove any top border that may be showing */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: none;
  max-width: 900px;
  width: 100%;
  background: #fff;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  box-shadow: -4px 4px 15px rgba(0,0,0,0.1);
}

.tab-content {
  margin: 0; /* ensure no margin */
  box-shadow: none; /* remove box-shadow that could appear as a line */
  border: none; /* remove borders if any */
  border-top: none; /* explicitly remove any top border that may be showing */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  display: none;
  max-width: 900px;
  width: 100%;
  background: #fff;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  box-shadow: -4px 4px 15px rgba(0,0,0,0.1);
}

.tab-content.active {
  display: block;
}

#bdiw:hover, #bdin:hover, #bdid:hover, #bdim:hover {
  cursor: help;
}

.dot-container {
  width: 100%; /* full window width */
  display: flex;
  align-items: center;
}

.left-text {
  margin-right: 10px;
}

.dots {
  flex-grow: 1;
  border-bottom: 1px dotted #999;
  margin: 0 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.login-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  width: 300px;
}

.centered-container {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height:auto; /* full viewport height */
}

ul.custom-symbols {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}

ul.custom-symbols li {
  position: relative;
  padding-left: 20px;
}

ul.custom-symbols li::before {
  content: "✔"; /* Your symbol, e.g., check mark */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
}

.icon-row {
  display: flex;
  gap: 30px; /* space between icons */
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

a.icon-link svg {
  width: 50px;  /* icon width */
  height: 50px; /* icon height */
  cursor: pointer;
  fill: #333;   /* icon color */
  transition: fill 0.3s;
}
  
.checkbox {
  width: 50px;
  height: 50px;
  border: 2px solid var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

input[type="email"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid var(--text-color);
  border-radius: 4px;
}

input[type="text"], select {
  padding: 0x 0px;
  font-size: 1rem;
  margin: 0 3;
  border-radius: 0px;
  outline-width: thin;
  border: 1px solid var(--text-color);
  width: fit-content;
  text-align: center;
}

select {
  width: fit-content;
  padding: 0px;
  margin: 0px;
}

select option:hover {
  background-color: var(--accent-color); /* limited support, may not work in all browsers */
}

.measurement,
.measurement p {
  width: auto;
  min-width: 22rex;
  padding: 0px;
  margin: 0px;
  vertical-align: bottom;
  display: inline;
}

/* DDChallenge website — Review R1: unavailable Products tab */
.tab-button:disabled { opacity: 0.42; cursor: not-allowed; color: #777; }
.tab-button:disabled:hover { animation: none; background: var(--tab-background-color); color: #777; }

/* DDChallenge About R2 — 2026-10-16 | accessible cards and responsive refinements */
.tabs-container { width: 100%; }
.about-introduction { padding: 24px 20px 4px; }
.about-introduction h1 {
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--primary-color);
  letter-spacing: -0.02em;
}
.about-tagline { color: #805044; font-size: 0.9rem; margin-top: 3px; }
#article-about {
  text-align: left;
  padding: 13px 0 6px;
  line-height: 1.65;
}
.cards-container { gap: 36px; margin-top: 16px; }
.flip-card {
  width: 275px;
  height: 355px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: center;
  color: inherit;
  cursor: pointer;
  outline-offset: 5px;
}
.flip-card:focus-visible { outline: 3px solid var(--accent-color); }
.flip-card .flip-card-inner { pointer-events: none; }
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}
@media (hover: none), (pointer: coarse) {
  .flip-card:hover .flip-card-inner { transform: none; }
  .flip-card.is-flipped:hover .flip-card-inner { transform: rotateY(180deg); }
}
.flip-card-front, .flip-card-back { padding: 22px; }
.flip-card-front h4 { font-size: 1.05rem; line-height: 1.35; }
.flip-card-front p { font-size: 0.91rem; color: #626262; margin-top: 3px; }
.flip-card-front img { width: 150px; height: 150px; }
.flip-card-back { text-align: left; justify-content: center; gap: 10px; }
.flip-card-back h4 { font-size: 1rem; color: var(--accent-color); line-height: 1.3; }
.flip-card-back p { font-size: 0.80rem; line-height: 1.46; text-align: left; }
.card-hint { text-align: center; font-size: 0.77rem; color: #737373; margin: 18px 16px 0; }
.card-hint i { margin-right: 3px; }
.copyright { line-height: 1.9; }
.footer-divider { color: #a0a0a0; padding: 0 3px; }
#policies { pointer-events: auto; max-height: none; margin-top: 22px !important; }
#policies article { text-align: left; }
.tab-button:disabled { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner { transition-duration: 0.01ms; }
  .tab-button:hover, footer a:hover, .icon-shake:hover { animation: none; }
}
@media (max-width: 600px) {
  body { padding: 18px 12px; }
  .tabs-container { padding: 6px; }
  .tab-content { padding-left: 12px; padding-right: 12px; }
  .tab-button { padding: 8px 2px 13px; }
  .tab-button h3 { font-size: 1.02rem; }
  .about-introduction { padding: 22px 10px 2px; }
  .about-introduction h1 { font-size: 1.5rem; }
  #article-about { font-size: 0.94rem; line-height: 1.64; }
  .cards-container { gap: 24px; }
  .flip-card { width: min(275px, 100%); height: 355px; }
  .card-hint { font-size: 0.75rem; }
  .copyright { font-size: 0.78rem; }
  #policies { padding: 10px !important; }
  #policies article { padding: 10px; }
}


/* DDChallenge website R3 (2026-10-16): actual supplied vector logo.
   The favicon is deliberately unchanged until the owner's icons arrive. */
.brand-navigation {
  display: flex;
  gap: 22px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 14px;
}
.site-brand {
  display: flex;
  flex: 0 0 196px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
}
.site-brand img {
  display: block;
  width: 172px;
  height: 116px;
  object-fit: contain;
}
.site-brand-caption {
  color: #5d5d5d;
  font-size: 0.56rem;
  letter-spacing: 0.015em;
  white-space: nowrap;
  text-align: center;
}
.brand-navigation .tabs-header {
  flex: 1 1 auto;
  min-width: 0;
}
.brand-navigation .tab-button {
  border-radius: 10px;
  padding: 0 3px 10px;
}
.brand-navigation .tab-button h3 { margin-top: 10px; }
@media(max-width: 640px) {
  .brand-navigation {
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 12px;
  }
  .site-brand { flex-basis: auto; }
  .site-brand img { width: 164px; height: 122px; }
  .brand-navigation .tabs-header { width: 100%; }
  .brand-navigation .tab-button { padding-bottom: 8px; }
}


/* DDChallenge R4 — 2026-10-16 — light desktop / dark mobile.
   Official ddchallenge.svg is never redrawn; only filter:invert(1) on dark mobile.
   The photograph is an independent background layer (no lettering/logo). */
:root { --dd-navy: #0b2034; --dd-gold: #c18a27; }
body { background:#f4f7fb; color:#102136; padding:0; }
.tabs-container { width:100%; max-width:1440px; padding:16px 28px 30px; }
.brand-navigation { min-height:112px; padding:4px 18px 8px 0; gap:24px; align-items:center; }
.site-brand { flex:0 0 185px; gap:0; }
.site-brand img { width:172px; height:100px; object-fit:contain; }
.site-brand-caption { display:none; }
.brand-navigation .tabs-header { justify-content:flex-end; flex:0 1 560px; gap:10px; }
.brand-navigation .tab-button { border-radius:12px; padding:10px 12px; box-shadow:0 2px 8px rgba(30,43,62,.08); background:rgba(230,236,244,.78); }
.brand-navigation .tab-button h3 { margin:0; font-size:1rem; }
.brand-navigation .tab-button.active { background:linear-gradient(130deg,#ffe3a6,#dca44b); color:#0a1930; box-shadow:0 3px 10px rgba(152,110,33,.22); }
.tab-button:disabled { opacity:.42; }
.tab-button:disabled:hover { animation:none; }
#about.tab-content { max-width:none; padding:8px 20px 24px; border-radius:18px; background-color:#f7fafc;
  background-image:linear-gradient(90deg,rgba(250,252,255,.99) 0%,rgba(250,252,255,.97) 34%,rgba(250,252,255,.82) 48%,rgba(250,252,255,.08) 72%), url('drillship.jpg');
  background-position: center, right top; background-size:cover, 58% 455px; background-repeat:no-repeat; box-shadow:none; }
.about-introduction { max-width:780px; min-height:385px; padding:35px 18px 10px; }
.about-introduction h1 { font-size:clamp(2rem,3.0vw,2.8rem); line-height:1.16; color:#0b2034; font-weight:700; }
.about-tagline { font-size:clamp(.98rem,1.5vw,1.15rem); line-height:1.4; color:#455b71; margin-top:12px; font-weight:600; }
#article-about { max-width:760px; font-size:1rem; line-height:1.72; color:#1a3048; padding:24px 0 0; }
#article-about strong:first-child { color:#bb8220; }
#about .cards-container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:4px 0 0; }
#about .flip-card { width:100%; height:302px; min-width:0; }
#about .flip-card-front, #about .flip-card-back { background:rgba(255,255,255,.96); border:1px solid rgba(146,164,181,.22); border-radius:14px; box-shadow:0 5px 22px rgba(9,33,56,.10); }
#about .flip-card-front { display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:22px; padding:15px; text-align:left; }
#about .flip-card-front img { width:42%; max-width:240px; height:100%; object-fit:cover; border-radius:10px; margin:0; flex:none; }
#about .front-copy { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; }
#about .flip-card-front h4 { font-size:clamp(1.08rem,1.65vw,1.36rem); line-height:1.24; color:#10243c; }
#about .card-role { margin-top:10px; color:#a9751d; font-size:.98rem; font-weight:700; }
#about .card-summary { font-size:clamp(.8rem,1.03vw,.96rem); line-height:1.58; color:#34445a; margin-top:13px; }
#about .card-action { display:inline-flex; align-items:center; gap:12px; margin-top:18px; border:1px solid #a8b5c5; border-radius:6px; padding:6px 12px; font-size:.88rem; font-weight:700; color:#17314f; }
#about .card-action span { font-size:1.4em; line-height:1; }
#about .flip-card-back { align-items:flex-start; justify-content:center; padding:30px; text-align:left; }
#about .flip-card-back h4 { color:#b0791b; font-size:1.2rem; }
#about .flip-card-back p { line-height:1.6; font-size:.9rem; }
#about .card-hint { margin:18px 0 0; color:#66778c; }
#about footer { border-top:1px solid #dce4ed; margin:24px 0 0; padding-top:16px; }
#about footer .copyright { color:#566779; }
#policies { background:#eef2f7; color:#182d44; border-radius:12px; padding:18px; }
@media (max-width:950px) and (min-width:701px) {
  #about .flip-card-front { gap:12px; }
  #about .flip-card-front img { width:34%; }
  #about .card-summary { font-size:.78rem; }
  #about .flip-card-front h4 { font-size:1rem; }
  #about .about-introduction { min-height:400px; }
}
@media (max-width:700px) {
  body { background:#061321; color:#f1f5fa; padding:0; }
  .tabs-container { padding:0 0 16px; background:#061321; }
  .brand-navigation { padding:8px 14px 12px; gap:6px; background:#061321; min-height:0; flex-direction:column; }
  .site-brand { flex:0 0 auto; margin:0 auto; }
  .site-brand img { width:152px; height:104px; filter:invert(1); }
  .brand-navigation .tabs-header { display:flex; flex:0 0 auto; width:100%; justify-content:stretch; gap:8px; }
  .brand-navigation .tab-button { background:#12273b; color:#e2ebf5; border:1px solid #294056; border-radius:7px; padding:9px 2px; }
  .brand-navigation .tab-button h3 { font-size:.89rem; }
  .brand-navigation .tab-button.active { color:#071728; background:linear-gradient(130deg,#ffe1a0,#daa045); border-color:#c7933c; }
  #about.tab-content { border-radius:0; padding:0 14px 25px; background-color:#071625;
    background-image:linear-gradient(180deg,rgba(6,19,33,.02) 0px,rgba(6,19,33,.14) 100px,rgba(6,19,33,.82) 244px,#071625 360px),url('drillship.jpg');
    background-repeat:no-repeat; background-position:center top, center top; background-size:cover,auto 275px; }
  #about .about-introduction { min-height:0; padding:240px 6px 16px; }
  #about .about-introduction h1 { font-size:clamp(1.57rem,6.6vw,2.25rem); color:#f4f8ff; }
  #about .about-tagline { color:#b8ccdf; font-weight:500; font-size:.93rem; margin-top:10px; }
  #article-about { color:#d7e4ef; padding:15px 0 2px; font-size:.9rem; line-height:1.67; }
  #about .cards-container { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
  #about .flip-card { height:295px; width:100%; }
  #about .flip-card-front, #about .flip-card-back { background:#0a1d30; border:1px solid #36516c; color:#f0f5fb; box-shadow:none; }
  #about .flip-card-front { padding:14px; gap:14px; }
  #about .flip-card-front img { width:38%; max-width:165px; height:100%; object-fit:cover; }
  #about .flip-card-front h4 { color:#f4f7fb; font-size:clamp(1rem,4vw,1.23rem); }
  #about .card-summary { color:#d0ddeb; font-size:.82rem; line-height:1.5; margin-top:12px; }
  #about .card-role { color:#e7b95f; }
  #about .card-action { color:#f0f5fa; border:1px solid #8da1b8; font-size:.8rem; margin-top:16px; padding:6px 10px; }
  #about .flip-card-back { padding:20px; }
  #about .flip-card-back h4 { color:#efbb5c; }
  #about .flip-card-back p { color:#dde9f6; font-size:.80rem; line-height:1.47; }
  #about .card-hint { color:#b8cadc; }
  #about footer { color:#c8d7e6; border-top:1px solid #31475d; }
  #about footer .copyright { color:#b8cadc; }
  #about footer a { color:#e8f2ff; }
  #policies { background:#11283d; color:#e4eff8; }
  #policies article { color:inherit; }
  #about footer .copyright span { color:inherit; }
  #login.tab-content, #products.tab-content { color:#14243a; }
}
@media (max-width:400px) {
  .brand-navigation { padding:6px 12px 10px; }
  #about .flip-card { height:320px; }
  #about .flip-card-front img { width:35%; }
  #about .card-summary { font-size:.76rem; }
  #about .flip-card-back p { font-size:.77rem; }
}
/* R4 logo fit correction: the owner's square SVG contains intentional outer whitespace.
   Enlarge the SVG in a clipped presentation viewport, without modifying the file. */
.site-brand { width:200px; height:116px; overflow:hidden; align-items:center; justify-content:flex-start; }
.site-brand img { width:185px; height:185px; max-width:none; flex:none; transform:translateY(-32px); object-fit:contain; }
@media (max-width:700px) {
  .site-brand { width:170px; height:106px; }
  .site-brand img { width:162px; height:162px; transform:translateY(-28px); }
}