/* home2: scroll story — teapot/cup video pinned right, copy scrolls left (Kay 11/07) */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:0 32px;align-items:start}
.flow-text{padding:6vh 0}
.step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:48px 0;max-width:560px}
.step .label{margin-bottom:18px}
.step .wide-p{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.4;margin-bottom:28px}
.flow .leaves{grid-template-columns:repeat(4,1fr);gap:8px 12px;padding:0}
.flow .why-copy{max-width:none}
.flow .cards{grid-template-columns:1fr 1fr;gap:24px;padding:0}
.flow .btn-line{margin-top:28px;align-self:flex-start}

.flow-media{position:relative;align-self:stretch}
.flow-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.pot{position:relative;width:min(100%,520px);height:min(86vh,920px);aspect-ratio:9/16}
/* soft shadow behind the glass, faintly tea coloured; drawn behind, never under (Kay) */
.pot::before{content:"";position:absolute;left:-14%;right:-14%;top:4%;bottom:6%;background:radial-gradient(ellipse 52% 46% at 50% 54%,rgba(132,86,28,.30),rgba(132,86,28,.08) 55%,rgba(0,0,0,0) 72%);filter:blur(22px)}
.pot video{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:0;padding:0 16px}
  .flow-media{order:-1;position:sticky;top:0;z-index:1;background:#fff}
  .flow-stick{height:48vh;align-items:flex-end}
  .pot{height:44vh;width:auto}
  .flow-text{padding:0}
  .step{min-height:0;padding:40px 0 56px;max-width:none}
  .flow .cards{gap:16px}
}
.pot img{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.flow ul{list-style:none}
.flow li{font-family:var(--serif);font-size:24px;line-height:1.35;padding:14px 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow-stick{padding-top:90px}
.pot{height:min(74vh,820px)}
.pot::before{left:-8%;right:-8%;top:8%;bottom:10%;background:radial-gradient(ellipse 48% 44% at 50% 52%,rgba(132,86,28,.22),rgba(132,86,28,.06) 55%,rgba(0,0,0,0) 72%)}
@media (max-width:900px){ .flow-stick{padding-top:120px;height:52vh} .pot{height:40vh} }
/* camera framing: video taller than the viewport, panned by home2.js */
.flow-stick{overflow:hidden;padding-top:0;align-items:flex-start}
.pot{height:auto;aspect-ratio:auto;width:auto;will-change:transform;padding-top:60px}
.pot video{display:block;height:165vh;width:auto;max-width:none}
.pot::before{top:6%;bottom:4%;left:-10%;right:-10%}
@media (max-width:900px){
  .flow-stick{height:56vh;padding-top:0}
  .pot{height:auto;padding-top:110px}
  .pot video{height:100vh}
}

/* quiet part */
.quiet{border-top:0;padding-top:96px}

/* why steps: two lines each, big serif */
.step{min-height:100vh;justify-content:center}
.step .label{margin-bottom:28px}
.flow li{font-size:clamp(24px,2.2vw,32px);line-height:1.3;padding:22px 0}

/* our products as tea types */
.types .cards{grid-template-columns:repeat(3,1fr);gap:48px 40px}
.types .card .ph img{aspect-ratio:1;object-fit:contain;width:72%;margin:0 auto}
.types .card h3{margin-top:12px}
.types .card p{text-transform:none;font-size:15px;line-height:1.55;letter-spacing:0;color:var(--muted)}

/* steam v2 (Kay 11/07: looked like smoke): two thin, pale, slowly swaying wisps, very soft */
.ph.steam{position:relative;overflow:visible}
.ph.steam::before,.ph.steam::after{content:"";position:absolute;left:50%;bottom:50%;width:7px;height:110px;border-radius:50%;background:linear-gradient(180deg,rgba(190,186,180,0) 0%,rgba(190,186,180,.55) 35%,rgba(190,186,180,.55) 60%,rgba(190,186,180,0) 100%);filter:blur(4px);opacity:0;transform-origin:50% 100%;animation:steam 7s cubic-bezier(.22,1,.36,1) infinite;pointer-events:none}
.ph.steam::before{margin-left:-14px}
.ph.steam::after{margin-left:8px;height:90px;animation-delay:3.2s;animation-duration:8s}
.ph.steam i{display:none}
@keyframes steam{
  0%{transform:translate(0,0) scaleY(.6) skewX(0deg);opacity:0}
  15%{opacity:.7}
  50%{transform:translate(6px,-55px) scaleY(1) skewX(-6deg);opacity:.55}
  100%{transform:translate(-4px,-120px) scaleY(1.15) skewX(5deg);opacity:0}
}
@media (max-width:900px){ .types .cards{grid-template-columns:1fr 1fr;gap:32px 16px} .types .card .ph img{width:80%} }
.flow>*{min-width:0}
.flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-media{width:100%;overflow:hidden}
  .flow-stick{justify-content:center;height:60vh}
  .pot{padding-top:100px}
  .pot video{height:92vh;width:auto;max-width:none}
}

/* Kay 11/07: video left, copy right */
.flow-media{order:-1}
.flow-text{padding-left:24px}

/* Kay 11/07: video further left */
@media (min-width:901px){ .flow{padding-left:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} .flow-stick{justify-content:flex-start;padding-left:0} .pot{margin-left:-6%} }
/* camera v2: whole pot fits the column; JS zooms a little and pans down (Kay 11/07: spout was cut) */
.flow-media{order:-1}
.pot{transform-origin:50% 0;margin-left:0;padding-top:0;width:100%}
.pot video{height:auto;width:100%;max-width:none}
@media (min-width:901px){
  .flow{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;padding-left:0}
  .flow-stick{padding-top:112px;justify-content:center}
  .pot{width:92%}
}
@media (max-width:900px){ .flow-stick{height:62vh;padding-top:104px} .pot{width:100%;padding-top:0} .pot video{height:auto;width:100%} }
/* Kay 11/07: haze read as a background colour — keep only a small soft shadow behind the pot; pot further left even if clipped */
.pot::before{left:12%;right:12%;top:3%;bottom:62%;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(120,80,30,.16),rgba(120,80,30,0) 70%);filter:blur(18px)}
@media (min-width:901px){ .flow-stick{justify-content:flex-start} .pot{width:96%;margin-left:-9%} }
.quiet{padding-bottom:40px}
/* Kay 11/07: handle may clip; the pouring side must read big */
@media (min-width:901px){ .pot{width:118%;margin-left:-28%} .pot::before{left:30%;right:14%} }

