/* giga.ai/doordash compiled CSS (Tailwind v4 + site CSS), vars renamed --g-*, scoped by kit/scope.mjs, purged to what body.html uses. Built by build/css.mjs, do not hand-edit. */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.pg-counter-culture-coffee *, .pg-counter-culture-coffee, .pg-counter-culture-coffee :before, .pg-counter-culture-coffee :after, .pg-counter-culture-coffee ::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-divide-x-reverse:0;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{.pg-counter-culture-coffee, .pg-counter-culture-coffee :host{--g-font-sans:var(--g-font-sans-source), var(--g-font-geist-source), "Giga Sans Text Trial 400", "Geist", ui-sans-serif, system-ui, sans-serif;--g-color-black:#000;--g-spacing:.25rem;--g-text-sm:.875rem;--g-text-sm--line-height:calc(1.25 / .875);--g-text-2xl:1.5rem;--g-text-2xl--line-height:calc(2 / 1.5);--g-font-weight-normal:400;--g-font-weight-medium:500;--g-leading-snug:1.375;--g-leading-normal:1.5;--g-radius-md:12px;--g-default-transition-duration:.15s;--g-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--g-default-font-family:var(--g-font-sans);--g-color-background:var(--g-bg);--g-color-foreground:var(--g-fg);--g-font-geist:var(--g-font-geist-source), "Geist", ui-sans-serif, system-ui, sans-serif;--g-font-display:var(--g-font-pixel-line);--g-font-brand-display:var(--g-font-brand-display-source), "Giga Sans Display Trial 400", ui-sans-serif, system-ui, sans-serif;--g-font-pixel-line:var(--g-font-pixel-line-source), "Geist Pixel Line", ui-monospace, monospace;--g-text-product-hero:clamp(2.75rem, 5.5vw, 4rem);--g-text-product-hero--line-height:1.1;--g-tracking-display:-.03em;--g-container-section:1600px}}@layer base{.pg-counter-culture-coffee *, .pg-counter-culture-coffee, .pg-counter-culture-coffee :after, .pg-counter-culture-coffee :before, .pg-counter-culture-coffee ::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-counter-culture-coffee ::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}.pg-counter-culture-coffee, .pg-counter-culture-coffee :host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--g-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--g-default-font-feature-settings,normal);font-variation-settings:var(--g-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}.pg-counter-culture-coffee h1, .pg-counter-culture-coffee h2{font-size:inherit;font-weight:inherit}.pg-counter-culture-coffee a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.pg-counter-culture-coffee strong{font-weight:bolder}.pg-counter-culture-coffee :-moz-focusring{outline:auto}.pg-counter-culture-coffee ul{list-style:none}.pg-counter-culture-coffee img, .pg-counter-culture-coffee svg, .pg-counter-culture-coffee canvas{vertical-align:middle;display:block}.pg-counter-culture-coffee img{max-width:100%;height:auto}.pg-counter-culture-coffee button, .pg-counter-culture-coffee input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.pg-counter-culture-coffee ::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}.pg-counter-culture-coffee ::file-selector-button{margin-inline-end:4px}.pg-counter-culture-coffee ::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){.pg-counter-culture-coffee ::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){.pg-counter-culture-coffee ::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}.pg-counter-culture-coffee ::-webkit-search-decoration{-webkit-appearance:none}.pg-counter-culture-coffee ::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}.pg-counter-culture-coffee ::-webkit-datetime-edit{display:inline-flex}.pg-counter-culture-coffee ::-webkit-datetime-edit-fields-wrapper{padding:0}.pg-counter-culture-coffee ::-webkit-datetime-edit{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-year-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-month-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-day-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-hour-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-minute-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-second-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-millisecond-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-datetime-edit-meridiem-field{padding-block:0}.pg-counter-culture-coffee ::-webkit-calendar-picker-indicator{line-height:1}.pg-counter-culture-coffee :-moz-ui-invalid{box-shadow:none}.pg-counter-culture-coffee button{appearance:button}.pg-counter-culture-coffee ::file-selector-button{appearance:button}.pg-counter-culture-coffee ::-webkit-inner-spin-button{height:auto}.pg-counter-culture-coffee ::-webkit-outer-spin-button{height:auto}}@layer components;.pg-counter-culture-coffee.pg-counter-culture-coffee .sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.pg-counter-culture-coffee.pg-counter-culture-coffee .relative{position:relative}.pg-counter-culture-coffee.pg-counter-culture-coffee .mx-auto{margin-inline:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .my-12{margin-block:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .-mt-\[74px\]{margin-top:-74px}.pg-counter-culture-coffee.pg-counter-culture-coffee .mt-5{margin-top:calc(var(--g-spacing) * 5)}.pg-counter-culture-coffee.pg-counter-culture-coffee .mt-16{margin-top:calc(var(--g-spacing) * 16)}.pg-counter-culture-coffee.pg-counter-culture-coffee .mt-\[10px\]{margin-top:10px}.pg-counter-culture-coffee.pg-counter-culture-coffee .mb-12{margin-bottom:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.pg-counter-culture-coffee.pg-counter-culture-coffee .scrollbar-none{scrollbar-width:none;-ms-overflow-style:none}.pg-counter-culture-coffee.pg-counter-culture-coffee .scrollbar-none::-webkit-scrollbar{display:none}.pg-counter-culture-coffee.pg-counter-culture-coffee .block{display:block}.pg-counter-culture-coffee.pg-counter-culture-coffee .flex{display:flex}.pg-counter-culture-coffee.pg-counter-culture-coffee .grid{display:grid}.pg-counter-culture-coffee.pg-counter-culture-coffee .hidden{display:none}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-5{height:calc(var(--g-spacing) * 5)}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-\[22px\]{height:22px}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-\[50px\]{height:50px}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-\[394px\]{height:394px}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-full{height:100%}.pg-counter-culture-coffee.pg-counter-culture-coffee .h-px{height:1px}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-h-\[2lh\]{min-height:2lh}.pg-counter-culture-coffee.pg-counter-culture-coffee .w-\[300px\]{width:300px}.pg-counter-culture-coffee.pg-counter-culture-coffee .w-auto{width:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .w-full{width:100%}.pg-counter-culture-coffee.pg-counter-culture-coffee .w-px{width:1px}.pg-counter-culture-coffee.pg-counter-culture-coffee .max-w-\[590px\]{max-width:590px}.pg-counter-culture-coffee.pg-counter-culture-coffee .max-w-section{max-width:var(--g-container-section)}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-w-0{min-width:calc(var(--g-spacing) * 0)}.pg-counter-culture-coffee.pg-counter-culture-coffee .auto-cols-max{grid-auto-columns:max-content}.pg-counter-culture-coffee.pg-counter-culture-coffee .grid-flow-col{grid-auto-flow:column}.pg-counter-culture-coffee.pg-counter-culture-coffee .flex-col{flex-direction:column}.pg-counter-culture-coffee.pg-counter-culture-coffee .items-center{align-items:center}.pg-counter-culture-coffee.pg-counter-culture-coffee .items-start{align-items:flex-start}.pg-counter-culture-coffee.pg-counter-culture-coffee .justify-center{justify-content:center}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-3{gap:calc(var(--g-spacing) * 3)}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-10{gap:calc(var(--g-spacing) * 10)}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-12{gap:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-20{gap:calc(var(--g-spacing) * 20)}.pg-counter-culture-coffee.pg-counter-culture-coffee :where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--g-spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--g-spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-x-\[21px\]{column-gap:21px}.pg-counter-culture-coffee.pg-counter-culture-coffee .gap-y-10{row-gap:calc(var(--g-spacing) * 10)}.pg-counter-culture-coffee.pg-counter-culture-coffee .truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.pg-counter-culture-coffee.pg-counter-culture-coffee .overflow-hidden{overflow:hidden}.pg-counter-culture-coffee.pg-counter-culture-coffee .overflow-x-auto{overflow-x:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .rounded-md{border-radius:var(--g-radius-md)}.pg-counter-culture-coffee.pg-counter-culture-coffee .border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.pg-counter-culture-coffee.pg-counter-culture-coffee .border-border{border-color:var(--g-border)}.pg-counter-culture-coffee.pg-counter-culture-coffee .bg-background{background-color:var(--g-bg)}.pg-counter-culture-coffee.pg-counter-culture-coffee .bg-foreground\/10{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-counter-culture-coffee.pg-counter-culture-coffee .bg-foreground\/10{background-color:color-mix(in oklab, var(--g-fg) 10%, transparent)}}.pg-counter-culture-coffee.pg-counter-culture-coffee .bg-foreground\/15{background-color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-counter-culture-coffee.pg-counter-culture-coffee .bg-foreground\/15{background-color:color-mix(in oklab, var(--g-fg) 15%, transparent)}}.pg-counter-culture-coffee.pg-counter-culture-coffee .mask-\[linear-gradient\(to_right\,black_85\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000 100%);mask-image:linear-gradient(90deg,#000 85%,#0000 100%)}.pg-counter-culture-coffee.pg-counter-culture-coffee .object-cover{object-fit:cover}.pg-counter-culture-coffee.pg-counter-culture-coffee .px-3{padding-inline:calc(var(--g-spacing) * 3)}.pg-counter-culture-coffee.pg-counter-culture-coffee .px-5{padding-inline:calc(var(--g-spacing) * 5)}.pg-counter-culture-coffee.pg-counter-culture-coffee .py-12{padding-block:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .pt-12{padding-top:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .pt-14{padding-top:calc(var(--g-spacing) * 14)}.pg-counter-culture-coffee.pg-counter-culture-coffee .pt-\[74px\]{padding-top:74px}.pg-counter-culture-coffee.pg-counter-culture-coffee .pb-12{padding-bottom:calc(var(--g-spacing) * 12)}.pg-counter-culture-coffee.pg-counter-culture-coffee .pl-5{padding-left:calc(var(--g-spacing) * 5)}.pg-counter-culture-coffee.pg-counter-culture-coffee .font-brand-display{font-family:var(--g-font-brand-display)}.pg-counter-culture-coffee.pg-counter-culture-coffee .font-display{font-family:var(--g-font-display)}.pg-counter-culture-coffee.pg-counter-culture-coffee .font-geist{font-family:var(--g-font-geist)}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-2xl{font-size:var(--g-text-2xl);line-height:var(--tw-leading,var(--g-text-2xl--line-height))}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-product-hero{font-size:var(--g-text-product-hero);line-height:var(--tw-leading,var(--g-text-product-hero--line-height))}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-sm{font-size:var(--g-text-sm);line-height:var(--tw-leading,var(--g-text-sm--line-height))}.pg-counter-culture-coffee.pg-counter-culture-coffee .leading-none{--tw-leading:1;line-height:1}.pg-counter-culture-coffee.pg-counter-culture-coffee .leading-normal{--tw-leading:var(--g-leading-normal);line-height:var(--g-leading-normal)}.pg-counter-culture-coffee.pg-counter-culture-coffee .leading-snug{--tw-leading:var(--g-leading-snug);line-height:var(--g-leading-snug)}.pg-counter-culture-coffee.pg-counter-culture-coffee .font-medium{--tw-font-weight:var(--g-font-weight-medium);font-weight:var(--g-font-weight-medium)}.pg-counter-culture-coffee.pg-counter-culture-coffee .font-normal{--tw-font-weight:var(--g-font-weight-normal);font-weight:var(--g-font-weight-normal)}.pg-counter-culture-coffee.pg-counter-culture-coffee .tracking-display{--tw-tracking:var(--g-tracking-display);letter-spacing:var(--g-tracking-display)}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-black{color:var(--g-color-black)}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground{color:var(--g-fg)}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/50{color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/50{color:color-mix(in oklab, var(--g-fg) 50%, transparent)}}.pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/55{color:var(--g-fg)}@supports (color:color-mix(in lab, red, red)){.pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/55{color:color-mix(in oklab, var(--g-fg) 55%, transparent)}}.pg-counter-culture-coffee.pg-counter-culture-coffee .transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--g-default-transition-timing-function));transition-duration:var(--tw-duration,var(--g-default-transition-duration))}.pg-counter-culture-coffee.pg-counter-culture-coffee .\[-webkit-mask-image\:linear-gradient\(to_right\,black_85\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000 100%)}@media not all and (min-width:810px){.pg-counter-culture-coffee.pg-counter-culture-coffee .max-\[810px\]\:flex-col{flex-direction:column}}@media (min-width:810px){.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:mt-\[100px\]{margin-top:100px}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:line-clamp-none{-webkit-line-clamp:unset;-webkit-box-orient:horizontal;display:block;overflow:visible}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:flex-row{flex-direction:row}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:items-start{align-items:flex-start}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:justify-between{justify-content:space-between}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:gap-x-10{column-gap:calc(var(--g-spacing) * 10)}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:overflow-visible{overflow:visible}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:mask-none{-webkit-mask-image:none;mask-image:none}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:px-11{padding-inline:calc(var(--g-spacing) * 11)}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:\!pr-0{padding-right:calc(var(--g-spacing) * 0)!important}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:pl-2{padding-left:calc(var(--g-spacing) * 2)}.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[810px\]\:\[-webkit-mask-image\:none\]{-webkit-mask-image:none}}@media (min-width:1680px){.pg-counter-culture-coffee.pg-counter-culture-coffee .min-\[1680px\]\:px-5{padding-inline:calc(var(--g-spacing) * 5)}}@media (min-width:48rem){.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:mx-auto{margin-inline:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:mt-20{margin-top:calc(var(--g-spacing) * 20)}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:aspect-\[1325\/750\]{aspect-ratio:1325/750}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:h-auto{height:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:justify-center{justify-content:center}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-counter-culture-coffee.pg-counter-culture-coffee .md\:text-center{text-align:center}}@media (min-width:64rem){.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:sticky{position:sticky}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:top-20{top:calc(var(--g-spacing) * 20)}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:mt-\[100px\]{margin-top:100px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:block{display:block}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:flex{display:flex}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:hidden{display:none}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:aspect-auto{aspect-ratio:auto}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:h-\[498px\]{height:498px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:w-\[240px\]{width:240px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:min-w-0{min-width:calc(var(--g-spacing) * 0)}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:flex-1{flex:1}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:shrink-0{flex-shrink:0}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:flex-col{flex-direction:column}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:flex-row{flex-direction:row}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:items-start{align-items:flex-start}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:justify-center{justify-content:center}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:gap-25{gap:calc(var(--g-spacing) * 25)}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pt-20{padding-top:calc(var(--g-spacing) * 20)}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pt-\[56px\]{padding-top:56px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pt-\[95px\]{padding-top:95px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pt-\[310\]{padding-top:310px}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pb-15{padding-bottom:calc(var(--g-spacing) * 15)}.pg-counter-culture-coffee.pg-counter-culture-coffee .lg\:pb-\[120px\]{padding-bottom:120px}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}.pg-counter-culture-coffee{--g-bg:#fff;--g-fg:#000;--g-border:#0000001a;--g-accent-orange:#ef5a00;--g-ring:#d14e00;--g-selection-bg:#ef5a0038}@supports (color:lab(0% 0 0)){.pg-counter-culture-coffee{--g-bg:lab(100% 0 0);--g-fg:lab(0% 0 0);--g-border:lab(0% 0 0/.1)}}.pg-counter-culture-coffee [data-theme=dark]{--g-bg:#0f0d0d;--g-fg:#fff;--g-border:#ffffff14;--g-ring:var(--g-accent-orange);--g-selection-bg:#ef5a0047}@supports (color:lab(0% 0 0)){.pg-counter-culture-coffee [data-theme=dark]{--g-bg:lab(3.8965% .549272 .354368);--g-fg:lab(100% 0 0);--g-border:lab(100% 0 0/.08)}}.pg-counter-culture-coffee{height:100%;overflow-x:clip}.pg-counter-culture-coffee{background:var(--g-color-background);color:var(--g-color-foreground);font-family:var(--g-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;text-wrap:pretty;overflow:clip visible!important}.pg-counter-culture-coffee h1, .pg-counter-culture-coffee h2, .pg-counter-culture-coffee :is(h1,h2).font-display{font-family:var(--g-font-pixel-line);font-weight:400}.pg-counter-culture-coffee *, .pg-counter-culture-coffee, .pg-counter-culture-coffee :before, .pg-counter-culture-coffee :after{outline-color:var(--g-focus-ring-color,var(--g-ring))}.pg-counter-culture-coffee :focus-visible{outline:2px solid var(--g-focus-ring-color,var(--g-ring));outline-offset:2px}.pg-counter-culture-coffee ::selection{background:var(--g-selection-bg)}@media (prefers-reduced-motion:reduce){.pg-counter-culture-coffee *, .pg-counter-culture-coffee, .pg-counter-culture-coffee :before, .pg-counter-culture-coffee :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.pg-counter-culture-coffee .case-study-article{font-family:var(--g-font-geist);color:#666;letter-spacing:-.02em;font-size:16px;line-height:28.8px}.pg-counter-culture-coffee .case-study-article>:first-child{margin-top:0}.pg-counter-culture-coffee .case-study-article p, .pg-counter-culture-coffee .case-study-article ul{margin-top:20px}.pg-counter-culture-coffee .case-study-article ul{padding-left:1.5rem}.pg-counter-culture-coffee .case-study-article ul{list-style:outside}.pg-counter-culture-coffee .case-study-article li{margin-top:8px}.pg-counter-culture-coffee .case-study-article h2{font-family:var(--g-font-display);letter-spacing:-.04em;color:var(--g-fg);margin-top:72px;margin-bottom:20px;scroll-margin-top:90px;font-size:32px;font-weight:400;line-height:44.8px}.pg-counter-culture-coffee .case-study-article strong{color:inherit;font-weight:600}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0} /* ===== Gnar skin (build/skin.css) ===== */ /* skin.css — the Gnar skin on giga's chassis. Appended unlayered after giga's scoped CSS by build/css.mjs, so it wins over giga's @layer rules. It changes ONLY what BRAND-DIALECT.md puts on the keep list: font families, weights and tracking, the size ladder, text and ground colours, the accent, buttons and the eyebrow. Layout, spacing, line heights, radii, borders and motion stay giga's. giga's own dark theme ([data-theme=dark] on the wrapper, set by port.mjs) already uses the homepage's ground #0f0d0d and white ink; the variables below pin the rest to the kit. */ /* ---- 1. theme variables → kit tokens */ .pg-counter-culture-coffee.pg-counter-culture-coffee [data-theme=dark] { --g-bg: var(--bg); --g-fg: var(--fg); --g-border: var(--line); --g-surface: var(--surface-1); --g-accent-orange: var(--accent); --g-button-bg: var(--accent); --g-button-bg-hover: var(--accent-hover); --g-font-geist-source: var(--font-sans); --g-font-sans-source: var(--font-sans); --g-font-mono-source: var(--font-mono); --g-font-pixel-line-source: var(--font-pixel); --g-font-brand-display-source: var(--font-sans); --g-font-display: var(--font-sans); /* giga sets every heading in its pixel face; Gnar headings are Geist 600 */ --g-tracking-display: var(--display-ls); /* -0.03em, the homepage display tracking */ --g-text-product-hero: clamp(45.24px, 5.5vw, 64px); /* giga clamp(44px,5.5vw,64px) moved onto the ladder: 45.24 @390, 64 @1440 */ --g-text-cta: 39.91px; /* giga 40px @390 → ladder 39.91 (0.09px off the donor) */ color: var(--fg); background-color: var(--bg); } /* The donor wrapper clears giga's own chrome: a 32px announcement bar + a 74px fixed header (106px). The chrome is swapped for the kit's, which has no announcement bar, so the offset is the kit's own clearance token (--nav-clear, 76 desktop / 56 phones). giga's 95px/48px gap from the chrome to the logo row is kept. Checkpoint 3 (DECISIONS D14): the 106px copy of giga's chrome pushed the proof row below the fold at 1300x658. */ .pg-counter-culture-coffee.pg-counter-culture-coffee.pg-counter-culture-coffee > [data-theme=dark] { margin-top: 0; padding-top: var(--nav-clear); } /* ---- 2. type voice: Geist 600 headings, sentence case, the homepage's tracking */ .pg-counter-culture-coffee.pg-counter-culture-coffee .font-display { font-family: var(--font-sans); font-weight: 600; } .pg-counter-culture-coffee.pg-counter-culture-coffee h1.text-product-hero { letter-spacing: var(--display-ls); color: var(--fg); text-wrap: balance; } /* V15, Evan: "4 lines… it should be like one or two". giga's 590px cap stacked Gnar's 10-word live title 4 high. Wide enough for 2 balanced lines at 64px (the whole title is 1847px on one line); phones step down the 390 ladder to 36px: 4 lines at 360–390 (was 5), 3 at 430 (measured; every phone step from 36 up gives 4+, and 3 needs the 24px subhead size). */ @media (min-width: 810px) { .pg-counter-culture-coffee.pg-counter-culture-coffee h1.text-product-hero { max-width: 1040px; } } @media (max-width: 809.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee h1.text-product-hero { font-size: 36px; line-height: 1.1; } } .pg-counter-culture-coffee.pg-counter-culture-coffee h1 .k-px { font-size: 1em; letter-spacing: -0.01em; font-weight: 400; } /* one pixel word, as the homepage's "legacy"; 1em keeps it on the ladder */ .pg-counter-culture-coffee.pg-counter-culture-coffee .text-cta { letter-spacing: var(--h2-ls); color: var(--fg); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-program { font-family: var(--font-sans); font-size: var(--h4); font-weight: var(--h4-w); letter-spacing: -0.01em; line-height: 24px; color: var(--fg); } /* article: giga 32px pixel headings → Geist 600 on the card-title ladder (30 @1440, 24 @390); giga's 44.8px line height, margins and scroll margin stay */ .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article { color: var(--fg-body); letter-spacing: 0; /* body carries no tracking on the homepage (giga -0.02em) */ } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article h2, .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article h3 { font-family: var(--font-sans); font-weight: var(--h3-w); font-size: 24px; letter-spacing: var(--h3-ls); color: var(--fg); line-height: 1.4; /* giga's 44.8px is 1.4 x its 32px; on phones the ladder puts the heading at 24px, so the ratio carries, not the px (44.8 at 24px read loose on two-line headings) */ } @media (min-width: 810px) { .pg-counter-culture-coffee.pg-counter-culture-coffee [data-theme=dark] { --g-text-cta: var(--h2); } /* giga 60px @≥810 → the homepage section heading (52 @1440); at 64 the Gnar line wraps to 4 lines in giga's 620px column */ } @media (min-width: 810px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article h2, .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article h3 { font-size: 30px; } /* giga's 1.4 ratio carries at every width (rhythm-check, V9: 44.8px at 30px was 1.49) */ } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article strong { color: var(--fg); } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; transition: color var(--dur) var(--ease-out); } @media (hover: hover) { .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article a:hover { color: var(--accent); } } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article ul li::marker, .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article ol li::marker { color: var(--fg-caption); } /* ---- 3. text colours: giga's greys → the homepage's whites */ .pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/50 { color: var(--fg-caption); } .pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/55 { color: var(--fg-body); } .pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/60 { color: var(--fg-caption); } .pg-counter-culture-coffee.pg-counter-culture-coffee .text-foreground\/80 { color: rgba(255, 255, 255, .82); } /* quote text, BRAND-DIALECT §2 (.82) */ .pg-counter-culture-coffee.pg-counter-culture-coffee .text-black { color: var(--fg); } .pg-counter-culture-coffee.pg-counter-culture-coffee .text-\[rgb\(150\,150\,150\)\] { color: var(--fg-small); } /* ---- 4. contents rail: giga's white-on-white hover plate reads as a text change only; so does the clone's */ @media (hover: hover) { .pg-counter-culture-coffee.pg-counter-culture-coffee nav[aria-label="Table of contents"] a:hover { background-color: transparent; color: var(--fg); } } .pg-counter-culture-coffee.pg-counter-culture-coffee nav[aria-label="Table of contents"] a[aria-current="location"] { color: var(--fg); } /* hero stats: giga's columns are auto-cols-max (as wide as their text) and its labels carry line-clamp-2. Gnar's labels are longer, so they take giga's widest label width (187px) and wrap to the two lines giga allows. */ .pg-counter-culture-coffee.pg-counter-culture-coffee ul.grid > li > p { max-width: 187px; text-wrap: balance; } /* V15, Evan: no grey lines between the stats. The rule goes transparent so giga's spacing stays. */ .pg-counter-culture-coffee.pg-counter-culture-coffee ul.grid > li { border-left-color: transparent; } /* refactoring-ui (V4): the value outranks its label by weight too, not only colour. Geist 500 is on the homepage's weight list; size and line stay giga's. */ .pg-counter-culture-coffee.pg-counter-culture-coffee ul.grid > li > p:first-of-type { font-weight: 500; } /* ---- images. The hero is the rebuilt Property Tax-Aide tools (the service itself, as giga's hero is a delivery happening). The screen composite has its own dark margins, so it sits on the plate, anchored left on phones where giga's frame turns portrait. The article photo takes giga's own portrait treatment (its headshot is grayscale-100) so the source's blue duotone doesn't fight the one-accent palette. */ .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article img { filter: none; } /* the tools composite at giga's h-auto image module: 672x231, sharp at 2x */ /* giga's in-body image frame is 16:9 (its delivery photo is 1696x954); the Gnar photo is 4:3, so it takes giga's frame shape with a cover crop (checkpoint 2, Claude Opus clone judge: "458x257 (wide) in DONOR … 458x343 in CLONE") */ /* a heading that receives focus from the contents rail shows no ring (it isn't a control); the scroll is the cue */ .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article h2[tabindex="-1"]:focus { outline: none; } /* the phone stats scroller, when focusable: the kit's ring (2px orange, 2px offset) */ .pg-counter-culture-coffee.pg-counter-culture-coffee [role="region"][tabindex="0"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* ---- hero image (V13, after Evan's "looks broken"). Variant 'photo': giga's own device, a person in the rounded frame, full-bleed cover, no plate, graded with giga's portrait treatment (grayscale) and set down a touch into the ground. Variant 'screen': one tools screen cropped tight (no margins), cover. */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-hero--photo img { object-fit: cover; object-position: 30% 100%; filter: grayscale(1) brightness(.88); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-hero--screen img { object-fit: cover; object-position: 50% 0%; } /* With the quote shown once (in the card: Pete, Mike and Nick all asked for one copy), the stats are the row's only child. Centred under the centred headline, the hero reads as one column: lockup, headline, proof, tools. (Pinned right, as in V12, it looked like a column had failed to load.) */ @media (min-width: 600px) { .pg-counter-culture-coffee.pg-counter-culture-coffee article > div:first-child .overflow-x-auto:only-child { margin-inline: auto; -webkit-mask-image: none; mask-image: none; } } /* the row fits whole from 600, so giga's swipe-hint fade (which dimmed the third stat) goes */ /* from 600 the three stats fit on one row, so they centre under the headline on tablets too (V17) */ /* ---- hero mockup (V13). giga's rounded frame on Gnar's plate; the two rebuilt tools as windows, each labelled in the homepage's mono caps. A window's width never exceeds half its file's width (919/950px), so it stays sharp at 2x. */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-hero--mock { /* V15: no box around the windows; they and their shadows carry the image. With the plate gone, giga's fixed 498px frame left ~50px of nothing above the windows and ~140px below, so the frame now hugs them: its height is the second window's top offset + its title bar + its screen (950x678) + borders. Shadows show past the edge. */ --w: min(455px, calc((100vw - 88px) * .45)); /* .45 (was .38): 834 gets 336px windows, not 281 (smaller than 768's 380); 1300+ unchanged at 455 */ background-color: transparent; overflow: visible; height: calc(78px + var(--w) * .7137) !important; aspect-ratio: auto !important; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-mock { position: absolute; inset: 0; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window { position: absolute; margin: 0; width: var(--w); border-radius: 10px; overflow: hidden; background-color: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .45); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window--a { left: calc(50% - var(--w) * .925); top: 0; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window--b { left: calc(50% - var(--w) * .075); top: 48px; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window-bar { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-small); border-bottom: 1px solid var(--line); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window-dots { display: inline-flex; gap: 5px; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window img { display: block; width: 100%; height: auto; } @media (max-width: 809.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-hero--mock { --w: min(380px, calc((100vw - 40px) * .72)); height: calc(30px + var(--w) * 1.164) !important; } /* 380 cap: tablets get windows their size (768: 380px, still under half the 919px file, so sharp at 2x); phones unchanged (390: 252) */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window--a { left: calc(50% - var(--w) * .6); top: 0; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window--b { left: calc(50% - var(--w) * .4); top: calc(var(--w) * .45); } } /* the second window rises a beat after the first (giga's entrance curve, +120ms) */ .pg-counter-culture-coffee.pg-counter-culture-coffee.pg-counter-culture-coffee-armed .pg-counter-culture-coffee-window--b { opacity: 0; transform: translateY(12px); } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-in .pg-counter-culture-coffee-window--b { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } @media (prefers-reduced-motion: reduce) { .pg-counter-culture-coffee.pg-counter-culture-coffee.pg-counter-culture-coffee-armed .pg-counter-culture-coffee-window--b { transform: none; } } /* ---- 5. hero stat icons: giga's two-tone orange marks, in Gnar orange */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-stat-icon { display: block; color: var(--accent); } /* the rail's in-box offset is replaced by an outside one (page.js alignRail): see the note there */ @media (min-width: 1024px) { .pg-counter-culture-coffee.pg-counter-culture-coffee aside.lg\:sticky { padding-top: 0; } } /* the three icons are 14, 17 and 14.5px tall, so giga's values start 3px apart (its own 610/613/611). One 17px box, icons on its floor, puts all three values on one line. */ .pg-counter-culture-coffee.pg-counter-culture-coffee .overflow-x-auto li > div[aria-hidden="true"]:first-child { height: 17px; display: flex; align-items: flex-end; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-client-logo { height: 22px; width: auto; } /* ---- 6. share row: giga's light chips → a dark chip on the ground */ /* giga's icon links are 18px; the touch gate needs 40px. The link becomes a 40px transparent hit area pulled back by 11px on every side (no layout change), and the visible 18px chip moves onto the icon itself. */ .pg-counter-culture-coffee.pg-counter-culture-coffee a[aria-label^="Share on"] { background-color: transparent; color: var(--fg-body); min-width: 40px; min-height: 40px; margin: -11px; padding: 0; } .pg-counter-culture-coffee.pg-counter-culture-coffee a[aria-label^="Share on"] svg { display: block; box-sizing: content-box; background-color: var(--surface-raised); border-radius: 4px; padding: 1px; } /* content-box: the kit's global border-box would let the padding eat the icon (the X drew at 3px) */ .pg-counter-culture-coffee.pg-counter-culture-coffee a[aria-label="Share on X"] svg { padding: 4px; } /* ---- 7. the quote card: giga's warm-tint plate (rgba(249,190,170,.1) on white) → Gnar's card plate and line, giga's shape (12px radius, 32px padding, 1px border) kept */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-quote-card { background-color: var(--surface-1); border-color: transparent; } /* V15, Evan: "the other grey section lines need to go… its ai slop". The two article hairlines go transparent (their spacing stays giga's); the card keeps its fill and loses its outline and inner bar. The AARP-wordmark square that stood in for a headshot goes too (an expert UX call: a logo posing as a person); the name lines up with the quote. */ .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article .h-px { background-color: transparent; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-quote-card > div > [aria-hidden="true"] { display: none; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-quote-card figcaption { padding-left: 0; } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-avatar { display: none; } /* giga centres the avatar against a 2-line attribution, which reads as "beside the name". Krystal Downie's role wraps to 3 lines on phones, so centring floated the avatar mid-block with the name above it (checkpoint 2, Codex clone judge). Top-aligning keeps giga's avatar-beside-name relation at any copy length (at 1440 it moves the avatar about 1px). */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-quote-card figcaption { align-items: flex-start; } /* ---- 8. CTA band: the kit's (the homepage's closing band, V16); it brings its own type and colour */ .pg-counter-culture-coffee.pg-counter-culture-coffee .k-cta .cta-h2 { font-weight: var(--h2-w); } /* the kit token (600, measured on super-site #cta); giga's base h2 reset had it at 400 */ /* phones: the kit insets the band copy 40px (wrap 20 + copy 20), a 310px column that stacked this page's 47-character heading 4 lines at ~12 characters (legible L2). The rest of this page sits on a 20px edge, so the band does too. */ @media (max-width: 767.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .k-cta-copy { padding-inline: 0; } } /* ---- 9. hero entrance (page.js): hidden only once JS has armed it, so the page is visible without JS */ .pg-counter-culture-coffee.pg-counter-culture-coffee-armed [data-pg-counter-culture-coffee-enter] { opacity: 0; transform: translateY(10px); } .pg-counter-culture-coffee.pg-counter-culture-coffee [data-pg-counter-culture-coffee-enter].pg-counter-culture-coffee-in { opacity: 1; transform: none; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { /* gentler, not zero: keep giga's 600ms fade, drop the rise */ .pg-counter-culture-coffee.pg-counter-culture-coffee-armed [data-pg-counter-culture-coffee-enter] { transform: none; } .pg-counter-culture-coffee [data-pg-counter-culture-coffee-enter].pg-counter-culture-coffee-in { transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1); } } /* V15 (expert UX): on phones the inline Contents list filled a full screen before the summary of a four-section article. The desktop rail stays. */ @media (max-width: 1023.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee aside.lg\:hidden { display: none; } } /* V17 (final QA): giga mirrors its 240px Contents rail with an empty 240px spacer, each with a 100px gap, so the article is the window minus 680px: 672 at 1440, 532 at 1300, but 256 at 1024 (headings 4 lines, 3-word lines). From 1024 to 1279 the rail and its spacer step aside and the article takes giga's own 672px measure, centred (as on tablets). From 1280 the rail returns (article 512+). */ @media (min-width: 1024px) and (max-width: 1279.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee aside.lg\:sticky, .pg-counter-culture-coffee.pg-counter-culture-coffee div[aria-hidden="true"].lg\:block.lg\:shrink-0 { display: none; } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article { max-width: 672px; margin-inline: auto; } .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article { width: 100%; } } /* V17 tablets (768–1023): giga runs the article full width (728px at 768, ~100 characters a line). It takes giga's own 672px desktop measure, centred, as at 1024–1279. */ @media (min-width: 768px) and (max-width: 1023.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .case-study-article { max-width: 672px; width: 100%; margin-inline: auto; } } /* V17 at 320 (a phone at 200% zoom): the window name stays on one line (the decorative dots step aside under 400px), and the client name never breaks at its hyphen ("Property Tax-" / "Aide"). */ .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window-bar { white-space: nowrap; overflow: hidden; } @media (max-width: 399.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-window-dots { display: none; } } .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-program { white-space: nowrap; } @media (max-width: 359.98px) { .pg-counter-culture-coffee.pg-counter-culture-coffee .pg-counter-culture-coffee-program { font-size: 20px; } }