/* Websiteks / v2
   Existing brand + progressive motion. No WebGL, scroll-jacking, or font downloads.
   Everything remains readable when JavaScript is unavailable. */
:root {
  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-soft: cubic-bezier(.25,.46,.45,.94);
}
html { scrollbar-gutter: stable; }
.site-header {
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.is-scrolled {
  background: rgba(248,248,242,.93);
  border-bottom-color: rgba(22,24,27,.10);
  box-shadow: 0 8px 32px rgba(22,24,27,.045);
}
.reading-progress {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
  pointer-events: none; overflow: hidden;
}
.reading-progress > span {
  display: block; height: 100%; background: var(--orange);
  transform: scaleX(var(--page-progress,0)); transform-origin: left center;
}
.desktop-nav > a, .nav-drop > summary { position: relative; }
.desktop-nav > a::after, .nav-drop > summary::before {
  content: ''; position: absolute; bottom: 9px; left: 0; right: 0; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: right center;
  transition: transform .35s var(--motion-ease);
}
.desktop-nav > a:hover::after, .desktop-nav > a:focus-visible::after,
.desktop-nav > a[aria-current="page"]::after, .nav-drop[open] > summary::before {
  transform: scaleX(1); transform-origin: left center;
}
.nav-drop summary::after { transition: rotate .28s var(--motion-ease); }
.nav-drop[open] summary::after { rotate: 180deg; }
.drop-panel a { transition: background .2s ease, color .2s ease; }
.drop-panel a > span { transition: translate .3s var(--motion-ease); }
.drop-panel a:hover > span { translate: 2px -2px; }
.brand .star { transition: rotate .8s var(--motion-ease); }
.brand:hover .star { rotate: 90deg; }
.btn {
  position: relative;
  transition: background .25s ease, color .25s ease, transform .35s var(--motion-ease), box-shadow .35s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,24,27,.09); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .arrow, .text-link .arrow {
  display: inline-block; transition: translate .35s var(--motion-ease);
}
.btn:hover .arrow, .text-link:hover .arrow { translate: 3px -3px; }
.text-link { transition: color .2s ease; }
/* Headline line wrappers retain the approved typography. */
.hero { padding-bottom: 30px; }
.headline-line { display: block; }
.headline-inner { display: block; }
.hero h1 em { position: relative; width: fit-content; }
.hero h1 em::after {
  content: ''; position: absolute; left: .025em; right: .01em; bottom: .035em;
  height: 1px; opacity: .42; background: currentColor;
  transform-origin: left; transform: scaleX(1);
}
.hero-explore {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 36px; color: var(--muted); font-size: 10px;
}
.explore-link { display: inline-flex; align-items: center; gap: 11px; }
.explore-link:hover { color: var(--orange); }
.explore-icon {
  height: 30px; width: 22px; border: 1px solid #cbcbcd; border-radius: 14px;
  display: grid; place-items: center; font-size: 15px; color: var(--ink);
  transition: border-color .3s ease, translate .3s ease;
}
.explore-link:hover .explore-icon { border-color: var(--orange); translate: 0 3px; }
.hero-caption { font-size: 8px; letter-spacing: 1.35px; }
.hero-art { --hero-x: 0; --hero-y: 0; --hero-scroll: 0; }
html.motion-enabled .browser-art {
  translate: calc(var(--hero-x) * 8px) calc(var(--hero-y) * 6px + var(--hero-scroll) * -14px);
}
html.motion-enabled .social-art {
  translate: calc(var(--hero-x) * -10px) calc(var(--hero-y) * -8px + var(--hero-scroll) * -23px);
}
html.motion-enabled .art-note {
  translate: calc(var(--hero-x) * 5px) calc(var(--hero-y) * 4px + var(--hero-scroll) * -8px);
}
html.motion-enabled .art-stamp {
  translate: calc(var(--hero-x) * -4px) calc(var(--hero-y) * -4px + var(--hero-scroll) * 9px);
}
.browser-art { box-shadow: 0 28px 64px -24px rgba(22,24,27,.28); }
.art-backdrop { background-size: 17px 17px; }
.art-backdrop::before {
  content: ''; position: absolute; inset: 25px 22px; border: 1px solid #c7c7c747;
  border-radius: 50%; transform: rotate(-12deg);
}
.art-stamp { box-shadow: 0 10px 34px -20px rgba(244,87,50,.5); }
.strip-actions { display: flex; align-items: center; gap: 18px; }
.strip-pause {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; line-height: 1; padding: 0;
}
.strip-pause:hover { border-color: var(--orange); color: var(--orange); }
.logo-track { animation-duration: 55s; }
.logo-window:hover .logo-track, .logo-window:focus-within .logo-track,
.reference-strip.is-paused .logo-track, html.motion-paused .logo-track { animation-play-state: paused; }
.client-logo { transition: opacity .25s, color .25s; }
.client-logo:hover { color: var(--orange); }
/* Staggered entrances are applied using the Web Animations API, not opacity:0 CSS. */
.service-col { position: relative; transition: border-color .3s ease; }
.service-col::before {
  content: ''; position: absolute; top: -1px; height: 2px; left: 0; right: 0;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--motion-ease);
}
.service-col:hover::before, .service-col:focus-within::before { transform: scaleX(1); }
.card-meta .star { transition: rotate .7s var(--motion-ease), color .35s; }
.service-col:hover .card-meta .star, .service-col:focus-within .card-meta .star {
  rotate: 90deg; color: var(--orange);
}
.link-stack a, .sector-list a {
  transition: color .25s, padding .35s var(--motion-ease), background .3s;
}
.link-stack a:hover, .link-stack a:focus-visible { padding-left: 8px; padding-right: 5px; }
.link-stack a span:last-child, .sector-list a span:last-child {
  display: inline-block; transition: translate .35s var(--motion-ease);
}
.link-stack a:hover span:last-child, .sector-list a:hover span:last-child { translate: 2px -2px; }
.work-visual { border: 1px solid rgba(22,24,27,.04); }
.work-browser {
  transform-origin: 50% 100%; transition: transform .75s var(--motion-ease), box-shadow .6s ease;
}
.work-card a:hover .work-browser, .work-card a:focus-visible .work-browser {
  transform: translateY(-9px) scale(1.018); box-shadow: 0 24px 40px rgba(22,24,27,.10);
}
.work-browser-scene img, .page-visual > img, .journal-art img {
  transition: transform 1.1s var(--motion-ease);
}
.work-card a:hover .work-browser-scene img { transform: scale(1.04); }
.circle-arrow {
  transition: background .3s, border-color .3s, color .3s, transform .45s var(--motion-ease);
}
.work-card a:hover .circle-arrow, .work-card a:focus-visible .circle-arrow {
  background: var(--orange); border-color: var(--orange); color: white; transform: rotate(0deg);
}
.work-caption h3 { transition: color .3s; }
.work-card a:hover .work-caption h3 { color: #5d5d5d; }
.sector-list a.is-active { color: var(--orange); padding-left: 10px; background: #e8ebdf50; }
.sector-picture { isolation: isolate; }
.sector-picture > img { transition: opacity .3s ease, transform 1s var(--motion-ease); }
.sector-preview-tag {
  position: absolute; top: 68px; left: 28px; z-index: 2; padding: 13px 18px;
  border-radius: 6px; background: rgba(248,248,242,.95); border: 1px solid #d5d9c899;
  box-shadow: 0 12px 32px -20px rgba(22,24,27,.2); max-width: calc(100% - 56px);
}
.sector-preview-tag > span { display: block; font-size: 7px; letter-spacing: 1.3px; color: var(--muted); margin-bottom: 4px; }
.sector-preview-tag > strong { display: block; font-size: 12px; font-weight: 500; line-height: 1.4; }
.process-section { position: relative; overflow: hidden; }
.process-section::after {
  content: ''; position: absolute; pointer-events: none; width: 540px; height: 540px;
  border: 1px solid rgba(193,193,193,.08); border-radius: 50%; right: -250px; top: -280px;
}
.process-progress {
  height: 1px; background: rgba(193,193,193,.18); margin-bottom: 32px;
  position: relative; display: none;
}
html.motion-enabled .process-progress { display: block; }
.process-progress > span { display: block; height: 2px; width: 100%; transform: scaleX(var(--process-progress,0)); background: #c1c1c1; transform-origin: left; }
.step { position: relative; transition: border-color .4s ease; }
.step-num { align-items: center; min-height: 32px; }
.step-num > span:first-child {
  width: 31px; height: 31px; border: 1px solid rgba(193,193,193,.3); border-radius: 50%;
  display: grid; place-items: center; transition: background .4s, color .4s, border-color .4s;
}
.step.is-current .step-num > span:first-child { background: #c1c1c1; border-color: #c1c1c1; color: var(--green); }
.step.is-current { border-top-color: #c1c1c1; }
.step.is-complete .step-num > span:first-child { border-color: #c1c1c1; }
.info-card { transition: border-color .35s, transform .45s var(--motion-ease), box-shadow .45s; }
.info-card:hover { border-color: #a4a4a4; transform: translateY(-5px); box-shadow: 0 20px 40px -30px rgba(22,24,27,.28); }
.info-card:hover .arrow { translate: 3px -3px; }
.journal-card { overflow: hidden; }
.journal-card:hover .journal-art img { transform: scale(1.045); }
.template-card { transition: transform .4s var(--motion-ease), box-shadow .4s, border-color .3s; }
.template-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -28px #16181b40; }
.filter { transition: background .25s, color .25s, border-color .25s; }
.price-card { transition: box-shadow .5s, border-color .5s; }
.price-card:hover, .price-card:focus-within { border-color: #c8c9cb; box-shadow: 0 22px 50px -27px rgba(22,24,27,.22); }
.faq-item summary { transition: color .25s; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--orange); }
.faq-item summary::after { content: '+'; transition: transform .3s var(--motion-ease); }
.faq-item[open] summary::after { content: '+'; transform: rotate(45deg); }
.cta-box > .star { transition: rotate 1.2s var(--motion-ease); }
.cta-box:hover > .star { rotate: 35deg; }
.footer-col a { transition: color .25s, translate .3s var(--motion-ease); }
.footer-col a:hover { translate: 3px 0; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 0;
  color: inherit; background: transparent; border: 0; font-size: inherit; cursor: pointer;
}
.motion-toggle:hover { color: white; }
.motion-toggle-icon { font-size: 11px; width: 15px; text-align: center; }
.field input, .field select, .field textarea { transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px #f4573212; }
/* Native navigation; closing menus remains instantaneous and predictable. */
html.motion-enabled .nav-drop[open] .drop-panel { animation: panel-in .23s var(--motion-ease) both; }
html.motion-enabled .mobile-nav:not([hidden]) { animation: panel-in .25s var(--motion-ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (min-width: 1021px) {
  .sector-section .sector-grid { align-items: center; }
  .sector-picture:hover > img { transform: scale(1.035); }
}
@media (max-width: 1020px) {
  .hero-caption { max-width: 230px; text-align: right; line-height: 1.6; }
  .footer-bottom > div { flex-wrap: wrap; align-items: center; row-gap: 15px; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 29px; }
  .hero-explore { margin-top: 39px; font-size: 10px; }
  .hero-caption { display: none; }
  .strip-actions { gap: 11px; }
  .strip-pause { width: 25px; height: 25px; }
  .sector-preview-tag { left: 24px; top: 52px; padding: 11px 15px; }
  .sector-preview-tag > strong { font-size: 11px; }
  .process-progress { margin-bottom: 24px; }
  .step-num { margin-bottom: 18px; }
  .reading-progress { height: 2px; }
}
@media (hover: none) {
  .btn:hover, .info-card:hover, .template-card:hover { transform: none; box-shadow: none; }
  .work-card a:hover .work-browser, .work-card a:hover .work-browser-scene img { transform: none; }
}
/* A pause control never requires persistent storage or cookies. */
html.motion-paused { scroll-behavior: auto; }
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after {
  animation: none !important; transition: none !important;
}
html.motion-paused .browser-art, html.motion-paused .social-art,
html.motion-paused .art-note, html.motion-paused .art-stamp { translate: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .browser-art, .social-art, .art-note, .art-stamp { translate: none !important; }
  .logo-window { overflow: visible; mask-image: none; }
  .logo-track { flex-wrap: wrap; width: auto; transform: none !important; gap: 18px 28px; }
  .logo-track .duplicate { display: none; }
  .strip-pause { display: none !important; }
}
@media print {
  .hero-explore, .process-progress, .reading-progress, .motion-toggle, .strip-pause { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.motion-paused .logo-window { overflow: visible; mask-image: none; }
html.motion-paused .logo-track { flex-wrap: wrap; width: auto; transform: none !important; gap: 18px 28px; }
html.motion-paused .logo-track .duplicate { display: none; }

/* Generated-photo motion. Every image remains complete and readable without these effects. */
html.motion-enabled .hero-photo-main {
  translate: calc(var(--hero-x) * 6px) calc(var(--hero-y) * 5px + var(--hero-scroll) * -11px);
}
html.motion-enabled .hero-photo-detail {
  translate: calc(var(--hero-x) * -9px) calc(var(--hero-y) * -7px + var(--hero-scroll) * -18px);
}
html.motion-enabled .hero-photo-label {
  translate: calc(var(--hero-x) * 3px) calc(var(--hero-y) * 2px + var(--hero-scroll) * -5px);
}
.hero-photo-main img,.hero-photo-detail img,
.page-visual>img,.page-visual>picture>img,
.service-group-visual>img,.service-group-visual>picture>img,
.service-card-visual>img,.service-card-visual>picture>img,
.service-visual-card>img,.service-visual-card>picture>img,
.sector-card-visual>img,.sector-card-visual>picture>img,
.article-visual>img,.article-visual>picture>img,
.contact-visual>img,.contact-visual>picture>img,
.pricing-visual>img,.pricing-visual>picture>img,
.journal-art>img,.journal-art>picture>img {
  transition: transform 1.05s var(--motion-ease);
}
.page-visual,.service-group-visual,.service-card-visual,.service-visual-card,
.sector-card-visual,.article-visual,.contact-visual,.pricing-visual,.journal-art {
  transition: border-color .35s ease, box-shadow .6s var(--motion-ease);
}
.sector-picture {
  transition: border-color .35s ease, box-shadow .6s var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hero-art-photo:hover .hero-photo-main img { transform: scale(1.018); }
  .hero-art-photo:hover .hero-photo-detail img { transform: scale(1.035); }
  .service-col:hover .service-group-visual img,
  .service-col:focus-within .service-group-visual img,
  .info-card:not(.reference-card):hover .service-card-visual img,
  .info-card:not(.reference-card):focus-visible .service-card-visual img,
  .info-card:not(.reference-card):hover .service-visual-card img,
  .info-card:not(.reference-card):focus-visible .service-visual-card img,
  .info-card:not(.reference-card):hover .sector-card-visual img,
  .info-card:not(.reference-card):focus-visible .sector-card-visual img,
  .journal-card:hover .journal-art img,
  .journal-card:focus-visible .journal-art img { transform: scale(1.035); }
  .service-col:hover .service-group-visual,
  .service-col:focus-within .service-group-visual,
  .info-card:not(.reference-card):hover .service-card-visual,
  .info-card:not(.reference-card):hover .service-visual-card,
  .info-card:not(.reference-card):hover .sector-card-visual {
    border-color:rgba(74,74,74,.24);box-shadow:0 24px 54px -38px rgba(43,43,43,.48);
  }
}
@media (hover: none) {
  .hero-art-photo:hover .hero-photo-main img,.hero-art-photo:hover .hero-photo-detail img,
  .service-col:hover .service-group-visual img,
  .info-card:not(.reference-card):hover .service-card-visual img,
  .info-card:not(.reference-card):hover .service-visual-card img,
  .info-card:not(.reference-card):hover .sector-card-visual img,
  .journal-card:hover .journal-art img { transform:none; }
}
html.motion-paused .hero-photo-main,html.motion-paused .hero-photo-detail,
html.motion-paused .hero-photo-label { translate:none !important; }
html.motion-paused .hero-photo-main img,html.motion-paused .hero-photo-detail img,
html.motion-paused .service-group-visual img,html.motion-paused .service-card-visual img,
html.motion-paused .service-visual-card img,html.motion-paused .sector-card-visual img,
html.motion-paused .journal-art img { transform:none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo-main,.hero-photo-detail,.hero-photo-label { translate:none !important; }
  .hero-photo-main img,.hero-photo-detail img,.service-group-visual img,
  .service-card-visual img,.service-visual-card img,.sector-card-visual img,
  .journal-art img { transform:none !important; }
}