/* 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;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:1020px){.brand .tag{display:none}}
@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}