/* Rayanify — global styles
   Design tokens, resets, keyframes, hover/active states.
   Layout and per-element styling live as inline style attributes in index.html
   (deliberate: it is how the approved design was authored). Do not "clean this up"
   into classes unless you re-verify every section visually. */

:root{
  --ink:oklch(0.168 0.040 262);
  --ink2:oklch(0.228 0.046 262);
  --ink3:oklch(0.205 0.044 262);
  --fg:oklch(0.975 0.006 250);
  --fg2:oklch(0.800 0.022 250);
  --fg3:oklch(0.640 0.030 254);
  --line:oklch(0.80 0.05 250 / 0.19);
  --line2:oklch(0.80 0.05 250 / 0.105);
  --accent:oklch(0.83 0.115 192);
}

/* sRGB token fallback for browsers without oklch() support. */
@supports not (color: oklch(0.5 0.1 200)){
  :root{
    --ink:#0d1424;
    --ink2:#1b253c;
    --ink3:#161f33;
    --fg:#f5f7fb;
    --fg2:#bcc6d6;
    --fg3:#8c99ad;
    --line:rgba(180,199,225,0.19);
    --line2:rgba(180,199,225,0.105);
    --accent:#5ed4dd;
  }
}

html{background:var(--ink);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--fg);font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.55;text-wrap:pretty}
*{box-sizing:border-box}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0}
ul{list-style:none}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}
canvas{display:block}

/* ---- surfaces ---- */
.sheen{background:linear-gradient(180deg, oklch(0.55 0.10 245 / 0.055), transparent 62%)}
.panel{
  border:1px solid var(--line2);
  border-radius:5px;
  background:linear-gradient(180deg, oklch(0.62 0.09 245 / 0.055), oklch(0.62 0.09 245 / 0.012));
  box-shadow:inset 0 1px 0 oklch(0.85 0.04 250 / 0.06);
}
@supports not (color: oklch(0.5 0.1 200)){
  .sheen{background:linear-gradient(180deg, rgba(86,130,196,0.055), transparent 62%)}
  .panel{background:linear-gradient(180deg, rgba(110,150,210,0.055), rgba(110,150,210,0.012));box-shadow:inset 0 1px 0 rgba(215,228,245,0.06)}
}

/* ---- principles grid: 4-up desktop, 2-up tablet, 1-up phone ---- */
.principles{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--ink);
  border:1px solid var(--line2);
  border-radius:5px;
  overflow:hidden;
}
.principles > div{outline:1px solid var(--line2)}
.principles > div:hover{background:var(--ink3) !important}
@media (min-width:1080px){.principles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.principles{grid-template-columns:minmax(0,1fr)}}

@media (max-width:560px){
  .footer-primary-row{flex-direction:column;align-items:flex-start !important}
  .footer-nav{width:100%;justify-content:flex-start !important}
  .footer-contact-link{justify-content:flex-start !important;padding:9px 0 !important;font-size:14.5px !important}
  .footer-meta-row{flex-direction:column;align-items:flex-start !important}
  .footer-meta-links{flex-wrap:wrap}
}

/* ---- buttons and links (hover states) ---- */
.btn-accent{
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s;
}
.btn-accent:hover{color:var(--ink);transform:translateY(-2px);filter:brightness(1.08)}
header .btn-accent{transition:transform .25s cubic-bezier(.16,1,.3,1), filter .25s}
header .btn-accent:hover{transform:translateY(-1px)}

.nav-link{transition:color .25s}
.nav-link:hover{color:var(--fg) !important}

.f-link:hover,.f-mini:hover{color:var(--accent) !important}
.footer-contact-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;font-size:14px !important}

#area-tabs button:hover .tab:not(.is-active){color:var(--fg2)}
#step-rail button:hover .step-label:not(.is-active){color:var(--fg2)}

/* Compact navigation is reserved for phone and small-tablet layouts. */
.mobile-nav{display:none;position:relative}
.mobile-nav summary{list-style:none;min-width:68px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:9px;color:var(--fg2);font-size:14px;cursor:pointer}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{color:var(--accent);font-size:18px;line-height:1;transition:transform .2s ease}
.mobile-nav[open] summary span{transform:rotate(45deg)}
.mobile-nav nav{position:absolute;z-index:80;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 40px));padding:10px;background:var(--ink2);border:1px solid var(--line);border-radius:5px;box-shadow:0 18px 45px oklch(0.08 0.03 262 / .55);display:grid;gap:2px}
.mobile-nav nav a{min-height:44px;padding:10px 12px;border-radius:4px;display:flex;align-items:center;color:var(--fg2);font-size:14.5px}
.mobile-nav nav a:active{background:var(--ink3);color:var(--fg)}
.mobile-nav nav .mobile-nav-cta{margin-top:5px;justify-content:center;color:var(--ink);background:var(--accent);font-weight:500}

/* ---- keyframes ---- */
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes railTravel5{0%{left:10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:90%;opacity:0}}

/* Scroll reveals: driven by IntersectionObserver in main.js (see README — works in
   all modern browsers, unlike CSS scroll-timelines which are Chromium-only). */
