/* Arcteligent Labs — shared styles for the main site pages.
   Page-specific layout stays inline in each page; anything that appears on
   more than one page (tokens, header, buttons, band, footer, motion) lives here.
   Bump the ?v= query on the <link> tags when this file changes. */

:root{
  /* brand palette (unchanged) */
  --teal-dark:#093E3C;
  --teal:#0E5F5C;
  --accent:#0e5f5c;
  --teal-bright:#09A19B;
  --teal-vivid:#008681;
  --teal-mid:#629795;
  --teal-tint:#E7EFEF;
  --teal-tint-2:#D9EEEC;
  --ink:#14150F;
  --gray-700:#2d2e28;
  --gray-500:#3e4038;
  --gray-400:#6b6d65;
  --gray-300:#D8D7CF;
  --gray-150:#EEEDE7;
  --paper:#FFFFFF;
  --off:#FAFAF8;

  /* type scale */
  --fs-xs:0.75rem;      /* 12 */
  --fs-sm:0.875rem;     /* 14 */
  --fs-base:1rem;       /* 16 */
  --fs-md:1.0625rem;    /* 17 */
  --fs-lead:clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3:1.125rem;     /* 18 */
  --fs-h2:clamp(1.75rem, 1.35rem + 1.3vw, 2.25rem);
  --fs-h1:clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);

  /* spacing scale (4/8 based) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --section-y:clamp(64px, 4rem + 3vw, 104px);
  --gutter:40px;

  --radius:14px;
  --radius-sm:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --card-shadow-hover:0 14px 30px -16px rgba(9,62,60,0.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', -apple-system, sans-serif;
  font-size:var(--fs-base);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-wrap:balance;
}
h1{letter-spacing:-0.028em;}
p{text-wrap:pretty;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 var(--gutter);}
.eyebrow{
  font-family:'Manrope', sans-serif;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal);
}

/* focus: one visible ring everywhere */
:focus-visible{outline:2px solid var(--teal-bright); outline-offset:3px; border-radius:4px;}
.btn:focus-visible, .nav-cta:focus-visible{border-radius:var(--radius-sm);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gray-150);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:34px; height:34px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--accent); transition:transform .3s var(--ease);}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block;}
.menu-wrap{position:relative;}
.menu-toggle{background:none; border:none; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; line-height:0; color:inherit;}
.menu-toggle:hover .brand-mark, .menu-toggle[aria-expanded="true"] .brand-mark{transform:scale(1.08);}
.menu-toggle .brand-mark{
  position:relative;
  background:linear-gradient(150deg, var(--teal-bright) 0%, var(--accent) 45%, var(--teal-dark) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(9,62,60,0.3);
}
/* the logo's light sweep plays once per hover, not forever */
.menu-toggle .brand-mark::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.7) 48%, rgba(255,255,255,0.05) 60%, transparent 70%);
  transform:translateX(-120%);
}
.menu-toggle:hover .brand-mark::after{transform:translateX(120%); transition:transform .8s var(--ease);}
.menu-toggle:focus-visible{outline:2px solid var(--teal-bright); outline-offset:3px; border-radius:8px;}
.menu-toggle-label{display:none; margin-left:8px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--gray-700); letter-spacing:.02em; align-items:center; gap:5px; line-height:1;}
.menu-toggle-label::after{content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform .2s var(--ease);}
.menu-toggle[aria-expanded="true"] .menu-toggle-label::after{transform:rotate(180deg);}
.menu-dropdown{
  position:absolute; top:calc(100% + 14px); left:0; min-width:200px;
  background:#fff; border:1px solid var(--gray-150); border-radius:12px;
  box-shadow:0 16px 36px -12px rgba(20,21,15,0.22);
  padding:6px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:60;
}
/* click to open only: hover-open flickered while moving toward the nav */
.menu-dropdown.is-open{opacity:1; visibility:visible; transform:translateY(0);}
.menu-dropdown-item{
  display:block; padding:10px 14px; border-radius:8px; font-size:var(--fs-sm); font-weight:500;
  color:var(--gray-700); transition:background .15s ease, color .15s ease;
}
.menu-dropdown-item:hover{background:var(--teal-tint); color:var(--teal);}
.menu-dropdown-item.active{color:var(--teal); font-weight:600;}
.brand-name-link{display:inline-block; cursor:pointer; text-decoration:none; transition:opacity .2s ease;}
.brand-name-link:hover{opacity:0.8;}
.nav-links{display:flex; align-items:center; gap:36px;}
.nav-links a{position:relative; padding:8px 0; font-size:var(--fs-sm); font-weight:500; color:var(--gray-700); transition:color .2s ease;}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--teal-bright); border-radius:2px; transition:right .25s var(--ease);}
.nav-links a:hover{color:var(--teal);}
.nav-links a:hover::after, .nav-links a.active::after{right:0;}
.nav-links a.active{color:var(--teal); font-weight:600;}
.mobile-brand-link{display:none;}

