/* The Pineapple Party — self-contained.
   Shares tokens and the masthead/footer with original-taste.css; every rule below
   is pc-prefixed so none of the four cinema stylesheets can reach into this page.
   The document ships class="no-motion": the static layout is the real layout, and
   the scroll-scrub is an upgrade applied only once JS confirms motion is wanted. */

.pc-cinema{position:relative;background:#14291d}
.pc-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding:48px 6% 40px}
.pc-hero-art{margin:0;margin-inline:-6%;background:#0d1f16}
.pc-hero-art img{display:block;width:100%;height:clamp(280px,42svh,460px);object-fit:cover;object-position:center 40%}
/* The film sits with the list of the six things it shows going on. */
.pc-build{margin:34px 0 0;display:grid;gap:16px}
/* The prep film is a portrait phone clip. Sizing the frame by width, not by a
   height cap, keeps the box the shape of the video - no letterbox at any width. */
.pc-film{position:relative;background:#0d1f16;width:100%;max-width:clamp(260px,42vw,330px);margin-inline:auto}
.pc-film video{display:block;width:100%;height:auto;background:#0d1f16}
.pc-hero-copy h1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.02;margin:10px 0 18px}
.pc-hero-copy h1 em{font-style:normal;color:var(--gold)}
.pc-hero-copy p{font-size:1.125rem;line-height:1.6;max-width:36ch;margin:0 0 22px}
.pc-film-caption{border-top:1px solid var(--line);padding-top:16px}
.pc-film-caption p{font-size:1.125rem;line-height:1.6;margin:12px 0 0;max-width:40ch;color:#fff4d3e0}
.pc-film-caption h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin:6px 0 0;line-height:1.15}


.pc-pitch{padding:70px 6%;background:var(--green)}
.pc-pitch h2{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.1;margin:8px 0 20px;max-width:18ch}
.pc-pitch h2 em{font-style:normal;color:var(--gold)}
.pc-lede{font-size:1.25rem;line-height:1.6;max-width:52ch;margin:0}

.pc-included{padding:70px 6%;background:var(--deep)}
.pc-included-copy h2{font-size:clamp(1.8rem,4.2vw,2.9rem);margin:8px 0 14px;line-height:1.12}
.pc-included-copy p{font-size:1.125rem;line-height:1.6;max-width:46ch;margin:0}
.pc-parts{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px;counter-reset:none}
.pc-parts li{border-top:1px solid var(--line);padding-top:16px}
.pc-parts span{display:block;font-size:1rem;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.pc-parts h3{font-size:1.3rem;margin:8px 0 8px;line-height:1.2}
.pc-parts p{font-size:1.125rem;line-height:1.55;margin:0;color:#fff4d3e0}

.pc-flavors{padding:70px 6%;background:var(--green)}
.pc-flavors-head h2{font-size:clamp(1.8rem,4.2vw,2.9rem);margin:8px 0 0;line-height:1.12}
.pc-flavor-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
.pc-flavor{margin:0}
.pc-flavor img{width:100%;height:clamp(240px,34svh,420px);object-fit:cover;display:block;background:#0d1f16}
.pc-flavor figcaption{padding-top:16px;border-top:1px solid var(--line);margin-top:14px}
.pc-flavor h3{font-size:1.6rem;margin:0 0 6px;line-height:1.15;color:var(--gold)}
.pc-flavor figcaption p{font-size:1.125rem;margin:0;color:#fff4d3e0}
.pc-flavor-note{margin-top:30px}

/* An open question to the owners, not page copy. Marked so it reads that way. */
.pc-ask{font-size:1.0625rem;line-height:1.6;max-width:70ch;border-left:3px solid var(--gold);padding:4px 0 4px 16px;color:#fff4d3e0;margin:30px 0 0}

.pc-hands{padding:70px 6%;background:#14291d}
.pc-hands-head h2{font-size:clamp(1.8rem,4.2vw,2.9rem);margin:8px 0 14px;line-height:1.12}
.pc-hands-head p{font-size:1.125rem;line-height:1.6;max-width:56ch;margin:0}
.pc-hands-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px;max-width:760px}
.pc-hands-grid figure{margin:0}
.pc-hands-grid img{width:100%;height:clamp(260px,38svh,440px);object-fit:cover;display:block;background:#0d1f16}
.pc-hands-grid figcaption{font-size:1.0625rem;padding-top:12px;color:#fff4d3d1}

/* The shot list is a private working note. It must never read as finished page content. */
.pc-shotlist{padding:70px 6%;background:var(--deep);border-block:2px dashed #ffda3866}
.pc-shotlist-head h2{font-size:clamp(1.6rem,3.6vw,2.5rem);margin:8px 0 14px;line-height:1.14;max-width:22ch}
.pc-shotlist-head p{font-size:1.125rem;line-height:1.6;max-width:60ch;margin:0}
.pc-gaps{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pc-gap{border:2px dashed #ffda3859;padding:22px;background:#ffda3808}
.pc-gap-tag{display:block;font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pc-gap h3{font-size:1.25rem;margin:10px 0 10px;line-height:1.24}
.pc-gap p{font-size:1.0625rem;line-height:1.55;margin:0;color:#fff4d3e0}
.pc-gap-why{margin-top:12px!important;padding-top:12px;border-top:1px solid #ffda3840;color:#ffda38d9!important;font-size:1rem!important}
.pc-shotlist-foot{font-size:1.125rem;line-height:1.6;max-width:66ch;margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line)}

.pc-occasions{padding:70px 6%;background:var(--red)}
.pc-occasions .eyebrow{color:#ffe9a8}
.pc-occasions-head h2{font-size:clamp(1.9rem,4.6vw,3.2rem);margin:8px 0 0;line-height:1.1}
.pc-occasions-head h2 em{font-style:normal;color:var(--gold)}
.pc-occasion-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pc-occasion-list li{border:1px solid #fff4d366;padding:16px;font-size:1.125rem;min-height:56px;display:flex;align-items:center}
.pc-occasions .pc-ask{border-left-color:#ffe9a8;color:#fff4d3}

.pc-close{padding:80px 6%;background:var(--deep);text-align:center}
.pc-close h2{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:8px 0 18px}
.pc-close h2 em{font-style:normal;color:var(--gold)}
.pc-close>p{font-size:1.25rem;line-height:1.6;max-width:46ch;margin:0 auto 26px}
.pc-close .solid-link{justify-content:center;gap:16px}
.pc-close-note{font-size:1rem!important;color:#fff4d3b8;margin:16px auto 0!important}

/* Wide screens have the width to put the copy beside the film instead of under
   it, which is the only way the tagline and the film both clear the fold. */
@media(min-width:1051px){
  .pc-hands-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .pc-stage{grid-template-columns:minmax(0,520px) 1fr;column-gap:56px;align-items:center}
  .pc-hero-art{margin-inline:-6% 0}
  .pc-hero-art img{height:min(66svh,640px)}
  .pc-build{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;align-items:center}
  .pc-film-caption{border-top:0;padding-top:0}
}
@media(max-width:1050px){
  /* Tablet heights are short for how wide they are: the media gives up the room. */
  .pc-hero-art img{height:clamp(270px,38svh,400px)}
  .pc-parts{grid-template-columns:1fr 1fr}
  .pc-gaps{grid-template-columns:1fr 1fr}
  .pc-occasion-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .pc-stage{padding:28px 6% 30px;gap:20px}
  .pc-hero-art img{height:clamp(240px,36svh,340px)}
  .pc-pitch,.pc-included,.pc-flavors,.pc-hands,.pc-shotlist,.pc-occasions{padding:52px 6%}
  .pc-close{padding:58px 6%}
  .pc-parts,.pc-flavor-grid,.pc-hands-grid,.pc-gaps{grid-template-columns:1fr;gap:24px}
  .pc-occasion-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-flavor img,.pc-hands-grid img{height:clamp(240px,44svh,360px)}
  .pc-close .solid-link{width:100%}
}
/* Working notes fail closed: no JS, no flag, nothing shown. The opposite of the
   motion rule above, and deliberately so - these are not page content. */
.pc-shotlist[hidden],.pc-ask[hidden]{display:none}
.pc-flavor-lede{font-size:1.125rem;line-height:1.6;max-width:54ch;margin:16px 0 0;color:#fff4d3e6}
.pc-occasions-lede{font-size:1.25rem;line-height:1.6;max-width:50ch;margin:16px 0 0}

/* ---- the event inquiry builder ---- */
/* Form controls inherit the main stylesheet's form rules, so this only handles
   layout, the step framing and the summary panel. */
.pc-quote{padding:70px 6%;background:#14291d;display:grid;gap:34px}
.pc-quote-head h2{font-size:clamp(1.8rem,4.2vw,2.9rem);margin:8px 0 14px;line-height:1.12}
.pc-quote-head>p{font-size:1.125rem;line-height:1.6;max-width:52ch;margin:0}
.pc-quote-form{display:grid;gap:30px;margin:0}
.pc-step{border:0;border-top:1px solid var(--line);margin:0;padding:22px 0 0;min-width:0}
.pc-step legend{font-size:1.25rem;display:flex;align-items:center;gap:12px;padding:0;margin-bottom:6px}
.pc-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--gold);color:var(--deep);font-size:1rem;font-weight:700}
.pc-step-note{font-size:1.0625rem;line-height:1.55;color:#fff4d3cc;margin:0 0 14px}
.pc-optional{color:#fff4d3a8;font-weight:400}
.pc-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.pc-sized{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pc-sized li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;border-top:1px solid #fff4d31a;padding-top:12px;font-size:1.0625rem;line-height:1.5}
.pc-sized li:first-child{border-top:0;padding-top:0}
.pc-sized b{font-size:1.5rem;color:var(--gold);font-weight:700;min-width:2.5ch}
.pc-quote-send{margin-top:4px;justify-self:start}
.pc-quote-done{font-size:1.0625rem;line-height:1.6;margin:16px 0 0;padding:16px;border:1px solid #ffda3866;background:#ffda380f;max-width:56ch}
.pc-quote-done[hidden]{display:none}
.pc-quote-panel{align-self:start;background:#0d1f16;border-top:3px solid var(--gold);padding:26px;min-width:0}
.pc-quote-panel h3{font-size:1.25rem;margin:0 0 18px}
.pc-panel-rows{margin:0;display:grid;gap:12px}
.pc-panel-rows>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #fff4d31a;padding-top:11px;font-size:1.0625rem}
.pc-panel-rows>div:first-child{border-top:0;padding-top:0}
.pc-panel-rows dt{color:#fff4d3c4}
.pc-panel-rows dd{margin:0;font-weight:700}
.pc-estimate-label{font-size:1rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--gold);margin:24px 0 4px}
.pc-estimate{font-size:clamp(2.2rem,5vw,3rem);line-height:1;margin:0;font-weight:700}
.pc-estimate-note{font-size:1rem;line-height:1.55;color:#fff4d3c4;margin:12px 0 0;max-width:34ch}
@media(min-width:1051px){
  .pc-quote{grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:56px;align-items:start}
  .pc-quote-head{grid-column:1/-1}
  .pc-quote-panel{position:sticky;top:110px}
}
@media(max-width:700px){
  .pc-quote{padding:52px 6%;gap:28px}
  .pc-field-row{grid-template-columns:1fr;gap:22px}.pc-quote-form{gap:40px}
  .pc-quote-send{width:100%;justify-self:stretch}
}

/* ---- the form itself ----
   The main stylesheet dresses every form for the inquiry panel on the home page,
   including a maroon field tint that fights this page's green. Everything below
   is scoped to .pc-quote and beats it on specificity (class+element over two
   elements) rather than by shouting !important at it. */

/* Labels, wells, focus and the picker glyphs all come from .dg-fields in the
   main stylesheet now. Only what is particular to this page lives here. */
.pc-quote-form label{margin-bottom:0}
.pc-quote-form .pc-optional{text-transform:none;letter-spacing:0;color:#fff4d387}
.pc-step>label{margin-bottom:22px}.pc-guests-field{margin-bottom:22px;display:block}.pc-quote-form .pc-lab{display:block}
.pc-step>label:last-of-type{margin-bottom:0}

.pc-field-hint{font-size:1rem;line-height:1.5;color:#fff4d394;margin:10px 0 0}

/* The guest count is the control the whole page keys off, so it gets to be one. */
.pc-stepper{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:stretch;margin-top:11px;max-width:320px}
.pc-step-btn{
  width:56px;min-height:56px;border:1px solid #ffda3859;background:#ffda3812;color:var(--gold);
  font-size:1.5rem;line-height:1;font-weight:700;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .12s ease}
.pc-step-btn:hover{background:#ffda3826;border-color:var(--gold)}
.pc-step-btn:active{transform:scale(.94)}
.pc-step-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #ffda3840;border-color:var(--gold)}
.pc-quote-form .pc-stepper input{
  text-align:center;font-size:1.75rem;font-weight:700;color:var(--gold);padding:10px;min-height:56px;
  -moz-appearance:textfield;appearance:textfield}
.pc-quote-form .pc-stepper input::-webkit-outer-spin-button,
.pc-quote-form .pc-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* The steps read as a numbered spine rather than three stacked boxes. */
.pc-step{border:0;border-left:2px solid #fff4d322;margin:0;padding:2px 0 0 26px;min-width:0;position:relative}
.pc-step legend{font-size:1.25rem;display:flex;align-items:center;gap:13px;padding:0;margin:0 0 20px;margin-inline-start:-26px}
.pc-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--gold);color:var(--deep);font-size:1rem;font-weight:700;flex:none;transition:box-shadow .25s ease}
.pc-step.is-done .pc-n{box-shadow:0 0 0 4px #ffda3826}
.pc-step.is-done .pc-n::after{content:"";width:9px;height:5px;border-left:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:rotate(-45deg) translate(1px,-2px)}
.pc-step.is-done .pc-n{font-size:0}

/* A change in a figure gets a beat of attention. Decoration only - the number is
   already correct before this runs, and without motion it simply never runs. */
@keyframes pc-tick{0%{transform:translateY(-5px);opacity:.45}100%{transform:none;opacity:1}}
.motion-on .pc-ticked{animation:pc-tick .34s ease-out}

/* The summary reads as a ticket: a torn top edge, then the figure. */
.pc-quote-panel{position:relative;padding-top:30px}
.pc-quote-panel::before{content:"";position:absolute;inset:0 0 auto;height:6px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 9px,transparent 9px 17px)}
.pc-quote-panel{border-top:0}
.pc-estimate{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em}
.pc-estimate-label{border-top:1px dashed #fff4d340;padding-top:20px}
.pc-quote-send{min-height:56px;padding:16px 26px;font-size:1.0625rem}
@media(max-width:700px){
  .pc-step{padding-left:20px}
  .pc-step legend{margin-inline-start:-20px}
  .pc-stepper{max-width:none}
}

.pc-req{color:var(--gold);font-size:1rem}
.pc-req-key{font-size:1rem;color:#fff4d394;margin:14px 0 0;display:flex;align-items:center;gap:8px}
.pc-consent{flex-direction:row!important;align-items:flex-start;gap:13px!important;margin-top:20px!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:400!important;font-size:1rem!important;
  line-height:1.55;color:#fff4d3c4;cursor:pointer}
.pc-quote-form .pc-consent input[type=checkbox]{width:24px;height:24px;min-height:24px;flex:none;margin-top:2px;padding:0;accent-color:var(--gold)}

/* ---- the footer name ---- */
/* "The Original Taste" and "of the Caribbean" are one paragraph with a span
   between them, so without this they print as "The Original Tasteof the
   Caribbean". brand.css has the same rule, but it also restyles .masthead and
   .site-footer, so linking it here would redesign the page to fix one line. */
.footer-brand-name span{display:block}

/* ---- one column when the words stop fitting ---- */
/* The occasion list is two columns of single words, and "Graduations" is the
   longest of them. Raise the OS text size and that one word needs more room
   than half the screen, which pushes the whole page wider than the phone and
   gives every section a sideways drag. minmax(0,1fr) narrows the columns but
   not the word, and breaking it mid-way reads badly on the page.
   em in a media query measures against the browser's DEFAULT font size, which
   is the lever Android's font-size setting actually moves -- so this asks the
   right question: is the screen narrow FOR THIS TEXT SIZE? At the normal size
   it works out at 300px -- narrower than any phone width tested here, the Z
   Fold's 305px cover screen included -- so the approved two-column layout is
   never the one that changes; at 150% it is 450px and every phone width drops
   to one readable column. The same threshold carries the two large-text rules
   at the end of bowl-studio.css, so there is one number to reason about. */
@media(max-width:18.75em){
  .pc-occasion-list{grid-template-columns:minmax(0,1fr)}
}

/* ---- the Menu button belongs at the right edge, same as the homepage ---- */
/* The homepage pushes its header bar to the right with .visit-button{margin-left:
   auto}, which lives in bowl-studio.css - a stylesheet this page does not link.
   This masthead has no visit button either, so nothing has ever pushed the
   toggle across and it sat against the logo with the rest of the bar empty.
   Scoped to this file rather than nav-menu.css on purpose: adding the same
   margin there would give the homepage two auto margins to split between the
   visit button and the toggle, and move a header that is already correct. */
@media(max-width:1100px){.masthead .nav-toggle{margin-left:auto}}