@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/DMMono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Staatliches-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Perez Boxing custom site. Matches the live Square theme: Staatliches headlines, Inter body, DM Mono buttons and menu,
   black and white sections, khaki #C3B091 on black, 8px button corners. Single look on purpose (no dark mode switch). */
:root {
  color-scheme: dark;
  --black:#000; --white:#fff; --khaki:#C3B091; --link-d:#7DA2FF; --link-l:#1F4FD8; --grey-d:#CFCFCF; --grey-l:#4A4A4A; --card:#141414; --line-d:#2C2C2C; --line-l:#DEDEDE;
  --head:'Staatliches', Impact, 'Arial Narrow', sans-serif; --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'DM Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--black); color:var(--white); font:400 16px/1.5 var(--body); overflow-x:hidden; }
img, video, iframe { display:block; max-width:100%; }
h1,h2,h3,h4 { font-family:var(--head); font-weight:500; margin:0; line-height:1.1; text-wrap:balance; }
h1 { font-size:clamp(44px,6vw,64px); letter-spacing:-.02em; }
h1.h2,h2 { font-size:clamp(36px,4.6vw,57px); letter-spacing:-.02em; }
h2.sm { font-size:clamp(26px,2.6vw,30px); }
h3 { font-size:24px; letter-spacing:-.01em; }
h3.big { font-size:clamp(32px,3.6vw,46px); letter-spacing:-.02em; }
h4 { font-size:20px; letter-spacing:-.01em; }
h4.lg { font-size:24px; }
p { margin:0; max-width:68ch; }
a { color:inherit; }
.dark { background:var(--black); color:var(--white); }
.light { background:var(--white); color:#000; color-scheme:light; }
.dark p a, .dark .lk a, .dark td a { color:var(--link-d); }
.light p a, .light .lk a { color:var(--link-l); }
.dark h4 a { color:inherit; }
:focus-visible { outline:3px solid var(--khaki); outline-offset:3px; }

section { padding-block:clamp(48px,6vw,84px); }
section.tight { padding-block:clamp(28px,3vw,44px); }
section.tightt { padding-top:8px; }
.wrap { max-width:1088px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px)); display:flex; flex-direction:column; gap:18px; }
.c .wrap { align-items:center; text-align:center; }
.c p { margin-inline:auto; }
.c .row { justify-content:center; }
.kick { font:500 14px/1.2 var(--head); color:var(--khaki); letter-spacing:.01em; }
.kh { color:var(--khaki); }
.lk { font-size:15px; }
.lk a { text-decoration:none; }
.lk a:hover { text-decoration:underline; }
.mt { margin-top:28px; }

