/* 247 Sets — 247sets.com. Same look as props.247sets.com: mostly white, black type, blue only as 70s triple stripes. */
:root{
  --ink:#12100d; --ink-2:#2a251f; --sub:#4a443b; --muted:#7a7266; --rule:#ddd6c9; --rule-strong:#c4bcae;
  --paper:#fff; --paper-2:#f6f5f2; --blue:#1f4fc1;
  --display:"Anton","Oswald","Arial Narrow",Impact,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,48px); --max:1440px; --top:76px;
  --tri:linear-gradient(var(--blue) 0 3px,transparent 3px 7px,var(--blue) 7px 10px,transparent 10px 14px,var(--blue) 14px 17px);
  --tri-sm:linear-gradient(var(--blue) 0 2px,transparent 2px 4px,var(--blue) 4px 6px,transparent 6px 8px,var(--blue) 8px 10px);
  --tri-top:inset 0 3px 0 var(--blue),inset 0 7px 0 #fff,inset 0 10px 0 var(--blue),inset 0 14px 0 #fff,inset 0 17px 0 var(--blue);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 12px)}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p{overflow-wrap:break-word}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* type */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0}
.eyebrow::before{content:"";width:34px;height:10px;background:var(--tri-sm);flex:none}
.who{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.script{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--sub);font-size:clamp(22px,2.6vw,32px);line-height:1.2;margin:14px 0 0}
.prose p{margin:0 0 16px;color:var(--sub);font-size:17px;line-height:1.7}
.prose p:last-child{margin-bottom:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border:2px solid var(--ink);background:var(--ink);color:#fff;transition:background .15s,color .15s;line-height:1.1;max-width:100%;overflow-wrap:anywhere;text-align:center}
.btn:hover{background:#000}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.sm{padding:10px 14px;font-size:11px}
.arw{display:inline-block;transition:transform .15s}
.btn:hover .arw,.tile:hover .arw{transform:translateX(4px)}

/* top bar: white with a triple stripe underneath */
.topbar{position:sticky;top:0;z-index:40;background:#fff;box-shadow:inset 0 -2px 0 var(--blue),inset 0 -5px 0 #fff,inset 0 -7px 0 var(--blue),inset 0 -10px 0 #fff,inset 0 -12px 0 var(--blue)}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:var(--top);padding-bottom:12px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand .mark{font-family:var(--display);font-size:28px;letter-spacing:.04em}
.brand .tag{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{text-decoration:none;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;color:var(--sub);border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.menubtn{display:none;margin-left:auto;font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:#fff;color:var(--ink);border:1px solid var(--rule-strong);padding:10px 14px;cursor:pointer}
@media (max-width:1279px){.brand .tag{display:none}}  /* the full tagline only fits beside the menu from 1280px */
@media (max-width:900px){
  .menubtn{display:block}
  .topbar .btn.sm{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:var(--top);flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);padding:6px var(--gutter) 14px}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule)}
}

/* hero: white split with the curved triple stripe */
.hero{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(70px,8vw,110px);overflow:hidden}
.sweep{position:absolute;left:0;right:clamp(10px,2vw,28px);top:clamp(18px,3vw,36px);bottom:clamp(22px,3vw,40px);pointer-events:none}
.sweep i{position:absolute;left:0;top:0;border:0 solid var(--blue);border-bottom-width:4px;border-right-width:4px}
.sweep i:nth-child(1){right:0;bottom:0;border-bottom-right-radius:120px}
.sweep i:nth-child(2){right:12px;bottom:12px;border-bottom-right-radius:108px}
.sweep i:nth-child(3){right:24px;bottom:24px;border-bottom-right-radius:96px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;padding-right:clamp(48px,6vw,90px)}
.hero h1{font-size:clamp(54px,8vw,132px);max-width:10ch}
.hero .copy{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--sub);max-width:56ch;margin:22px 0 0}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-photo{margin:0}
.hero-photo img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:74% 45%;filter:grayscale(1) contrast(1.05)}
.hero-photo figcaption{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-right:calc(var(--gutter) + 34px)}
  .hero-photo img{aspect-ratio:4/3}
}

