/* ============================================================
   SYNC RACE STUDIOS — shared stylesheet
   Every page links this one file. Change a value here and the
   whole site follows.

   The palette is a room with the curtains open: soft warm white
   walls, warm shadows, and your logo's coral as the light.
   Both brand colours come straight from Assets/srcslogo.
   ============================================================ */

:root{
  --paper:    #FAF7F3;   /* the wall */
  --surface:  #FFFFFF;   /* anything that floats */
  --sunk:     #F2EDE6;   /* insets, code wells */
  --ink:      #241C17;   /* headings, body */
  --dust:     #7A6C63;   /* secondary text */
  --hair:     #EAE2D9;   /* 1px rules */

  --lamp:     #FF6F4E;   /* brand coral — fills and graphics only */
  --lamp-ink: #C4451F;   /* darkened coral — safe for text on white */
  --lamp-soft:#FFF1EC;   /* coral at a whisper */
  --blue:     #1D6AAE;   /* brand blue */
  --blue-soft:#EDF4FA;

  /* Warm shadows. Tinted brown, never grey. */
  --lift-1: 0 1px 2px rgba(70,45,30,.05), 0 3px 10px rgba(70,45,30,.05);
  --lift-2: 0 2px 5px rgba(70,45,30,.06), 0 10px 28px rgba(70,45,30,.08);
  --lift-3: 0 6px 14px rgba(70,45,30,.07), 0 24px 56px rgba(70,45,30,.11);
  --lift-4: 0 10px 24px rgba(70,45,30,.08), 0 44px 90px rgba(70,45,30,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --gut:  clamp(1.25rem,4vw,3rem);
  --max:  1440px;
}

/* Evening mode — the same room after dark. Warm, never black. */
:root.dark{
  --paper:    #191310;
  --surface:  #221A16;
  --sunk:     #2C221B;
  --ink:      #F6EEE7;
  --dust:     #A9998E;
  --hair:     #34281F;

  --lamp:     #FF7E5E;
  --lamp-ink: #FF9878;
  --lamp-soft:#2E1E18;
  --blue:     #6FB0E8;
  --blue-soft:#1B2632;

  --lift-1: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.22);
  --lift-2: 0 2px 6px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.3);
  --lift-3: 0 6px 16px rgba(0,0,0,.32), 0 26px 60px rgba(0,0,0,.36);
  --lift-4: 0 10px 26px rgba(0,0,0,.34), 0 46px 92px rgba(0,0,0,.44);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  transition:background .4s var(--ease), color .4s var(--ease);
}
main{ flex:1; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--lamp-ink); outline-offset:3px; border-radius:3px; }

/* soft light spilling in from the top of every page */
body::before{
  content:''; position:fixed; inset:0 0 auto 0; height:70vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 68% 0%, rgba(255,111,78,.09), transparent 64%),
    radial-gradient(50% 38% at 18% 6%, rgba(29,106,174,.05), transparent 68%);
}
:root.dark body::before{
  background:
    radial-gradient(58% 44% at 68% 0%, rgba(255,126,94,.16), transparent 64%),
    radial-gradient(50% 38% at 18% 6%, rgba(255,178,126,.07), transparent 68%);
}
main,footer,site-nav{ position:relative; z-index:1; }

.shell{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); width:100%; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:400; letter-spacing:-.015em; margin:0; line-height:1.1; }
h1{ font-size:clamp(2.4rem,6.5vw,5.4rem); line-height:1.04; }
h2{ font-size:clamp(1.9rem,4.2vw,3.4rem); }
h3{ font-size:1.25rem; }
p{ margin:0; }
.warm{ color:var(--lamp-ink); }
.kicker{ display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--lamp-ink); margin-bottom:1rem; }
.lede{ color:var(--dust); font-size:1.15rem; max-width:56ch; }
.muted{ color:var(--dust); }

/* ---------- layout helpers ---------- */
.band{ padding-block:clamp(3.5rem,9vw,6.5rem); }
.head{ max-width:66ch; margin-bottom:clamp(2.25rem,5vw,3.5rem); }
.head p{ color:var(--dust); margin-top:1.15rem; }
.page-top{ padding-block:clamp(3.5rem,9vw,6rem) clamp(1rem,3vw,2rem); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-lamp{ background:var(--lamp); color:#2A1006; box-shadow:0 5px 20px rgba(255,111,78,.32); }
.btn-lamp:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,111,78,.42); }
.btn-quiet{ background:var(--surface); color:var(--ink); border-color:var(--hair); box-shadow:var(--lift-1); }
.btn-quiet:hover{ transform:translateY(-2px); box-shadow:var(--lift-2); }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:1.25rem; }
.card{
  background:var(--surface); border:1px solid var(--hair); border-radius:16px;
  padding:2rem 1.85rem; box-shadow:var(--lift-1); text-decoration:none; color:inherit;
  display:block; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--lift-3); }