.two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,48px); align-items:start; }
.two.mid { align-items:center; }
.two > div { min-width:0; display:flex; flex-direction:column; gap:18px; }
.cap figure { margin:0; }
.cap figcaption { margin-top:10px; font-size:15px; color:var(--grey-d); }
.row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; font:500 16px/1.1 var(--mono); letter-spacing:.01em; text-decoration:none; text-align:center; border-radius:8px; border:2px solid transparent; cursor:pointer; transition:transform .12s ease, opacity .12s ease; }
.btn:hover { opacity:.86; }
.btn:active { transform:translateY(1px); }
.dark .btn { background:var(--white); color:#000; }
.light .btn { background:#000; color:var(--white); }
.dark .btn.ghost, .box .btn.ghost { background:transparent; color:var(--white); border-color:var(--white); }
.light .btn.ghost { background:transparent; color:#000; border-color:#000; }

.ph { overflow:hidden; border-radius:4px; background:#111; }
.ph img { width:100%; height:100%; object-fit:cover; }
.p45 { aspect-ratio:4/5; }
.p11 { aspect-ratio:1; }
.sch { aspect-ratio:3/4; }
.sq { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; }
.vid video { width:100%; aspect-ratio:1/1; max-height:560px; background:#111; border-radius:4px; object-fit:contain; }

.steps,.trio,.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.steps > div,.trio > div,.cards3 > div { display:flex; flex-direction:column; gap:10px; min-width:0; }
.steps { margin-top:12px; }
.c .trio { text-align:center; margin-top:10px; }
.cards4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:12px; }
.card { display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; min-width:0; }
.card h4 { font-size:22px; }
.card img { transition:transform .25s ease; }
.card:hover img { transform:scale(1.03); }
@media (prefers-reduced-motion:reduce) { .card img { transition:none; } .card:hover img { transform:none; } }
.card p { font-size:15px; }
.qstack .quotes { display:flex; flex-direction:column; gap:36px; }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:12px; width:100%; }
.quotes figure { margin:0; display:flex; flex-direction:column; gap:12px; }
.quotes blockquote { margin:0; font:500 24px/1.1 var(--head); letter-spacing:-.01em; }
.quotes figcaption { font-size:14px; }
.qstack { max-width:780px; }
.box { background:#000; color:var(--white); border-radius:8px; padding:clamp(32px,4vw,44px) 24px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; max-width:760px; width:100%; margin:0 auto; }
.box h2 { font-size:clamp(30px,3vw,36px); }
.light .box .btn { background:var(--white); color:#000; }
.light .box .btn.ghost { background:transparent; color:var(--white); border-color:var(--white); }
.box .row { justify-content:center; }
.reasons { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.reasons li { padding:12px 0; border-top:1px solid var(--line-d); }
.light .reasons li { border-color:var(--line-l); }
.gal { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gal .ph { aspect-ratio:4/5; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:40px; width:100%; max-width:820px; margin-top:12px; }
.duo > div { display:flex; flex-direction:column; gap:10px; }
.duo.left { max-width:none; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:28px 48px; margin-top:12px; }
.faq > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.igrid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; width:100%; margin-top:8px; }

.loc { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,48px); align-items:start; }
.loc > div { min-width:0; }
.loc h3 { margin-bottom:18px; }
.map iframe { width:100%; height:350px; border:0; border-radius:4px; }
.mapstub { display:flex; align-items:center; justify-content:center; height:350px; padding:24px; text-align:center; background:var(--card); border:1px solid var(--line-d); border-radius:4px; color:var(--grey-d); text-decoration:none; }
.locin { display:grid; grid-template-columns:1fr 1.2fr; gap:24px; }
.locin > div { display:flex; flex-direction:column; gap:14px; min-width:0; overflow-wrap:anywhere; }
.locin table { border-collapse:collapse; width:100%; font-size:15px; font-variant-numeric:tabular-nums; }
.locin th { font-weight:400; text-align:left; padding:3px 12px 3px 0; white-space:nowrap; vertical-align:top; }
.locin td { padding:3px 0; }

.svc { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.svc a { display:flex; flex-direction:column; gap:10px; background:var(--card); border-radius:8px; padding:20px; text-decoration:none; color:var(--white); min-width:0; }
.svc a:hover { background:#1E1E1E; }
.svc h4 { font:600 16px/1.3 var(--body); letter-spacing:0; }
.svc p { font-size:14px; color:var(--grey-d); flex:1; }
.svc span { font-size:14px; }
p.sm { font-size:14px; color:var(--grey-d); }
.crumb { font-size:14px; color:var(--grey-d); }
.crumb a { color:inherit; }
.price { font:500 22px/1.2 var(--mono); }

.form { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:6px; max-width:760px; width:100%; }
.form > div { min-width:0; display:flex; flex-direction:column; gap:6px; }
.form .full { grid-column:1 / -1; }
.form label { font-size:14px; font-weight:600; }
.form input, .form textarea { width:100%; padding:12px; font:400 16px/1.4 var(--body); border:1px solid #8A8A8A; border-radius:8px; background:#fff; color:#000; }
.fine { font-size:13px; color:var(--grey-l); }
.dark .fine { color:var(--grey-d); }

.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:var(--black); }
.bar { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px max(24px, env(safe-area-inset-right, 0px)) 8px max(24px, env(safe-area-inset-left, 0px)); }
.logo img { width:64px; height:64px; object-fit:contain; }
.links { display:flex; align-items:center; gap:clamp(12px,1.9vw,26px); font:500 15px/1 var(--mono); }
.links a { text-decoration:none; color:var(--white); white-space:nowrap; padding:8px 0; }
.links a:hover { color:var(--khaki); }
.links a[aria-current] { box-shadow:0 2px 0 var(--khaki); }
.me svg { width:22px; height:22px; display:block; }
.menu { display:none; position:relative; }
.menu summary { list-style:none; cursor:pointer; width:44px; height:44px; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.menu summary::-webkit-details-marker { display:none; }
.menu summary span { display:block; width:26px; height:2px; background:var(--white); }
.menu nav { position:absolute; right:0; top:50px; width:min(260px,80vw); background:#000; border:1px solid var(--line-d); border-radius:8px; padding:8px; display:flex; flex-direction:column; font:500 16px/1 var(--mono); }
.menu nav a { padding:14px 12px; text-decoration:none; color:var(--white); }
footer { background:var(--black); padding-block:40px; }
.fin { flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
.fin img { width:88px; height:88px; object-fit:contain; }
.soc { display:flex; gap:10px; }
.soc a { width:36px; height:36px; border-radius:50%; background:var(--white); color:#000; display:flex; align-items:center; justify-content:center; }
.soc svg { width:20px; height:20px; }
.dd { position:relative; }
.dd summary { list-style:none; gap:10px; }
.dd summary::-webkit-details-marker { display:none; }
.ddlist { position:absolute; left:0; top:calc(100% + 8px); z-index:15; width:min(340px,calc(100vw - 36px)); background:var(--white); color:#000; border-radius:8px; padding:6px; display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,.6); }
.ddlist a { display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:6px; text-decoration:none; color:#000; }
.ddlist a:hover { background:#EDEDED; }
.ddlist b { font:600 16px/1.3 var(--body); }
.ddlist span { font-size:14px; color:var(--grey-l); }
@media (max-width:520px) { .row .dd { flex:1 1 100%; } .dd summary { width:100%; } .ddlist { width:100%; } }
.testbar { background:var(--khaki); color:#000; font:500 13px/1.3 var(--mono); text-align:center; padding:7px 16px; }

@media (max-width:1060px) { .links { display:none; } .menu { display:block; } }
@media (max-width:820px) {
  .two,.loc { grid-template-columns:1fr; }
  .steps,.trio,.quotes,.faq,.duo,.svc { grid-template-columns:1fr; }
  .cards3 { grid-template-columns:1fr 1fr; gap:20px; }
  .cards4,.gal { grid-template-columns:1fr 1fr; gap:14px; }
  .igrid { grid-template-columns:repeat(3,1fr); }
  .two.mid > div:has(> .ph:only-child), .two.mid > div:has(> .vid:only-child) { order:-1; }
  section:has(.ph.p45) .two.mid > div:has(> .ph.p45:only-child) { order:0; }
}
@media (max-width:520px) {
  .wrap { padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px)); }
  .row .btn { flex:1 1 100%; }
  .locin { grid-template-columns:1fr; }
  .cards3 { grid-template-columns:1fr; }
}