/* longer scroll per second of video (Kay: too fast) */
@media (min-width:901px){ .step{min-height:150vh} }

/* Kay 11/07: Our Products centred */
.types .sec-head{text-align:center}
.types .card{text-align:center}
.types .card .ph img{margin:0 auto}

/* Kay 11/07: CSS steam not real enough — off */
.ph.steam::before,.ph.steam::after{display:none}

/* Kay 11/07: light tint behind Our Products so cups/steam read better */
.types{background:#f4f0ea;padding-top:96px;padding-bottom:96px}
.types .card .ph img{mix-blend-mode:multiply}
/* real-ish steam: one white-background clip, multiplied over the page, varied per cup (Kay 11/07: faint is fine) */
.ph.steam{position:relative}
.steam-v{position:absolute;left:50%;bottom:46%;width:30%;height:auto;transform:translateX(-50%);mix-blend-mode:multiply;opacity:.42;pointer-events:none;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 25%,#000 80%,rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 25%,#000 80%,rgba(0,0,0,0) 100%)}

.types .card .btn-line{display:inline-block;margin-top:18px;font-size:11px;padding:10px 18px;text-transform:none;letter-spacing:.06em}
.types .card:hover .btn-line{background:var(--ink);color:#fff}
.steam-v{opacity:.32}

.steam-v{opacity:.26}

/* Kay 11/07: steam must be WHITE on the tinted band: black-background clip, screen blend */
.steam-v{mix-blend-mode:screen;opacity:.9}

/* Kay 11/07: white box around cups at first = opacity fade on the card isolates the multiply blend. Fade by movement only. */
.types .card.reveal{opacity:1;transition:transform .9s cubic-bezier(.22,1,.36,1)}

.types{background:#eee7dc}
.steam-v{opacity:1;width:36%;bottom:44%}

/* steam starts at the rim, not inside the tea (Kay 11/07) */
.steam-v{bottom:63%;width:34%;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%,#000 88%,rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%,#000 88%,rgba(0,0,0,0) 100%)}

.steam-v{opacity:.55}

/* black box at first: card transform transition isolates the screen blend; also hide steam until it actually plays */
.types .card.reveal{transform:none;transition:none}
.steam-v{opacity:0;transition:opacity 1.2s ease}
.steam-v.on{opacity:.55}
/* preload everything behind a loading screen (Kay 11/07) */
.loader{position:fixed;inset:0;z-index:50;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .6s ease}
.loader img{width:200px;mix-blend-mode:multiply}
.loader-bar{width:160px;height:1px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s linear}
.loader.done{opacity:0;pointer-events:none}
body.loading{overflow:hidden}
/* Kay 11/07: copy fades in/out in place instead of scrolling up */
.flow-text{padding:0;height:420vh}
.flow-text .steps{position:sticky;top:0;height:100vh;display:grid;align-items:center;padding-left:24px}
.flow-text .step{grid-area:1/1;min-height:0;padding:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.flow-text .step.on{opacity:1;pointer-events:auto}
@media (max-width:900px){
  .flow-text{height:300vh}
  .flow-text .steps{top:60vh;height:40vh;padding:0;align-items:start}
  .types{background:#f3f1ec}
}
.types{background:#f3f1ec}

.flow-text .step{transition:none}

/* Kay 11/07: a touch darker so the white steam reads */
.types{background:#ebe6dd}
.steam-v.on{opacity:.7}

/* Kay 11/07: story copy sat at the right edge on desktop — pull it in */
@media (min-width:901px){ .flow-text .steps{padding-left:0;padding-right:10vw} .flow-text .step{max-width:520px} }

/* scene headings (Kay 11/07) — wording is a Claude draft, change freely */
.flow-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.4vw,52px);line-height:1.05;margin:0 0 26px}
.flow-text .step .label{margin-bottom:16px}
.flow li{font-size:clamp(20px,1.7vw,26px)}
/* mobile: video area full height so the cup can end at screen centre; copy sits over the bottom (Kay 11/07) */
@media (max-width:900px){
  .flow-stick{height:100vh;padding-top:104px;align-items:flex-start}
  .flow-text .steps{top:64vh;height:36vh;padding:0 16px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.92) 22%,#fff 100%);z-index:2}
  .flow-text .step{padding-top:24px}
  .flow-text h2{font-size:30px;margin-bottom:12px}
  .flow li{font-size:18px;padding:10px 0}
}
/* Kay 11/07: copy too far right on desktop; on mobile the cup should end at screen centre */
@media (min-width:901px){ .flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0} .flow-text .steps{padding-left:0;padding-right:18vw} .flow-text .step{max-width:500px} }
@media (max-width:900px){ .pot video{height:128vh;width:auto;max-width:none} .flow-stick{justify-content:center} }
/* mobile: whole pot visible with room at the sides; more breathing room everywhere (Kay 11/07) */
@media (max-width:900px){
  .pot video{height:auto;width:104%;max-width:none}
  .flow{padding:0}
  .flow-text .steps{padding:0 28px}
  .quiet{padding-left:28px;padding-right:28px;margin:0}
  .types{padding-left:28px;padding-right:28px}
  .types .cards{gap:40px 20px}
  .types .card .ph img{width:70%}
}

@media (max-width:900px){ .types .cards{grid-template-columns:1fr;gap:56px 0} .types .card .ph img{width:56%} .types .card p{font-size:16px} }

/* Kay 11/07: back to the earlier (bigger) phone size; only the end position changes */
@media (max-width:900px){ .pot video{height:92vh;width:auto;max-width:none} }

@media (max-width:900px){ .pot{width:100%} .pot video{position:relative;left:50%;transform:translateX(-50%)} }

/* mobile: pot stage must not show the cup below — clip the video area to 64vh (Kay 11/07) */
@media (max-width:900px){ .flow-stick{height:64vh;overflow:hidden} .flow-text .steps{top:64vh;height:36vh;background:#fff} }

/* mobile: cup higher, copy higher (Kay 11/07) */
@media (max-width:900px){ .flow-stick{height:56vh} .flow-text .steps{top:56vh;height:44vh} }
/* charcoal explore band (trial, Kay 11/07): text goes light with the tint */
.types{color:#fff;transition:color .4s}
.types .sec-head h2,.types .card h3{color:inherit}
.types .card p{color:rgba(255,255,255,.72)}
.types .card .btn-line{border-color:rgba(255,255,255,.7);color:#fff}
.types .card:hover .btn-line{background:#fff;color:var(--ink)}
.steam-v.on{opacity:.85}
.types:not(.dark){color:var(--ink)}
.types:not(.dark) .card p{color:var(--muted)}
.types:not(.dark) .card .btn-line{border-color:var(--ink);color:var(--ink)}
.types.dark .card .ph img{mix-blend-mode:normal;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}

/* mobile: room for the pot shadow, copy a little lower (Kay 11/07) */
@media (max-width:900px){ .flow-stick{height:66vh} .flow-text .steps{top:66vh;height:34vh} }

/* mobile: fit the copy (Shop Now was cut) */
@media (max-width:900px){ .flow-stick{height:62vh} .flow-text .steps{top:62vh;height:38vh} .flow-text .step{padding-top:14px} .flow-text .step .label{display:none} .flow-text h2{font-size:26px;margin-bottom:8px} .flow li{font-size:16px;line-height:1.3;padding:8px 0} .flow .btn-line{margin-top:12px;padding:9px 16px;font-size:11px} }

.steam-v.on{opacity:.7}

/* Kay 11/07: story copy centred */
.flow-text .step{text-align:center;align-items:center}
.flow .btn-line{align-self:center}
@media (min-width:901px){ .flow-text .steps{padding-right:0;justify-items:center} .flow-text .step{max-width:520px;margin:0 auto} }

/* mobile: soft bottom edge on the clipped video area (Kay 11/07) */
@media (max-width:900px){ .flow-stick{mask-image:linear-gradient(180deg,#000 0,#000 86%,rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 86%,rgba(0,0,0,0) 100%)} }

/* Kay 11/07: white panels showed a hard edge against the tinted page — follow the page colour */
@media (max-width:900px){ .flow-media{background:var(--page,#fff)} .flow-text .steps{background:var(--page,#fff)} }
.loader{background:#fff}

/* Kay 11/07: bigger card button, charcoal fill on hover */
.types .card .btn-line{font-size:13px;letter-spacing:.08em;padding:12px 22px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.types:not(.dark) .card:hover .btn-line{background:#2e2b28;border-color:#2e2b28;color:#fff}

/* mobile: no long blank before Explore (Kay 11/07) */
@media (max-width:900px){ .flow-text{height:230vh} .types{padding-top:40px} }

@media (max-width:900px){ .flow-text{height:200vh} }

/* Kay 11/07: tea name bigger, a bit closer to the cup */
.types .card .ph{margin-bottom:-9%}
.types .card h3{font-size:28px;font-weight:400;margin:0 0 10px}
@media (max-width:900px){ .types .card .ph{margin-bottom:-12%} .types .card h3{font-size:26px} }

.types .card .ph{margin-bottom:-4%}
@media (max-width:900px){ .types .card .ph{margin-bottom:-6%} }

/* no stray last words: balance headings and copy (Kay rule 11/07) */
h1,h2,h3,.flow li,.hero-sub,.types .card p,.flow-text h2{text-wrap:balance}
.types .card p{text-wrap:pretty}
/* Kay 11/07: hero stays put; the page slides up over it like a cover */
.hero{position:sticky;top:0;z-index:0}
.hero ~ section:not(.quotes-photo):not(.moments),.hero ~ footer{position:relative;z-index:1;background:var(--page,#fff)}
.hero ~ .types{background:transparent}
.hero ~ .quotes-photo,.hero ~ .moments{position:relative;z-index:1}

.quiet{margin:0;padding-left:32px;padding-right:32px;border-top:0}

.hero ~ .types{background:var(--page,#fff)}

/* Kay 11/07: no hard line where the page covers the hero — feathered top edge */
.quiet{position:relative}
.quiet::before{content:"";position:absolute;left:0;right:0;top:-180px;height:180px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 55%,#fff 100%);pointer-events:none}
@media (max-width:900px){ .quiet::before{top:-120px;height:120px} }

.quiet::before{top:-320px;height:320px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.35) 40%,rgba(255,255,255,.8) 75%,#fff 100%)}
@media (max-width:900px){ .quiet::before{top:-200px;height:200px} }

.hero{will-change:opacity}
.nav{will-change:background}
/* Kay 11/07: bottom photos clashed with the top — quiet testimonials on the page colour, no photos */
.quotes-quiet{background:var(--page,#fff);color:var(--ink);padding:120px 32px 110px;text-align:center;min-height:0}
.quotes-quiet .label{color:var(--muted)}
.quotes-quiet blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.4;max-width:760px;margin:0 auto;text-wrap:balance}
.quotes-quiet cite{display:block;margin-top:22px;font-style:normal;color:var(--muted)}
.quotes-quiet .quote-track{position:relative;min-height:220px}
.quotes-quiet blockquote{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity 1.4s ease}
.quotes-quiet blockquote.on{opacity:1}
.hero ~ .quotes-quiet{position:relative;z-index:1}
.news{border-top:0}
@media (max-width:900px){ .quotes-quiet{padding:80px 28px 70px} .quotes-quiet .quote-track{min-height:300px} }
/* closing: Kay's top-down teapot clip, teapot right, testimonials left (Kay 11/07) */
.closing{position:relative;z-index:1;height:min(92vh,820px);overflow:hidden;background:#fff}
.closing-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;transform:scale(1.04)}
.closing::before{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.96) 45%,rgba(255,255,255,0) 100%);z-index:1}
.closing::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0));z-index:1}
.closing-copy{position:absolute;z-index:2;left:8vw;top:50%;transform:translateY(-50%);width:min(520px,44vw);text-align:left}
.closing-copy .label{margin-bottom:26px;color:var(--muted)}
.closing-copy .quote-track{position:relative;min-height:260px;max-width:none;margin:0}
.closing-copy blockquote{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.3vw,32px);line-height:1.4;text-wrap:balance}
.closing-copy blockquote.on{opacity:1}
.closing-copy cite{display:block;margin-top:22px;font-style:normal;color:var(--muted)}
.closing-video{transform:scaleX(-1) scale(1.04)}  /* teapot to the right of frame */
@media (max-width:900px){
  .closing{height:auto}
  .closing-video{position:relative;height:62vw;object-position:50% 50%;transform:none}
  .closing::before{display:none}
  .closing::after{height:80px}
  .closing-copy{position:relative;transform:none;left:0;top:0;width:auto;padding:28px 28px 56px;text-align:center}
  .closing-copy .quote-track{min-height:300px}
}

.closing-video{object-position:22% 50%}

/* 16:9 clip already fills the box, so object-position cannot move it: shift with a transform instead */
.closing-video{transform:scaleX(-1) scale(1.18) translateX(-10%)}
.closing::before{width:66%}

/* feather only while the page is actually rising (Kay 11/07: hero bottom looked white at rest) */
.quiet::before{opacity:var(--feather,0)}
/* Kay 11/07: the quiet paragraph stays put mid-screen; the teapot section rises over it while the words fade */
.hero ~ .quiet{position:sticky;top:0;z-index:0;height:100vh;display:flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;margin:0}
.quiet p{opacity:var(--quiet,1);transform:translateY(calc((1 - var(--quiet,1)) * -24px))}
@media (max-width:900px){ .hero ~ .quiet{height:100vh} }

/* specificity fix: the generic cover rule was overriding the sticky paragraph */
.hero ~ section.quiet:not(.quotes-photo):not(.moments){position:sticky;top:0;z-index:0}
.hero ~ section.flow:not(.quotes-photo):not(.moments){z-index:2}

/* Kay 11/07: closing teapot smaller */
.closing{height:min(72vh,640px)}
.closing-video{transform:scaleX(-1) scale(0.92) translateX(-14%)}
@media (max-width:900px){ .closing{height:auto} .closing-video{height:52vw;transform:none} }

/* closing: smaller teapot, edges of the clip dissolved so no box shows */
.closing-video{transform:scaleX(-1) scale(0.8) translateX(-18%);mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 45%,rgba(0,0,0,0) 78%);-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 45%,rgba(0,0,0,0) 78%)}
.closing::before{width:60%}
@media (max-width:900px){ .closing-video{transform:none;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 50%,rgba(0,0,0,0) 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 50%,rgba(0,0,0,0) 80%)} }

.closing-video{transform:scaleX(-1) scale(0.8) translateX(-34%)}

/* Kay 11/07: un-mirror so the hand comes from the right; pot still pushed right */
.closing-video{transform:scale(0.8) translateX(34%)}
/* testimonial dots (Kay 11/07) */
.dots{display:flex;gap:12px;margin-top:28px}
.dots button{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink);background:none;padding:0;cursor:pointer;opacity:.45;transition:opacity .3s ease,transform .3s ease}
.dots button[aria-selected="true"]{background:var(--ink);opacity:1;transform:scale(1.15)}
.dots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:900px){ .dots{justify-content:center} }

/* Kay 11/07: copy and teapot both a little more toward the centre */
.closing-copy{left:15vw;width:min(520px,40vw)}
.closing-video{transform:scale(0.8) translateX(27%)}

/* dots: tiny, right under the name */
.closing-copy .quote-track{min-height:196px}
.dots{gap:9px;margin-top:4px;align-items:center}
.dots button{width:6px;height:6px;border-color:rgba(29,27,24,.5);opacity:.5}
.dots button[aria-selected="true"]{transform:none;opacity:1}
@media (max-width:900px){ .closing-copy .quote-track{min-height:250px} }

/* closing: feather the bottom edge too (Kay 11/07) */
.closing-copy{z-index:3}
.closing .fade-b{position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%);z-index:2;pointer-events:none}

/* Kay 11/07: charcoal footer, eased in */
.hero ~ footer.foot{background:#2e2b28;color:rgba(255,255,255,.78);border-top:0;padding-top:72px;padding-bottom:64px;position:relative}
.foot h4{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.foot a{color:rgba(255,255,255,.72)}
.foot a:hover{color:#fff}
.hero ~ footer.foot::before{content:"";position:absolute;left:0;right:0;top:-120px;height:120px;background:linear-gradient(180deg,rgba(46,43,40,0),rgba(46,43,40,.35) 70%,#2e2b28);pointer-events:none}
.news{position:relative;z-index:1;padding-bottom:140px}
/* footer: logo + brand line, credit row (Kay 11/07) */
.hero ~ footer.foot{grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.foot-brand img{width:180px;margin:-6px 0 18px}
.foot-brand p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);text-transform:none;letter-spacing:.02em}
.foot-base{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.5)}
.foot-base a{display:inline;padding:0;color:rgba(255,255,255,.7)}
@media (max-width:900px){ .hero ~ footer.foot{grid-template-columns:1fr 1fr;padding:56px 28px 48px} .foot-brand{grid-column:1/-1} .foot-base{flex-direction:column;gap:10px;align-items:flex-start} }

.foot-note{grid-column:1/-1;margin-top:44px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.42);text-transform:none;letter-spacing:.02em;max-width:720px}
.foot-note a{display:inline;padding:0;color:rgba(255,255,255,.6);text-decoration:underline}
.foot-base{margin-top:18px}

/* Kay 11/07: footer gradient was wrong here — plain edge */
.hero ~ footer.foot::before{display:none}
.news{padding-bottom:72px}
/* concept disclaimer with the Create Co. logo, clearly visible (Kay 11/07) */
.foot-concept{grid-column:1/-1;display:flex;align-items:center;gap:28px;margin-top:48px;padding:26px 28px;border:1px solid rgba(255,255,255,.22);border-radius:8px}
.foot-concept-logo img{width:150px;display:block}
.foot-concept p{margin:0;font-size:13px;line-height:1.65;color:rgba(255,255,255,.78);text-transform:none;letter-spacing:.02em;max-width:720px}
.foot-concept p strong{color:#fff;font-weight:400}
.foot-concept p a{display:inline;padding:0;color:#fff;text-decoration:underline}
@media (max-width:900px){ .foot-concept{flex-direction:column;align-items:flex-start;gap:16px;padding:22px} .foot-concept-logo img{width:130px} }

.foot-concept p{max-width:860px}
.foot-concept p br{display:block;content:"";margin-top:8px}

/* mobile closing: later desktop rules had leaked in (Kay 11/07) */
@media (max-width:900px){
  .closing-copy{position:relative;left:0;top:0;transform:none;width:auto;padding:16px 28px 48px;text-align:center}
  .closing-copy blockquote{font-size:22px;line-height:1.45}
  .closing-copy .quote-track{min-height:230px}
  .dots{justify-content:center;margin-top:0}
  .closing-video{height:56vw;transform:none}
  .closing .fade-b{display:none}
}

/* mobile: testimonials first, teapot clip below (Kay 11/07) */
@media (max-width:900px){ .closing{display:flex;flex-direction:column} .closing-copy{order:1;padding:48px 28px 8px} .closing-video{order:2;height:60vw} .closing .fade-b{order:3} }
/* touch: card passing the middle gets the filled button */
.types:not(.dark) .card.hot .btn-line{background:#2e2b28;border-color:#2e2b28;color:#fff}

/* iPad (600–900px): products in two columns (Kay 11/07) */
@media (min-width:600px) and (max-width:900px){ .types .cards{grid-template-columns:1fr 1fr;gap:48px 28px} .types .card .ph img{width:64%} }

/* Kay 11/07: no shadow under menu text, anywhere */
.nav .nav-grid a,.nav:not(.solid) .nav-grid a,.nav.scrolled .nav-grid a,.hero h1,.hero-sub{text-shadow:none !important}

/* Kay 11/07: contact line in the footer brand block; slower story on phones */
.hero ~ footer.foot{grid-template-columns:1.3fr repeat(3,1fr)}
.foot-contact{margin-top:18px}
.foot .foot-contact a{font-family:var(--serif);font-size:20px;letter-spacing:0;text-transform:none;color:#fff;padding:3px 0}
@media (max-width:900px){ .hero ~ footer.foot{grid-template-columns:1fr 1fr} .flow-text{height:560vh} }

/* Kay 11/07: closing clip removed (lighter load); testimonials centred */
.closing{height:auto;display:block;padding:120px 28px 110px}
.closing::before{display:none}
.closing-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:640px;margin:0 auto;padding:0;text-align:center}
.closing-copy .dots{justify-content:center}
@media (max-width:900px){ .closing{padding:72px 28px 56px} .closing-copy{padding:0} }

/* Kay 11/07: calm photo behind the testimonials, white copy, feathered top/bottom */
.hero ~ section.closing:not(.quotes-photo):not(.moments){padding:200px 28px 200px;background:linear-gradient(rgba(38,30,22,.46),rgba(38,30,22,.46)),url(img/closing_field.jpg?v=1) 55% 60%/cover}
.closing::after{background:linear-gradient(180deg,var(--page,#fff) 0,transparent 100%)}
.closing .fade-b{display:block;height:220px;background:linear-gradient(180deg,transparent,#fff 92%)}
.closing-copy{color:#fff}
.closing-copy .label,.closing-copy cite{color:rgba(255,255,255,.82)}
.closing-copy .dots button{border-color:#fff}
.closing-copy .dots button[aria-selected="true"]{background:#fff}
@media (max-width:900px){ .hero ~ section.closing:not(.quotes-photo):not(.moments){padding:170px 28px 170px;background-position:60% 60%} .closing::after,.closing .fade-b{height:150px} }

/* Kay 11/07: photo seeps out of the product tint; longer, eased top feather */
.closing::after{height:340px;background:linear-gradient(180deg,var(--page,#fff) 0,var(--page,#fff) 12%,color-mix(in srgb,var(--page,#fff) 70%,transparent) 40%,color-mix(in srgb,var(--page,#fff) 30%,transparent) 70%,transparent 100%)}
.closing .fade-b{height:300px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--page,#fff) 60%,transparent) 55%,var(--page,#fff) 92%)}
.hero ~ section.closing:not(.quotes-photo):not(.moments){padding:280px 28px 260px}
@media (max-width:900px){ .closing::after{height:220px} .closing .fade-b{height:200px} .hero ~ section.closing:not(.quotes-photo):not(.moments){padding:210px 28px 200px} }

/* Kay 11/07: photo bottom cut plainly onto the footer; newsletter lives in the footer */
.closing .fade-b{display:none}
.hero ~ footer.foot::before{display:none}
.hero ~ section.closing:not(.quotes-photo):not(.moments){padding-bottom:200px}
.hero ~ footer.foot{grid-template-columns:1.3fr repeat(3,1fr) 1.5fr}
.foot-news .news-row{display:flex;gap:12px;margin-top:4px}
.foot-news input{flex:1;min-width:0;border:0;border-bottom:1px solid rgba(255,255,255,.5);background:none;color:#fff;font-family:var(--sans);font-size:14px;padding:10px 0;outline:none}
.foot-news input::placeholder{color:rgba(255,255,255,.55)}
.foot-news input:focus{border-bottom-color:#fff}
.foot-news button{border:1px solid rgba(255,255,255,.7);background:none;color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 22px;cursor:pointer;transition:background .3s ease,color .3s ease}
.foot-news button:hover{background:#fff;color:#2e2b28}
@media (max-width:1100px) and (min-width:901px){ .hero ~ footer.foot{grid-template-columns:1.3fr repeat(3,1fr)} .foot-news{grid-column:1/-1} }
@media (max-width:900px){ .hero ~ footer.foot{grid-template-columns:1fr 1fr} .foot-news{grid-column:1/-1} .hero ~ section.closing:not(.quotes-photo):not(.moments){padding-bottom:150px} }

/* Kay 11/07: cart last in the menu with an item count (concept: always 0) */
.nav-cart{display:inline-flex;align-items:center;gap:7px}
.cart-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#b38a3a;color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:0;line-height:1}
@media (max-width:900px){ .nav-cart{gap:10px} .cart-count{min-width:24px;height:24px;font-size:13px} }
.closing-copy .quote-track{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.closing-copy .quote-track{touch-action:pan-y}

/* Kay 11/07: phones must stop at the footer. No rubber-band past it, and if iOS still bounces, the gap is footer charcoal, not white */
html{background:#2e2b28}  /* overscroll-behavior removed: it killed pull-to-refresh (Kay 11/07) */
body{min-height:100%}

/* Kay 11/07: newsletter first in the footer, full-width row */
.hero ~ footer.foot{grid-template-columns:1.3fr repeat(3,1fr)}
.foot-news{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:48px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-news h4{border:0;margin:0;padding:0 0 12px;font-family:var(--serif);font-size:30px;letter-spacing:0;text-transform:none;font-weight:400}
.foot-news .news-row{flex:0 1 520px;margin:0}
@media (max-width:900px){ .hero ~ footer.foot{grid-template-columns:1fr 1fr} .foot-news{flex-direction:column;align-items:stretch;gap:16px;padding-bottom:36px} .foot-news h4{font-size:24px;padding:0} .foot-news .news-row{flex:none} }
/* Kay 11/07: footer small text was hard to read */
.foot a{color:rgba(255,255,255,.88);font-size:14px}
.foot-brand p{color:rgba(255,255,255,.82);font-size:14px}
.foot-news input::placeholder{color:rgba(255,255,255,.75)}
.foot-news input{border-bottom-color:rgba(255,255,255,.75);font-size:15px}
.foot-news button{border-color:#fff}
.foot-base{color:rgba(255,255,255,.7)}
.foot-base a{color:rgba(255,255,255,.85)}
.foot-news{align-items:center}
/* Kay 11/07: loading screen sits above the menu (the menu veil showed as a dark band) */
.loader{z-index:2000}
.loader.done{transition:opacity .6s ease}
/* Kay 11/07: iPad footer links in one row of three */
@media (min-width:601px) and (max-width:900px){ .hero ~ footer.foot{grid-template-columns:repeat(3,1fr)} .foot-brand,.foot-news{grid-column:1/-1} }
@media (max-width:900px){ .foot-news{align-items:stretch} }
/* Kay 11/07: no empty gap after the story — Explore is already halfway up the screen when the scene ends */
@media (min-width:901px){ .hero ~ .types{margin-top:-60vh} }
@media (min-width:901px){ .hero ~ section.types:not(.quotes-photo):not(.moments){z-index:3} .hero ~ section.types::before{content:"";position:absolute;left:0;right:0;top:-280px;height:280px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--page,#fff) 55%,transparent) 50%,var(--page,#fff));pointer-events:none} }
/* Kay 11/07: contact in the plain sans (serif numerals bounced); on iPad phone/email sit right of the logo */
.foot .foot-contact a{font-family:var(--sans);font-size:17px;letter-spacing:.02em;font-weight:400}
@media (min-width:601px) and (max-width:900px){
  .foot-brand{display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:end}
  .foot-brand img,.foot-brand p{grid-column:1}
  .foot-brand .foot-contact{grid-column:2;grid-row:1/3;margin:0;text-align:right;align-self:center}
}
/* Kay 11/07: phones get the three link columns too */
@media (max-width:600px){ .hero ~ footer.foot{grid-template-columns:repeat(3,1fr);column-gap:16px} .foot-brand,.foot-news{grid-column:1/-1} .foot a{font-size:13px;letter-spacing:.02em} .foot h4{letter-spacing:.06em} }
/* Kay 11/07: iPad contact lines up with the Follow column, not the far edge */
@media (min-width:601px) and (max-width:900px){
  .foot-brand{grid-template-columns:subgrid}
  .foot-brand img,.foot-brand p{grid-column:1/3}
  .foot-brand .foot-contact{grid-column:3;text-align:left}
}
/* Kay 11/07: iPad mini Safari came out one column (narrower than 600px) — two columns from 520px */
@media (min-width:520px) and (max-width:900px){ .types .cards{grid-template-columns:1fr 1fr;gap:48px 24px} .types .card .ph img{width:64%} }
/* Kay 11/07: iPad two-column products pulled toward the centre, closer together */
@media (min-width:520px) and (max-width:900px){ .hero ~ .types{padding-left:9vw;padding-right:9vw} .types .cards{column-gap:20px} }