*{box-sizing:border-box}
:root{
  --brand:#000066;
  --cream:#f4efe7;
  --ink:#191a1f;
  --muted:#5f6170;
  --line:#d7d0c6;
}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased
}
img{display:block;max-width:100%}
a{color:inherit}
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:30;
  border-bottom:1px solid var(--line);
  background:rgba(244,239,231,.92);
  backdrop-filter:blur(12px);
  transition:background-color .35s ease,box-shadow .35s ease
}
.site-header.is-scrolled{
  background:rgba(244,239,231,.98);
  box-shadow:0 10px 35px rgba(15,16,28,.06)
}
.header-inner{
  min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:32px;
  transition:min-height .35s ease
}
.site-header.is-scrolled .header-inner{min-height:78px}

.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.brand img{
  width:54px;height:54px;object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)
}
.brand:hover img{transform:rotate(-3deg) scale(1.035)}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name strong{font-size:16px;letter-spacing:.12em}
.brand-name small{margin-top:5px;font-size:13px;color:var(--muted)}

nav{display:flex;gap:30px}
nav a{
  position:relative;text-decoration:none;color:var(--muted);
  font-size:14px;font-weight:650;transition:color .25s ease
}
nav a:hover{color:var(--brand)}
nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;
  background:var(--brand);transition:right .25s ease
}
nav a:hover::after{right:0}

.hero{padding:92px 0 100px}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:80px;align-items:end}
.eyebrow,.section-label{
  margin:0 0 20px;color:var(--brand);font-size:12px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase
}
.hero h1{
  margin:0;max-width:860px;font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(58px,7.7vw,106px);line-height:.92;letter-spacing:-.055em
}
.hero h1 span{color:var(--brand);display:inline-block}
.hero-copy{padding-bottom:8px}
.hero-copy p{margin:0;max-width:520px;color:var(--muted);font-size:19px}
.text-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding-bottom:7px;
  border-bottom:2px solid var(--brand);color:var(--brand);text-decoration:none;
  font-size:14px;font-weight:800;transition:transform .25s ease
}
.text-link:hover{transform:translateX(3px)}
.text-link span{transition:transform .25s ease}
.text-link:hover span{transform:translateX(6px)}

.brand-strip{overflow:hidden;padding:24px;background:var(--brand);color:#fff}
.strip-track{
  width:min(1180px,calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;
  gap:20px;white-space:nowrap;font-size:13px;font-weight:800;letter-spacing:.08em
}
.strip-track i{opacity:.45;font-style:normal}
.strip-track span{transition:transform .3s ease}
.brand-strip:hover .strip-track span{transform:translateY(-2px)}
.brand-strip:hover .strip-track span:nth-of-type(even){transform:translateY(2px)}

.section{padding:105px 0}
.intro-grid{display:grid;grid-template-columns:.35fr 1fr;gap:70px}
.intro h2,.contact h2{
  margin:0 0 28px;font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.04em
}
.large-copy{margin:0;max-width:780px;color:var(--muted);font-size:20px}

.services{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}
.service{
  position:relative;overflow:hidden;min-height:350px;padding:46px 38px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background-color .35s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease
}
.service+.service{border-left:1px solid var(--line)}
.service::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease
}
.service:hover{
  background:rgba(255,255,255,.3);transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(18,20,38,.06)
}
.service:hover::before{transform:scaleX(1)}
.service-number{
  font-family:Georgia,"Times New Roman",serif;color:var(--brand);font-size:52px;line-height:1;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)
}
.service:hover .service-number{transform:translateY(-5px)}
.service h3{margin:0 0 12px;font-size:21px}
.service p{margin:0;max-width:330px;color:var(--muted)}

