/* ==========================================================================
   DotnDot About page — sections that only this page uses.
   Loaded after site.css and inner.css (page hero, particle pictures, dark band).
   ========================================================================== */

/* ===== 1. Our story: roadmap — centre line fills as you scroll, picture and text swap sides ===== */
#story{padding-top:clamp(32px,3.4vw,50px)}
.road{position:relative;display:grid;gap:clamp(48px,6vw,84px);padding:58px 0 46px}
.road-line{position:absolute;left:50%;top:12px;bottom:12px;width:2px;margin-left:-1px;border-radius:2px;background:#DCE4EE}
.road-fill{position:absolute;left:0;right:0;top:0;height:var(--p,0%);border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--red))}
.road-fill::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(218,37,30,.18)}
.road-start,.road-end{position:absolute;left:50%;z-index:1;border-radius:50%}
.road-start{top:0;width:26px;height:26px;margin-left:-13px;background:var(--blue);border:5px solid #fff;box-shadow:0 0 0 2px var(--blue),0 10px 20px -8px rgba(38,114,172,.7)}
.road-end{bottom:0;width:14px;height:14px;margin-left:-7px;background:#fff;border:3px solid #DCE4EE;transition:border-color .4s}
.road.done .road-end{border-color:var(--red)}
.rm{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.rm-art{grid-column:1;grid-row:1}
.rm-art .dot-art{aspect-ratio:16/11}
.rm-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #C9D6E4;
  transition:border-color .4s,box-shadow .4s}
.rm-node::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#C9D6E4;transition:background .4s}
.rm.on .rm-node{border-color:var(--blue);box-shadow:0 0 0 7px rgba(38,114,172,.14)}
.rm.on .rm-node::after{background:var(--blue)}
.rm-flip.on .rm-node{border-color:var(--red);box-shadow:0 0 0 7px rgba(218,37,30,.14)}
.rm-flip.on .rm-node::after{background:var(--red)}
.rm-text{grid-column:3;grid-row:1;max-width:520px}
.rm-flip .rm-art{grid-column:3}
.rm-flip .rm-text{grid-column:1;justify-self:end}
.rm-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--tint);
  font:700 11.5px/1 "Inter Tight",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.rm-tag .ic{width:15px;height:15px}
.rm-flip .rm-tag{background:#FBECEB;color:var(--red)}
.rm h3{margin-top:14px;font:600 clamp(22px,2vw,28px)/1.2 Poppins,sans-serif;color:var(--navy)}
.rm p{margin-top:12px;font:500 15.5px/1.75 "Inter Tight",sans-serif;color:var(--muted)}

/* ===== 2. Why us: copy + chaos → order particle card ===== */
.wu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,72px);align-items:center}
.wu .lead+.lead{margin-top:12px}
.wu-copy .btn{margin-top:26px}
.wu-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 50px 90px -60px rgba(10,13,49,.55)}
.wu-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;height:58px;padding:0 12px 0 20px;border-bottom:1px solid var(--line);background:#F7FAFD}
.wu-switch{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.wu-switch button{height:34px;padding:0 16px;border-radius:999px;font:600 12px/1 "Inter Tight",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:background .4s,color .4s}
.wu-switch button:hover{color:var(--navy)}
.wu-switch button.on{background:var(--navy);color:#fff}
.wu-switch button[data-state="order"].on{background:var(--blue)}
.wu-arrow{display:grid;place-items:center;width:18px;color:var(--red)}
.wu-arrow .ic{width:14px;height:14px}
.wu-art{aspect-ratio:16/11}

/* ===== 3. Core values ===== */
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.val{position:relative;padding:32px 24px 28px;border-radius:24px;background:#fff;border:1.5px solid var(--line);
  transition:opacity .9s var(--ease) var(--d,0s),transform .6s var(--ease),border-color .4s,box-shadow .5s}
.val:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 36px 64px -44px rgba(38,114,172,.65);
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#DA251E,#2672AC 25%,#DA251E 50%,#2672AC 75%,#DA251E) border-box;
  animation:coverSpin 6s linear infinite}
.val-ico{position:relative;width:64px;height:64px;margin:8px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:var(--tint);transition:background .4s,color .4s}
.val-ico>.ic{width:28px;height:28px}
.val-orbit{position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed #C9D6E4;animation:spinR 10s linear infinite}
.val-orbit i{position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--red)}
.val:nth-child(even) .val-ico{color:var(--red);background:#FBECEB}
.val:nth-child(even) .val-orbit{animation-direction:reverse;animation-duration:12s}
.val:nth-child(even) .val-orbit i{background:var(--blue)}
.val:hover .val-ico{color:#fff;background:linear-gradient(135deg,#3C8BC8,var(--blue))}
.val:nth-child(even):hover .val-ico{background:linear-gradient(135deg,#EC5045,var(--red))}
.val h3{margin-top:22px;font:600 19px/1.25 Poppins,sans-serif;color:var(--navy)}
.val p{margin-top:10px;font:500 14.5px/1.65 "Inter Tight",sans-serif;color:var(--muted)}

/* ===== 4. Experience meets AI: dark band with the team network ===== */
.team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.team-copy .btn{margin-top:26px}
.net-card{position:relative;aspect-ratio:1/.82;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1)}
.net-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.net-hub{position:absolute;left:50%;top:50%;translate:-50% -50%;width:132px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#fff;pointer-events:none;background:radial-gradient(circle at 35% 30%,#1F4F86,#0A0D31 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 16px rgba(38,114,172,.08),0 30px 60px -20px rgba(0,0,0,.6)}
.net-hub b{font:700 19px/1 Poppins,sans-serif}
.net-hub small{font:600 9.5px/1.2 "Inter Tight",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#9FB4C9}
.net-hub .dnd i:first-child{background:#5FA2D6}
.net-card.logo-on .net-hub{display:none}           /* the particle D logo takes the hub's place */
/* "Global Team" label just under the particle logo (its top is set from the logo's real bottom edge) */
.net-label{position:absolute;left:50%;top:calc(var(--logo-bottom,71%) + 16px);translate:-50% 0;z-index:1;display:none;align-items:center;gap:10px;padding:8px 16px 8px 12px;
  border-radius:999px;background:rgba(10,13,49,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 11.5px/1 "Inter Tight",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#DDE3F6;white-space:nowrap;pointer-events:none}
.net-label .dnd i:first-child{background:#5FA2D6}
.net-card.logo-on .net-label{display:inline-flex;animation:netLabelIn .8s var(--ease) .6s both}
@keyframes netLabelIn{from{opacity:0;transform:translateY(8px)}}

/* ===== 5. Better together: two dots come together ===== */
.tg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.tg-art{aspect-ratio:16/11}
.tg .lead+.lead{margin-top:12px}
.tg-copy .btn{margin-top:26px}

/* ===== responsive ===== */
@media (max-width:1100px){
  .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .road{gap:44px;padding:70px 0 30px}
  .road-line,.road-start,.road-end{left:13px}
  .rm,.rm-flip{grid-template-columns:26px minmax(0,1fr);column-gap:16px;row-gap:20px;align-items:start}
  .rm .rm-node{grid-column:1;grid-row:1;margin-top:22px}
  .rm .rm-art,.rm-flip .rm-art{grid-column:2;grid-row:1}
  .rm .rm-text,.rm-flip .rm-text{grid-column:2;grid-row:2;justify-self:start;max-width:none}
  .wu,.team-grid,.tg{grid-template-columns:1fr}
  .tg-card{order:2}
  .net-card{justify-self:center;width:min(560px,100%)}
}
@media (max-width:560px){
  .vals{grid-template-columns:1fr}
  .rm p{font-size:15px}
  .wu-bar{padding:0 8px 0 14px}
  .wu-switch button{padding:0 11px}
  .net-hub{width:104px}
  .net-hub small{display:none}
}