/* credits: quiet, four short columns, names as plain type */
.credits{padding:34px 0 38px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cr-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cr-note{margin:0;font-size:14px;color:var(--muted)}
.cr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 32px;margin:0}
.cr-cols dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 8px}
.cr-cols dd{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2)}
@media (max-width:980px){.cr-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cr-cols{grid-template-columns:1fr;gap:16px}}

/* sections */
.section{padding:clamp(56px,8vw,110px) 0}
.section.white{background:#fff}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-size:clamp(42px,6vw,84px);max-width:14ch}
.sec-head .side{margin:0;max-width:40ch;color:var(--sub);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.split > h2{font-size:clamp(42px,5.6vw,80px)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.statement{background:var(--paper-2);box-shadow:var(--tri-top)}
.statement .kicker{color:var(--ink);font-weight:600}

/* service cards: four across, hairlines between */
.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.card{padding:26px 24px 30px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card:nth-child(4n){border-right:0}
.card:nth-child(4n+1){padding-left:0}
.card h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.05;text-transform:uppercase;margin:0 0 10px}
.card p{margin:0;color:var(--sub);font-size:15px}
@media (max-width:1100px){.cards{grid-template-columns:1fr 1fr}.card,.card:nth-child(4n+1){padding:24px 20px 26px}.card:nth-child(4n){border-right:1px solid var(--rule)}.card:nth-child(odd){padding-left:0}.card:nth-child(even){border-right:0}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.card,.card:nth-child(odd){padding:22px 0;border-right:0}}

/* process steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)}
.steps li{counter-increment:s;padding:24px 22px 28px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--display);font-size:44px;line-height:1;margin-bottom:12px}
.steps h3{font-family:var(--display);font-weight:400;font-size:24px;text-transform:uppercase;line-height:1.05;margin:0 0 8px}
.steps p{margin:0;color:var(--sub);font-size:15px}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin-top:clamp(36px,5vw,56px);padding-top:28px;box-shadow:var(--tri-top)}
.kit .eyebrow{margin:14px 0 14px}
.kit ul{list-style:none;margin:0;padding:0}
.kit li{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);font-size:15px}
@media (max-width:640px){.kit{grid-template-columns:1fr}}

/* transparency */
.open{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:22px;width:20px;height:10px;background:var(--tri-sm)}
.open .note{margin:22px 0 0;color:var(--sub);font-size:15px}

/* about Luis */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.about-photo{margin:0}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:70% 40%;filter:grayscale(1) contrast(1.05)}
.about h2{font-size:clamp(48px,6.4vw,96px)}
.about .prose{margin-top:24px}
.facts{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--ink)}
.facts li{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts b{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:3px}
@media (max-width:860px){.about{grid-template-columns:1fr}.about-photo img{aspect-ratio:4/3}}

/* the two sites */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.tile{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,36px);border:2px solid var(--ink);text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .2s}
.tile:hover{box-shadow:var(--tri-top)}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tile h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.2vw,44px);text-transform:uppercase;line-height:1;margin:0}
.tile p{margin:0;color:var(--sub);font-size:15px}
.tile .go{margin-top:auto;padding-top:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}

/* contact */
.cta{padding:clamp(56px,8vw,100px) 0;box-shadow:var(--tri-top);background:#fff}
.cta .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px;align-items:center}
.cta h2{font-size:clamp(44px,6.2vw,96px)}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-actions .btn{text-transform:none;letter-spacing:.02em;font-size:15px}
.hours{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* footer */
.stripe{height:17px;background:var(--tri)}
.foot{padding:0 0 30px;font-size:14px;color:var(--sub)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-top:44px}
.foot .mark{font-family:var(--display);font-size:30px;color:var(--ink);margin:0 0 8px}
.foot h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:6px 0 12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:4px 0}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.legal{margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);font-size:12px;color:var(--muted)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li{padding-right:0}}