.contact{padding:105px 0;background:var(--brand);color:#fff}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:end}
.section-label.light{color:rgba(255,255,255,.62)}
.contact h2{margin-bottom:0;max-width:760px}
.contact-copy{padding-left:34px;border-left:1px solid rgba(255,255,255,.28)}
.contact-copy p{margin:0 0 14px;color:rgba(255,255,255,.72)}
.contact-copy>a{
  display:inline-block;color:#fff;font-size:clamp(24px,3vw,36px);
  font-family:Georgia,"Times New Roman",serif;text-decoration-thickness:1px;text-underline-offset:7px;
  transition:opacity .25s ease,transform .25s ease
}
.contact-copy>a:hover{opacity:.78;transform:translateX(3px)}
.company{margin-top:36px;color:rgba(255,255,255,.64);font-size:14px}

footer{background:#090936;color:rgba(255,255,255,.62)}
.footer-inner{
  min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px
}
.footer-inner p{margin:0}
.footer-inner a{color:rgba(255,255,255,.75);text-decoration:none}

/* Reveal animations */
.reveal{
  opacity:0;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)
}
.reveal-up{transform:translateY(22px)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.22s}
.reveal.is-visible{opacity:1;transform:none}

.hero-title.is-visible h1{animation:heroSettle .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroSettle{
  from{letter-spacing:-.075em}
  to{letter-spacing:-.055em}
}

@media(max-width:860px){
  .hero-grid,.intro-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .services{grid-template-columns:1fr}
  .service{min-height:260px}
  .service+.service{border-left:0;border-top:1px solid var(--line)}
  .contact-copy{padding-left:0;padding-top:28px;border-left:0;border-top:1px solid rgba(255,255,255,.28)}
  .strip-track{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .strip-track::-webkit-scrollbar{display:none}
}
@media(max-width:620px){
  .container{width:min(100% - 30px,1180px)}
  .header-inner{min-height:82px}
  .site-header.is-scrolled .header-inner{min-height:70px}
  .brand img{width:46px;height:46px}
  nav{display:none}
  .hero{padding:62px 0 70px}
  .hero h1{font-size:clamp(52px,16vw,74px)}
  .hero-copy p,.large-copy{font-size:17px}
  .section,.contact{padding:72px 0}
  .service{padding:34px 24px}
  .brand-strip{padding-left:15px;padding-right:15px}
  .strip-track{width:100%}
  .footer-inner{min-height:96px;flex-direction:column;align-items:flex-start;justify-content:center;padding:20px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important
  }
  .reveal,.reveal-up{opacity:1!important;transform:none!important}
}


/* -------------------------------------------------------
   Premium hero interaction
   ------------------------------------------------------- */

.hero-main-word,
.hero-accent-word {
  display: inline-block;
  will-change: transform;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.hero-title:hover .hero-main-word,
.hero-title:hover .hero-accent-word {
  transition-duration: .18s;
}

/* The blue phrase gets a barely visible light sweep on hover. */
.hero-accent-word {
  position: relative;
  isolation: isolate;
}

.hero-accent-word::after {
  content: "";
  position: absolute;
  left: -2%;
  top: 52%;
  width: 104%;
  height: 32%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 45%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.08) 55%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.hero-title:hover .hero-accent-word::after {
  opacity: 1;
  animation: heroSheen 1.25s ease forwards;
}

@keyframes heroSheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(120%) skewX(-18deg); }
}

/* Slightly more tactile CTA */
.text-link {
  position: relative;
}

.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.text-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Avoid motion on touch layouts */
@media (hover: none), (pointer: coarse) {
  .hero-main-word,
  .hero-accent-word {
    transform: none !important;
  }

  .hero-accent-word::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-main-word,
  .hero-accent-word {
    transform: none !important;
  }

  .hero-accent-word::after {
    display: none !important;
  }
}


/* -------------------------------------------------------
   Rotating Enter cube
   ------------------------------------------------------- */

.hero-copy {
  position: relative;
}

.hero-cube-wrap {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 22px;
  perspective: 1200px;
}

.logo-cube-scene {
  width: 132px;
  height: 132px;
  perspective: 1200px;
}

.logo-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: enterCubeSpin 18s linear infinite;
  will-change: transform;
}

.cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 102, 0.92);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 12px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(2px);
}

.cube-face img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.face-front  { transform: rotateY(  0deg) translateZ(66px); }
.face-back   { transform: rotateY(180deg) translateZ(66px); }
.face-right  { transform: rotateY( 90deg) translateZ(66px); }
.face-left   { transform: rotateY(-90deg) translateZ(66px); }
.face-top    { transform: rotateX( 90deg) translateZ(66px); }
.face-bottom { transform: rotateX(-90deg) translateZ(66px); }