.card p{ color:var(--dust); margin-top:.65rem; font-size:.98rem; }
.card h3{ margin-top:1.1rem; }

/* ---------- browser frame for screenshots ---------- */
.frame{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  overflow:hidden; box-shadow:var(--lift-3);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.frame-link:hover .frame{ transform:translateY(-6px); box-shadow:var(--lift-4); }
.frame-bar{ display:flex; align-items:center; gap:.4rem; padding:.8rem 1rem; border-bottom:1px solid var(--hair); background:var(--sunk); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--hair); }
.frame-url{ margin-left:.55rem; font-size:.78rem; color:var(--dust); }
.shot{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top center; background:var(--sunk); }
.slot{
  aspect-ratio:16/9; display:flex; flex-direction:column; gap:.35rem;
  align-items:center; justify-content:center; text-align:center; padding:2rem;
  background:var(--sunk); color:var(--dust); font-size:.9rem;
}
.slot b{ color:var(--lamp-ink); font-weight:600; }

/* ---------- pills ---------- */
.pill{ display:inline-block; padding:.28rem .75rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.pill-lamp{ background:var(--lamp-soft); color:var(--lamp-ink); }
.pill-blue{ background:var(--blue-soft); color:var(--blue); }

/* ---------- feature list ---------- */
.wells{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1rem; }
.well{ background:var(--sunk); border-radius:12px; padding:1.35rem 1.4rem; }
.well b{ display:block; margin-bottom:.35rem; font-size:.95rem; }
.well span{ color:var(--dust); font-size:.9rem; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--hair); margin-top:clamp(3.5rem,8vw,6rem); }
.foot .shell{ display:flex; flex-wrap:wrap; gap:.85rem 2rem; justify-content:space-between; padding-block:2.2rem; color:var(--dust); font-size:.9rem; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--lamp-ink); }

/* ---------- entrance ---------- */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rise.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation:none !important; }
  .rise{ opacity:1; transform:none; }
}

/* ============================================================
   NAV — styled here rather than inside nav.js so it inherits
   the tokens above and follows the theme.
   ============================================================ */
site-nav{ position:sticky; top:0; z-index:80; display:block; }
.nav-shade{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--hair);
}
.nav-in{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  height:74px; display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand img{ width:32px; height:32px; }
.brand b{ display:block; font-weight:600; font-size:.95rem; }
.brand em{ display:block; font-style:normal; font-size:.72rem; color:var(--dust); }

.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{ color:var(--dust); text-decoration:none; font-size:.92rem; padding:.35rem 0; position:relative; transition:color .25s ease; }
.nav-links a:hover,
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  border-radius:2px; background:var(--lamp);
}
.theme-btn{
  background:none; border:1px solid var(--hair); border-radius:999px;
  padding:.4rem 1rem; font:inherit; font-size:.82rem; color:var(--dust);
  cursor:pointer; transition:color .25s ease, border-color .25s ease;
}
.theme-btn:hover{ color:var(--ink); border-color:var(--lamp); }
.nav-cta{
  background:var(--lamp); color:#2A1006 !important; padding:.55rem 1.1rem;
  border-radius:999px; font-weight:600; font-size:.88rem;
  box-shadow:0 4px 16px rgba(255,111,78,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,111,78,.4); }
.nav-cta::after{ display:none !important; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; color:var(--ink); }
.nav-toggle span{ display:block; width:20px; height:1.5px; background:currentColor; margin:4px 0; transition:transform .3s ease, opacity .3s ease; }
site-nav[data-open] .nav-toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
site-nav[data-open] .nav-toggle span:nth-child(2){ opacity:0; }
site-nav[data-open] .nav-toggle span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media(max-width:860px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; inset:74px 0 auto 0; flex-direction:column; gap:0; display:none;
    background:var(--paper); border-bottom:1px solid var(--hair); box-shadow:var(--lift-2);
    padding:.4rem 0 1.2rem;
  }
  site-nav[data-open] .nav-links{ display:flex; }
  .nav-links a{ width:100%; padding:.85rem var(--gut); font-size:1rem; }
  .nav-links a[aria-current="page"]::after{ left:var(--gut); right:auto; width:20px; }
  .theme-btn,.nav-cta{ margin:.7rem var(--gut) 0; align-self:flex-start; }
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.45rem; }
.field label{ font-weight:600; font-size:.92rem; }
.field .hint{ font-size:.85rem; color:var(--dust); font-weight:400; }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--hair); border-radius:12px;
  padding:.8rem 1rem; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:var(--dust); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--lamp);
  box-shadow:0 0 0 4px var(--lamp-soft);
}
/* keeps bots busy; real people never see it */
.trap{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }
.form-note{ font-size:.9rem; color:var(--dust); }