/* ============================================================
   sebevans.ca — simple build
   One job: get someone to book a time.

   Same design language as V1 (warm paper, Hyundai navy under a
   brushed metal sheen, Archivo + Manrope) at about a fifth of the
   code. No background system, no parallax, no carousel.
   ============================================================ */

:root{
  --paper:  #F7F5F2;   /* page */
  --sunk:   #EFEBE5;   /* the strip behind the three points */
  --card:   #FFFFFF;

  --text:   #14181F;   /* 16:1 on paper */
  --text-2: #4C5563;   /* 6.9:1 on paper */
  --text-3: #5F6875;   /* 5.2:1 on paper */

  --navy:      #002C5F;   /* Hyundai blue */
  --navy-lit:  #1B4E86;
  --navy-deep: #00203F;

  /* navy body with a brushed highlight raked across it — this is what
     makes the button read as a painted metal badge, not a blue box */
  --metal:
     linear-gradient(180deg,
       rgba(255,255,255,.40) 0%,
       rgba(255,255,255,.13) 16%,
       rgba(255,255,255,.02) 38%,
       rgba(255,255,255,0)   54%,
       rgba(0,0,0,.16)      100%),
     linear-gradient(178deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
     linear-gradient(180deg, var(--navy-lit) 0%, var(--navy) 52%, var(--navy-deep) 100%);

  --hair: rgba(20,26,36,.11);
  --edge: inset 0 0 0 1px rgba(20,26,36,.08);
  --rim:  inset 0 1px 0 rgba(255,255,255,.9);
  --lift-1: 0 1px 3px rgba(24,30,42,.05), 0 6px 16px -8px rgba(24,30,42,.12);
  --lift-2: 0 4px 10px rgba(24,30,42,.06), 0 24px 50px -24px rgba(24,30,42,.2);

  --r:      12px;
  --r-lg:   20px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1080px;

  --display:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(15.5px, .32vw + 15px, 17px);
  font-weight:500;
  line-height:1.65;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  /* a whisper of grain so the large flat areas never band */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

::selection{ background:var(--navy); color:#fff; }
:focus-visible{ outline:2px solid var(--navy-lit); outline-offset:3px; }
[id]{ scroll-margin-top:80px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--navy); color:#fff; padding:.75rem 1.25rem; font-weight:700;
}
.skip-link:focus{ left:0; }

.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
@media (min-width:768px){ .wrap{ width:min(100% - 4rem, var(--wrap)); } }

.muted{ color:var(--text-2); }
.link{ color:var(--navy); font-weight:600; border-bottom:1px solid var(--navy); padding-bottom:2px; }

h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.1; letter-spacing:-.028em; }

.eyebrow{
  font-family:var(--display);
  font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy); margin-bottom:.85rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--metal); color:#fff;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  padding:1rem 2rem; border-radius:var(--r-pill);
  position:relative; isolation:isolate; overflow:hidden; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px -2px rgba(0,0,0,.5),
    0 4px 14px -6px rgba(0,44,95,.5),
    0 10px 26px -14px rgba(0,44,95,.4);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-125%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.09); }
.btn:hover::after{ transform:translateX(125%); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:var(--card); color:var(--text); font-weight:600;
  font-variant-numeric:tabular-nums;
  box-shadow:var(--edge), var(--rim), var(--lift-1);
}
.btn--ghost::after{ display:none; }
.btn--ghost:hover{ filter:none; box-shadow:var(--edge), var(--rim), var(--lift-2); }

.btn--sm{ padding:.6rem 1.3rem; font-size:.8rem; }

/* ============================================================
   TOP BAR
   ============================================================ */
.bar{
  position:sticky; top:0; z-index:50;
  padding:.7rem 0;
  background:rgba(247,245,242,.9);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 -1px 0 var(--hair);
}
.bar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand__mark{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center; border-radius:11px;
  background:var(--metal); color:#fff;
  font-family:var(--display); font-size:.7rem; font-weight:700; letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 10px -4px rgba(0,44,95,.5);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.25; }
