:root{--ink:#193e16;--panel:#234e21;--soft:#343e4b;--white:#ffffff;--muted:#c1cbd2;--line:rgba(215,220,224,.2);--serif:'Playfair Display',serif;--sans:'Manrope',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);font-weight:300}a{color:inherit;text-decoration:none}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.nav{position:fixed;z-index:30;top:0;left:0;right:0;height:88px;display:flex;align-items:center;gap:48px;padding:0 5vw;border-bottom:1px solid var(--line);background:linear-gradient(rgba(25,62,22,.96),rgba(25,62,22,.82));backdrop-filter:blur(14px)}.brand{display:flex;align-items:center}.brand-image{line-height:0}.nav-logo{display:block;width:clamp(175px,17vw,255px);height:auto}.nav nav{display:flex;gap:34px;align-items:center;margin-left:auto}.nav nav a,.events-toggle{border:0;background:none;color:#f1f2ed;font:400 12px var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border:1px solid #d6dacf;color:var(--white);text-transform:uppercase;letter-spacing:.13em;font-size:11px;transition:.25s}.nav-cta:hover,.button:hover{background:#e6e9ee;color:#193e16}.menu{display:none}.mega-more{display:none}.mega{position:fixed;z-index:29;top:88px;left:0;right:0;padding:35px 12vw 48px;background:rgba(25,62,22,.97);backdrop-filter:blur(20px);display:grid;grid-template-columns:repeat(5,1fr);gap:25px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.35s}.mega.open{transform:none}.mega>p{grid-column:1/-1;color:#d6dacf;font-size:10px;letter-spacing:.2em}.mega a{font-family:var(--serif);font-size:21px;border-top:1px solid var(--line);padding-top:18px}.mega a span{display:block;font:10px var(--sans);color:#d6dacf;margin-bottom:10px}.mega a em{display:block;font:10px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:8px}.hero{min-height:100svh;display:flex;align-items:end;padding:160px 7vw 9vh;position:relative;background-size:cover;background-position:center}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,62,22,.86) 0%,rgba(25,62,22,.4) 50%,rgba(25,62,22,.1)),linear-gradient(0deg,#193e16 0%,transparent 48%)}.hero-content{position:relative;max-width:880px}.eyebrow{color:#d6dacf;font-size:11px;letter-spacing:.25em;text-transform:uppercase;margin-bottom:24px}.hero h1,.page-hero h1{font:500 clamp(58px,9vw,138px)/.88 var(--serif);letter-spacing:-.045em;margin:0 0 26px}.hero h1 em,.page-hero h1 em{font-weight:500}.hero p{max-width:660px;font-size:clamp(17px,1.7vw,24px);line-height:1.55;color:#eef0f3}.scroll{position:absolute;right:5vw;bottom:8vh;writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em;color:#c3c9d2}.intro{padding:130px 7vw;display:grid;grid-template-columns:1fr 2fr;gap:9vw}.intro h2,.statement h2{font:500 clamp(38px,5vw,72px)/1.05 var(--serif);margin:0}.intro p{font-size:clamp(20px,2.2vw,32px);line-height:1.45;margin:0;color:#d7dce4}.intro strong{color:#ffffff;font-weight:500}.collection{padding:0 5vw 120px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 2vw 45px}.section-head h2{font:500 clamp(40px,5vw,70px) var(--serif);margin:0}.section-head p{font-size:11px;letter-spacing:.18em;color:#d6dacf}.event-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}.event-card{min-height:480px;padding:45px;background:var(--panel);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;border:1px solid rgba(215,220,224,.08)}.event-card.featured{grid-column:1/-1;min-height:620px;background:url('/concert-golf/assets/golf.png') center/cover}.event-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(25,62,22,.96) 0%,rgba(25,62,22,.18) 76%);z-index:-1}.event-card .number{position:absolute;top:30px;left:35px;color:#e6e9ee;font-size:10px;letter-spacing:.2em}.event-card .location{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d6dacf}.event-card h3{font:500 clamp(35px,4vw,62px) var(--serif);margin:12px 0}.event-card p{max-width:600px;color:#dfe3e9;font-size:15px;line-height:1.7}.event-card .arrow{position:absolute;right:35px;bottom:35px;font-size:30px;color:#e2e6ec}.statement{padding:150px 10vw;text-align:center;background:linear-gradient(135deg,#ffffff,#d9dee6);color:#193e16}.statement p{font-size:12px;letter-spacing:.2em;color:#31425d;text-transform:uppercase}.services{padding:130px 7vw}.services-list{margin-top:60px;border-top:1px solid var(--line)}.service{display:grid;grid-template-columns:80px 1fr 2fr;padding:32px 0;border-bottom:1px solid var(--line);align-items:center}.service span{color:#d6dacf;font-size:11px}.service h3{font:500 27px var(--serif);margin:0}.service p{color:var(--muted);line-height:1.6}.inquiry{padding:140px 7vw;background:linear-gradient(120deg,#343e4b,#193e16);display:grid;grid-template-columns:1.1fr 1fr;gap:10vw}.inquiry h2{font:500 clamp(50px,7vw,95px)/.95 var(--serif);margin:0}.inquiry form{display:grid;gap:22px}.inquiry input,.inquiry select,.inquiry textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #8792a3;color:white;padding:15px 2px;font:300 15px var(--sans);border-radius:0}.inquiry option{color:#111}.inquiry textarea{height:90px}.inquiry button{background:transparent;justify-self:start}.page-hero{min-height:78svh;padding:180px 7vw 80px;display:flex;align-items:end;position:relative;overflow:hidden}.page-hero:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 40%,rgba(44,68,100,.4),transparent 36%),linear-gradient(0deg,#193e16,transparent);z-index:-1}.page-hero.golf{background:url('/concert-golf/assets/golf.png') center/cover}.page-hero.golf:after{background:linear-gradient(90deg,rgba(25,62,22,.9),rgba(25,62,22,.2)),linear-gradient(0deg,#193e16,transparent 55%)}.page-hero p{max-width:680px;font-size:21px;line-height:1.6;color:#dce1e8}.detail{padding:110px 7vw;display:grid;grid-template-columns:1fr 2fr;gap:9vw}.detail h2{font:500 clamp(34px,4vw,55px) var(--serif);margin:0}.detail-copy>p{font-size:21px;line-height:1.7;margin-top:0}.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:50px}.pillar{background:var(--ink);padding:30px}.pillar h3{font:500 23px var(--serif)}.pillar p{color:var(--muted);line-height:1.6}.timeline{counter-reset:step;margin-top:40px}.timeline article{position:relative;padding:0 0 45px 55px;border-left:1px solid #647086}.timeline article:before{counter-increment:step;content:'0' counter(step);position:absolute;left:-14px;top:0;background:var(--ink);color:#d6dacf;font-size:10px;padding:5px}.timeline h3{font:500 26px var(--serif);margin:0 0 10px}.timeline p{color:var(--muted);line-height:1.6}.quote{padding:100px 12vw;font:500 clamp(34px,5vw,68px)/1.2 var(--serif);text-align:center;color:#e8ebef}.quote em{color:#cbd2dc}footer{padding:80px 7vw 35px;border-top:1px solid var(--line);text-align:center;background:#193e16}.footer-brand{justify-content:center;margin:0 auto 22px}.footer-brand img{display:block;width:min(230px,52vw);height:auto}.footer-links{display:flex;justify-content:center;gap:30px;margin:45px 0;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.legal{font-size:10px;color:#8d97a6;max-width:900px;margin:auto;line-height:1.6}.golf-brand-logo{display:block;width:min(620px,78vw);height:auto;margin:0 0 24px;filter:drop-shadow(0 10px 28px rgba(0,0,0,.32))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:850px){.nav{height:72px;padding:0 20px}.nav-logo{width:185px}.nav nav,.nav-cta{display:none}.menu{display:block;margin-left:auto;background:none;border:0;color:white;text-transform:uppercase;letter-spacing:.1em}.mega{top:72px;grid-template-columns:1fr;padding:25px;max-height:calc(100vh - 72px);overflow:auto}.mega>p{grid-column:1}.hero{padding:130px 25px 70px}.scroll{display:none}.intro,.detail,.inquiry{grid-template-columns:1fr;padding:85px 25px;gap:35px}.event-grid{grid-template-columns:1fr}.event-card,.event-card.featured{grid-column:auto;min-height:450px;padding:28px}.collection,.services{padding:80px 20px}.section-head{display:block}.service{grid-template-columns:45px 1fr}.service p{grid-column:2}.page-hero{padding:140px 25px 60px;min-height:70vh}.pillars{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.hero h1,.page-hero h1{font-size:55px}.golf-brand-logo{width:min(520px,90vw)}}
.hero:before{background:linear-gradient(90deg,rgba(25,62,22,.82) 0%,rgba(25,62,22,.34) 52%,rgba(25,62,22,.08)),linear-gradient(0deg,#193e16 0%,transparent 46%)}
.event-card{background-size:cover;background-position:center;color:#fff}.event-card p{color:#dfe3e9}.page-hero{isolation:isolate;background-size:cover;background-position:center;color:#fff}.page-hero:after{background:linear-gradient(90deg,rgba(25,62,22,.9),rgba(25,62,22,.38) 62%,rgba(25,62,22,.1)),linear-gradient(0deg,#193e16,transparent 58%)}
.event-card .event-date{position:absolute;top:26px;right:30px;padding:10px 14px;border:1px solid rgba(215,220,224,.72);background:rgba(25,62,22,.72);backdrop-filter:blur(10px);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#ffffff}
@media(max-width:850px){.event-card .event-date{top:22px;right:22px;max-width:70%;padding:9px 11px;font-size:10px;line-height:1.35;text-align:right}}

/* Light editorial edition */
body{background:#f7f8fa;color:#193e16}
.intro,.collection,.detail{background:#fff;color:#193e16}
.services{background:#f1f4f7;color:#193e16}
.intro{border-bottom:1px solid rgba(25,62,22,.1)}
.intro p{color:#33425a}
.intro strong{color:#193e16}
.section-head p{color:#434a4f}
.event-grid{background:rgba(25,62,22,.15);box-shadow:0 24px 70px rgba(25,62,22,.1)}
.event-card{color:#fff;border-color:rgba(255,255,255,.14)}
.event-card .location{color:#d6dacf}
.statement{background:linear-gradient(135deg,#f7f8fa,#dce2e9);color:#193e16;border-top:1px solid rgba(25,62,22,.08);border-bottom:1px solid rgba(25,62,22,.1)}
.service{border-color:rgba(25,62,22,.16)}
.services-list{border-color:rgba(25,62,22,.16)}
.service span{color:#52647e}
.service p,.detail-copy p,.pillar p,.timeline p{color:#526074}
.pillars{background:rgba(25,62,22,.14)}
.pillar{background:#fff;color:#193e16}
.timeline article{border-color:#98a5b6}
.timeline article:before{background:#fff;color:#52647e}
.quote{background:#edf1f5;color:#193e16;border-top:1px solid rgba(25,62,22,.08)}
.quote em{color:#52647e}
.inquiry,footer,.mega,.hero,.page-hero{color:#ffffff}
footer p{color:#c6cdd7}
@media(max-width:850px){.intro,.collection,.detail{background:#fff}.services{background:#f1f4f7}}

/* Golf-led homepage hero */
.nav-logo{width:clamp(210px,19vw,300px)}
.hero{background-image:url('/concert-golf/assets/golf.png')!important;align-items:center;padding-top:175px;padding-bottom:70px;background-position:center 58%}
.hero:before{background:linear-gradient(90deg,rgba(25,62,22,.62) 0%,rgba(25,62,22,.24) 55%,rgba(25,62,22,.04)),linear-gradient(0deg,rgba(25,62,22,.72) 0%,transparent 52%)}
.hero-content{max-width:820px}
.hero-content:before{content:none}
.hero .hero-tagline{font-size:clamp(22px,2.6vw,36px);line-height:1.4;letter-spacing:0;text-transform:none;margin:0 0 32px;color:#fff;font-weight:400}
.hero-tagline strong{font-weight:800}
.hero h1{font-size:clamp(42px,5.4vw,82px);margin-bottom:18px}
@media(max-width:850px){.nav-logo{width:205px}.hero{align-items:end;padding-top:125px;padding-bottom:52px;background-position:62% center}.hero-content:before{width:min(430px,82vw);height:clamp(165px,46vw,245px);margin-bottom:4px}.hero h1{font-size:44px}}

/* Legal documents (privacy, terms) - scoped to .legal-doc, no effect elsewhere */
.legal-doc .detail{border-top:1px solid rgba(25,62,22,.1);align-items:start}
.legal-doc .detail-copy>p{font-size:19px}
.legal-doc .detail-copy a{color:#193e16;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:rgba(7,26,56,.38)}
.legal-doc .detail-copy a:hover{text-decoration-color:#193e16}
.legal-doc .detail-copy ul{margin:0 0 26px;padding:0;list-style:none}
.legal-doc .detail-copy li{position:relative;padding-left:22px;margin-bottom:10px;color:#526074;line-height:1.7;font-size:17px}
.legal-doc .detail-copy li:before{content:'';position:absolute;left:0;top:.8em;width:9px;height:1px;background:#98a5b6}
.legal-doc .detail-copy strong{color:#193e16;font-weight:500}
.legal-doc .detail-copy address{font-style:normal;color:#526074;line-height:1.85;font-size:17px}
.legal-doc .pillar p{font-size:15px}
.legal-doc .doc-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c6cdd7;margin:22px 0 0}

/* SMS consent - A2P 10DLC. Legal copy: small, but deliberately high contrast on the
   dark inquiry panel. Do not lower the contrast or hide it behind a disclosure. */
.inquiry .consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;margin-top:4px}
.inquiry .consent input[type=checkbox]{width:18px;height:18px;flex:none;margin:3px 0 0;padding:0;border:0;border-bottom:0;accent-color:#ffffff;cursor:pointer}
.inquiry .consent span{font-size:13px;line-height:1.7;color:#e6eaf1}
.inquiry .consent a{color:#fff;text-decoration:underline;text-underline-offset:.18em;text-decoration-color:rgba(255,255,255,.6)}
.inquiry .consent a:hover{text-decoration-color:#fff}
.inquiry .form-error{margin:0;font-size:13px;line-height:1.6;color:#ffd9d2}

/* Structured interests, as pills that wrap to fill the width. The checkbox is
   still there and still focusable -- opacity and a 1px box, never display:none,
   which would take it out of the tab order and out of the form. The fill is the
   only thing carrying the selected state, so it has to be unmistakable. */
.inquiry fieldset.choices{border:0;margin:0;padding:0;min-width:0}
.inquiry .choices legend{padding:0;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#e6eaf1}
.inquiry .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.inquiry .pill{position:relative;display:inline-flex;margin:0}
.inquiry .pill input[type=checkbox]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.inquiry .pill span{display:inline-block;border:1px solid rgba(201,207,216,.42);border-radius:100px;padding:9px 16px;font-size:13.5px;line-height:1.35;color:#e6eaf1;cursor:pointer;transition:background-color .13s,border-color .13s,color .13s}
.inquiry .pill:hover span{border-color:#e6eaf1}
.inquiry .pill input[type=checkbox]:checked + span{background:#e6eaf1;border-color:#e6eaf1;color:#343e4b;font-weight:600}
.inquiry .pill input[type=checkbox]:focus-visible + span{outline:2px solid #e6eaf1;outline-offset:3px}
.inquiry textarea.short{height:62px}

/* First name and last name sit beside each other, everything else runs full
   width. Two boxes stacked read as two separate questions; side by side they
   read as one name, which is what they are.

   Done by making the form a two-column grid and opting every other control
   back out to the full width, rather than by wrapping the two inputs in a
   div. No markup change means no change to what the form posts, and the
   autocomplete and required attributes the browser relies on stay exactly
   where they were. */
.inquiry form{grid-template-columns:1fr 1fr}
.inquiry form > *{grid-column:1/-1}
.inquiry input[name="firstName"],
.inquiry input[name="lastName"]{grid-column:auto}
@media(max-width:850px){
  /* On a phone two half-width boxes are two cramped boxes. */
  .inquiry form{grid-template-columns:1fr}
}

/* ==========================================================================
   Super Bowl LXI
   One page, five blocks, one photograph. Everything else is type and
   hairlines -- one photograph used well reads more expensive than six used
   adequately, and it is also the only asset we have to wait on.
   ========================================================================== */

/* 01 Hero. The type sits on navy ABOVE the photograph rather than on top of
   it, and the photograph runs full width underneath. That is not a style
   choice -- a night shot whose brightest area is water in the lower half
   cannot carry white type there, and the scrim needed to make it readable
   kills the reflections, which are the reason the photograph is worth having.
   Type on colour, picture intact, and neither is fighting the other.

   The partner strip keeps its own band under the picture for the same reason:
   marks at 26px over moving water are unreadable at any weight. */
.sb-hero{background:#193e16;color:#ffffff}
/* The nav is position:fixed, so the first thing in the page sits underneath
   it unless it says otherwise. The eyebrow was the thing underneath it. */
.sb-hero-in{max-width:1000px;padding:clamp(16px,1.8vw,26px) 7vw clamp(18px,2.4vw,30px)}
.sb-hero h1{font:500 clamp(38px,6.6vw,74px)/.95 var(--serif);letter-spacing:-.042em;margin:0 0 20px;
  text-shadow:0 2px 26px rgba(25,62,22,.45)}
.sb-hero h1 em{display:block;font-style:italic;color:#e9ecf1}
.sb-deck{max-width:600px;font-size:clamp(14px,1.35vw,17.5px);font-weight:300;line-height:1.62;color:#e2e6ec;margin:0 0 26px}
.sb-acts{display:flex;flex-wrap:wrap;gap:12px}
.sb-acts .button.solid{background:#f1f2ed;border-color:#f1f2ed;color:#193e16;font-weight:500}
.sb-acts .button.solid:hover{background:#fff;border-color:#fff}
/* Two different jobs for one picture.
   On a phone it runs whole and uncropped: a 4:3 photograph forced to fill a
   portrait hole throws away most of its width, which is how the first cut
   lost both ends of the building.
   On a desktop it is a band. At 1440 wide the untouched frame is over a
   thousand pixels tall and drives the partner strip 600px below the fold --
   and the fold is the entire reason this hero is shaped the way it is. A
   wide crop loses sky and the nearest water, which are the two parts nobody
   came for. */
.sb-shot{display:block;width:100%;height:auto;background:#343e4b}
@media(min-width:851px){
  .sb-shot{height:clamp(290px,38vh,460px);object-fit:cover;object-position:center 45%}
}

/* The strip. Marks sit on navy, so single-colour white files are what belongs
   here. Until those land the names are set in type, which is honest about
   what we have rather than stretching somebody's colour logo onto a dark
   background. */
/* 07 The topline: dateline hard left, partners hard right, one row above
   the headline and clear of it.

   Under the photograph the marks read as a caption to the picture. Up here
   they sit where a masthead's sponsors sit, in the half of the navy band
   that was empty.

   This is a flex row rather than an absolutely positioned block. Floating
   them into the corner looked right at 1440 and ran into the headline at
   1366, because the headline is 74px and grows with the viewport rather
   than shrinking away from them. A row cannot collide with what is below
   it, and it wraps by itself on a narrow screen. */
.sb-topline{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px 40px;
  padding:calc(88px + clamp(20px,2.6vw,38px)) 7vw 0}
.sb-topline .eyebrow{margin:0}
.sb-partners{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px}
.sb-partners .lbl{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#8e9bad;flex:none}
/* No blanket invert. These are the marks each company supplies for a dark
   background: USA TODAY's is already white type with their own blue, and
   forcing it to flat white would take their colour off their own logo.
   Concert Golf's SVG is baked white, MD Envoy publishes a white PNG.

   Heights are set per mark rather than shared. USA TODAY is a stacked
   lockup and reads taller than a one-line wordmark at the same pixel
   height; MD Envoy is six times wider than it is tall. Equal boxes would
   make one of them shout. */
.sb-partners img.pm{display:block;width:auto}
.sb-partners img.usat{height:27px}
.sb-partners img.cg{height:16px;opacity:.92}
.sb-partners img.mde{height:14px;opacity:.92}
.sb-partners .wordmark{font-size:13px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:#dfe4ea}

/* 02 Packages. No figure on this page. A visitor meeting $32,000 before
   they have met the week decides on the number alone, and the number is
   not the argument -- the week is. */
.sb-packages{background:#fff;color:#193e16;padding:120px 7vw 100px}
.sb-head{max-width:760px;margin:0 0 54px}
.sb-head .eyebrow{color:#434a4f}
.sb-head h2{font:500 clamp(34px,4.4vw,58px)/1.06 var(--serif);margin:0 0 16px;color:#193e16}
.sb-head p{font-size:17px;line-height:1.7;color:#434a4f;margin:0;max-width:62ch}
/* The three families. Same card grammar as the levels below so the page
   reads as one ladder rather than two competing ones -- but lighter, because
   this row is a place-yourself question and the row below it is a decision. */
.sb-fams{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-bottom:26px}
.sb-fam{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(25,62,22,.14);padding:34px 28px 28px}
.sb-fam.main{border-color:#193e16;background:#fbfcfd;box-shadow:0 22px 52px rgba(25,62,22,.1)}
.sb-fam-when{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#434a4f;margin:0 0 10px}
.sb-fam h3{font:500 30px var(--serif);margin:0 0 8px;color:#193e16}
.sb-fam .sb-for{min-height:2.6em}
.sb-fam hr{border:0;border-top:1px solid rgba(25,62,22,.13);margin:0}
.sb-fam ul{list-style:none;margin:20px 0;padding:0;flex:1 1 auto}
.sb-fam li{position:relative;padding:0 0 11px 19px;font-size:14px;line-height:1.62;color:#33425a}
.sb-fam .button{width:100%;border-color:#193e16;color:#193e16;background:none;cursor:pointer;font-family:var(--sans)}
.sb-fam .button:hover{background:#193e16;color:#fff}
.sb-fam.main .button{background:#193e16;color:#fff}
.sb-fam.main .button:hover{background:#12315e;border-color:#12315e}

/* Come for one thing. Lighter than the ladder above it on purpose -- a
   tinted band and two plain columns rather than three bordered cards, so it
   reads as a different question being asked rather than a fourth and fifth
   rung competing with the first three. */
.sb-side-band{margin-top:48px;background:#edf1f5;border:1px solid rgba(25,62,22,.1);padding:40px 38px 34px}
.sb-side-head{max-width:64ch;margin-bottom:30px}
.sb-side-head .eyebrow{color:#434a4f}
.sb-side-head h3{font:500 clamp(24px,2.8vw,34px)/1.15 var(--serif);margin:0 0 12px;color:#193e16}
.sb-side-head p{margin:0;font-size:15px;line-height:1.7;color:#434a4f}
.sb-sides{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(25,62,22,.14);
  border:1px solid rgba(25,62,22,.14)}
.sb-side{background:#fff;padding:28px 26px 26px;display:flex;flex-direction:column}
.sb-side h3{font:500 27px var(--serif);margin:0 0 8px;color:#193e16}
.sb-side .sb-for{margin-bottom:18px}
.sb-side ul{list-style:none;margin:0 0 20px;padding:0;flex:1 1 auto}
.sb-side li{position:relative;padding:0 0 11px 19px;font-size:14px;line-height:1.62;color:#33425a}
.sb-side .sb-price{padding:0 0 18px}
.sb-side .button{width:100%;border-color:#193e16;color:#193e16;background:none;cursor:pointer;font-family:var(--sans)}
.sb-side .button:hover{background:#193e16;color:#fff}
.sb-fam-note,
.sb-side-note{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:#434a4f;max-width:70ch}

/* 03 The week. Five columns divided by hairlines, so the days read as a
   sequence. The colour comes from the brand-weight block below; the layout
   is here.

   This whole rule set was lost once: it sat between .sb-tiers and the Pros
   On The Tee block, and the edit that removed the three levels took the
   range that contained it. The section kept its background and lost its
   padding and its grid -- five full-width rows flush against the window
   edge -- which is exactly what a missing base rule looks like and nothing
   like a bug in the markup. */
.sb-week{background:#edf1f5;color:#193e16;padding:100px 7vw;border-top:1px solid rgba(25,62,22,.08);
  border-bottom:1px solid rgba(25,62,22,.08)}
.sb-days{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
  border-left:1px solid rgba(25,62,22,.14)}
.sb-day{padding:0 24px 8px;border-right:1px solid rgba(25,62,22,.14)}
.sb-dot{width:9px;height:9px;border-radius:50%;background:#9aa6b6;margin-bottom:18px}
.sb-day.key .sb-dot{background:#193e16;box-shadow:0 0 0 5px rgba(7,26,56,.13)}
.sb-day .d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#434a4f;margin-bottom:8px}
.sb-day h3{font:500 25px var(--serif);margin:0 0 12px;color:#193e16}
.sb-day p{margin:0;font-size:13.5px;line-height:1.65;color:#434a4f}

/* 03b Pros On The Tee.
   Everything else on this page is access -- seats, rooms, tables, admission,
   all of it bought from somebody who owns it. Pros On The Tee is the one part
   Own The Week produces, and it was buried in a bullet inside each package where
   nobody would read it. It is also the whole upgrade argument: Access watches,
   Signature and Reserve play. That sentence sells the middle tier, so it gets
   a block rather than a line.

   Navy, between two light sections, so it reads as the pause in the page. */
.sb-ours{position:relative;isolation:isolate;background:#193e16;color:#ffffff;padding:96px 7vw;
  background-image:url('/concert-golf/assets/golf.png');background-size:cover;background-position:center 42%}
.sb-ours:after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(25,62,22,.95) 8%,rgba(25,62,22,.74) 52%,rgba(25,62,22,.42))}
.sb-ours .eyebrow{color:#c3cad6}
.sb-ours h2{font:500 clamp(32px,4.2vw,56px)/1.06 var(--serif);margin:0 0 18px;max-width:17ch;color:#fff}
.sb-ours h2 em{font-style:italic;color:#e7eaef}
.sb-ours-lead{max-width:56ch;font-size:16.5px;line-height:1.7;color:#dbe1e9;margin:0 0 30px}
.sb-ours-logo{display:block;width:min(340px,62vw);height:auto;margin:0 0 26px;
  filter:brightness(0) invert(1);opacity:.96}
/* The upgrade argument, set as the one thing worth reading twice. */
.sb-ladder{border-left:2px solid rgba(215,220,224,.55);padding:4px 0 4px 20px;margin:0 0 34px;
  max-width:52ch;font-size:17px;line-height:1.6;color:#f1f2ed}
.sb-ladder b{font-weight:600;color:#fff}
.sb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:rgba(215,220,224,.22);border:1px solid rgba(215,220,224,.22);max-width:920px}
.sb-fact{background:rgba(25,62,22,.82);padding:20px 22px}
.sb-fact .k{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#aab3c1;margin-bottom:7px}
.sb-fact .v{display:block;font-size:14.5px;line-height:1.5;color:#ffffff}
@media(max-width:850px){
  .sb-ours{padding:72px 22px}
  .sb-ladder{font-size:15px;padding-left:15px;margin-bottom:26px}
  .sb-facts{grid-template-columns:1fr}
}

/* 04 Add-ons. A hairline grid, no shadows. Every item carries what we
   actually control it by -- because some of these are ours, some are simply
   announced, and saying so is cheaper than being asked later. */
.sb-addons{background:#fff;color:#193e16;padding:100px 7vw}
.sb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(25,62,22,.14);border:1px solid rgba(25,62,22,.14);margin-top:44px}
.sb-cell{background:#fff;padding:26px 24px 28px}
.sb-tag{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#434a4f;border:1px solid rgba(25,62,22,.22);padding:3px 8px;margin-bottom:14px}
.sb-tag.ours{color:#193e16;border-color:#193e16}
.sb-cell h3{font:600 16px var(--sans);margin:0 0 8px;color:#193e16;letter-spacing:.01em}
.sb-cell p{margin:0;font-size:13.5px;line-height:1.6;color:#434a4f}
.sb-key{margin-top:26px;font-size:12.5px;line-height:1.7;color:#434a4f;max-width:76ch}
.sb-key b{color:#193e16;font-weight:600}

/* 05 Request pricing. The tier travels with the lead: a Reserve enquiry and
   an Access enquiry are not the same lead, and Command should show which
   one arrived. One extra field. */
.sb-request{background:linear-gradient(120deg,#343e4b,#193e16);color:#ffffff;padding:120px 7vw}
.sb-request .sb-head h2,.sb-request .sb-head .eyebrow{color:#ffffff}
.sb-request .sb-head .eyebrow{color:#c3cad6}
.sb-request .sb-head p{color:#c9d0da}
.sb-panel{max-width:780px}
.sb-chosen{display:none;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px;padding:12px 16px;
  border:1px solid rgba(215,220,224,.4);background:rgba(215,220,224,.08);font-size:13px}
.sb-chosen.on{display:flex}
.sb-chosen b{font-weight:600}
.sb-chosen button{background:none;border:0;color:#dfe4ea;font:400 11px var(--sans);letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border-bottom:1px solid rgba(215,220,224,.5);padding:0 0 2px}
.sb-form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sb-form .wide{grid-column:1/-1}
.sb-form input,.sb-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #8792a3;
  color:#fff;padding:15px 2px;font:300 15px var(--sans);border-radius:0}
.sb-form textarea{height:90px;resize:vertical}
.sb-form input.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0}
.sb-form label.f{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#aab3c1}
.sb-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.sb-chip{border:1px solid rgba(215,220,224,.4);background:none;color:#dfe4ea;font:300 12.5px var(--sans);
  padding:8px 14px;cursor:pointer;transition:.2s}
.sb-chip[aria-pressed="true"]{background:#f1f2ed;border-color:#f1f2ed;color:#193e16}
.sb-form .consent{display:flex;gap:11px;align-items:flex-start;font-size:11.5px;line-height:1.6;color:#c3cad6}
.sb-form .consent input{width:auto;flex:none;margin-top:3px}
.sb-form .consent a{border-bottom:1px solid rgba(215,220,224,.4)}
.sb-form button.button{justify-self:start;background:transparent;cursor:pointer;font-family:var(--sans)}

@media(max-width:1080px){.sb-fams,.sb-sides{grid-template-columns:1fr}
  .sb-fam .sb-for{min-height:0}
  .sb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.sb-days{grid-template-columns:1fr;border-left:0;border-top:1px solid rgba(25,62,22,.14)}
  .sb-day{padding:22px 0;border-right:0;border-bottom:1px solid rgba(25,62,22,.14)}
  .sb-dot{margin-bottom:12px}}
@media(max-width:850px){
  .sb-hero-in{padding:calc(72px + 24px) 22px 22px}
  .sb-packages,.sb-week,.sb-addons,.sb-request{padding:72px 25px}
  /* #packages is the link guests are emailed, so it is opened by a jump to
     the section's top edge. 72px of padding there is exactly the header's
     height, which left the silver rule flush against it; 24px more gives
     the rule the air it has on a desktop. */
  .sb-packages{padding-top:calc(72px + 24px)}
  .sb-topline{padding:calc(72px + 22px) 22px 0;gap:12px;
    flex-direction:column;align-items:flex-start}
  .sb-partners{gap:10px 20px}
  .sb-partners .lbl{flex-basis:100%}
  .sb-partners img.usat{height:24px}
  .sb-partners img.cg{height:14px}
  .sb-partners img.mde{height:12px}
  .sb-partners .wordmark{font-size:11px}
  .sb-form{grid-template-columns:1fr}
  .sb-side-band{padding:30px 22px 26px}
  .sb-grid{grid-template-columns:1fr}
  .sb-acts .button{flex:1 1 100%}
}

/* The website's :root defines no silver of its own (it once carried a
   --gold:#d6dacf that was silver under a gold name and used nowhere; it is
   gone). Named properly here so the rules below read as what they are:
   silver on deep navy is the Own The Week identity. Every
   var(--silver) in the first cut of this block resolved to nothing, because
   --silver is the PORTAL's variable, not this stylesheet's -- which is why
   the badge, the flagship button and the eyebrow rules all came out
   transparent. */
:root{--silver:#c9cfd8}

/* ==========================================================================
   Super Bowl LXI — brand weight
   The first cut was correct and quiet: white sections, hairlines at 13%
   opacity, body text at #434a4f. The hero carried the whole brand and the
   page went pale underneath it.

   Own The Week is silver on deep navy. So the navy comes down the page, the
   rules get weight, and the text stops apologising. The rhythm is
   navy / light / navy / light so each block lands rather than blurring into
   the next.
   ========================================================================== */

/* -- 02 Three ways in. Navy. It is the first thing after the hero and the
      most important decision on the page; it should read as the brand
      speaking, not as a price list. */
.sb-packages{background:var(--ink);color:#ffffff}
.sb-packages .sb-head h2{color:#fff}
.sb-packages .sb-head p{color:#c9d2de}
.sb-packages .sb-head .eyebrow{color:#c1cbd2}
/* A silver rule above every eyebrow. Small, and it does more for the brand
   than any amount of extra copy. */
.sb-packages .sb-head .eyebrow:before,
.sb-side-head .eyebrow:before,
.sb-ours .eyebrow:before,
.sb-request .sb-head .eyebrow:before{
  content:'';display:block;width:46px;height:2px;background:var(--silver);margin-bottom:16px}
.sb-fam{background:#234e21;border-color:rgba(201,207,216,.26);color:#e8ecf2}
.sb-fam.main{background:#343e4b;border-color:var(--silver);border-width:2px;
  box-shadow:0 30px 70px rgba(0,0,0,.42)}
.sb-fam-when{color:#c1cbd2}
.sb-fam h3{color:#fff;font-size:33px}
.sb-fam .sb-for{color:#c9d2de}
.sb-fam hr{border-top-color:rgba(201,207,216,.24)}
.sb-fam li{color:#dbe2ea}
.sb-fam .sb-price{color:#c1cbd2;letter-spacing:.22em}
.sb-fam .button{border-color:var(--silver);color:#ffffff}
.sb-fam .button:hover{background:var(--silver);color:#193e16}
.sb-fam.main .button{background:var(--silver);border-color:var(--silver);color:#193e16}
.sb-fam.main .button:hover{background:#fff;border-color:#fff}
/* Straddles the top edge of the card it marks. It lost its positioning when
   the levels came out -- it had been declared below .sb-tiers, inside the
   block that went with them -- and became a full-width bar sitting on top of
   the date label. */
.sb-badge{position:absolute;top:-12px;left:28px;background:var(--silver);color:#193e16;
  font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:6px 13px}

/* -- the side band, inside the navy section -- */
.sb-side-band{background:rgba(255,255,255,.045);border:1px solid rgba(201,207,216,.24);
  padding:44px 40px 36px}
.sb-side-head .eyebrow{color:#c1cbd2}
.sb-side-head h3{color:#fff}
.sb-side-head p{color:#c9d2de}
.sb-sides{background:rgba(201,207,216,.24);border-color:rgba(201,207,216,.24)}
.sb-side{background:#234e21;color:#e8ecf2}
.sb-side h3{color:#fff}
.sb-side .sb-for{color:#c9d2de}
.sb-side li{color:#dbe2ea}
.sb-side .sb-price{color:#c1cbd2}
.sb-side .button{border-color:var(--silver);color:#ffffff}
.sb-side .button:hover{background:var(--silver);color:#193e16}
.sb-fam-note,
.sb-side-note{color:#c1cbd2}

/* -- 03 The week. Navy, so the five days read as a sequence rather than a
      footnote between two white blocks. */
.sb-week{background:var(--panel);color:#ffffff;border-top:0;border-bottom:0}
.sb-week .sb-head h2{color:#fff}
.sb-week .sb-head p{color:#c9d2de}
.sb-week .sb-head .eyebrow{color:#c1cbd2}
.sb-week .sb-head .eyebrow:before{content:'';display:block;width:46px;height:2px;
  background:var(--silver);margin-bottom:16px}
.sb-days{border-left-color:rgba(201,207,216,.28)}
.sb-day{border-right-color:rgba(201,207,216,.28)}
.sb-day .d{color:#c1cbd2}
.sb-day h3{color:#fff;font-size:27px}
.sb-day p{color:#c4cddb}
.sb-dot{background:rgba(201,207,216,.45)}
.sb-day.key .sb-dot{background:var(--silver);box-shadow:0 0 0 6px rgba(201,207,216,.16)}

/* -- 04 Add-ons. Light, and the last light block. Heavier rules and darker
      text than the first cut, which read as a spreadsheet. */
.sb-addons .sb-head h2{color:#193e16}
.sb-addons .sb-head p{color:#3f4d63}
.sb-addons .sb-head .eyebrow{color:#3f4d63}
.sb-addons .sb-head .eyebrow:before{content:'';display:block;width:46px;height:2px;
  background:var(--ink);margin-bottom:16px}
.sb-grid{background:rgba(25,62,22,.2);border-color:rgba(25,62,22,.2)}
.sb-cell h3{font-size:17px;color:#193e16}
.sb-cell p{color:#3f4d63}
.sb-tag{color:#3f4d63;border-color:rgba(25,62,22,.3)}
.sb-tag.ours{background:var(--ink);border-color:var(--ink);color:#ffffff}
.sb-key{color:#3f4d63}
.sb-key b{color:#193e16}

/* -- headings, everywhere on this page. The first cut topped out at 58px on
      a 1440 screen, which is a heading rather than a statement. */
.sb-head h2{font-size:clamp(36px,5vw,66px);letter-spacing:-.03em}
.sb-head p{font-size:16.5px}
.sb-head .eyebrow{font-size:11px;letter-spacing:.28em}
.sb-fam-when{font-size:10.5px;letter-spacing:.24em}

/* -- 05 Own Your Experience. Silver on navy, and a silver rule on the edge
      so it reads as the last word rather than another box. */
/* Own Your Experience. A full-width line at the END of the choices, never a
   card beside them. Custom always looks like the better deal when it costs
   the same to click, so as a fourth card a large share of buyers take it by
   default -- and every one of those becomes a bespoke quote, the slowest and
   most expensive way to sell. Down here it catches the people who genuinely
   do not fit and leaves the rest on a product. */
.sb-custom{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  margin-top:52px;background:var(--panel);border-left:4px solid var(--silver);
  padding:40px 40px 40px 44px;color:#ffffff}
/* A grid child defaults to min-width:auto, which means a long unbroken
   string can push the column wider than its track instead of wrapping. */
.sb-custom-copy{min-width:0}
.sb-custom .eyebrow{color:#c1cbd2;margin-bottom:10px}
.sb-custom h3{font:500 clamp(28px,3.2vw,40px) var(--serif);margin:0 0 12px;color:#fff}
.sb-custom p{margin:0;font-size:15px;line-height:1.7;color:#d6dce5;max-width:72ch}
.sb-custom-sub{margin-top:12px !important;font-size:13px !important;color:#c1cbd2 !important}
.sb-custom-act .button{white-space:nowrap;background:var(--silver);border-color:var(--silver);
  color:#193e16;font-weight:500;cursor:pointer;font-family:var(--sans)}
.sb-custom-act .button:hover{background:#fff;border-color:#fff}

/* -- 06 the form -- */
.sb-request .sb-head h2{color:#fff}
.sb-request .sb-form input,.sb-request .sb-form textarea{border-bottom-color:rgba(201,207,216,.55)}
.sb-request .sb-form input:focus,.sb-request .sb-form textarea:focus{
  border-bottom-color:var(--silver);outline:none}
.sb-chip{border-color:rgba(201,207,216,.5)}
.sb-chosen{border-color:var(--silver);background:rgba(201,207,216,.12)}

@media(max-width:850px){
  .sb-side-band{padding:30px 22px 26px}
  .sb-custom{grid-template-columns:1fr;padding:28px 22px 28px 24px;border-left-width:3px;gap:22px}
  .sb-custom-act .button{width:100%}
}

/* 05 The hero call to action.
   Two buttons, not one. The filled one is the event that can be sold now;
   the outline one keeps the collection a single click away, because
   "Beyond the main event" only means something if there is more than one.
   The line beneath carries the urgency so the button does not have to set
   a date in 11px caps. */
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-acts .button.solid{background:#f1f2ed;border-color:#f1f2ed;color:#193e16;font-weight:500}
.hero-acts .button.solid:hover{background:#fff;border-color:#fff}
.hero-acts .button .ar{margin-left:12px;font-size:13px;line-height:1}
/* .hero p caps every paragraph at 660px, which wraps this line in two.
   Scoped to beat that, not to win generally. */
.hero .hero-next{max-width:none;margin:26px 0 0;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#d6dacf}
.hero-next b{color:#fff;font-weight:500}
@media(max-width:850px){
  .hero-acts{gap:11px}
  .hero-acts .button{padding:13px 16px}
  .hero .hero-next{letter-spacing:.14em;margin-top:20px}
}

/* 06 The thank you.
   It replaces the whole section, not just the form. `sent` hides everything
   that was doing the asking -- the heading, the sub-copy, the chosen-package
   banner with its Change button, which changes nothing once the form is
   gone. What is left is one block on a navy field, which is the point: for
   a few seconds it is the only thing on the screen. */
.sent .sb-head,
.sent .sb-chosen{display:none}
.inquiry.sent{grid-template-columns:1fr;gap:0}
.inquiry.sent>div:first-child{display:none}
.sb-request.sent .sb-panel{max-width:none}

.thanks{grid-column:1/-1;max-width:680px;padding:0}
.thanks-mark{display:block;width:52px;height:1px;background:#d6dacf;margin-bottom:30px}
.thanks .eyebrow{margin-bottom:20px}
.thanks h3{font:500 clamp(42px,6vw,76px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 30px}
.thanks-lead{font-size:clamp(18px,1.9vw,23px);line-height:1.58;color:#f1f2ed;margin:0 0 22px}
.thanks-body{font-size:clamp(15px,1.4vw,17px);line-height:1.68;color:#c3ccda;margin:0 0 34px;
  padding-left:20px;border-left:1px solid rgba(215,220,224,.34)}
.thanks-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a9b4c4;margin:0}
.thanks-sub a{color:#f1f2ed;border-bottom:1px solid rgba(215,220,224,.45);padding-bottom:3px}
.thanks-sub a:hover{border-bottom-color:#f1f2ed}
/* It arrives rather than appearing. One movement, once. */
.thanks{animation:thanksIn .8s cubic-bezier(.2,.7,.3,1) both}
@keyframes thanksIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.thanks{animation:none}}
@media(max-width:850px){
  .thanks h3{font-size:40px;margin-bottom:24px}
  .thanks-body{padding-left:16px}
}


/* 08 The partner band, at the foot of the hero.

   ONE placement, on purpose. These marks used to sit in the navigation bar
   as well, which put the same three logos twice on a single screen and
   halved the weight of each. The nav pair is gone.

   It sits OVER the photograph and fades into the gradient the hero already
   carries, so it reads as part of the image rather than as a strip bolted
   underneath it. Label above, marks beneath: stacked, they read as a group
   instead of as the tail of a caption, and a column needs no rearranging on
   a phone.

   Each mark keeps its own height, because optical size is not bounding-box
   size -- USA TODAY is a stacked lockup and sits taller than a single-line
   wordmark set to the same number. */
.partner-band{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(20px,2.6vw,32px) clamp(24px,5vw,68px) clamp(22px,2.8vw,34px);
  background:linear-gradient(0deg,rgba(2,14,35,.94) 0%,rgba(25,62,22,.72) 55%,transparent 100%)}
.partner-band .lead{font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:#93a3b8;white-space:nowrap}
.partner-band .marks{display:flex;align-items:center;flex-wrap:wrap;
  justify-content:center;gap:14px clamp(30px,4.4vw,64px)}
.partner-band img{display:block;width:auto}
.partner-band img.usat{height:clamp(34px,3.4vw,46px)}
.partner-band img.cg{height:clamp(21px,2.1vw,29px);opacity:.92}
.partner-band img.mde{height:clamp(18px,1.8vw,25px);opacity:.92}
/* The two heroes need opposite things, because their pictures are made
   differently.

   The HOME hero paints its photograph as a background across the whole
   section, so the band can sit anywhere over it -- and it has to reserve
   room, or it lands on the buttons.

   The SUPER BOWL hero ends in a real <img> in flow. Giving that one bottom
   padding pushed the hero 190px past the picture and dropped the band into
   the dead navy underneath it, below the fold. It belongs over the foot of
   the photograph, under the SoFi sign, so the section stops where the image
   stops and the band overlays it. Nothing is covered that matters: the
   headline and the buttons sit above the picture, not on it. */
.hero,.sb-hero{position:relative}
.hero{padding-bottom:clamp(150px,15vw,205px)}
.sb-hero{padding-bottom:0}
.sb-shot{display:block;margin-bottom:0}
@media(max-width:760px){
  .partner-band{position:static;background:rgba(2,14,35,.94);padding-block:22px}
  .hero,.sb-hero{padding-bottom:0}
}

/* 09 The package detail pages.
   One page per package, because this is the document somebody forwards to
   whoever signs it off -- a panel or an accordion has no link to forward.

   Long-form reading, so the measure is tight and the blocks are separated by
   rules rather than by cards: eight bordered boxes down a page reads as a
   form to fill in, not as a description of a week. */
.pk-hero{background:#193e16;color:#ffffff;padding:calc(88px + clamp(28px,3.4vw,52px)) 7vw clamp(34px,4vw,56px);
  border-bottom:1px solid rgba(215,220,224,.18)}
.pk-hero-in{max-width:820px}
.pk-back{display:inline-block;margin-bottom:26px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#aab3c1;border-bottom:1px solid rgba(215,220,224,.3);padding-bottom:4px}
.pk-back:hover{color:#fff;border-bottom-color:#fff}
.pk-hero h1{font:500 clamp(40px,6.4vw,76px)/.98 var(--serif);letter-spacing:-.04em;margin:0 0 18px}
.pk-lead{font-size:clamp(18px,2vw,25px);line-height:1.42;color:#fff;margin:0 0 22px;max-width:22ch;
  font-family:var(--serif);font-style:italic;font-weight:500}
.pk-deck{font-size:clamp(15px,1.45vw,18px);line-height:1.68;color:#d7dce4;margin:0;max-width:62ch}

.pk-body{background:#ffffff;color:#193e16;padding:clamp(48px,6vw,86px) 7vw clamp(56px,6vw,92px)}
.pk-blocks{max-width:860px;margin:0 auto}
.pk-block{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:10px 56px;
  padding:34px 0;border-top:1px solid rgba(25,62,22,.13)}
.pk-block:first-child{border-top:0;padding-top:0}
.pk-block-head .eyebrow{color:#64748b;margin-bottom:10px}
.pk-block h2{font:500 clamp(24px,2.6vw,33px)/1.1 var(--serif);margin:0;letter-spacing:-.02em;
  text-wrap:balance}
.pk-block ul{margin:0;padding:0;list-style:none}
.pk-block li{position:relative;padding-left:20px;margin-bottom:13px;font-size:15.5px;
  line-height:1.66;color:#2c3a4f;max-width:60ch}
.pk-block li:last-child{margin-bottom:0}
/* A line the company has not signed yet. Marked rather than left out, and
   rather than written vaguely at length -- which is how a page ends up
   making a promise nobody remembers agreeing to. */
.pk-block li.soon{color:#55637a}
.soon-tag{display:inline-block;margin-left:9px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#434a4f;background:transparent;
  border:1px solid rgba(168,178,190,.55);padding:2px 7px;vertical-align:1px;white-space:nowrap}
.pk-note{max-width:860px;margin:44px auto 0;padding-left:18px;
  border-left:2px solid rgba(25,62,22,.18);font-size:13.5px;line-height:1.7;color:#55637a}
.pk-note em{font-style:normal;color:#434a4f;font-weight:600}

/* The card's second action, under the link into the detail page. */
.sb-ask{display:block;width:100%;margin-top:10px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:12px;letter-spacing:.04em;color:#8e9bad;padding:4px 0;text-align:center}
.sb-ask:hover{color:#f1f2ed;text-decoration:underline}

/* THE WHOLE CARD IS THE LINK (David, 25 Sep 2026). A stretched link, not a
   click handler: "See everything included" stays the one real anchor to the
   package page and its ::after covers the card, so focus, right-click and
   open-in-new-tab all behave. The overlay is lifted (z-index 1) so it covers
   every positioned line in the card; the ask is lifted above it (2) and still goes
   to the enquiry -- driven in a real browser in tests/browser/site-journeys.js,
   because only real hit-testing can show the z-index works. */
.sb-fam,.sb-side{position:relative;cursor:pointer}
.sb-fam>a.button:after,.sb-side>a.button:after{content:'';position:absolute;inset:0;z-index:1}
.sb-fam>.sb-ask,.sb-side>.sb-ask{position:relative;z-index:2}

@media(max-width:850px){
  .pk-hero{padding:calc(72px + 26px) 22px 34px}
  .pk-body{padding:44px 22px 56px}
  .pk-block{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .pk-lead{max-width:none}
}

/* 10 The seat map, in the hero and above the fold.

   It lives in the Own The Seat hero (block 12) rather than in a section
   below it: copy on the left, the bowl on the right, both on the first
   screen. It shipped once as a band under the hero on the light body and
   read as an afterthought -- and, styled for a dark page, put a white
   heading onto #ffffff.

   The bowl is a LIT panel inset into the navy. A seating chart read as
   dark-on-dark is a seating chart nobody reads; the selected section is the
   brand navy, which is the strongest mark available on a light ground. */
.sb-bowl-map{background:#f2f5ef;border:1px solid rgba(215,220,224,.22);padding:12px 10px 2px}
.sb-bowl-map svg{display:block;width:100%;height:auto;max-width:100%}
.sb-sec{stroke:#f2f5ef;stroke-width:1;cursor:pointer;transition:filter .12s ease}
/* Each section's colour is its own, from the chart (SB_TONES in site.js), set
   on the shape -- so no rule here gives a section a fill, except the chosen
   one, which is the brand navy. A hover brightens whatever the colour is. */
.sb-sec:hover{filter:brightness(1.18)}
/* The tier a package includes, on the maps with no price (Own The Weekend,
   Own The Week): lit with a white edge and a glow, over the chart's colours.
   Before .on, so a chosen section still reads as chosen. */
.sb-sec.in{stroke:#fff;stroke-width:2.6;filter:drop-shadow(0 0 2.5px rgba(25,62,22,.6))}
.sb-sec.on{fill:#193e16;stroke:#fff;stroke-width:1.8}
/* Chosen stays chosen under the pointer, club and VIP boxes included. */
.sb-sec.on:hover,.sb-sec.club.on,.sb-sec.club.on:hover{fill:#193e16}
/* The size and colour are set per label, to fit and to read on its section. */
.sb-sec-lbl{font-family:var(--sans);font-weight:600;pointer-events:none}
.sb-sec-lbl.on{fill:#fff}
.sb-bowl-pick{margin:0;padding:12px 4px 10px;text-align:center;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#55637a;background:#f2f5ef}
.sb-bowl-pick b{color:#193e16;font-weight:600;margin-left:8px;letter-spacing:.06em}
@media(max-width:700px){
  .sb-sec-lbl{display:none}
}

/* 11 The dark package page.

   Own The Seat runs navy from the top of the hero to the bottom of the
   enquiry -- one colour, no seam. The other two keep the light body.

   WHY THIS ONE AND NOT ALL THREE. Own The Weekend and Own The Week are
   long-form: ten blocks somebody forwards to whoever signs it off, and
   long reading on dark is harder work and worse on paper. Own The Seat is
   a single Sunday told in five beats beside a seat map -- short enough
   that the dark treatment costs nothing, and it is the page where the map
   is the point. The map is a lit panel; putting it on a light body made it
   a pale rectangle on a pale page.

   The blocks become a TIMELINE here rather than the label-and-list grid.
   A day has an order, so the page should look like one thing after
   another rather than a set of topics. */
.pk-body.pk-dark{background:#010e26;color:#f1f2ed}
.pk-dark .pk-blocks{position:relative;max-width:760px}
.pk-dark .pk-blocks::before{content:'';position:absolute;left:5px;top:10px;bottom:30px;
  width:1px;background:linear-gradient(180deg,rgba(201,207,216,.30),rgba(201,207,216,.14) 70%,transparent)}
.pk-dark .pk-block{display:block;border-top:0;padding:0 0 30px 30px;position:relative}
.pk-dark .pk-block:first-child{padding-top:0}
.pk-dark .pk-block::before{content:'';position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:50%;background:#010e26;border:1px solid rgba(201,207,216,.34)}
.pk-dark .pk-block-head{margin-bottom:9px}
.pk-dark .pk-block-head .eyebrow{color:#8195b0;margin-bottom:5px}
.pk-dark .pk-block h2{font:500 clamp(19px,2vw,24px)/1.12 var(--serif);color:#fff;letter-spacing:-.01em}
.pk-dark .pk-block li{color:#c3ccd8;max-width:58ch}
.pk-dark .pk-block li.soon{color:#96a5ba}
.pk-dark .soon-tag{color:#dfe6ee;background:rgba(223,230,238,.12);border-color:rgba(223,230,238,.42)}
.pk-dark .pk-note{border-left-color:rgba(201,207,216,.28);color:#8fa0b8;max-width:760px}
.pk-dark .pk-note em{color:#dfe6ee}

/* 12 Own The Seat.

   Its own page shape (seatPage in site.js), not the long-form block
   template: one Sunday beside a seat map. Copy and five tiles on the left,
   a hairline, the map and the running total on the right; then the day in
   four numbered steps beside the detail panels; then a closing bar.

   The palette is scoped to these three elements rather than added to :root,
   so nothing else on the site can reach for it by accident.

   THE FIELD IN THE MAP STAYS GREEN (#2f7d52 / #256744 / #1d5738, set in
   sbBowlMount). It is a picture of grass, not page furniture. Rendered in
   steel it stops reading as a pitch and the map becomes an abstract
   diagram -- that was tried side by side and rejected. */
.st-hero,.st-day,.st-bar{--navy:#02163a;--navy-d:#010e26;--navy-l:#071f47;--ivory:#f2f0ea;
  --brushed:#a8b2be;--sil:#d3dae4;--steel:#434a4f;--bg:#8195b0;
  --hair:rgba(168,178,190,.22);--hair2:rgba(168,178,190,.42)}

.st-hero{display:grid;grid-template-columns:1fr;gap:34px;background:var(--navy);color:var(--ivory);
  padding:calc(88px + clamp(28px,3.4vw,52px)) 7vw clamp(34px,4vw,56px);border-bottom:1px solid var(--hair)}
@media(min-width:1120px){
  .st-hero{grid-template-columns:minmax(0,1fr) 1px clamp(430px,34vw,505px);
    gap:clamp(30px,3.4vw,56px);align-items:start}
}
/* A grid track defaults to its min-content width, and the tiles and the
   steps would hold these columns open past the screen without this. */
.st-hero-in,.st-steps-col{min-width:0}
/* Own The Golf and Own The Party have no map beside the copy, so the copy
   is the hero's only child and takes the whole row. */
.st-hero-in:only-child{grid-column:1/-1;max-width:820px}
.st-hero h1{font:500 clamp(40px,6.4vw,76px)/.98 var(--serif);letter-spacing:-.04em;margin:0 0 18px}
.st-rule{height:1px;background:var(--hair)}
@media(min-width:1120px){
  .st-hero>.st-rule,.st-day-in>.st-rule{height:auto;align-self:stretch}
}

.st-tiles{list-style:none;margin:30px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.st-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 14px;
  background:var(--navy);text-align:center;font-size:10.5px;line-height:1.45;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sil)}
.st-ico{width:26px;height:26px;flex:none;fill:none;stroke:var(--brushed);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
/* Every mark is silver line work with exactly one element in bright white
   (SB_ICONS in site.js). No second palette. */
.st-ico .hi{stroke:#fff}

.st-seat{min-width:0}
.st-seat h2{font:500 clamp(21px,2.1vw,27px)/1.12 var(--serif);margin:0 0 8px;color:#fff;
  letter-spacing:-.01em;text-wrap:balance}
.st-from{margin:0 0 12px;color:var(--sil);font-size:13.5px;line-height:1.6}
.st-price{margin-top:14px;padding:16px 18px;border:1px solid var(--hair2);background:var(--navy-l)}
.st-price .who{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg)}
.st-price .fig{margin:6px 0 4px;font:500 clamp(26px,2.6vw,34px)/1.1 var(--serif);color:#fff;
  letter-spacing:-.01em}
.st-price .mkt{margin:0 0 8px;font-size:12.5px;line-height:1.6;color:var(--brushed)}
.st-price .math{margin:0;font-size:12.5px;line-height:1.6;color:var(--sil)}
.st-btn{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:15px 20px;
  background:linear-gradient(180deg,#ffffff,#e1e5ea);color:var(--navy);border:1px solid #cbd2dc;
  font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:.2s}
.st-btn:hover{background:linear-gradient(180deg,#fff,#eceef1)}
.st-tier{margin:14px 0 0;padding:16px 18px;border:1px solid var(--hair2);background:var(--navy-l);
  font-size:13.5px;line-height:1.6;color:var(--sil)}
.st-fine{margin:12px 0 0;padding-left:14px;border-left:1px solid var(--hair2);font-size:12px;
  line-height:1.6;color:var(--bg)}

.st-day{background:var(--navy-d);color:var(--ivory);padding:clamp(56px,6vw,92px) 7vw}
.st-day-in{display:grid;grid-template-columns:1fr;gap:40px;max-width:1280px;margin:0 auto}
@media(min-width:1120px){
  .st-day-in{grid-template-columns:minmax(0,1.3fr) 1px minmax(0,1fr);gap:clamp(30px,3.4vw,56px)}
}
.st-day-head .eyebrow{color:var(--bg);margin-bottom:10px}
.st-day-head h2{font:500 clamp(26px,2.8vw,36px)/1.1 var(--serif);margin:0 0 34px;color:#fff;
  letter-spacing:-.02em}
.st-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:st}
.st-steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.st-steps.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Undated golf on Own The Weekend / Own The Week. Outside the numbered
   days on purpose -- a numbered slot between Thursday 11 and Friday 12 said
   "Friday" (David, 29 Sep 2026) -- so it takes no counter. */
.st-also{margin-top:34px;padding-top:28px;border-top:1px solid var(--hair2)}
.st-also .eyebrow{margin:0 0 14px}
.st-also-row{display:flex;gap:16px;align-items:flex-start}
.st-also-row .st-ico{margin-top:2px}
.st-also-row div{min-width:0}
.st-also h3{font:500 18px/1.2 var(--serif);margin:0 0 8px;color:#fff}
.st-also p{margin:0;font-size:13.5px;line-height:1.62;color:var(--sil);max-width:62ch}
.st-step{position:relative;padding-top:52px}
.st-step:before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--hair2);background:var(--navy-d);
  display:flex;align-items:center;justify-content:center;font:500 14px var(--serif);color:var(--sil)}
.st-step:not(:last-child):after{content:'';position:absolute;top:17px;left:44px;right:-12px;
  height:1px;background:var(--hair2)}
.st-step .st-ico{display:block;margin-bottom:10px}
.st-step h3{font:500 18px/1.2 var(--serif);margin:0 0 8px;color:#fff}
.st-when{margin:0 0 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg)}
.st-step p{margin:0;font-size:13.5px;line-height:1.62;color:var(--sil)}

.st-depart{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--hair);font-size:14px;
  line-height:1.62;color:var(--sil)}

.st-acc details{border-top:1px solid var(--hair2)}
.st-acc details:last-of-type{border-bottom:1px solid var(--hair2)}
.st-acc summary{display:flex;align-items:center;gap:10px;padding:18px 0;list-style:none;cursor:pointer;
  font:500 17px/1.25 var(--serif);color:#fff}
.st-acc summary::-webkit-details-marker{display:none}
.st-acc .sym{position:relative;flex:none;width:12px;height:12px;margin-left:auto}
.st-acc .sym:before,.st-acc .sym:after{content:'';position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--sil)}
.st-acc .sym:after{transform:rotate(90deg);transition:transform .2s}
.st-acc details[open] .sym:after{transform:rotate(0)}
.st-acc .soon-tag{color:var(--sil);background:transparent;border-color:var(--hair2)}
.st-acc summary .soon-tag{margin-left:0}
.st-panel-body{padding:0 0 20px}
.st-panel-body ul{margin:0;padding:0;list-style:none}
.st-panel-body li{position:relative;padding-left:18px;margin-bottom:11px;font-size:14px;
  line-height:1.62;color:var(--sil)}
/* THE MARKER, on every list of inclusions on the site -- every line of every
   panel of every package page, and every bullet on the five package cards:
   a four-point star in white. One rule, no per-page or per-card overrides --
   held by tests/test_panel_marker.py. The cards' lines share the panels'
   14px at 1.62, so the one line-height sets the star on both. NOT a
   five-pointed star: beside a hotel line that reads as a star rating, which
   is exactly what the hero no longer claims (David, 25 Sep 2026). */
.st-panel-body li:before,.sb-fam li:before,.sb-side li:before{content:'\2726';position:absolute;left:0;top:0;font-size:9px;
  line-height:22.7px;color:#fff}
.st-panel-body li.soon{color:#b4bfcd}
.st-note{margin:22px 0 0;padding-left:14px;border-left:1px solid var(--hair2);font-size:12.5px;
  line-height:1.7;color:var(--bg)}
.st-note em{font-style:normal;color:var(--sil);font-weight:600}

.st-bar{display:flex;align-items:center;gap:22px;padding:20px 7vw;background:var(--navy);
  border-top:1px solid var(--hair)}
.st-bar b{font:500 22px var(--serif);color:#fff}
.st-bar span{margin-right:auto;color:var(--sil);font-size:13px;letter-spacing:.06em}
.st-bar .st-btn{margin-top:0;min-width:220px}

@media(max-width:900px){
  .st-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-tile:last-child{grid-column:1/-1}
  .st-steps,.st-steps.n2,.st-steps.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-step:not(:last-child):after{display:none}
}
@media(max-width:850px){
  .st-hero{padding:calc(72px + 26px) 22px 34px}
  .st-day{padding:48px 22px}
  .st-bar{padding:20px 22px}
}
@media(max-width:700px){
  .st-bar{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .st-bar span{margin-right:0}
}

/* 13 See the Seats (David, 1 Oct 2026).

   On the three ladder cards: a small button in the upper right that opens
   the package's page with its seating view already full-screen. Lifted to
   z-index 2, as the ask is, so the card's stretched link (block 09) does not
   swallow it.

   On the package page: the map in the hero is SMALL, and pressing it opens
   the same panel full-screen (sbSeatView in site.js) -- one map shown two
   ways, never a copy. Full-screen, the bowl takes the screen and the heading,
   the readout or running total, "Request this seat" and the fine print sit
   beside it; on a phone they stack under it and the bowl scrolls sideways,
   because at phone width a 253-section bowl is too small to press. */
/* Above the date line, not beside it: "Thursday to Monday · Five star" runs
   most of the way across the Own The Week card, so the button sits in the
   card's top padding, where it cannot meet any line of copy. */
/* Made larger and plainer to find (David, 1 Oct 2026): a silver pill with navy
   type and a seat mark. The card's top padding grows to hold it, so it sits
   above the first line of copy and never over it; on a phone the pill is 44px
   tall, a full fingertip. */
.sb-fam:has(>.sb-see-seats){padding-top:68px}
.sb-fam>.sb-see-seats{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 16px 0 13px;border:1px solid var(--silver);border-radius:999px;color:#193e16;background:var(--silver);
  font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 18px rgba(25,62,22,.28);transition:.2s}
.sb-fam>.sb-see-seats .sb-seat-mark{width:16px;height:16px;flex:none}
.sb-fam>.sb-see-seats:hover,.sb-fam>.sb-see-seats:focus-visible{background:#fff;border-color:#fff;color:#193e16}
.sb-fam>.sb-see-seats:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:700px){.sb-fam:has(>.sb-see-seats){padding-top:76px}.sb-fam>.sb-see-seats{min-height:44px;padding:0 18px 0 15px;font-size:12px}}

#seats .sb-bowl-map{position:relative;max-width:340px}
.sb-seats-open{position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:none;
  cursor:zoom-in;font:inherit}
.sb-seats-open span{position:absolute;top:8px;right:8px;padding:7px 10px;background:#193e16;
  color:#ffffff;font:600 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.sb-seats-open:hover span,.sb-seats-open:focus-visible span{background:#12315e}
.sb-seats-open:focus-visible{outline:2px solid #193e16;outline-offset:-4px}
.sb-seats-head{display:none}
/* Numbers belong to the full-screen view. At the small map's size they are
   three pixels high: texture, not information. */
#seats .sb-sec-lbl{display:none}
.sb-seats-on #seats .sb-sec-lbl{display:inline}

html.sb-seats-on,html.sb-seats-on body{overflow:hidden}
.sb-seats-on #seats{position:fixed;inset:0;z-index:100;overflow:auto;overscroll-behavior:contain;
  background:var(--navy);padding:0 5vw 32px;display:grid;scroll-padding-top:78px;
  grid-template-columns:minmax(0,1fr) minmax(300px,420px);column-gap:clamp(24px,3vw,48px);
  align-content:start}
.sb-seats-on #seats>*{grid-column:2}
/* Close lives in a strip of its own across the top of the view, held there
   as the view scrolls. The strip is navy and takes its own height, so Close
   never sits over a tab, a figure or the map: content scrolls under the
   strip, never under the button alone. */
.sb-seats-on #seats .sb-seats-head{display:flex;justify-content:flex-end;grid-column:1/-1;grid-row:1;
  position:sticky;top:0;z-index:5;margin:0 -5vw 4px;padding:16px 5vw 14px;background:var(--navy);
  border-bottom:1px solid rgba(168,178,190,.18)}
.sb-seats-on #seats .sb-seats-bar{grid-column:1;grid-row:2}
.sb-seats-on #seats .sb-bowl-map{grid-column:1;grid-row:3/span 8;max-width:none;align-self:start}
.sb-seats-on #seats .sb-bowl-map svg{max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px)}
.sb-seats-on .sb-seats-open{display:none}
.sb-seats-on .sb-seats-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 16px;
  background:linear-gradient(180deg,#ffffff,#e1e5ea);color:var(--navy);border:1px solid #cbd2dc;
  font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.sb-seats-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.sb-seats-close:hover{background:linear-gradient(180deg,#fff,#eceef1)}
.sb-seats-close:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:850px){
  #seats .sb-bowl-map{margin:0 auto}
  /* One column, so a plain stack: a grid row sized against a sideways
     scroller came out shorter than the bowl and hid the readout under it. */
  .sb-seats-on #seats{display:block;padding:0 16px 28px;scroll-padding-top:72px}
  .sb-seats-on #seats .sb-seats-head{margin:0 -16px 8px;padding:12px 16px}
  .sb-seats-on #seats .sb-bowl-map{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sb-seats-on #seats .sb-bowl-map svg{width:max(100%,700px);max-width:none;max-height:none}
  /* The bar under the bowl stays put while the bowl scrolls under it. */
  .sb-seats-on #seats .sb-bowl-pick{position:sticky;left:0;width:calc(100vw - 54px)}
}

/* The mark at midfield never takes a click (it is also told so in the SVG),
   and a soft shadow keeps the silver legible over the field's lines. */
.sb-field-logo{pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(1,14,38,.55))}

/* The stadium's name, top left in every map, small and full-screen (David,
   1 Oct 2026). Its own row above the bowl, apart from the selected-section line
   under it and the controls above it; sticky, so a phone scrolling the bowl
   sideways keeps it in the corner. Our type, not the stadium's logo: no licence
   for the logo has been found. */
.sb-bowl-name{position:sticky;left:0;width:max-content;margin:0 0 6px;font:600 10px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#193e16}
.sb-seats-on .sb-bowl-name{font-size:12px;margin-bottom:8px}

/* 14 The full-screen controls (David, 1 Oct 2026).

   One bar above the bowl, only while the view is open: what the map is
   showing on the left, then zoom in, zoom out and Reset view. Navy and
   silver, the same hand as the card's See the Seats. A tab in block 15 lights
   its sections and dims the rest; the chosen section is never dimmed. Zoomed
   in, the bowl is dragged, so on a phone it takes the touch instead of the
   page.

   The chosen section pulses, gently, in silver -- and holds still for anybody
   whose system asks for less motion. */
.sb-seats-bar{display:none}
.sb-seats-on #seats .sb-seats-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 18px;margin:0 0 12px}
.sb-zoom{display:flex;flex-wrap:wrap;gap:6px}
.sb-zoom-reset{white-space:nowrap}
.sb-ref-status{margin:0;color:#ffffff;font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.sb-seats-bar button{min-width:44px;min-height:36px;padding:8px 12px;border:1px solid var(--silver);
  background:rgba(25,62,22,.55);color:#ffffff;font:600 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.sb-seats-bar .sb-zoom-in,.sb-seats-bar .sb-zoom-out{font-size:17px;letter-spacing:0;padding:6px 12px}
.sb-seats-bar button:hover,.sb-seats-bar button[aria-pressed="true"]{background:var(--silver);color:#193e16}
.sb-seats-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sb-seats-bar button:disabled{opacity:.38;cursor:default;background:rgba(25,62,22,.55);color:#ffffff}

.sb-filtering .sb-sec:not(.match):not(.on),.sb-filtering .sb-sec-lbl:not(.match):not(.on){opacity:.22}
.sb-filtering .sb-sec.match{stroke:#fff;stroke-width:1.6}
#sb-bowl-svg.sb-zoomed{cursor:grab;touch-action:none}

@keyframes sb-pulse{
  0%,100%{stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 0 rgba(201,207,216,0))}
  50%{stroke:#c9cfd8;stroke-width:3.4;filter:drop-shadow(0 0 5px rgba(201,207,216,.85))}
}
.sb-sec.on{animation:sb-pulse 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .sb-sec.on{animation:none}
}
@media(max-width:850px){
  /* A phone: the seven levels in one row, the zoom in a row under them. */
  .sb-seats-on #seats .sb-seats-bar{display:grid;justify-content:stretch;gap:8px}
  .sb-zoom{display:grid;grid-template-columns:44px 44px 1fr;gap:4px}
  .sb-seats-bar button{min-width:0;min-height:44px;padding:6px 2px;font-size:10px;letter-spacing:.06em}
}

/* 15 Find your seats: the nine tabs and the selected view (David, 1 Oct 2026).

   Full-screen only, beside the bowl on a desktop and under it on a phone.
   Each tab shows On Location's lowest listed price for that part of the
   stadium, with a coloured rule on top in the colour of its sections. The
   line ABOVE the tabs and the paragraph under the panel say whose figures
   these are and when they were read; they are set apart from Own The Week's
   own prices, which stay in the panel below them. Light panels on the navy,
   as the reference draws them, in its navy and silver. */
.sb-ref{display:none}
.sb-seats-on #seats .sb-ref{display:block;margin:14px 0 0}
.sb-ref-kicker{margin:0 0 6px;color:#c9d1dc;font:600 10.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.sb-ref-src-short{margin:0 0 10px;color:#c1cbd2;font-size:12px;line-height:1.5}
.sb-ref-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sb-ref-tab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:86px;padding:10px 10px 9px;
  background:#fff;color:#0b2242;border:1px solid #dce1e8;border-top:4px solid var(--tab);text-align:left;
  font:500 12px/1.25 var(--sans);cursor:pointer;transition:background .15s,color .15s}
.sb-ref-tab .l{font-size:12px}
.sb-ref-tab b{font:500 19px/1.15 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.sb-ref-tab b .from{font-size:12px;font-weight:500;letter-spacing:0;margin-right:1px}
.sb-ref-tab small{color:#5b687b;font-size:11px}
.sb-ref-tab:hover{background:#f1f4f8}
.sb-ref-tab[aria-pressed="true"]{background:#193e16;color:#fff;border-color:#193e16;border-top-color:var(--tab)}
.sb-ref-tab[aria-pressed="true"] small{color:#c9d1dc}
.sb-ref-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sb-ref-view{margin-top:12px;padding:16px 16px 14px;background:#fff;color:#0b2242;border:1px solid #dce1e8}
.sb-ref-view .sb-ref-kicker{color:#5b687b}
.sb-ref-view h3{margin:4px 0 6px;font:500 24px/1.15 var(--serif);color:#193e16}
.sb-ref-range{margin:0 0 10px;font-size:13px;line-height:1.5;color:#33425a}
.sb-ref-secs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 8px}
.sb-ref-sec{min-width:44px;min-height:36px;padding:6px 8px;background:#fff;color:#0b2242;border:1px solid #c9d1dc;
  font:600 12px/1 var(--sans);cursor:pointer}
.sb-ref-sec:hover{border-color:#193e16}
.sb-ref-sec[aria-pressed="true"]{background:#193e16;color:#fff;border-color:#193e16}
.sb-ref-rows p{margin:0 0 3px;font-size:12.5px;color:#33425a}
.sb-ref-src{margin:10px 0 0;padding-top:10px;border-top:1px solid #dce1e8;font-size:11.5px;line-height:1.55;color:#5b687b}
@media(max-width:850px){
  .sb-ref-tab{min-height:78px;padding:8px 7px}
  .sb-ref-tab b{font-size:16px}
  .sb-ref-tab .l,.sb-ref-tab small{font-size:10.5px}
}
/* Pros On The Tee's homepage card wears its own silver mark over the golf
   photograph, as its page hero does, in place of the text heading (which stays
   for screen readers). Same card, same size, same link. */
.event-card-brand{display:block;width:min(440px,100%);height:auto;margin:0 0 18px;filter:drop-shadow(0 10px 28px rgba(0,0,0,.45))}
@media(max-width:700px){.event-card-brand{width:min(300px,100%);margin-bottom:14px}}
@media(max-width:850px){.mega{max-height:calc(100dvh - 72px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.mega-more{display:grid;gap:0;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}.mega-more a{font:400 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;border-top:0;padding:14px 0}.mega-more a.mega-cta{margin-top:12px;padding:16px 20px;border:1px solid #d6dacf;text-align:center;font-size:12px;letter-spacing:.14em;background:#ffffff;color:#193e16}}

/* ---- 11 Oct 2026 batch (David, #199) ----------------------------------
   The three ladder packages' starting prices, and the contrast around them.
   Scoped to the three cards (.sb-fam) and the package pages' price
   (.pk-price, .st-bar); nothing else on the site moves. Navy and silver as
   before, with a slightly lighter card surface; the featured card keeps its
   silver border and badge. */
.sb-fam{background:#0a2247}
.sb-fam.main{background:#0e2b55}
.sb-fam-when{color:#c9d3e0}
.sb-fam .sb-for{color:#e6ebf2;font-size:16px;line-height:1.55}
.sb-fam li{color:#f1f2ed;font-size:14.5px}
.sb-fam .sb-price-block{padding:20px 0 6px}
.sb-price.sb-price-from,.sb-fam .sb-price.sb-price-from{margin:0 0 14px;color:#f8f5ec;letter-spacing:0;line-height:1.15}
.sb-price-lead{display:block;margin-bottom:4px;font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#e3e8ef}
.sb-price-fig{font:600 clamp(34px,3.2vw,42px)/1.05 var(--serif);color:#f8f5ec}
.sb-price-unit{font:500 15px/1.3 var(--sans);color:#e3e8ef;letter-spacing:.02em}
.sb-price-note{margin:0 0 10px;font-size:13.5px;line-height:1.62;color:#d6dde7}
.sb-fam .button{margin-top:10px;border-color:#e6eaf0;color:#fff;font-weight:600}
.sb-fam.main .button{background:#f2f4f7;border-color:#f2f4f7;color:#193e16}
.sb-fam .sb-ask{color:#d6dde7}
.pk-price{margin:26px 0 0;max-width:62ch;padding-top:22px;border-top:1px solid rgba(201,207,216,.24)}
.st-bar span{color:#f2f0ea;font-size:15px;letter-spacing:.03em}
/* Three cards side by side: each card's rows -- kicker, name, line, rule,
   list, rule, price, button, ask -- share the row heights of the other two
   (subgrid), so the three prices start on one line and the three buttons on
   another, however long each list or price note is (#199, 11 Oct 2026). The
   badge and See the Seats are positioned, so they take no row. Stacked
   below 1080px, each card keeps its own flow. */
@supports (grid-template-rows:subgrid){
  @media(min-width:1081px){
    .sb-fams{row-gap:0}
    .sb-fam{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:0}
    .sb-fam .sb-price-block{align-self:start}
  }
}

/* Pros On The Tee's attribution line, under the paragraph. */
.sb-ours-by{margin:-12px 0 30px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c3cad6}

/* Corporate: the closing line and the button to the enquiry on the page,
   inside the existing detail layout. */
.corp-close{margin:34px 0 22px}
.detail .corp-cta{display:inline-block;border:1px solid #193e16;color:#193e16;background:none}
.detail .corp-cta:hover{background:#193e16;color:#fff}

/* Package prices in a clean sans serif (David, Option A, 11 Oct 2026, #199):
   the site's own Manrope at medium weight, no new font. The amount and its
   dollar sign on the three cards and the package pages' heroes, and Own The
   Seat's price panel; the closing bar's price is already sans. Package
   headings stay serif, and the reference ticket listings are not touched. */
.sb-price-fig{font:500 clamp(32px,3vw,40px)/1.05 var(--sans);letter-spacing:-.015em;color:#f8f5ec;font-variant-numeric:lining-nums tabular-nums}
.st-price .fig{font:500 clamp(22px,2.1vw,30px)/1.15 var(--sans);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}

/* The three-package update (David, 14 Oct 2026, #262). The card's ticket
   line is a heading and its text; Own The Week's custom block takes the place
   of a price, in the serif the package names use, and its "Create Your Week"
   button sits under it on the package page. No new layout. */
.sb-pt-h{display:block;font-weight:600;color:#fff}
.sb-price-custom{margin:0 0 12px;font:500 clamp(22px,2vw,26px)/1.25 var(--serif);color:#f8f5ec;letter-spacing:0}
.sb-fam .sb-price.sb-price-custom{color:#f8f5ec;letter-spacing:0;padding:0}
.pk-cta{display:inline-flex;min-width:220px;margin-top:8px}

/* -- Own The Week signature card (David, 14 Oct 2026, #266) -----------------
   Every selector below is scoped to .sb-sig, which only Own The Week's card
   carries, so Own The Seat and Own The Weekend keep every computed style.
   Brand only: the site's navy, --silver, Playfair Display headings and
   Manrope body. A shade brighter than the other cards, silver rules, the
   photograph edge to edge, and eight silver line icons in two columns. It
   keeps the nine shared rows (see the subgrid above), so it fits the height
   the other two cards already set instead of stretching them. */
.sb-fam.sb-sig{--brushed:#a8b2be;background:linear-gradient(180deg,#10305c 0%,#343e4b 42%,#0a2142 100%);
  border-color:var(--silver);box-shadow:0 26px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)}
.sb-fam.sb-sig .sb-sig-eyebrow{display:flex;align-items:center;gap:10px;color:var(--silver);font-weight:600}
.sb-fam.sb-sig .sb-sig-eyebrow:before{content:'';flex:none;width:22px;height:1px;background:var(--silver)}
.sb-fam.sb-sig hr{border-top-color:rgba(201,207,216,.34)}
.sb-sig-body{display:flex;flex-direction:column;margin:0 -28px}
.sb-sig-photo{display:block;width:100%;height:150px;object-fit:cover;object-position:58% 46%;
  border-bottom:1px solid rgba(201,207,216,.34);background:#234e21}
.sb-sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:18px 28px 12px}
.sb-sig-item{display:flex;align-items:center;gap:10px;min-height:34px}
.sb-sig-item .st-ico{width:24px;height:24px}
.sb-sig-item span{font:400 12.5px/1.35 var(--sans);color:#e8ecf2}
.sb-sig-note{margin:0 28px 18px;font-size:12px;line-height:1.5;color:#c1cbd2;font-style:italic}
.sb-fam.sb-sig .sb-sig-cta{position:relative;z-index:2;width:100%;cursor:pointer;font-family:var(--sans);font-weight:500}
.sb-fam.sb-sig .sb-sig-cta:focus-visible,.sb-sig-more:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sb-sig-more{display:block;margin-top:10px;padding:4px 0;text-align:center;font-size:12px;letter-spacing:.04em;color:#d6dde7}
.sb-fam.sb-sig>a.sb-sig-more:after{content:'';position:absolute;inset:0;z-index:1}
.sb-sig-more:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1080px){.sb-sig-photo{height:190px}}
/* Side by side, the Week's body takes no height of its own: it fills the row
   Own The Seat and Own The Weekend set, and the photograph takes what the
   services and the qualifier leave, so this card can never make those two
   taller, whatever the fonts. */
@supports (grid-template-rows:subgrid){
  @media(min-width:1081px){
    .sb-fam.sb-sig .sb-sig-body{contain:size;align-self:stretch;min-height:0}
    .sb-fam.sb-sig .sb-sig-photo{flex:1 1 0;height:auto;min-height:96px}
  }
}
@media(max-width:420px){.sb-sig-grid{gap:12px 10px}.sb-sig-photo{height:170px}}

/* -- Request a Private Concierge Call (David, 14 Oct 2026, #269) -----------
   One label on every package card, package page and sticky bar. Long, so it
   wraps inside its button rather than shrinking or clipping. On a card it is
   the primary button and the package page is a discreet link under it, the
   link stretched over the card so the whole card still opens the page. */
.sb-fam>.sb-call{position:relative;z-index:2;white-space:normal;line-height:1.45;text-align:center}
.sb-fam>a.sb-details{display:block;margin-top:10px;padding:4px 0;text-align:center;font-size:12px;
  letter-spacing:.04em;color:#d6dde7}
.sb-fam>a.sb-details:after{content:'';position:absolute;inset:0;z-index:1}
.sb-fam>a.sb-details:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.sb-fam>a.sb-details:focus-visible,.sb-fam>.sb-call:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pk-cta,.st-bar .st-btn{white-space:normal;text-align:center;line-height:1.45}
/* The form lands below the fixed header, not under it. */
#inquire{scroll-margin-top:96px}
#sb-request-h:focus{outline:none}
.sb-request .sb-head .sb-request-note{margin-top:16px;font-size:14px;line-height:1.65;color:#c3cad6}
#sb-request-h:focus-visible{outline:2px solid #c9cfd8;outline-offset:6px}
/* THE PACKAGE PAGE'S ACTION BAR STAYS ON SCREEN. It is the bar that already
   sat above the enquiry; sticky to the bottom, it rides the bottom of the
   window while the page scrolls and settles back above the form when the
   form arrives, so it never covers a field, the submit or the seat map's
   close (the seating view is a full-screen layer above it, and the bar
   steps aside while it is open). The phone's home bar is respected. */
.st-bar{position:sticky;bottom:0;z-index:25;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 34px rgba(1,14,38,.45)}
html.sb-seats-on .st-bar{display:none}
.st-bar{transition:transform .25s ease,visibility .25s}
.st-bar.st-bar-wait{transform:translateY(110%);visibility:hidden}
@media(prefers-reduced-motion:reduce){.st-bar{transition:none}}
@media(max-width:700px){
  #inquire{scroll-margin-top:80px}
  .st-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);align-items:center;gap:2px 14px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));text-align:left}
  .st-bar b{grid-column:1;font-size:17px;line-height:1.2}
  .st-bar span{grid-column:1;font-size:12px;letter-spacing:.02em}
  .st-bar .st-btn{grid-column:2;grid-row:1/span 2;min-width:0;padding:10px 12px;font-size:10px;letter-spacing:.1em}
}

/* -- The call, white everywhere, and on every public page (David, 15 Oct 2026,
   #269 follow-up). Own The Seat's and Own The Weekend's card buttons take the
   same solid off-white and navy as Own The Week's; the seat map's "Request
   this seat" and every other button are untouched. */
.sb-fam>.button.sb-call{background:#f2f4f7;border-color:#f2f4f7;color:#193e16}
.sb-fam>.button.sb-call:hover{background:#fff;border-color:#fff;color:#193e16}
/* The site-wide bar: the package bar's navy and button, fixed to the foot of
   the window, with room kept at the foot of the page so it covers nothing. */
.otw-callbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;gap:22px;
  padding:14px 7vw calc(14px + env(safe-area-inset-bottom,0px));background:#02163a;
  border-top:1px solid rgba(168,178,190,.22);box-shadow:0 -14px 34px rgba(1,14,38,.45);
  transition:transform .25s ease,visibility .25s}
.otw-callbar b{margin-right:auto;font:500 20px var(--serif);color:#fff}
.otw-callbar .st-btn{margin-top:0;min-width:260px;white-space:normal;text-align:center;line-height:1.45;
  color:#02163a;font-family:var(--sans);cursor:pointer}
.otw-callbar .st-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.otw-callbar.otw-callbar-form,html.otw-typing .otw-callbar,html.otw-menu-open .otw-callbar,
html.sb-seats-on .otw-callbar{transform:translateY(110%);visibility:hidden}
.otw-callbar[hidden]{display:none}
html.otw-callbar-on body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(prefers-reduced-motion:reduce){.otw-callbar{transition:none}}
@media(max-width:700px){
  .otw-callbar{gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .otw-callbar b{font-size:17px}
  .otw-callbar .st-btn{min-width:0;max-width:200px;padding:10px 12px;font-size:10px;letter-spacing:.1em}
  html.otw-callbar-on body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
}