/* ===== Pastel Light Theme — Strand & Shear Studio ===== */
:root{
  /* Pastel palette */
  --bg: #f7f8fb;           /* page background */
  --surface: #ffffff;      /* cards/nav background */
  --card: #ffffff;
  --text: #20242c;         /* primary text */
  --muted: #556070;        /* body copy */
  --line: #e9edf2;

  /* Accents (pastel gradient) */
  --accent-a: #8dd7f7;     /* powder blue */
  --accent-b: #b5e8c3;     /* mint */
  --accent-c: #f8d1e1;     /* blush */
  --accent: #6cc7e8;       /* default accent for links */

  --shadow: 0 10px 30px rgba(25,30,40,.08);
  --radius: 16px;
  --radius-sm: 12px;
  --maxw: 1200px;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
}

body {
  background:
    url('pattern.svg') repeat,
    linear-gradient(135deg, #fefcff 0%, #f8fafd 30%, #e8f6f9 60%, #fbeaf4 100%);
  background-size: 400px 400px, auto;
  background-attachment: fixed;
}

img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--maxw); margin:0 auto; padding:24px}

/* ===== Header / Animated Nav ===== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, #fff, #ffffffcc);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}

/* Brand */
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:44px; height:44px; border-radius:12px}
.brand h1{font-size:18px; letter-spacing:.3px; margin:0}
.brand h1 span{
  background:linear-gradient(90deg, var(--accent-a), var(--accent-b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.header-wrap{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 24px}

/* ===== Animated Pastel Gel Nav (Centered Indicator) ===== */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(180deg, #fff, #f4f7fb);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* Dynamic moving gel indicator */
.nav::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
  opacity: 0.28;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(.22,.61,.36,1);
}

/* Links */
.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.18s ease, color 0.18s ease;
}

.nav a:hover {
  transform: translateY(-1px);
}

.nav a.active {
  color: #0f1721;
}

/* Underline shimmer effect */
.nav a::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 2px;
  opacity: 0.9;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
}

/* Mobile version */
.menu-toggle{display:none; background:none; border:0; color:var(--text); font-size:16px}
@media (max-width:920px){
  .nav{display:none; width:100%; position:relative; z-index:5}
  .nav.open{display:flex !important; flex-wrap:wrap; justify-content:space-between; gap:8px}
  .nav .indicator{display:none !important;} /* prevent overlay in mobile */
  .header-wrap{flex-wrap:wrap; align-items:flex-start}
  .menu-toggle{display:block}
  .nav a{flex:1 1 calc(50% - 8px); text-align:center}
  .nav::before { display: none; }
}



/* ===== Hero & Background Pattern ===== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 400px at 10% -10%, #b5e8c34d, transparent 60%),
    radial-gradient(600px 350px at 110% 0%, #f8d1e14d, transparent 60%);
  border-bottom:1px solid var(--line);
}
.hero .container{padding-top:56px; padding-bottom:56px}
.hero-card{
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; inset:-2px;
  background:url('./pattern.svg'); background-size:200px; opacity:.12; pointer-events:none;
}

/* ===== Headings & text ===== */
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#7a8596}
.h1{font-size:40px; line-height:1.1; margin:6px 0 14px}
.p{color:var(--muted); font-size:16px; line-height:1.75}

/* ===== Cards/Sections ===== */
.section{padding:36px 0}
.grid{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.grid-2col{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){ .grid-2col{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px; border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #f5f8fb);
  color:var(--text); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn.primary{
  border-color:transparent;
  background:linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
  color:#0f1721;
}

/* ===== Table (Hours) ===== */
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table tr{background:var(--surface)}
.table td{padding:14px 16px; border:1px solid var(--line)}
.table tr td:first-child{border-top-left-radius:var(--radius-sm); border-bottom-left-radius:var(--radius-sm); color:#6a7486}
.table tr td:last-child{border-top-right-radius:var(--radius-sm); border-bottom-right-radius:var(--radius-sm)}

/* ===== Gallery Masonry ===== */
.masonry{columns:3 260px; column-gap:16px}
.masonry figure{
  break-inside:avoid; margin:0 0 16px; overflow:hidden;
  border-radius:16px; background:#fafcff; border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.masonry img{width:100%; height:auto; transition:transform .35s ease}
.masonry figure:hover img{transform:scale(1.03)}
.masonry figcaption{padding:10px 12px; font-size:13px; color:#6b7280}

/* ===== Team ===== */
.team{display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .team{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .team{grid-template-columns:1fr} }
.person{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
}
.person .meta{padding:14px}
.person h4{margin:6px 0 6px}
.person p{margin:0; color:var(--muted); font-size:14px}

/* ===== Forms ===== */
.form{display:grid; gap:14px; max-width:680px}
.input, .textarea{
  width:100%; padding:12px 14px; border-radius:12px; color:var(--text);
  border:1px solid var(--line); background:#fbfdff;
}
.textarea{min-height:140px; resize:vertical}

/* ===== Footer ===== */
footer{
  margin-top:40px; padding:28px 24px; color:#7a8596;
  border-top:1px solid var(--line); background:#ffffffc7; backdrop-filter:blur(6px);
}

/* ===== Utilities ===== */
.spacer{height:12px}
.center{display:flex; justify-content:center; align-items:center; text-align:center}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent-a)20%, var(--accent-b)20% 60%, var(--accent-c)60%);
  border:1px solid var(--line); color:#3b4452; font-size:12px;
}
.link-underline{position:relative; padding-bottom:2px}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent-a),var(--accent-b),var(--accent-c));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.link-underline:hover::after{transform:scaleX(1)}

/* ===== Respect reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}