:root{
  --ink:#14151A;
  --asphalt:#1C1C1E;
  --paper:#F2EFE9;
  --amber:#FF6B35;
  --oxide:#8B3A2A;
  --steel:#4A5560;
  --steel-light:#7C8894;
  --line: rgba(20,21,26,0.12);
  --line-dark: rgba(242,239,233,0.14);
  --ok:#2E7D4F;
  --warn:#C9942B;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
img{max-width:100%; display:block;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(242,239,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1180px; margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Oswald', sans-serif; font-weight:700; font-size:22px;
  text-transform:none; letter-spacing:0.03em;
}
.brand .cog{width:26px; height:26px; flex-shrink:0; animation: spin 6s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }
.navlinks{display:flex; gap:36px; font-size:14px; font-weight:500; letter-spacing:0.02em;}
.navlinks a{position:relative; padding:4px 0;}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--amber); transition:width 0.25s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--oxide);}
.nav-cta{
  background:var(--ink); color:var(--paper); padding:10px 20px;
  font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  border-radius:2px; transition:background 0.2s ease;
}
.nav-cta:hover{background:var(--amber); color:var(--ink);}
@media (max-width:820px){ .navlinks{display:none;} }

/* ============ PAGE HERO (inner pages) ============ */
.page-hero{
  background:var(--asphalt); color:var(--paper);
  padding:150px 0 64px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .eyebrow{color:var(--amber);}
.page-hero .eyebrow::before{background:var(--amber);}
.page-hero h1{font-size:clamp(32px,5vw,52px); margin-bottom:14px;}
.page-hero p{color:var(--steel-light); font-size:16px; max-width:520px;}

/* ============ SECTION GENERIC ============ */
section{padding:90px 0;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--oxide);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--oxide);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,44px); margin-bottom:14px;}
.section-head p{color:var(--steel); font-size:16px; line-height:1.6;}

/* buttons */
.btn-primary{
  background:var(--amber); color:var(--ink); padding:15px 28px;
  font-weight:600; font-size:14px; letter-spacing:0.03em; text-transform:uppercase;
  border-radius:2px; border:none; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,107,53,0.28);}
.btn-primary:disabled{opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none;}
.btn-ghost{
  background:transparent; color:var(--paper); padding:15px 28px;
  font-weight:600; font-size:14px; letter-spacing:0.03em; text-transform:uppercase;
  border:1px solid var(--line-dark); border-radius:2px; cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover{border-color:var(--amber); background:rgba(255,107,53,0.08);}

/* ============ SERVICES GRID (shared: home + services page) ============ */
.services{background:var(--paper);}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:860px){ .service-grid{grid-template-columns:1fr;} }
.service-card{background:var(--paper); padding:36px 30px; transition:background 0.25s ease; position:relative;}
.service-card:hover{background:#fff;}
.service-icon{width:44px; height:44px; margin-bottom:22px; color:var(--oxide);}
.service-card h3{font-size:20px; margin-bottom:10px; font-weight:600;}
.service-card p{color:var(--steel); font-size:14px; line-height:1.6; margin-bottom:18px;}
.service-price{
  font-family:'IBM Plex Mono'; font-size:13px; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; border-top:1px dashed var(--line);
}
.service-price .from{color:var(--steel); text-transform:uppercase; font-size:11px;}
.service-price .amt{font-weight:600; font-size:16px;}
.service-card .book-link{
  display:inline-block; margin-top:14px; font-size:12px; font-weight:600; color:var(--oxide);
  text-transform:uppercase; letter-spacing:0.03em; border-bottom:1px solid var(--oxide); padding-bottom:2px;
}

/* ============ HOW ============ */
.how{background:var(--ink); color:var(--paper);}
.how .eyebrow{color:var(--amber);}
.how .eyebrow::before{background:var(--amber);}
.how .section-head p{color:var(--steel-light);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
@media (max-width:900px){ .steps{grid-template-columns:1fr; gap:36px;} }
.steps::before{
  content:''; position:absolute; top:26px; left:6%; right:6%; height:2px;
  background:repeating-linear-gradient(90deg, var(--steel) 0 10px, transparent 10px 18px);
}
@media (max-width:900px){ .steps::before{display:none;} }
.step{position:relative; padding-right:20px;}
.step-num{
  width:52px; height:52px; border-radius:50%; background:var(--asphalt);
  border:2px solid var(--amber); color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono'; font-weight:600; font-size:16px;
  margin-bottom:22px; position:relative; z-index:1;
}
.step h4{font-size:17px; margin-bottom:10px; font-weight:600; text-transform:none;}
.step p{color:var(--steel-light); font-size:14px; line-height:1.6;}

/* ============ CTA ============ */
.cta{background:var(--amber); color:var(--ink); text-align:center; padding:90px 0;}
.cta h2{font-size:clamp(30px,5vw,46px); margin-bottom:18px;}
.cta p{font-size:16px; margin-bottom:34px; opacity:0.85;}
.cta .btn-primary{background:var(--ink); color:var(--paper);}
.cta .btn-primary:hover{box-shadow:0 10px 24px rgba(20,21,26,0.3);}

/* ============ FOOTER ============ */
footer{background:var(--ink); color:var(--steel-light); padding:64px 0 28px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-brand{color:var(--paper); font-family:'Oswald'; font-size:20px; font-weight:700; text-transform:uppercase; margin-bottom:14px;}
.foot-grid p{font-size:13px; line-height:1.7; max-width:260px;}
.foot-col h5{color:var(--paper); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; font-family:'IBM Plex Mono';}
.foot-col ul{list-style:none;}
.foot-col li{margin-bottom:11px; font-size:14px;}
.foot-col a:hover{color:var(--amber);}
.foot-bottom{
  border-top:1px solid var(--line-dark); padding-top:24px; display:flex; justify-content:space-between;
  font-size:12px; color:var(--steel); flex-wrap:wrap; gap:12px;
}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ BOOKING FORM ============ */
.book-layout{display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start;}
@media (max-width:920px){ .book-layout{grid-template-columns:1fr;} }

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:36px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
.field{margin-bottom:20px;}
.field.full{grid-column:1 / -1;}
.field label{
  display:block; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--steel); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:3px;
  font-family:'IBM Plex Sans'; font-size:14px; background:var(--paper); color:var(--ink);
  transition:border-color 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); outline:none;
}
.field textarea{resize:vertical; min-height:80px;}
.field .error-msg{color:var(--oxide); font-size:12px; margin-top:6px; display:none;}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--oxide);}
.field.invalid .error-msg{display:block;}

