:root {
  --bg: #f8f5f0;
  --surface: #fff;
  --ink: #1c1410;
  --muted: #766d67;
  --accent: #9c7040;
  --accent-ink: #fff;
  --line: rgba(28, 20, 16, .18);
  --display: "Bodoni Moda", Georgia, serif;
  --body: "DM Sans", Arial, sans-serif;
  --radius: 0px;
  --sidebar: 218px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
.is-hidden { visibility: hidden; pointer-events: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
.skip-link { position: fixed; z-index: 100; top: -50px; left: 16px; padding: 12px 18px; background: #fff; color: #000; }
.skip-link:focus { top: 16px; }

/* Portfolio */
.portfolio { background: #eeeae3; color: #191816; }
.portfolio-nav { height: 84px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #c9c4bb; font: 500 12px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-brand { font-weight: 600; letter-spacing: -.02em; font-size: 15px; }
.portfolio-hero { padding: 11vh 7vw 8vh; }
.eyebrow { font: 600 11px/1 "DM Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.portfolio-hero h1 { max-width: 1050px; margin: 28px 0; font: 600 clamp(54px, 8vw, 122px)/.92 "Playfair Display", serif; letter-spacing: -.055em; }
.portfolio-hero h1 em { font-weight: 600; color: #8d4d33; }
.portfolio-intro { max-width: 520px; margin-left: 44vw; color: #66615a; font-size: 17px; line-height: 1.6; }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #c9c4bb; }
.industry-card { position: relative; min-height: 620px; padding: 28px; overflow: hidden; color: #fff; border-right: 1px solid #c9c4bb; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.industry-card:last-child { border-right: 0; }
.industry-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.76)); }
.industry-card img { position: absolute; inset: 0; z-index: -2; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.industry-card:hover img { transform: scale(1.045); filter: saturate(1.12); }
.card-index { align-self: flex-end; font-size: 12px; border: 1px solid rgba(255,255,255,.65); border-radius: 99px; padding: 8px 12px; }
.industry-card p { margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.industry-card h2 { margin: 0 0 30px; font: 600 clamp(36px, 4vw, 62px)/1 "Playfair Display", serif; letter-spacing: -.04em; }
.explore { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.5); padding-top: 18px; font-size: 13px; }
.portfolio-footer { padding: 28px 4vw; display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

/* Concept gallery */
.concept-bar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: var(--sidebar); color: #e9e6df; background: #181817; display: flex; flex-direction: column; padding: 28px 18px; }
.back-link { display: flex; gap: 10px; align-items: center; color: #9b9994; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.concept-heading { margin-top: 12vh; }
.concept-heading span { display: block; color: #777570; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 7px; }
.concept-heading strong { font-size: 13px; font-weight: 500; }
.concept-tabs { margin: 34px -18px 0; }
.concept-tabs button { position: relative; width: 100%; min-height: 82px; padding: 15px 18px 15px 43px; border: 0; border-top: 1px solid #31312f; background: none; color: #777570; text-align: left; cursor: pointer; transition: .2s; }
.concept-tabs button:last-child { border-bottom: 1px solid #31312f; }
.concept-tabs button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform .2s; }
.concept-tabs button:hover { color: #bbb8b1; background: #1f1f1d; }
.concept-tabs button.active { color: #fff; background: #232321; }
.concept-tabs button.active::before { transform: scaleY(1); }
.concept-tabs button > span { position: absolute; left: 18px; top: 18px; font-size: 9px; }
.concept-tabs b, .concept-tabs small { display: block; }
.concept-tabs b { font: 500 18px/1.2 var(--display); }
.concept-tabs small { margin-top: 6px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.concept-arrows { display: flex; margin-top: auto; align-items: center; justify-content: space-between; color: #777570; font-size: 10px; }
.concept-arrows button { width: 38px; height: 38px; border: 1px solid #3c3b38; border-radius: 50%; background: transparent; color: #ddd; cursor: pointer; }
.concept-arrows button:hover { border-color: var(--accent); color: var(--accent); }
.site-shell { margin-left: var(--sidebar); min-width: 0; transition: opacity .18s, transform .18s; }
.changing .site-shell { opacity: .15; transform: translateY(4px); }
.site-nav { height: 86px; padding: 0 4.5vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { font: 600 20px/1 var(--display); letter-spacing: -.02em; }
.site-nav nav { display: flex; gap: 36px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.site-nav nav a { padding: 10px 0; }
.site-nav nav a:hover { color: var(--accent); }
.nav-cta { justify-self: end; border: 1px solid var(--ink); padding: 11px 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.demo-hero { min-height: calc(100vh - 86px); position: relative; display: grid; grid-template-columns: .86fr 1.14fr; padding: 5vw 4.5vw 5.5vw; gap: 4vw; align-items: center; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.kicker { margin: 0 0 25px; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.hero-copy h1 { margin: 0; font: 500 clamp(54px, 6.3vw, 106px)/.93 var(--display); letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--accent); font-weight: inherit; }
.hero-intro { max-width: 490px; margin: 30px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 35px; }
.primary-btn { display: inline-flex; align-items: center; justify-content: space-between; min-width: 190px; padding: 16px 18px; background: var(--accent); color: var(--accent-ink); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s; }
.primary-btn:hover { transform: translateY(-2px); }
.text-link { display: inline-flex; gap: 20px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.hero-image { position: relative; align-self: stretch; min-height: 560px; overflow: hidden; border-radius: var(--radius); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 40%); pointer-events: none; }
.hero-image img { height: 100%; object-fit: cover; object-position: center; }
.image-stamp { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; color: #fff; display: grid; place-content: center; text-align: center; font: 500 14px/1.2 var(--display); backdrop-filter: blur(5px); }
.image-stamp small { font: 8px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.scroll-cue { position: absolute; left: 4.5vw; bottom: 24px; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue span { margin-left: 10px; color: var(--accent); }
.proof-strip { min-height: 110px; padding: 0 4.5vw; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }
.proof-strip span { padding: 12px 3vw; border-right: 1px solid var(--line); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.proof-strip span:first-child { padding-left: 0; }
.proof-strip span:last-child { border: 0; }
.proof-strip b { color: var(--accent); margin-right: 14px; font-size: 9px; }
.services-section { padding: 10vw 4.5vw; }
.section-heading { display: grid; grid-template-columns: .45fr 1fr .65fr; gap: 5vw; align-items: end; margin-bottom: 6vw; }
.section-heading .kicker { align-self: start; }
.section-heading h2, .story-copy h2, .booking-section h2 { margin: 0; font: 500 clamp(42px, 5vw, 76px)/.98 var(--display); letter-spacing: -.045em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.service-card { min-height: 330px; padding: 30px; border-right: 1px solid var(--line); transition: background .25s, color .25s; }
.service-card:last-child { border: 0; }
.service-card:hover { background: var(--ink); color: var(--bg); }
.service-num { color: var(--accent); font-size: 10px; letter-spacing: .12em; }
.service-card h3 { margin: 70px 0 15px; font: 500 29px/1.1 var(--display); }
.service-card p { color: var(--muted); font-size: 13px; line-height: 1.6; min-height: 64px; }
.service-card:hover p { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.service-card div { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 11px; text-transform: uppercase; }
.service-card button { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.story-section { padding: 0 4.5vw 11vw; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }
.story-art { position: relative; padding: 4vw 5vw 0 0; }
.art-frame { height: 580px; overflow: hidden; border-radius: var(--radius); }
.art-frame img { height: 100%; object-fit: cover; object-position: 65% center; }
.story-art > span { position: absolute; right: 0; top: 0; color: var(--accent); font: 500 clamp(38px, 5vw, 70px)/.8 var(--display); text-align: right; }
.story-copy > p:not(.kicker) { max-width: 500px; margin: 28px 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.review-section { padding: 10vw; text-align: center; background: var(--ink); color: var(--bg); }
.quote-mark { margin: 0; color: var(--accent); font: 500 80px/.6 var(--display); }
.review-section blockquote { max-width: 900px; margin: 35px auto; font: 500 clamp(35px, 4.4vw, 66px)/1.12 var(--display); letter-spacing: -.035em; }
.review-section > p:last-child { color: color-mix(in srgb, var(--bg) 60%, transparent); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.booking-section { padding: 10vw 7vw; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: start; }
.booking-section > div > p:last-child { color: var(--muted); font-size: 13px; margin-top: 25px; }
.booking-form { display: grid; gap: 24px; }
.booking-form label span { display: block; margin-bottom: 8px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.booking-form input, .booking-form select { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); background: transparent; outline: none; }
.booking-form input:focus, .booking-form select:focus { border-color: var(--accent); }
.booking-form button { margin-top: 10px; padding: 17px 20px; display: flex; justify-content: space-between; border: 0; background: var(--accent); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; cursor: pointer; }
.site-footer { min-height: 110px; padding: 25px 4.5vw; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.site-footer p, .site-footer > a:last-child { color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

/* Theme definitions */
.theme-chrome { --bg:#0a0a0a; --surface:#18151b; --ink:#f2eff4; --muted:#aaa2ad; --accent:#ff2d78; --accent-ink:#fff; --line:rgba(255,255,255,.18); --display:"Space Grotesk",sans-serif; --radius:22px; }
.theme-chrome .demo-hero { background: radial-gradient(circle at 72% 15%, #742bb8 0, transparent 28%), #0a0a0a; }
.theme-chrome .hero-copy h1, .theme-studio .hero-copy h1, .theme-blade .hero-copy h1, .theme-gooddog .hero-copy h1 { letter-spacing: -.065em; }
.theme-chrome .hero-image { transform: rotate(1.2deg); border: 5px solid #e7e7e7; }
.theme-chrome .service-card:nth-child(2) { background: #7029ac; }
.theme-sakura { --bg:#fdfaf7; --ink:#2d2d2d; --muted:#6e746d; --accent:#718b6f; --accent-ink:#fff; --line:rgba(45,45,45,.16); --display:"Fraunces",serif; --radius:80px 2px 80px 2px; }
.theme-sakura .hero-image { margin: 3vw 2vw; min-height: 500px; }
.theme-sakura .proof-strip { background:#f0e4dc; }
.theme-studio { --bg:#0e0e0e; --ink:#fff; --muted:#aaa; --accent:#e8ff00; --accent-ink:#0e0e0e; --line:rgba(255,255,255,.19); --display:"Bebas Neue",sans-serif; }
.theme-studio .hero-copy h1, .theme-studio .section-heading h2, .theme-studio .booking-section h2 { line-height:.84; }
.theme-studio .hero-image { clip-path:polygon(8% 0,100% 0,100% 100%,0 100%); }
.theme-maison { --bg:#faf3e8; --ink:#2a1a0e; --muted:#765f50; --accent:#b75832; --accent-ink:#fff; --line:rgba(42,26,14,.17); --display:"Playfair Display",serif; --radius:90px 0 90px 0; }
.theme-maison .proof-strip { background:#d4a5a0; }
.theme-blade { --bg:#f5f0eb; --ink:#2c2c2c; --muted:#666a70; --accent:#997340; --accent-ink:#fff; --line:rgba(44,44,44,.2); --display:"Syne",sans-serif; --radius:4px; }
.theme-blade .site-nav, .theme-blade .review-section { background:#2c2c2c; color:#f5f0eb; }
.theme-paws { --bg:#fafaf8; --ink:#2b2b2b; --muted:#6f716b; --accent:#3d5a3e; --accent-ink:#fff; --line:rgba(43,43,43,.16); --display:"Fraunces",serif; --radius:28px; }
.theme-paws .proof-strip { background:#e8ddd0; }
.theme-gooddog { --bg:#fff; --ink:#172047; --muted:#657099; --accent:#2563eb; --accent-ink:#fff; --line:rgba(23,32,71,.16); --display:"Nunito",sans-serif; --radius:36px; }
.theme-gooddog .demo-hero { background:radial-gradient(circle at 5% 10%,#ffd23f 0 7px,transparent 8px),radial-gradient(circle at 44% 22%,#ff6b6b 0 5px,transparent 6px),#fff; background-size:90px 90px,120px 120px; }
.theme-gooddog .hero-copy h1 em { color:#ff6b6b; }
.theme-gooddog .service-card:nth-child(1) { background:#ffd23f; }
.theme-gooddog .service-card:nth-child(2) { background:#ff817f; }
.theme-gooddog .service-card:nth-child(3) { background:#4d7ef0; color:#fff; }
.theme-gooddog .service-card p { color:inherit; opacity:.75; }
.theme-cleanpaws { --bg:#fff; --ink:#1e293b; --muted:#667085; --accent:#2d6a4f; --accent-ink:#fff; --line:rgba(30,41,59,.15); --display:"Fraunces",serif; --radius:10px; }
.theme-cleanpaws .proof-strip { background:#f4f4f5; }

@media (max-width: 980px) {
  :root { --sidebar: 0px; }
  .concept-bar { position: sticky; top: 0; width: 100%; height: auto; padding: 10px 16px; flex-direction: row; align-items: center; }
  .back-link span, .concept-heading, .concept-tabs small, .concept-tabs button > span { display: none; }
  .back-link { width: 42px; }
  .concept-tabs { display: flex; margin: 0 auto; }
  .concept-tabs button { width: auto; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 99px; }
  .concept-tabs button.active::before { display: none; }
  .concept-tabs b { font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; }
  .concept-arrows { margin: 0; }
  .concept-arrows span { display: none; }
  .concept-arrows button { width: 32px; height: 32px; }
  .site-shell { margin-left: 0; }
  .site-nav { padding: 0 24px; }
  .site-nav nav { display: none; }
  .site-nav { grid-template-columns: 1fr 1fr; }
  .demo-hero { min-height: auto; grid-template-columns: 1fr; padding: 80px 6vw 60px; }
  .hero-copy { max-width: 700px; }
  .hero-image { min-height: 520px; }
  .scroll-cue { display: none; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading .kicker { margin: 0; }
  .section-heading > p:last-child { max-width: 500px; }
  .story-section { gap: 5vw; }
  .portfolio-intro { margin-left: 35vw; }
  .industry-card { min-height: 520px; }
}

@media (max-width: 720px) {
  .portfolio-nav span { display: none; }
  .portfolio-hero { padding: 12vh 24px 8vh; }
  .portfolio-hero h1 { font-size: clamp(48px, 15vw, 76px); }
  .portfolio-intro { margin-left: 0; }
  .industry-grid { grid-template-columns: 1fr; }
  .industry-card { min-height: 530px; border-right: 0; border-bottom: 1px solid #c9c4bb; }
  .portfolio-footer { display: block; padding: 24px; }
  .concept-tabs button { padding: 8px 10px; }
  .concept-tabs b { font-size: 9px; }
  .concept-arrows .prev { display: none; }
  .site-nav { height: 72px; }
  .nav-cta { padding: 10px 12px; font-size: 8px; }
  .demo-hero { padding: 60px 24px 42px; }
  .hero-copy h1 { font-size: clamp(48px, 15vw, 75px); }
  .hero-intro { font-size: 14px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-image { min-height: 390px; margin-top: 20px; }
  .proof-strip { grid-template-columns: 1fr; padding: 0 24px; }
  .proof-strip span, .proof-strip span:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .services-section { padding: 90px 24px; }
  .section-heading { margin-bottom: 50px; }
  .section-heading h2, .story-copy h2, .booking-section h2 { font-size: clamp(40px, 13vw, 60px); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-section { padding: 0 24px 90px; grid-template-columns: 1fr; }
  .art-frame { height: 440px; }
  .review-section { padding: 90px 24px; }
  .booking-section { padding: 90px 24px; grid-template-columns: 1fr; }
  .site-footer { padding: 30px 24px; display: block; }
  .site-footer p { margin: 20px 0; }
}

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