.reveal{opacity:1}
.reveal.reveal-ready:not(.is-in){opacity:0}
.reveal.is-in{animation:revealUp .85s cubic-bezier(.16,1,.3,1) both}
.reveal:focus-within{opacity:1;animation:none;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal.reveal-ready:not(.is-in){opacity:1}
  *{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  .reveal{opacity:1}
}

/* Accessibility only: the approved default layout and typography remain intact. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:12px;z-index:1000;padding:10px 16px;background:var(--ink2);border:1px solid var(--accent);border-radius:5px;transform:translateY(-200%)}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
#scenario-playback{cursor:pointer;border-radius:5px}
#scenario-dial[hidden]{display:none !important}
html{scroll-padding-top:var(--header-offset,100px)}

/* Service scenarios: the existing palette, typefaces and radial geometry are retained. */
.service-card{display:flex;flex-direction:column;min-block-size:480px}
.scenario-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.scenario-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--fg3);white-space:nowrap}
.scenario-title{font-size:18px;line-height:1.35;letter-spacing:-0.018em;font-weight:500;margin-top:22px}
.scenario-copy{min-block-size:164px;opacity:1;transition:opacity 180ms ease}
.scenario-copy.is-changing{opacity:0}
.scenario-navigation{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:22px;margin-top:auto}
.scenario-indicators{display:flex;align-items:center;gap:2px}
.scenario-arrow,.scenario-indicator{display:inline-flex;align-items:center;justify-content:center;padding:0;min-width:32px;min-height:32px;border-radius:4px;color:var(--fg3)}
.scenario-arrow{font-size:24px;line-height:1}
.scenario-arrow:hover{color:var(--accent)}
.scenario-indicator span{width:6px;height:6px;border-radius:50%;border:1px solid var(--fg3);transition:background .18s,border-color .18s}
.scenario-indicator[aria-pressed="true"] span{background:var(--accent);border-color:var(--accent)}
#service-card [hidden]{display:none !important}
@media(prefers-reduced-motion:reduce){.scenario-copy{transition:none}}

.implementation-rail-scroll{overflow:visible}

.services-callout{
  margin-top:0;
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line2);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.services-callout-copy{display:flex;flex-direction:column;gap:8px}
.services-callout-cta{white-space:nowrap;transition:color .25s,border-color .25s}
.services-callout-cta:hover{color:var(--fg) !important;border-color:var(--fg) !important}

@media(min-width:1024px){
  #area-panel{row-gap:0 !important;align-items:stretch !important}
  .service-overview{grid-column:1;grid-row:1}
  #area-title{min-height:2.16em !important}
  #area-desc{min-height:6.4em !important}
  #area-chips{display:grid !important;grid-template-columns:max-content max-content;grid-auto-rows:min-content;align-content:start;min-height:70px}
  #service-card{grid-column:2;grid-row:1 / span 2;align-self:stretch}
  .services-callout{grid-column:1;grid-row:2;margin-top:24px}
}

@media(max-width:720px){
  .site-header-inner{flex-wrap:nowrap !important}
  .desktop-nav{display:none !important}
  .mobile-nav{display:block}
  #area-tabs{flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;gap:24px !important}
  #area-tabs::-webkit-scrollbar,.implementation-rail-scroll::-webkit-scrollbar{display:none}
  #area-tabs button{scroll-snap-align:start}
  .scenario-arrow,.scenario-indicator{min-width:44px;min-height:44px}
  .implementation-rail-scroll{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;padding-bottom:6px}
  .implementation-rail-track{min-width:520px}
  #step-rail button{min-width:96px;min-height:58px;scroll-snap-align:start}
}

@media(max-width:480px){
  .scenario-copy{min-block-size:180px}
  .service-card{min-block-size:0}
}

@media(max-width:420px){
  #scenario-dial{justify-content:center}
  #scenario-progress{flex:1 0 100% !important;min-width:0 !important;text-align:center}
}

/* Zoho-backed enquiry form: uses the site's existing type, colour and surface system. */
.enquiry-form{display:grid;gap:22px}
.enquiry-field{display:grid;gap:9px}
.enquiry-field label{font-size:14px;font-weight:500;letter-spacing:-0.005em;color:var(--fg2)}
.enquiry-field label span{color:var(--accent)}
.enquiry-field input,.enquiry-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--ink2);
  color:var(--fg);
  font:inherit;
  font-size:16px;
  line-height:1.5;
  padding:12px 14px;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.enquiry-field textarea{min-height:142px;resize:vertical}
.enquiry-field input:hover,.enquiry-field textarea:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.enquiry-field input:focus,.enquiry-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);background:var(--ink3)}
.enquiry-submit{
  justify-self:start;
  color:var(--ink);
  background:var(--accent);
  border-radius:999px;
  padding:14px 26px;
  font-size:15px;
  font-weight:500;
  letter-spacing:-0.012em;
  box-shadow:0 8px 30px -12px var(--accent);
  transition:transform .3s cubic-bezier(.16,1,.3,1),filter .3s;
}
.enquiry-submit:hover{transform:translateY(-2px);filter:brightness(1.08)}
.enquiry-submit:focus-visible,.enquiry-field input:focus-visible,.enquiry-field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.enquiry-submit:disabled{cursor:wait;transform:none;filter:saturate(.72);opacity:.78}
.enquiry-status{font-size:13px;line-height:1.55;color:var(--fg3);letter-spacing:-0.004em}