.form-actions{display:flex; align-items:center; gap:18px; margin-top:8px; flex-wrap:wrap;}
.form-msg{font-size:13px; font-family:'IBM Plex Mono';}
.form-msg.error{color:var(--oxide);}

.summary-card{
  background:var(--asphalt); color:var(--paper); border-radius:6px; padding:28px; position:sticky; top:110px;
}
.summary-card h4{font-size:14px; color:var(--amber); margin-bottom:20px; letter-spacing:0.04em;}
.summary-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line-dark); font-size:14px;}
.summary-row:last-of-type{border-bottom:none;}
.summary-row .k{color:var(--steel-light); font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase;}
.summary-total{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; align-items:center;
}
.summary-total .amt{font-family:'IBM Plex Mono'; font-size:24px; color:var(--amber); font-weight:600;}

/* success state */
.success-panel{
  display:none; background:#fff; border:1px solid var(--line); border-radius:6px; padding:48px; text-align:center;
}
.success-panel.show{display:block;}
.success-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(46,125,79,0.1); color:var(--ok);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
}
.success-panel h3{font-size:24px; margin-bottom:12px;}
.success-panel p{color:var(--steel); margin-bottom:8px;}
.success-ticket{
  font-family:'IBM Plex Mono'; background:var(--paper); border:1px dashed var(--line);
  border-radius:4px; padding:16px; margin:24px auto; max-width:320px; font-size:14px;
}

/* ============ ADMIN ============ */
.admin-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:16px;}
.admin-toolbar .count{font-family:'IBM Plex Mono'; font-size:13px; color:var(--steel);}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:#fff;}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:900px;}
thead th{
  text-align:left; padding:14px 16px; background:var(--asphalt); color:var(--paper);
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
}
tbody td{padding:14px 16px; border-top:1px solid var(--line); vertical-align:top;}
tbody tr:hover{background:var(--paper);}
.status-pill{
  display:inline-block; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.03em; font-family:'IBM Plex Mono';
}
.status-Pending{background:rgba(201,148,43,0.15); color:var(--warn);}
.status-Confirmed{background:rgba(255,107,53,0.15); color:var(--oxide);}
.status-InProgress{background:rgba(74,85,96,0.15); color:var(--steel);}
.status-Completed{background:rgba(46,125,79,0.15); color:var(--ok);}
.status-Cancelled{background:rgba(20,21,26,0.1); color:var(--ink);}
select.status-select{
  font-family:'IBM Plex Mono'; font-size:12px; padding:6px 8px; border-radius:3px; border:1px solid var(--line);
  background:var(--paper);
}
.icon-btn{
  background:none; border:1px solid var(--line); border-radius:3px; padding:6px 10px; cursor:pointer;
  font-size:12px; color:var(--oxide); font-family:'IBM Plex Mono';
}
.icon-btn:hover{background:rgba(139,58,42,0.08);}
.empty-state{padding:60px 20px; text-align:center; color:var(--steel);}