@keyframes enterCubeSpin {
  0%   { transform: rotateX(-18deg) rotateY(0deg); }
  50%  { transform: rotateX(-18deg) rotateY(180deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}

/* Gentle hover response on desktop */
@media (hover: hover) and (pointer: fine) {
  .hero-cube-wrap:hover .logo-cube {
    animation-duration: 10s;
  }
}

/* Make the cube feel balanced in the hero */
.hero-copy p {
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .hero-cube-wrap {
    justify-content: flex-start;
  }

  .logo-cube-scene {
    width: 116px;
    height: 116px;
  }

  .face-front,
  .face-back,
  .face-right,
  .face-left,
  .face-top,
  .face-bottom {
    /* placeholder to keep block grouped for readability */
  }

  .face-front  { transform: rotateY(  0deg) translateZ(58px); }
  .face-back   { transform: rotateY(180deg) translateZ(58px); }
  .face-right  { transform: rotateY( 90deg) translateZ(58px); }
  .face-left   { transform: rotateY(-90deg) translateZ(58px); }
  .face-top    { transform: rotateX( 90deg) translateZ(58px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(58px); }

  .cube-face img {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 620px) {
  .hero-cube-wrap {
    margin-bottom: 18px;
  }

  .logo-cube-scene {
    width: 96px;
    height: 96px;
  }

  .face-front  { transform: rotateY(  0deg) translateZ(48px); }
  .face-back   { transform: rotateY(180deg) translateZ(48px); }
  .face-right  { transform: rotateY( 90deg) translateZ(48px); }
  .face-left   { transform: rotateY(-90deg) translateZ(48px); }
  .face-top    { transform: rotateX( 90deg) translateZ(48px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(48px); }

  .cube-face img {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-cube {
    animation: none !important;
    transform: rotateX(-18deg) rotateY(28deg) !important;
  }
}


/* -------------------------------------------------------
   Subtle premium cube refinement
   ------------------------------------------------------- */

.hero-cube-wrap {
  margin: 0 0 18px;
  opacity: .78;
}

.logo-cube-scene {
  width: 96px;
  height: 96px;
  perspective: 1400px;
}

.logo-cube {
  animation-duration: 28s;
}

.cube-face {
  background: rgba(0, 0, 102, 0.68);
  border-color: rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 8px 24px rgba(0,0,0,.08);
}

.cube-face img {
  width: 40px;
  height: 40px;
  opacity: .82;
}

.face-front  { transform: rotateY(  0deg) translateZ(48px); }
.face-back   { transform: rotateY(180deg) translateZ(48px); }
.face-right  { transform: rotateY( 90deg) translateZ(48px); }
.face-left   { transform: rotateY(-90deg) translateZ(48px); }
.face-top    { transform: rotateX( 90deg) translateZ(48px); }
.face-bottom { transform: rotateX(-90deg) translateZ(48px); }

@keyframes enterCubeSpin {
  0%   { transform: rotateX(-14deg) rotateY(0deg); }
  50%  { transform: rotateX(-14deg) rotateY(180deg); }
  100% { transform: rotateX(-14deg) rotateY(360deg); }
}

@media (hover: hover) and (pointer: fine) {
  .hero-cube-wrap:hover {
    opacity: .95;
  }

  .hero-cube-wrap:hover .logo-cube {
    animation-duration: 20s;
  }
}

@media (max-width:860px) {
  .logo-cube-scene {
    width: 86px;
    height: 86px;
  }

  .face-front  { transform: rotateY(  0deg) translateZ(43px); }
  .face-back   { transform: rotateY(180deg) translateZ(43px); }
  .face-right  { transform: rotateY( 90deg) translateZ(43px); }
  .face-left   { transform: rotateY(-90deg) translateZ(43px); }
  .face-top    { transform: rotateX( 90deg) translateZ(43px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(43px); }

  .cube-face img {
    width: 36px;
    height: 36px;
  }
}

@media (max-width:620px) {
  .logo-cube-scene {
    width: 76px;
    height: 76px;
  }

  .face-front  { transform: rotateY(  0deg) translateZ(38px); }
  .face-back   { transform: rotateY(180deg) translateZ(38px); }
  .face-right  { transform: rotateY( 90deg) translateZ(38px); }
  .face-left   { transform: rotateY(-90deg) translateZ(38px); }
  .face-top    { transform: rotateX( 90deg) translateZ(38px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(38px); }

  .cube-face img {
    width: 32px;
    height: 32px;
  }
}

/* Mobile refinement: center the cube */
@media (max-width: 620px) {
  .hero-cube-wrap {
    justify-content: center;
    width: 100%;
  }
}