/* ---------- buttons ---------- */
.btn, .nav-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter', -apple-system, sans-serif;
  font-weight:600; line-height:1; letter-spacing:-0.005em; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; position:relative;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn{min-height:46px; padding:0 22px; font-size:15px;}
.nav-cta{min-height:40px; padding:0 18px; font-size:var(--fs-sm);}
.btn-primary, .nav-cta{
  color:#fff;
  background:var(--teal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(9,62,60,0.25);
}
.btn-primary:hover, .nav-cta:hover{
  background:#0a716d;
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 18px -8px rgba(9,62,60,0.55);
}
.btn:active, .nav-cta:active{transform:translateY(0); transition-duration:.05s;}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
/* light-surface ghost (projects, bands-on-paper); hero overrides locally */
.btn-ghost{
  background:#fff; color:var(--ink); border-color:var(--gray-300);
}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal); transform:translateY(-1px);}

/* the one signature motion: a comet tracing the hero's primary CTA */
.cta-glow{position:relative; display:inline-flex; border-radius:var(--radius-sm);}
.cta-glow .btn{position:relative; z-index:1;}
@property --cta-angle{syntax:'<angle>'; initial-value:0deg; inherits:false;}
.cta-comet, .cta-comet-glow{
  position:absolute; pointer-events:none; border-radius:10px;
  background:conic-gradient(from var(--cta-angle),
    rgba(255,255,255,1) 0deg,
    rgba(255,255,255,0.85) 14deg,
    rgba(255,255,255,0.55) 40deg,
    rgba(255,255,255,0.28) 78deg,
    rgba(255,255,255,0.10) 120deg,
    rgba(255,255,255,0) 165deg,
    rgba(255,255,255,0) 360deg);
  animation:ctaSpin 6s linear infinite;
}
.cta-comet{
  inset:-2px; padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.cta-comet-glow{inset:-5px; padding:5px; filter:blur(7px); opacity:0.6;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
@keyframes ctaSpin{ to{--cta-angle:360deg;} }

/* back link on inner pages */
.back-bar{position:absolute; top:28px; left:50%; transform:translateX(-50%); width:100%; max-width:1160px; padding:0 var(--gutter); z-index:5; pointer-events:none;}
.back-bar .back-link{pointer-events:auto;}
.back-link{display:inline-flex; align-items:center; gap:7px; min-height:38px; font-size:13.5px; font-weight:600; color:var(--teal); background:var(--teal-tint); padding:0 16px 0 13px; border-radius:var(--radius-sm); transition:background .2s ease;}
.back-link:hover{background:var(--teal-tint-2);}

/* ---------- sections ---------- */
section{padding:var(--section-y) 0;}
.section-head{max-width:620px; margin-bottom:var(--sp-7);}
.section-head h2, .section-head h1{font-size:var(--fs-h2); line-height:1.15; margin-top:var(--sp-3);}
.section-head p{color:var(--gray-700); font-size:var(--fs-md); margin-top:var(--sp-4); max-width:560px;}

/* cta band with photo backdrop */
.band{
  position:relative; color:#fff; text-align:center; padding:var(--section-y) 0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,134,129,0.90), rgba(9,62,60,0.92)),
    url('/images/img-2-d37b9551c1.jpg') center/cover no-repeat;
}
.band-inner{position:relative; z-index:2;}
.band h2{color:#fff; font-size:var(--fs-h2); line-height:1.15; max-width:560px; margin:0 auto var(--sp-4);}
.band p{color:#fff; font-size:var(--fs-md); max-width:480px; margin:0 auto var(--sp-6);}
.band-actions{display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; align-items:center;}
.band .btn-primary{background:#fff; color:var(--teal-dark); box-shadow:0 1px 2px rgba(9,62,60,0.2);}
.band .btn-primary:hover{background:#F2F2EE; box-shadow:0 10px 22px -10px rgba(2,16,15,0.5);}
.band .btn-primary:focus-visible{outline-color:#fff;}
.band .btn-ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,0.45);
}
.band .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.1); color:#fff;}

/* ---------- footer ---------- */
footer{padding:var(--sp-8) 0 var(--sp-6); border-top:1px solid var(--gray-150); background:#fff;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--sp-6); padding-bottom:var(--sp-7);}
.foot-links{display:flex; gap:var(--sp-8); flex-wrap:wrap;}
.foot-col{min-width:96px;}
.foot-col .foot-heading{font-family:'Manrope',sans-serif; font-size:var(--fs-xs); font-weight:700; color:var(--teal); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-4);}
.foot-col a{display:block; width:fit-content; font-size:var(--fs-sm); color:var(--gray-700); padding:4px 0; margin-bottom:4px; transition:color .15s ease;}
.foot-col a:hover{color:var(--teal);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:var(--sp-5); border-top:1px solid var(--gray-150); flex-wrap:wrap; gap:var(--sp-4);}
.foot-bottom p{font-size:13px; color:var(--gray-400);}
.foot-legal{display:flex; align-items:center; gap:0; flex-wrap:wrap;}
.foot-legal a{color:var(--gray-400); font-size:13px; transition:color .15s ease;}
.foot-legal a:hover{color:var(--teal);}
.foot-legal span{color:var(--gray-300); margin:0 0.45em;}

/* ---------- legal pages ---------- */
.legal{padding:120px 0 96px; background:var(--off);}
.legal-head{max-width:40rem; margin-bottom:var(--sp-7);}
.legal-head h1{font-size:var(--fs-h1); line-height:1.08; margin:var(--sp-3) 0 var(--sp-4);}
.legal-meta{color:var(--gray-500); font-size:var(--fs-sm);}
.legal-nav{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-5); font-size:var(--fs-sm);}
.legal-nav a{color:var(--teal); font-weight:600;}
.legal-nav a[aria-current="page"]{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}
.legal-note{
  max-width:40rem; margin-bottom:var(--sp-7); padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--gray-150); border-radius:var(--radius); background:#fff;
  color:var(--gray-700); font-size:var(--fs-sm); line-height:1.65;
}
.legal-body{max-width:40rem;}
.legal-body h2{font-size:1.15rem; margin:2rem 0 0.65rem;}
.legal-body h3{font-size:1rem; color:var(--teal); margin:1.35rem 0 0.5rem;}
.legal-body p, .legal-body li{color:var(--gray-700); font-size:var(--fs-base); line-height:1.7;}
.legal-body ul{padding-left:1.2rem; margin:0.4rem 0 0.8rem;}
.legal-body li{margin:0.35rem 0;}
.legal-body a{color:var(--teal); text-decoration:underline; text-underline-offset:2px;}
@media (max-width:860px){.legal{padding:88px 0 64px;}}

.social-icons-footer{display:flex; gap:12px; align-items:center;}
.social-icon-link{
  display:inline-block; width:50px; height:50px; border-radius:50%;
  background-image:url('/images/social-icons.png');
  background-size:300px 50px; background-repeat:no-repeat;
  transition:transform .2s ease;
}
.social-icon-link:hover{transform:scale(1.08);}
.social-icon-link.facebook{background-position:0 0;}
.social-icon-link.instagram{background-position:-60px 0;}
.social-icon-link.x{background-position:-120px 0;}
.social-icon-link.tiktok{background-position:-180px 0;}
.social-icon-link.youtube{background-position:-240px 0;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--gutter:24px;}
  .nav{height:64px;}
  .nav-links{display:none;}
  .menu-toggle-label{display:inline-flex;}
  .brand-name-link{display:none;}
  .mobile-brand-link{display:block;}
  /* mobile header: menu + wordmark only; Contact stays reachable via the menu */
  .nav-cta{display:none;}
  .back-bar{top:20px;}
  .foot-links{gap:var(--sp-6);}
}

/* Back button: desktop has the full nav, so no back button there. On
   phones it's a teal circle with a white arrow; the "Back" text stays in
   the markup (font-size 0) so screen readers still announce it.
   (/apps/time has its own stylesheet and keeps its own back link.) */
@media (min-width:861px){
  .back-bar{display:none;}
}
@media (max-width:860px){
  .back-link{
    width:44px; height:44px; min-height:44px;
    padding:0; gap:0; justify-content:center;
    border-radius:50%;
    font-size:0;
    background:var(--teal); color:#fff;
    box-shadow:0 4px 12px rgba(2,16,15,0.25);
  }
  .back-link:hover, .back-link:active{background:var(--teal-dark);}
  .back-link svg{width:18px; height:18px;}
}

/* ---------- motion ----------
   content is visible by default; only .js-ready (set by an early inline
   script) switches on the hidden->animate-in states. */
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.js-ready .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.js-ready .reveal.is-visible{opacity:1; transform:translateY(0);}
.js-ready .reveal-stagger > *{opacity:0;}
.js-ready .reveal-stagger.is-visible > *{animation:fadeUp .55s var(--ease) forwards;}
.reveal-stagger > *:nth-child(1){animation-delay:0s;}
.reveal-stagger > *:nth-child(2){animation-delay:.06s;}
.reveal-stagger > *:nth-child(3){animation-delay:.12s;}
.reveal-stagger > *:nth-child(4){animation-delay:.18s;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .reveal, .reveal-stagger > *, .hero-copy > *{opacity:1 !important; transform:none !important;}
  .cta-comet, .cta-comet-glow{display:none;}
}

/* skip link: hidden until focused by keyboard */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:1000;
  padding:10px 16px; border-radius:8px;
  background:var(--teal-dark); color:#fff; font-weight:600; font-size:var(--fs-sm);
  transition:top .15s ease;
}
.skip-link:focus{top:12px;}

/* phones: menu and footer links get at least a 44px tap target */
@media (max-width:860px){
  .menu-dropdown-item{padding:12px 14px; min-height:44px; display:flex; align-items:center;}
  .foot-col a{padding:12px 0; margin-bottom:0; min-height:44px; box-sizing:border-box;}
}