/* ---------------------------------------------------------------
   Vale Technology — shared site styles
   Base styles + hover/focus states from the Claude Designer files
   (design/*.dc.html). Inline styles in the Blade views carry the
   layout; these rules carry everything inline styles cannot:
   pseudo-states, motion, elevation and the CMS article body
   type system.
   --------------------------------------------------------------- */

body{margin:0;background:#262624;color:#EFEDE6;font-family:'Public Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#D8B75E}
a:hover{color:#E8CD84}
:focus-visible{outline:3px solid #C6A247;outline-offset:2px}

/* Quiet craft details: gold selection, a subdued scrollbar, and
   anchor targets that clear the fixed header. */
::selection{background:#C6A247;color:#221A04}
html{scrollbar-width:thin;scrollbar-color:#45443F transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#45443F;border-radius:8px;border:2px solid #262624}
::-webkit-scrollbar-thumb:hover{background:#55534D}
::-webkit-scrollbar-track{background:transparent}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:96px}

/* Skip-to-content link (visible only on keyboard focus) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#1F1E1D;color:#FFFFFF;padding:10px 18px;border-radius:0 0 6px 0;text-decoration:none;font-size:15px;font-weight:600}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------
   Hover states — converted from the designer's style-hover
   attributes, refined with elevation and motion.
   !important is required: the views keep the design's inline
   styles, and these must win over them, matching (and extending)
   designer behaviour.
   --------------------------------------------------------------- */
.hover-gold:hover{color:#D8B75E!important}
.hover-gold-light:hover{color:#E8CD84!important}
.hover-underline:hover{text-decoration:underline!important}

/* Buttons — gradient face, inner top highlight, gold-tinted
   elevation and a physical press state. */
.btn-gold,.btn-gold-deep,.btn-outline{transition:transform .18s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease,color .28s ease}
.btn-gold{background:linear-gradient(180deg,#D3B663,#C6A247)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 10px 24px -10px rgba(198,162,71,0.55)}
.btn-gold:hover{background:linear-gradient(180deg,#E4C97F,#D8B75E)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.34),0 16px 32px -12px rgba(198,162,71,0.65);transform:translateY(-1px)}
.btn-gold:active{transform:translateY(0);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 6px 16px -8px rgba(198,162,71,0.5)}
.btn-gold-deep{background:linear-gradient(180deg,#D3B663,#C6A247)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 8px 20px -10px rgba(198,162,71,0.45)}
.btn-gold-deep:hover{background:linear-gradient(180deg,#C6A247,#B8933A)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.24),0 12px 26px -10px rgba(184,147,58,0.55);transform:translateY(-1px)}
.btn-gold-deep:active{transform:translateY(0)}
.btn-outline{transition:transform .18s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease,color .28s ease}
.btn-outline:hover{border-color:#C6A247!important;color:#E8CD84!important;background:rgba(198,162,71,0.08)!important;box-shadow:0 10px 28px -14px rgba(198,162,71,0.4);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0)}

/* Cards — layered shadow, inset top highlight, gold-rimmed lift. */
.card-link,.lift{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
.card-link:hover,.lift:hover{transform:translateY(-4px);border-color:#C6A247!important;box-shadow:0 22px 44px -18px rgba(0,0,0,0.55),0 0 0 1px rgba(198,162,71,0.1),inset 0 1px 0 rgba(255,255,255,0.05)}

/* Featured article — gradient rim so the lead story reads as the lead. */
.card-featured{border:1px solid transparent!important;background:linear-gradient(#30302E,#30302E) padding-box,linear-gradient(120deg,rgba(216,183,94,0.55),rgba(217,119,87,0.28) 55%,rgba(216,183,94,0.14)) border-box!important}
.card-featured:hover{border-color:transparent!important;box-shadow:0 26px 52px -20px rgba(0,0,0,0.6),0 0 0 1px rgba(198,162,71,0.14),inset 0 1px 0 rgba(255,255,255,0.05)}

/* Arrow micro-interaction — wrap a trailing → in <span class="arr">. */
.arr{display:inline-block;transition:transform .25s cubic-bezier(.22,1,.36,1)}
a:hover .arr{transform:translateX(4px)}

/* Eyebrow labels gain a small gold rule — quiet, intentional. */
.eyebrow{display:flex!important;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:2px;flex:none;border-radius:2px;background:linear-gradient(90deg,#C6A247,rgba(198,162,71,0.15))}

/* Market chips — a soft hover fill and lift. */
.chip{transition:transform .25s ease,border-color .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease}
.chip:hover{transform:translateY(-2px);border-color:rgba(198,162,71,0.5)!important;color:#E8CD84!important;background:rgba(198,162,71,0.07);box-shadow:0 8px 18px -10px rgba(0,0,0,0.5)}

/* Process steps — a progress accent along the top edge that
   brightens on hover. */
.step-card{position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
.step-card::before{content:"";position:absolute;top:-1px;left:28px;right:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(216,183,94,0.7),rgba(217,119,87,0.3));opacity:0.3;transition:opacity .3s ease}
.step-card:hover{transform:translateY(-3px);border-color:rgba(198,162,71,0.45)!important;box-shadow:0 18px 36px -18px rgba(0,0,0,0.55)}
.step-card:hover::before{opacity:1}

/* Numbered service badges — hairline rim + top highlight. */
.num-badge{box-sizing:border-box;border:1px solid rgba(198,162,71,0.32);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}

/* WhatsApp FAB — tinted shadow, hover lift, gentle attention pulse. */
.wa-fab{transition:transform .2s ease,background .2s ease,box-shadow .3s ease}
.wa-fab:hover{background:#0B6650!important;transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(14,122,95,0.5)!important}

/* ---------------------------------------------------------------
   Header — frosted glass that deepens once the page moves.
   --------------------------------------------------------------- */
.site-header{background:rgba(43,42,40,0.72)!important;backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.site-header.is-scrolled{background:rgba(31,30,29,0.88)!important;border-bottom-color:#484642!important;box-shadow:0 16px 36px -20px rgba(0,0,0,0.6)}

/* Desktop nav links — underline draws in from the left. */
@media(min-width:1101px){
  .main-nav a:not(.btn-gold-deep){background-image:linear-gradient(#D8B75E,#D8B75E);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:color .2s ease,background-size .28s ease}
  .main-nav a:not(.btn-gold-deep):hover{background-size:100% 1.5px}
}

/* ---------------------------------------------------------------
   Section transitions — a hairline that lights toward the centre,
   so bands meet the page with intention rather than a hard cut.
   --------------------------------------------------------------- */
.band{position:relative}
.band::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,183,94,0.38) 50%,transparent)}
.hero-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;background:linear-gradient(90deg,transparent,rgba(216,183,94,0.3) 50%,transparent)}

/* Footer — hairline with a centred gold glint. */
.site-footer{position:relative;border-top:1px solid #3A3937}
.site-footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:220px;height:1px;background:linear-gradient(90deg,transparent,rgba(198,162,71,0.65),transparent)}

/* ---------------------------------------------------------------
   Scroll reveal — gated behind .js so content is never hidden
   without JavaScript; fully disabled under reduced motion.
   --------------------------------------------------------------- */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.js .reveal.is-visible{opacity:1;transform:none}
html.js .stagger>.reveal:nth-child(2){transition-delay:.08s}
html.js .stagger>.reveal:nth-child(3){transition-delay:.16s}
html.js .stagger>.reveal:nth-child(4){transition-delay:.24s}
html.js .stagger>.reveal:nth-child(5){transition-delay:.32s}
html.js .stagger>.reveal:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------
   Hero choreography — staggered entrance, then the network artwork
   breathes: nodes drift, the hub pulses, the dashed ring orbits.
   All motion is disabled under reduced motion.
   --------------------------------------------------------------- */
.hero-node{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(prefers-reduced-motion:no-preference){
  .hero-copy>*{opacity:0;animation:hero-in .9s cubic-bezier(.22,1,.36,1) forwards}
  .hero-copy>*:nth-child(2){animation-delay:.08s}
  .hero-copy>*:nth-child(3){animation-delay:.16s}
  .hero-copy>*:nth-child(4){animation-delay:.24s}
  .hero-art{opacity:0;animation:hero-in 1.1s cubic-bezier(.22,1,.36,1) .2s forwards}
  .hero-node{animation:node-drift 7s ease-in-out infinite}
  .hero-node.node-b{animation-delay:-1.8s}
  .hero-node.node-c{animation-delay:-3.4s}
  .hero-node.node-d{animation-delay:-5.1s}
  .hero-hub-core{animation:hub-pulse 4.5s ease-in-out infinite}
  .hero-ring{animation:ring-orbit 70s linear infinite}
  .wa-fab::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(123,227,176,0.45);animation:wa-ping 3.4s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes node-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hub-pulse{0%,100%{transform:scale(1);box-shadow:0 8px 32px rgba(198,162,71,0.5)}50%{transform:scale(1.07);box-shadow:0 8px 42px rgba(198,162,71,0.75)}}
@keyframes ring-orbit{to{transform:rotate(360deg)}}
@keyframes wa-ping{0%{transform:scale(0.96);opacity:0.7}60%,100%{transform:scale(1.12);opacity:0}}

/* ---------------------------------------------------------------
   Form fields — gold focus ring in place of the raw outline.
   --------------------------------------------------------------- */
.field{transition:border-color .2s ease,box-shadow .2s ease}
.field:focus{outline:none;border-color:#C6A247!important;box-shadow:0 0 0 3px rgba(198,162,71,0.18)}
.field::placeholder{color:#6B6963}

/* Home services grid — responsive columns (inline styles can't do media
   queries). Four cards lay out 1 / 2×2 / 4-across so they never wrap 3+1. */
.services-grid{grid-template-columns:1fr}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------------------------------------------------------------
   Header navigation — inline row on desktop, slide-in panel on
   mobile (media queries + transforms can't live in inline styles).
   --------------------------------------------------------------- */
.main-nav{display:flex;align-items:center;gap:24px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:#F5F4EF;background:transparent;border:1px solid #3E3D3A;border-radius:8px;cursor:pointer}
.nav-toggle:hover{border-color:#C6A247;color:#E8CD84}
.nav-close{display:none}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:45}

@media(max-width:1100px){
  .nav-toggle{display:inline-flex}
  .main-nav{position:fixed;top:0;right:0;z-index:70;height:100dvh;width:min(84vw,320px);flex-direction:column;align-items:stretch;gap:4px;padding:80px 20px 28px;background:rgba(42,41,39,0.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-left:1px solid #3E3D3A;box-shadow:-16px 0 48px rgba(0,0,0,0.4);transform:translateX(100%);transition:transform .28s ease;overflow-y:auto}
  .main-nav a:not(.btn-gold-deep){font-size:17px!important;padding:14px 6px!important;border-bottom:1px solid #3A3937}
  .main-nav .btn-gold-deep{margin-top:16px;text-align:center;font-size:16px!important;padding:14px 18px!important}
  .nav-close{display:inline-flex;position:absolute;top:16px;right:16px;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:#F5F4EF;background:transparent;border:none;cursor:pointer}
  .nav-close:hover{color:#E8CD84}
  body.nav-open{overflow:hidden}
  body.nav-open .main-nav{transform:translateX(0)}
  body.nav-open .nav-overlay{display:block}
  body.nav-open .wa-fab{display:none!important}
}

/* ---------------------------------------------------------------
   Article body type system — from design/Article Template.dc.html.
   Post bodies are stored as plain HTML in the database, so the
   template's inline-styled elements become classless rules scoped
   to .article-body.
   --------------------------------------------------------------- */
.article-body{display:flex;flex-direction:column;gap:24px}
.article-body p{margin:0;font-size:17px;line-height:1.75;color:#C2BFB6}
.article-body strong,.article-body b{color:#F5F4EF}
.article-body a{color:#D8B75E;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:#E8CD84}
.article-body h2{margin:16px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;letter-spacing:-0.02em;color:#F5F4EF}
.article-body h3{margin:8px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:21px;color:#F5F4EF}
.article-body h4,.article-body h5,.article-body h6{margin:8px 0 0;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px;color:#F5F4EF}
.article-body ul,.article-body ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.7;color:#C2BFB6}
.article-body li>ul,.article-body li>ol{margin-top:10px}
.article-body blockquote{margin:8px 0;padding:24px 28px;background:#30302E;border-left:3px solid #C6A247;border-radius:0 9px 9px 0}
.article-body blockquote p{font-family:'Space Grotesk',sans-serif;font-size:20px;line-height:1.5;font-weight:500;color:#F5F4EF}
.article-body figure{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.article-body figcaption{font-size:14px;color:#97948B;text-align:center}
.article-body img{max-width:100%;height:auto;border-radius:9px;border:1px solid #3E3D3A}
.article-body hr{border:none;border-top:1px solid #3E3D3A;margin:8px 0}
.article-body table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.6;color:#C2BFB6}
.article-body th,.article-body td{border:1px solid #3E3D3A;padding:10px 14px;text-align:left}
.article-body th{background:#30302E;color:#F5F4EF;font-family:'Space Grotesk',sans-serif;font-weight:600}
.article-body pre{margin:0;padding:20px 24px;background:#1B1A19;border:1px solid #3E3D3A;border-radius:9px;overflow-x:auto;font-size:14px;line-height:1.6;color:#C2BFB6}
.article-body code{font-family:ui-monospace,monospace}