/* ============================================================
   STONEWRIGHT — About & Contact page styles
   ============================================================ */

/* PAGE HERO (about) */
.page-hero{position:relative;padding:180px clamp(20px,5vw,64px) 90px;overflow:hidden}
@media(min-width:1100px){.page-hero .page-hero-inner{max-width:60%}}
.page-hero-inner{position:relative;z-index:5;max-width:860px}
.page-title{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,7vw,92px);line-height:1.02;letter-spacing:-.03em;margin:18px 0 28px;text-wrap:balance}
.page-title .line{display:block;overflow:hidden}
.page-title .word{display:inline-block;transform:translateY(110%);animation:wordUp 1s var(--ease) forwards}
.page-title .line:nth-child(2) .word{animation-delay:.12s}
.page-title .word--accent{color:var(--gold-soft);font-style:italic}
@keyframes wordUp{to{transform:translateY(0)}}
.page-lead{max-width:600px;color:var(--grey);font-size:clamp(16px,1.8vw,19px);line-height:1.7}

/* ABOUT STORY */
.about-story{padding:clamp(40px,8vh,100px) clamp(20px,5vw,64px);max-width:1320px;margin:0 auto}
.as-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.as-text h2{font-family:var(--font-display);font-size:clamp(30px,4vw,52px);font-weight:600;margin-bottom:24px}
.as-text p{color:var(--grey);font-size:16.5px;line-height:1.8;margin-bottom:20px}
.as-text em{color:var(--gold-soft);font-style:italic}
.as-side{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-card{padding:30px 24px;border:1px solid var(--line);border-radius:18px;background:var(--black-2);transition:.4s var(--ease)}
.stat-card:hover{transform:translateY(-5px);border-color:rgba(61,139,255,.3)}
.stat-num{display:block;font-family:var(--font-display);font-size:54px;font-weight:600;color:var(--gold-soft);line-height:1;text-shadow:0 0 26px rgba(197,164,78,.25)}
.stat-label{display:block;margin-top:10px;font-size:13px;letter-spacing:1px;color:var(--grey)}
.stat-card.highlight{background:linear-gradient(160deg,var(--navy),var(--black-2));display:flex;flex-direction:column;justify-content:center}
.stat-mark{font-family:var(--font-display);font-size:46px;font-weight:600;background:linear-gradient(135deg,var(--blue-bright),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
@media(max-width:880px){.as-grid{grid-template-columns:1fr;gap:40px}}

/* VALUES */
.values{padding:clamp(60px,10vh,120px) clamp(20px,5vw,64px);max-width:1320px;margin:0 auto}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.value-card{padding:34px 26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,var(--panel),var(--black-2));transition:.4s var(--ease)}
.value-card:hover{transform:translateY(-6px);border-color:rgba(197,164,78,.35)}
.vc-num{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:2px;color:var(--gold);display:block;margin-bottom:18px}
.value-card h3{font-family:var(--font-head);font-size:19px;font-weight:700;margin-bottom:10px}
.value-card p{color:var(--grey);font-size:14px;line-height:1.65}
@media(max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.value-grid{grid-template-columns:1fr}}

/* CONTACT */
.contact-wrap{position:relative;padding:170px clamp(20px,5vw,64px) 90px;overflow:hidden;min-height:100vh}
.contact-grid{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1240px;margin:0 auto;align-items:center}
.contact-left .page-title{font-size:clamp(38px,6vw,76px)}
.contact-direct{margin-top:40px;display:flex;flex-direction:column;gap:14px}
.cd-item{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);transition:.35s var(--ease)}
a.cd-item:hover{border-color:rgba(61,139,255,.4);transform:translateX(6px)}
.cd-ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(40,116,229,.12);color:var(--blue-bright)}
.cd-ic svg{width:22px;height:22px}
.cd-item span:last-child{display:flex;flex-direction:column;font-size:15px;color:var(--white)}
.cd-item small{font-size:11px;letter-spacing:2px;color:var(--grey);text-transform:uppercase;margin-bottom:3px}