.brand__txt strong{ font-family:var(--display); font-size:.92rem; font-weight:700; }
.brand__txt em{
  font-style:normal; font-size:.63rem; color:var(--text-2);
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
@media (max-width:420px){ .brand__txt em{ display:none; } }

/* ============================================================
   INTRO — small on purpose. The calendar is the point.
   ============================================================ */
.intro{ padding:clamp(34px, 6vw, 66px) 0 clamp(28px, 4vw, 44px); }
.intro__inner{
  display:flex; align-items:center; gap:clamp(20px, 4vw, 40px);
  flex-wrap:wrap;
}
.intro__photo{ flex:none; }
.photo{
  width:clamp(96px, 20vw, 148px); aspect-ratio:1;
  border-radius:24px; object-fit:cover;
  background:linear-gradient(158deg, #FBFAF8 0%, #E7E2DA 100%);
  box-shadow:var(--edge), var(--rim), var(--lift-2);
  display:grid; place-items:center;
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
}
.intro__copy{ flex:1 1 320px; min-width:0; }
.intro h1{ font-size:clamp(2rem, 5.5vw, 2.9rem); margin-bottom:.6rem; }
.intro__lead{ color:var(--text-2); max-width:48ch; }
.intro__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

/* ============================================================
   BOOK
   ============================================================ */
.book{ padding:0 0 clamp(40px, 6vw, 72px); }
.book__title{ font-size:clamp(1.5rem, 3.4vw, 2rem); }
.book__sub{ color:var(--text-2); margin:.4rem 0 clamp(18px, 2.5vw, 28px); font-size:.96em; }

.panel{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--edge), var(--rim), var(--lift-2);
  padding:clamp(8px, 1.2vw, 14px);
  overflow:hidden;
}
.calendly-inline-widget{ border-radius:var(--r); overflow:hidden; }
.fallback{
  min-height:420px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; color:var(--text-2); text-align:center; padding:2rem; font-size:.92rem;
}
/* a calendar-shaped skeleton: the wait reads as loading, not as broken */
.skel{ width:min(100%, 280px); }
.skel__title{
  display:block; height:14px; width:60%; margin:0 auto 18px;
  border-radius:7px; background:rgba(20,26,36,.09);
}
.skel__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.skel__grid i{ aspect-ratio:1; border-radius:6px; background:rgba(20,26,36,.07); }
.skel__title, .skel__grid i{ animation:pulse 1.6s ease-in-out infinite; }
.skel__grid i:nth-child(3n){ animation-delay:.2s }
.skel__grid i:nth-child(5n){ animation-delay:.4s }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.skel__note{ font-size:.88rem; }

/* ============================================================
   THREE POINTS
   ============================================================ */
.points{
  padding:clamp(34px, 5vw, 56px) 0;
  background:var(--sunk);
  box-shadow:inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair);
}
.points__grid{ display:grid; gap:clamp(20px, 3vw, 40px); }
@media (min-width:720px){ .points__grid{ grid-template-columns:repeat(3,1fr); } }
.point h3{ font-size:1rem; margin-bottom:.35rem; }
.point p{ color:var(--text-2); font-size:.92rem; line-height:1.6; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(34px, 5vw, 60px) 0; }
.contact__grid{ display:grid; gap:1px; background:var(--hair);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--edge), var(--lift-1); }
@media (min-width:720px){ .contact__grid{ grid-template-columns:repeat(3,1fr); } }

.contact__item{
  background:var(--card);
  padding:1.35rem 1.3rem 1.45rem;
  display:grid; gap:.3rem; align-content:start;
  transition:background .3s var(--ease);
}
.contact__item:hover{ background:#FBFAF8; }
.contact__k{
  font-family:var(--display);
  font-size:.64rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy);
}
.contact__v{ font-size:1rem; font-weight:600; letter-spacing:-.014em; line-height:1.4; }
.contact__v em{
  display:block; font-style:normal; font-weight:500;
  font-size:.79rem; color:var(--text-2); letter-spacing:0; margin-top:.2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:1.6rem 0 2rem; background:var(--sunk); box-shadow:inset 0 1px 0 var(--hair); }
.foot__inner{
  display:flex; flex-wrap:wrap; gap:.3rem 1.5rem;
  justify-content:space-between; align-items:center;
  font-size:.78rem; color:var(--text-2);
}
.foot strong{ color:var(--text); font-weight:700; }

/* ============================================================
   MOBILE BOOKING BAR
   ============================================================ */
.dock{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
  background:rgba(247,245,242,.95);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 0 0 1px rgba(20,26,36,.06),
             0 -10px 30px -18px rgba(24,30,42,.4);
  transform:translateY(115%); transition:transform .45s var(--ease);
  pointer-events:none;
}
.dock.is-up{ transform:translateY(0); pointer-events:auto; }
.dock__btn{ flex:1; }
.dock__call{
  width:46px; height:46px; flex:none; padding:12px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--card); color:var(--navy);
  box-shadow:var(--edge), var(--lift-1);
}
.dock__call svg{ width:100%; height:100%; }
@media (min-width:861px){ .dock{ display:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}