/* Hero trust cards and editorial services. All content stays in normal flow. */
.hero__intro { display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.hero__content { grid-row:1; width:100%; margin:0; padding:0; }
.hero-float { position:relative; width:min(100%,280px); justify-self:center; padding:24px; border-radius:22px; box-shadow:0 18px 40px -24px #15223855; }
.hero-float--reviews { background:#ffffffdc; border:1px solid #fff; color:var(--color-navy); backdrop-filter:blur(15px); transform:rotate(-5deg); animation:review-float 8s ease-in-out infinite; }
.hero-float--reviews::before { content:''; width:52px; height:16px; background:#e8dedccb; border:1px solid #ffffffa6; position:absolute; top:-8px; left:calc(50% - 26px); transform:rotate(4deg); }
.hero-float__top { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.hero-float__tab { font-size:.75rem; font-weight:500; letter-spacing:.045em; }
.google-word { font-family:Arial,sans-serif; font-weight:500; font-size:25px; letter-spacing:-1.7px; }
.google-word>span:nth-child(1),.google-word>span:nth-child(4) { color:#4285f4; }
.google-word>span:nth-child(2),.google-word>span:nth-child(6) { color:#ea4335; }
.google-word>span:nth-child(3) { color:#c18d00; }
.google-word>span:nth-child(5) { color:#258747; }
.hero-float__rating { display:flex; align-items:baseline; gap:8px; margin-top:18px; }
.hero-float__rating strong { font-size:3.7rem; line-height:1; font-weight:800; letter-spacing:-.07em; }
.hero-float__rating>span { font-size:1rem; color:var(--color-muted); }
.hero-float__stars { color:#b77c09; font-size:1.35rem; letter-spacing:3px; margin-top:8px; }
.hero-float__copy { font-size:.875rem; line-height:1.7; color:#5c6472; margin-top:14px; }
.hero-float__source { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--color-line); padding-top:14px; margin-top:16px; font-size:.875rem; font-weight:500; }
.hero-float__source .icon { width:17px; height:17px; }
.hero-float__source:hover { color:var(--color-bordeaux); }
.hero-float--method { background:linear-gradient(145deg,#26354c,#152238 80%); color:#fff; border:1px solid #ffffff40; transform:rotate(5deg); animation:method-float 9s ease-in-out infinite; }
.hero-float__spark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#ffffff0b; border:1px solid #ffffff24; color:#ffbc8e; }
.hero-float__spark .icon { width:26px; height:26px; }
.hero-float--method .hero-float__tab { color:#e0e4ec; }
.hero-float__headline { font-size:1.65rem; line-height:1.22; font-weight:800; letter-spacing:-.035em; margin-top:18px; }
.hero-float__headline>span { color:#ffb185; }
.hero-float__journey { display:flex; align-items:center; margin-top:22px; }
.hero-float__journey>span { display:grid; place-items:center; flex-shrink:0; width:31px; height:31px; border:1px solid #ffffff40; border-radius:50%; font-size:.7rem; }
.hero-float__journey>span:last-child { color:#ffb185; border-color:#ffb185; }
.hero-float__journey>i { height:1px; flex:1; background:#ffffff40; position:relative; overflow:hidden; }
.hero-float__journey>i::after { content:''; display:block; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#ffb185,transparent); animation:journey-light 3s linear infinite; }
.hero-float__journey>i:nth-of-type(2)::after { animation-delay:1.5s; }
.hero-float__steps { font-size:.875rem; color:#d5dce7; margin-top:14px; line-height:1.6; }
.portfolio-orbit { margin-top:34px; }
@keyframes review-float { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-7px) rotate(-3deg)} }
@keyframes method-float { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(8px) rotate(3deg)} }
@keyframes journey-light { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* A continuous pearl surface frames four individual service compositions. */
.services--studio { width:100%; max-width:none; padding:72px 0 32px; background:#f1f3f6; border-top:1px solid #e4e7ed; position:relative; }
.services--studio::before { content:''; position:absolute; top:0; left:50%; height:36px; width:1px; background:linear-gradient(var(--color-bordeaux),transparent); }
.services__heading { gap:24px; margin-bottom:38px; }
.services .eyebrow { font-size:.875rem; letter-spacing:.065em; }
.services h2 { margin-top:19px; font-size:clamp(2rem,3.2vw,2.8rem); }
.services__intro { max-width:350px; font-size:1.125rem; line-height:1.8; }
.services__grid--bento { grid-template-columns:1fr; gap:22px; }
.service-card { position:relative; display:flex; padding:28px; min-height:0; overflow:hidden; border-radius:24px; border:1px solid #e0e4e9; background:#fff; box-shadow:0 6px 22px -18px #15223850; transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.service-card:hover,.service-card.reveal--visible:hover { transform:translateY(-5px); box-shadow:0 24px 45px -28px #15223860; }
.service-card__top { margin-bottom:24px; align-items:center; }
.service-card__icon { width:60px; height:60px; padding:12px; border:1px solid #781f381a; border-radius:17px; background:#781f3808; stroke-width:1.65; }
.service-card__number { font-size:2.8rem; line-height:1; font-weight:300; letter-spacing:-.065em; color:#15223859; }
.service-card__body { margin-bottom:22px; position:relative; z-index:1; }
.service-card__category { font-size:.875rem; letter-spacing:.025em; color:#606775; }
.service-card h3 { font-size:2rem; line-height:1.15; margin:12px 0 16px; letter-spacing:-.045em; }
.service-card h3 br { display:none; }
.service-card__body>p:last-child { font-size:1.125rem; line-height:1.7; max-width:32ch; }
.service-card__bottom { padding-top:19px; margin-top:auto; font-size:.875rem; border-top:1px solid #1522381b; }
.service-card__visual { position:relative; height:226px; width:min(100%,280px); align-self:center; margin:0 0 30px; perspective:800px; }
.service-demo { border-radius:10px; overflow:hidden; position:absolute; width:230px; top:5px; left:calc(50% - 115px); box-shadow:0 18px 28px -18px #0005; transition:transform .5s var(--ease); }
.service-demo__bar { display:flex; align-items:center; gap:4px; height:22px; padding:0 10px; background:#eeeef1; }
.service-demo__bar>i { display:block; width:4px; height:4px; border-radius:50%; background:#b8b9c1; }
.service-demo__bar>span { margin-left:auto; font-size:8px; color:#778493; }
.service-demo__tag { position:absolute; bottom:0; right:-4px; background:#fff; color:#253047; border:1px solid #e7e9ee; box-shadow:0 5px 15px #15223810; border-radius:8px; padding:9px 12px; font-size:11px; font-weight:500; transform:rotate(-4deg); }
.service-demo--browser { background:#f7f3ed; transform:rotate(-7deg) rotateY(-8deg); }
.service-demo__page { height:167px; position:relative; padding:20px 15px; color:var(--color-bordeaux); }
.service-demo__page>span { display:block; font-size:8px; font-weight:500; letter-spacing:1px; }
.service-demo__page>strong { display:block; font-size:27px; line-height:1.04; letter-spacing:-1px; margin-top:14px; }
.service-demo__page>b { display:inline-block; padding:7px 10px; margin-top:15px; background:var(--color-bordeaux); color:#fff; border-radius:20px; font-size:6px; font-weight:500; }
.service-demo__page .icon { width:66px; height:66px; position:absolute; right:12px; top:53px; stroke-width:4; transform:rotate(10deg); }
.service-card--web { background:linear-gradient(130deg,#781f38,#5c1c30); color:#fff; border-color:#781f38; }
.service-card--web .service-card__icon { color:#fff; background:#ffffff10; border-color:#ffffff24; }
.service-card--web .service-card__number { color:#ffffff57; }
.service-card--web .service-card__category { color:#ead3db; }
.service-card--web .service-card__body>p:last-child { color:#f0dfe5; }
.service-card--web .service-card__bottom { border-color:#ffffff2a; }
.service-card--commerce { background:#fff; }
.service-demo--product { width:197px; left:calc(50% - 98px); background:#faf6ef; transform:rotate(7deg) rotateY(7deg); border:1px solid #ded7ca; }
.service-demo--product>img { display:block; width:100%; height:116px; object-fit:cover; }
.service-demo--product>div { padding:12px; }
.service-demo--product span { display:block; font-size:7px; letter-spacing:.6px; color:#706254; }
.service-demo--product strong { display:block; font-size:12px; margin-top:6px; color:#41382d; }
.service-demo--product b { display:block; font-weight:500; margin-top:10px; padding:9px 6px; background:#373a2c; color:#fff; font-size:6px; text-align:center; }
.service-card--custom { background:linear-gradient(135deg,#24344e,#152238); color:#fff; border-color:var(--color-navy); }
.service-card--custom .service-card__icon { color:#e8edfb; stroke:#e8edfb; background:#ffffff0c; border-color:#ffffff25; }
.service-card--custom .service-card__number { color:#ffffff57; }
.service-card--custom .service-card__category { color:#c6d0e2; }
.service-card--custom .service-card__body>p:last-child { color:#d5deed; }
.service-card--custom .service-card__bottom { border-color:#ffffff2a; }
.service-card--custom .service-card__dash { background:#ffb185; }
.service-demo--code { background:#101b2c; border:1px solid #ffffff30; transform:rotate(-5deg) rotateY(-7deg); }
.service-demo--code .service-demo__bar { background:#ffffff09; }
.service-demo--code code { display:block; padding:15px; color:#d2dcec; font-size:11px; line-height:1.65; }
.service-demo--code code span { color:#ffb185; }
.service-demo--code code em { color:#9cddc5; font-style:normal; }
.service-card--strategy { background:#e8ecf3; border-color:#dce2ec; }
.service-card--strategy .service-card__icon { stroke:#304968; background:#ffffff70; border-color:#ccd5e2; }
.service-demo--strategy { background:white; border:1px solid #d5deea; padding:18px 17px; transform:rotate(6deg) rotateY(7deg); }
.service-demo--strategy>span { font-size:7px; letter-spacing:.7px; color:#69778a; }
.service-demo--strategy>div { display:flex; gap:6px; margin:18px 0; }
.service-demo--strategy i { padding:9px 10px; border-radius:6px; font-size:8px; font-style:normal; background:#eaf0f5; color:#304968; }
.service-demo--strategy i:nth-child(2) { background:#781f38; color:white; }
.service-demo--strategy p { color:#24344e; font-size:17px; line-height:1.3; letter-spacing:-.5px; }
.service-demo--strategy b { display:block; margin-top:19px; border-top:1px solid #e3e8ef; padding-top:12px; font-size:7px; letter-spacing:.6px; font-weight:500; color:#69778a; }
.service-card:hover .service-demo { transform:rotate(0) translateY(-5px); }
.services__closing { margin-top:28px; font-size:1rem; }
@media(min-width:600px) {
  .hero__intro { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
  .hero__content { grid-column:1/-1; }
  .hero-float { width:245px; }
  .hero-float--reviews { justify-self:end; }
  .hero-float--method { justify-self:start; }
  .services__grid--bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1180px) {
  .hero__intro { width:min(1450px,calc(100% - 64px)); grid-template-columns:220px minmax(0,1fr) 220px; gap:28px; }
  .hero__content { grid-column:2; grid-row:1; }
  .hero__title { font-size:clamp(2.55rem,3.5vw,3.55rem); }
  .hero__description { font-size:1.125rem; line-height:1.75; }
  .hero__description .hero__break { display:none; }
  .hero__actions { flex-wrap:wrap; }
  .hero__actions .button { font-size:.94rem; padding:17px 22px; gap:12px; }
  .hero-float { width:220px; padding:21px; }
  .hero-float--reviews { grid-column:1; grid-row:1; justify-self:start; margin-top:35px; }
  .hero-float--method { grid-column:3; grid-row:1; justify-self:end; margin-top:75px; }
  .hero-float__top { gap:8px; }
  .hero-float__tab { font-size:.7rem; }
  .hero-float__headline { font-size:1.65rem; }
  .portfolio-orbit { margin-top:38px; }
  .service-card { padding:30px; min-height:380px; }
  .service-card__body { width:52%; }
  .service-card h3 { font-size:2rem; }
  .service-card h3 br { display:block; }
  .service-card__body>p:last-child { font-size:1.125rem; line-height:1.65; }
  .service-card__visual { position:absolute; right:20px; top:100px; width:210px; height:218px; margin:0; }
  .service-demo { width:196px; left:7px; }
  .service-demo__page>strong { font-size:25px; }
  .service-demo__page .icon { width:44px; height:44px; right:9px; top:65px; }
  .service-demo--product { width:174px; left:18px; }
  .service-demo--code code { font-size:9px; padding:14px; }
  .service-demo--strategy { padding:16px 14px; }
  .service-demo--strategy>div { gap:4px; }
  .service-demo--strategy i { padding:8px; }
  .service-demo__tag { font-size:10px; padding:9px; right:-2px; }
}
@media(min-width:1450px) {
  .hero__intro { grid-template-columns:245px minmax(0,1fr) 245px; gap:35px; }
  .hero-float { width:235px; padding:24px; }
  .hero-float__tab { font-size:.75rem; }
  .hero__title { font-size:3.55rem; }
  .service-card__visual { right:26px; width:235px; }
  .service-demo { width:217px; left:9px; }
  .service-demo--product { width:186px; left:24px; }
  .service-demo--code code { font-size:10px; }
}
@media(max-width:599px) {
  .hero__intro { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
  .hero__content { grid-column:1/-1; }
  .hero-float { padding:16px 13px; border-radius:16px; width:100%; margin-top:8px; }
  .hero-float__top { align-items:flex-start; flex-direction:column; gap:6px; }
  .hero-float__tab { font-size:.7rem; }
  .hero-float__rating strong { font-size:2.7rem; }
  .hero-float__rating { margin-top:13px; }
  .hero-float__stars { font-size:1rem; letter-spacing:1px; }
  .hero-float__copy { font-size:.8rem; line-height:1.6; }
  .hero-float__source { font-size:.8rem; padding-top:10px; margin-top:12px; gap:6px; }
  .hero-float__headline { font-size:1.3rem; margin-top:14px; }
  .hero-float__journey { margin-top:17px; }
  .hero-float__journey>span { width:24px; height:24px; font-size:.6rem; }
  .hero-float__steps { font-size:.8rem; line-height:1.6; }
  .hero-float--method { align-self:center; }
  .hero-float__spark { width:32px; height:32px; border-radius:9px; }
  .hero-float__spark .icon { width:22px; height:22px; }
  .services--studio { padding-top:54px; }
  .service-card { padding:25px; }
  .service-card__visual { margin-bottom:25px; }
  .services__closing { font-size:.875rem; }
}
@media(max-width:359px) { .hero__intro { grid-template-columns:1fr; } .hero-float { width:235px; } .hero-float__top { flex-direction:row; } }
@media(prefers-reduced-motion:reduce) { .hero-float,.hero-float__journey>i::after { animation:none; } }