/* FORM */
.contact-right{padding:36px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,var(--panel-2),var(--black-2));box-shadow:0 30px 80px rgba(0,0,0,.4)}
.field{position:relative;margin-bottom:22px}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:20px 16px 8px;color:var(--white);font-family:var(--font-body);font-size:15px;transition:.3s;resize:vertical}
.field textarea{padding-top:24px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-bright);background:rgba(40,116,229,.05)}
.field label{position:absolute;left:16px;top:16px;color:var(--grey);font-size:15px;pointer-events:none;transition:.25s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field input:valid:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:7px;font-size:11px;letter-spacing:1px;color:var(--blue-bright)}
/* make labels float reliably: use a space placeholder */
.field input,.field textarea{}
.field .opt{color:var(--grey-dim);font-size:11px}

.send-row{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.send-btn{flex:1;justify-content:center;min-width:160px;cursor:none}
.send-btn.disabled{opacity:.5}
.form-note{margin-top:16px;font-size:13px;color:var(--grey);line-height:1.5;transition:color .3s}
.form-note.err{color:#ff7a7a}
.form-note.ok{color:var(--blue-bright)}

@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .send-btn{cursor:pointer}
}

/* ============ ROTATING SW GLASS CUBE (about hero) ============ */
.cube-stage{position:absolute;right:clamp(40px,8vw,150px);top:50%;transform:translateY(-50%);
  width:320px;height:320px;display:grid;place-items:center;z-index:2;pointer-events:none;
  perspective:1200px}
@media(max-width:1100px){.cube-stage{display:none}}

.cube-glow{position:absolute;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(40,116,229,.40),rgba(40,116,229,.10) 48%,transparent 72%);
  filter:blur(18px);animation:cubeGlow 6s ease-in-out infinite}
@keyframes cubeGlow{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

.cube{position:relative;width:184px;height:184px;transform-style:preserve-3d;
  animation:cubeSpin 20s linear infinite;will-change:transform}
@keyframes cubeSpin{
  from{transform:rotateX(-18deg) rotateY(-28deg)}
  to{transform:rotateX(-18deg) rotateY(332deg)}}

/* translucent glass faces — see-through, thin glowing edge, soft inner sheen */
.cube-face{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:74px;letter-spacing:.5px;font-style:italic;
  color:rgba(110,170,255,.92);
  background:linear-gradient(145deg,rgba(40,116,229,.16),rgba(14,27,46,.10) 55%,rgba(40,116,229,.06));
  border:1px solid rgba(90,150,240,.55);
  box-shadow:inset 0 0 50px rgba(60,139,255,.18),inset 0 0 1px rgba(160,200,255,.8);
  text-shadow:0 0 26px rgba(61,139,255,.7);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
/* faint corner highlight so the glass reads as glass */
.cube-face::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(180,210,255,.22),transparent 40%);pointer-events:none}

.cube-front {transform:translateZ(92px)}
.cube-back  {transform:rotateY(180deg) translateZ(92px)}
.cube-right {transform:rotateY(90deg)  translateZ(92px)}
.cube-left  {transform:rotateY(-90deg) translateZ(92px)}
.cube-top   {transform:rotateX(90deg)  translateZ(92px)}
.cube-bottom{transform:rotateX(-90deg) translateZ(92px)}

.cube-shadow{position:absolute;bottom:34px;width:170px;height:28px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(40,116,229,.32),transparent 70%);filter:blur(8px);
  animation:cubeShadow 20s linear infinite}
@keyframes cubeShadow{0%,100%{transform:scaleX(1);opacity:.55}50%{transform:scaleX(.72);opacity:.8}}

@media(prefers-reduced-motion:reduce){
  .cube{animation:none;transform:rotateX(-18deg) rotateY(-28deg)}
  .cube-glow,.cube-shadow{animation:none}
}