/* credits: TV and film as rows with a small note, artists across the full width */
.cr-cols .wide{grid-column:1/-1;padding-top:6px;border-top:1px solid var(--rule)}
.cr-cols .row{display:block;padding:2px 0}
.cr-cols small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-bottom:4px}
.cr-note{max-width:70ch}

/* inquiry form (composes an email) */
.cta .wrap{align-items:start}
.inquiry{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:10px;padding-top:28px;border-top:1px solid var(--rule)}
.inquiry label{display:flex;flex-direction:column;gap:6px}
.inquiry label span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.inquiry input,.inquiry select,.inquiry textarea{font:16px var(--sans);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:12px 14px;width:100%;-webkit-appearance:none;appearance:none}
.inquiry textarea{resize:vertical}
.inquiry .full{grid-column:1/-1}
.form-note{margin-left:12px;font-size:13px;color:var(--muted)}
@media (max-width:640px){.inquiry{grid-template-columns:1fr}.form-note{display:block;margin:10px 0 0}}
.inquiry select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2312100d' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px;padding-right:40px}

/* the 24/7 logo (drawn from the embroidery on Luis' hat) ahead of the wordmark, in the wordmark's colour;
   its shape comes from tools/brand/build_logo.py */
.brand .mark::before,.foot .mark::before{content:"";display:inline-block;width:.98em;height:1.42em;margin-right:.28em;vertical-align:-.32em;background:currentColor;-webkit-mask:var(--logo-247) center/contain no-repeat;mask:var(--logo-247) center/contain no-repeat;-webkit-print-color-adjust:exact;print-color-adjust:exact}
:root{--logo-247:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='110 44 410 595'%3E%3Cpath d='M163 263 161 264 141 272 119 281 117 282 115 284 114 288 114 292 125 317 128 321 132 322 136 322 168 308 181 304 197 300 216 296 237 295 253 295 269 297 282 300 307 307 324 311 341 314 362 316 385 318 412 317 436 315 461 311 464 312 466 314 468 317 467 320 385 618 385 621 386 623 388 626 391 627 418 635 421 635 424 633 427 631 428 628 514 315 516 305 516 295 514 287 510 279 505 273 499 269 492 266 484 264 477 264 469 264 440 270 417 273 394 274 373 273 353 271 335 268 318 264 287 256 271 253 255 251 251 249 250 248 249 245 249 242 250 240 273 218 289 200 302 185 312 170 318 159 322 147 324 135 325 122 323 107 321 100 318 93 315 87 311 81 306 75 301 70 291 62 285 58 277 55 263 50 246 48 229 48 212 51 198 56 184 63 170 72 159 83 150 95 144 108 141 117 139 126 138 136 139 145 140 153 144 169 147 173 151 175 154 174 180 168 182 167 185 165 186 162 187 159 183 142 182 136 183 129 185 123 189 116 195 109 203 102 213 97 224 94 235 92 248 92 259 95 267 99 274 105 278 112 280 120 280 130 280 135 278 140 272 151 262 165 250 178 237 191 183 243Z M325 227 325 230 326 233 328 236 332 238 359 245 363 244 365 242 367 240 413 75 413 73 412 69 411 67 408 65 380 57 377 57 375 58 373 60 371 62Z M253 431 251 434 247 436 201 436 198 436 195 438 193 441 192 445 192 472 193 474 194 477 197 479 201 480 333 480 337 479 340 476 342 472 342 445 341 442 340 439 337 437 334 436 305 436 303 435 301 433 300 430 300 427 323 345 323 342 322 340 321 337 319 335 316 334 290 327 285 328 281 331 280 334Z'/%3E%3C/svg%3E")}