/* common/meta.html sets `overflow-x: hidden` on html and body site-wide.
   That computes overflow-y to `auto`, which makes them scroll containers,
   which in turn breaks `position: sticky` — the "Why SnapMate" postcards
   stage sticks to the body scrollport instead of the viewport and so never
   appears to stick at all. `clip` does the same job without creating a
   scroll container. Scoped here because style.css is landing-page only. */
html, body{
    overflow-x: clip;
}

body{
    background-color: var(--bg-color);
}

/* One h1 per page (the hero headline); the big section titles are h2s at
   h1 size, via .display-heading. */
h1,
h2.display-heading{
    font-family: 'fraunces-heading', serif;
    font-variation-settings: var(--fraunces-axes);
    color: var(--dark-text-color);
    font-size: var(--h1-size);
    line-height: 110%;
    letter-spacing: -2%;
}

h2{
    font-family: 'fraunces-heading', serif;
    font-variation-settings: var(--fraunces-axes);
    color: var(--dark-text-color);
    font-size: var(--h2-size);
    line-height: 110%;
    letter-spacing: -2%;
}

#hero-section{
    position: relative;

    width: 100%;
    height: 100vh;
    height:	100dvh;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: calc(var(--site-margin) + 3rem) var(--site-margin) calc(var(--site-margin));

}

#hero-carousel-container{
    position: relative;
    width: 100%;
    height: 100%;
    /* No overflow clipping: the photos round their own corners (below), so
       things laid over the photo, like the search bar's dropdown, can hang
       past its edge. Phones clip again in the 768px block. */
    border-radius: var(--curve-lg);
}

.image-gradient{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;

    border-radius: var(--curve-lg);
    background: linear-gradient(360deg,rgba(0, 0, 0, 0.47) 0%, rgba(0, 0, 0, 0) 50%);
}

.image-gradient-2{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;

    border-radius: var(--curve-lg);
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 16%);
    /* linear-gradient(to left bottom ,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%); */
}

.hero-text-overlay div{
    transition: opacity .3s ease;
}

#hero-location{
    z-index: 20;
    position: absolute;

    /* bottom: 12px; */
    top: 0.5rem;
    left: 0.5rem;

    color: var(--bg-color);
    font-family: 'quicksand-bold';
    font-size: 1rem;
    
    display: flex;
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;

    border-radius: 999px;

    background-color: rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
}

.hero-text-overlay.mobile{
    display: none;
}

/* Layout wrappers around the credit pills, the headline and (desktop) the
   search bar. Phones use both (see the 768px block); on desktop the pill
   track generates no box and the stack is the headline + search column
   below. */
.hero-stack,
.hero-pill-track{
    display: contents;
}


/* Phone-only category cards (see the 768px block); the grouped lists and the
   polaroid serve wider screens. */
.category-cards,
.scroll-progress{
    display: none;
}

/* the thumb inside any progress bar, at whatever width the bar shows
   (category rail from 1200px, the rest from 768px) */
.scroll-progress span{
    display: block;
    height: 100%;
    width: 30%;
    border-radius: 999px;
    background-color: var(--dark-text-color);
}

.hero-credit{
    z-index: 20;
    position: absolute;
    text-align: right;

    display: flex;
    flex-direction: column;

    /* bottom: 0.75rem; */
    top: 0.5rem;
    right: 0.5rem;

    color: var(--bg-color);
    font-family: 'quicksand-bold';
    font-size: 1rem;
    font-variation-settings: "wght" 500;

    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    border-radius: 999px;

    background-color: rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
}

.hero-credit-link{
    position:relative;
    color: var(--bg-color);
    font-variation-settings: "wght" 700;
    text-decoration: none; /* an <a>; the :after line is the underline */
    cursor:pointer;
}

/* A slide whose photographer has no portfolio link: plain text, no arrow. */
.hero-credit-link:not([href]){
    cursor: default;
}
.hero-credit-link:not([href]) .hero-credit-link-arrow,
.hero-credit-link:not([href]):after{
    display: none !important;
}

 .hero-credit-link-arrow{
    transition: 0.2s ease-in-out;
    filter: brightness(100);
 }

.hero-credit-link:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;
    background-color: var(--bg-color);
}

.hero-credit-link:before{
    content: '';
    position: absolute;
    inset: -0.75rem -3px;
}

#hero-credit-badge{
    font-size: 0.75rem;
    display: none;
}

#hero-ticks{
    position: absolute;
    display: flex;
    justify-content: space-between;
    display: flex;
    gap: 6px;
    z-index: 20;

    /* bottom: calc(var(--site-margin) * 0.5); */
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);

    box-sizing: border-box;

    width: clamp(4rem, 40%, 64rem);
    padding:0.5rem;

    border-radius: 999px;

    background-color: rgba(0,0,0,0.12);
    backdrop-filter: blur(12px);
}

#hero-ticks span{
    position: relative;
    height: 0.25rem;
    flex: 1;
    border-radius: 15rem;
    cursor: pointer;
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
}

/* bigguh hit box */
#hero-ticks span::before{
    content: '';
    position: absolute;
    inset: -0.75rem -3px;
}

#hero-ticks span.is-on{
    flex: 1;
    border-radius: 15rem;
    opacity: 100%;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(12px);
}

#hero-ticks span.is-on::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: inherit; /* keeps the rounded ends */
    background-color: #FFD37D;
    animation: tick-fill var(--tick-duration, 3800ms) linear forwards;
}

@keyframes tick-fill{
    from { width: 0; }
    to   { width: 100%; }
}

.hero-layer{
    position: absolute;
    inset: 0;
    border-radius: inherit;   /* the container no longer clips them */
    transition: opacity .42s ease;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#layer-A{
    z-index:5;
}

#layer-B{
    z-index:10;
    opacity: 0;
}

#hero-text{
    text-align: center;
    margin-top: var(--site-margin);
    
    position: absolute;
    z-index: 20;

    bottom: 40%;
    transform: translateY(50%);
    
    display: flex;
    width: 100%;
    justify-content: center;

    color: var(--bg-color);

    font-size: calc(var(--h1-size) * 0.7);
}

/* Desktop hero headline: a fixed size that steps down at breakpoints instead
   of scaling with the window. The headline is --h1-size * 0.7, so these set
   --h1-size to give 3.5rem / 2.5rem / 2rem. Set on #hero-section, not
   #hero-text, because the rolling word's width probe (#measure) and the
   word-roll animations sit elsewhere in the hero and must use the same size.
   Widest word ("graduation") is ~1060px at 3.5rem, so the steps keep it
   inside the photo. Phones keep the fluid size (max-width: 768px block). */
@media screen and (min-width: 769px){
    #hero-section{ --h1-size: 5rem; }                     /* 3.5rem headline */
}
@media screen and (min-width: 769px) and (max-width: 1199px){
    #hero-section{ --h1-size: calc(2.5rem / 0.7); }       /* 2.5rem headline */
}
@media screen and (min-width: 769px) and (max-width: 899px){
    #hero-section{ --h1-size: calc(2rem / 0.7); }         /* 2rem headline */
}

/* (after the rule above, so its overrides win) */
@media screen and (min-width: 769px){
    /* The headline and the search bar as one column over the photo, so they
       position together. The two knobs: */
    .hero-stack{
        --hero-group-bottom: 26%;   /* photo's bottom edge to the bar's */
        --hero-group-gap: 1.5rem;   /* headline to bar */

        position: absolute;
        inset: 0 0 var(--hero-group-bottom) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: var(--hero-group-gap);

        /* No z-index: a stacking context here would stop the bar's border
           blending (multiply) with the photo. And let clicks through the
           empty part to the credit links underneath. */
        pointer-events: none;
    }

    .hero-stack > *{
        pointer-events: auto;
    }

    /* in the column now, rather than placed against the photo */
    #hero-text{
        position: relative;
        bottom: auto;
        transform: none;
        margin: 0;
    }

    /* the bar's box: the form and its border both centre and fill on it */
    .hero-search{
        position: relative;
        flex: none;
        width: var(--sb-hero-width);
        height: var(--sb-height);
    }

    .hero-search > *{
        --sb-hero-top: 50%;
        --sb-hero-width: 100%;
        --sb-top: 50%;
        --sb-width: 100%;
    }
}

#shifting-word{
    text-align: left;
    color: black;
}

#shifting-word.roll{
    transition: transform .28s cubic-bezier(.5,0,.12,1) !important;
}

#shifting-word.pre-roll{
    transition: transform .14s cubic-bezier(.37,1.1,.62,1);
    transform: translateY(calc(var(--h1-size)*0.24)) !important;
}

.shifting-copy-word{
    display: flex;
    justify-content: start;
    padding: 0rem 0.1rem 0.44rem 0.5em;
    /* background-color: var(--bg-color); */
    border-radius: 12px;
    transition: width .45s cubic-bezier(.4,0,.2,1);
    overflow: hidden;

    font-size: 0.9em;
    line-height: 90%;
}

.shifting-copy{
    font-family: 'fraunces-heading-italic';
    font-variation-settings: var(--fraunces-italic-axes);
    font-size: 0.92em;
    display: inline-flex;
    height:fit-content;
    white-space: nowrap;
    gap:0.25em;

    background-color: var(--bg-color);
    border-radius: 999px;
    padding: 0.5rem 0.5rem 0.5rem 0rem;
    align-items: center;
}

.copy-icon{
    display: inline-flex;
    align-items: center;

    justify-content: center;
    background-color: var(--yellow-200);
    border-radius: 999px;
    
    height: calc(1em + 0.8rem);;
    width: calc(1em + 0.8rem);;
    aspect-ratio: 1/1;
}



.shifting-copy-measure{
    position: absolute;
    height:0;
    visibility: hidden;
    white-space: nowrap;
    font-family: 'fraunces-heading-italic';
    font-variation-settings: var(--fraunces-italic-axes);
    font-size: calc(var(--h1-size)*0.92*0.62);
    justify-content: start;
    padding: 0.25rem calc(var(--h1-size)*0.45) 0.75rem 0;
    border-radius: 12px;
}

.text-split{
   align-items: center; 
}

.section-bottom{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.bottom-line{
    height: 1px;
    flex: 1;
    background-color: var(--secondary-700);
    opacity: 40%;
}

#shifting-icon{
    height: calc(1em * 0.8);
    width: calc(1em * 0.8);
    object-fit: contain;
    flex-shrink: 0;
}

#shifting-icon.twirl{
    animation: twirl 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.heading-icon{
    height: calc(1em * 0.8);
    width: auto;
}

/* "Ready for your next shoot?" polaroids: each pops up from nothing with a
   twirl like the hero icon's, left to right 0.4s apart (section-reveal.js
   adds pop-ready, then is-popped once they're on screen). rotate and scale
   are the standalone properties, so they add to each card's own tilt (its
   transform) and it wobbles about that angle and settles back on it. */
@keyframes polaroid-pop {
    0%   { opacity: 0; scale: 0;    rotate: -30deg;   animation-timing-function: cubic-bezier(0.34, 1.35, 0.5, 1); }
    70%  { opacity: 1}
    80%  { scale: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    100% { scale: 1;    rotate: 0deg; }
}

.why-cta-polaroids.pop-ready .why-cta-polaroid{
    scale: 0;
}

/* "both" holds the 0% frame (scale 0) through each card's delay */
.why-cta-polaroids.is-popped .why-cta-polaroid{
    animation: polaroid-pop 0.5s both;
}
.why-cta-polaroids.is-popped .why-cta-polaroid:nth-child(2){ animation-delay: .2s; }
.why-cta-polaroids.is-popped .why-cta-polaroid:nth-child(3){ animation-delay: .4s; }

@media (prefers-reduced-motion: reduce){
    .why-cta-polaroids .why-cta-polaroid{ scale: 1; animation: none; }
}

@keyframes twirl {
    0%   { transform: rotate(0deg)  scale(1);   animation-timing-function: cubic-bezier(0.34, 1.35, 0.5, 1); }
    32%   { transform: rotate(-20deg)  scale(1);}
    56%  { transform: rotate(30deg) scale(1.04); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    100% { transform: rotate(0deg)  scale(1);   }
}

@keyframes shutter {
    0%   { transform: translateY(0)   scale(1);   }
    35%  { transform: translateY(calc(var(--h1-size)*0.20)) scale(.76); }
    52%  { transform: translateY(calc(var(--h1-size)*0.20)) scale(.76); }
    100% { transform: translateY(0)   scale(1);   }
}

.clicked{
    animation: shutter .42s cubic-bezier(.3,0,.3,1);
}

/* Top-Rated Photographers Section */
#photographer-card-section{
    margin: var(--site-margin);
    padding: 0 var(--site-margin) calc(var(--site-margin)*4) ;
    border-radius:var(--curve-lg);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.decorative-icon{
    height: 50%;
    width: auto;
    filter: brightness(0);
}

.decorative-icon-container{
    display: inline-flex;
    align-items: center;

    justify-content: center;
    background-color: var(--yellow-200);
    border-radius: 12px;
    
    width: calc((var(--h2-size)*1.1) + 1rem);
    aspect-ratio: 1/1;
}

.divider-1{
    width: 100%;
    height: 1px;
    background-color: #312B36;
    opacity: 10%;
}

.section-spacer{
    height: var(--site-margin);
}

.decorative-icon-container-lg{
    display: inline-flex;
    align-items: center;

    justify-content: center;
    background-color: var(--yellow-200);
    border-radius: 12px;
    
    width: calc((var(--h2-size)*1.1) + 1rem);
    aspect-ratio: 1/1;
}

.decorative-icon-container-sm{
    display: inline-flex;
    align-items: center;

    justify-content: center;
    background-color: #FEEDCA;
    border-radius: 12px;
    
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
}

.decorative-icon-container-sm .decorative-icon{
    height: calc(var(--h2-size)*0.5);
    width: auto;
    filter: brightness(0) saturate(100%) invert(61%) sepia(62%) saturate(339%) hue-rotate(2deg) brightness(93%) contrast(88%);
}

#photographer-card-section .decorative-icon-container-lg, #review-card-section .decorative-icon-container{
    background-color: var(--bg-color);
}

.section-heading-row{
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Decorative only. Phones set it beside the heading (max-width: 768px block);
   desktop has it follow the heading's last word, below. */
.heading-decoration{
    display: none;
}

@media screen and (min-width: 769px){
    /* the heading runs inline so the doodle flows on after its last line,
       rather than sitting beside the whole block as a flex item would */
    .section-heading-row:has(> .heading-decoration){
        display: block;
    }
    .section-heading-row:has(> .heading-decoration) h2{
        display: inline;
        margin-right: 0;
    }

    /* the doodle sits outside the h2, so it's given the heading's size to
       scale with it */
    #photographer-card-section .heading-decoration{ font-size: var(--h2-size); }
    #photographer-category-section .heading-decoration{ font-size: var(--category-heading-size); }

    :is(#photographer-card-section, #photographer-category-section) .heading-decoration{
        display: inline-block;
        width: auto;
        aspect-ratio: auto;
        margin-left: 0.25em;
        vertical-align: -0.12em;
        background-color: transparent;
    }
    .heading-decoration .decorative-icon{
        display: block;
        height: 0.9em;
    }
}


.heading-2{
    display: flex;
    gap: 1rem;
    align-items: end;
    width: 100%;
    justify-content: space-between;
}

.nav-button{
    flex: 0 0 auto;
}

.nav-btn img{
    height: 2.5rem;
    width: 2.5rem;
    flex: 0 0 auto;
}

.nav-btn.left-nav img{
    rotate: 180deg;
}

.btn-pair{
    display: flex;
    gap: 0.5rem;
}

.heading-nav{
    display: flex;
    align-items: end;
    gap: 0.5rem;
    right: 0;
}

/* the category heading's arrows only exist while it's a rail
   (shown in the 1200px block, hidden again at 768px) */
.heading-nav.category-heading-nav{
    display: none;
}

/* the category heading's title and line, now in a row with the arrows */
.category-heading-text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.heading-gap-line{
    flex: 1;
    height: 1px;
    background-color: var(--secondary-700);
    opacity: 40%;
}


:is(#photographer-card-section, #review-card-section, #social-media-section, #photographer-category-section) .nav-btn{
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    opacity: 0.9;
}

:is(#photographer-card-section, #photographer-category-section) .nav-btn img{
    width: 2rem;
    height: 2rem;
}

:is(#review-card-section, #social-media-section) .nav-btn img{
    width: 2.5rem;
    height: 2.5rem;
}

/* the icon points left, so it's the right arrow that turns round */
#photographer-card-section .nav-btn.left-nav img{ rotate: none; }
:is(.right-nav, .review-right-nav, .social-right-nav, .category-right-nav) img{ rotate: 180deg; }

/* at either end of the row, the arrow that can't go further fades
   (main.js toggles .is-at-end) */
:is(#photographer-card-section, #review-card-section, #social-media-section, #photographer-category-section) .nav-btn.is-at-end{
    opacity: 0.5;
    cursor: default;
}

/* Reviews and Instagram: the arrows float over the gallery, one at each
   edge, vertically centred and --site-margin in from the sides. The frame
   is the gallery's box for them to position against. */
.gallery-frame{
    position: relative;
    width: 100%;
    min-width: 0;
}

.gallery-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;              /* above the cards' own stacking */
}

/* Over the cards a faded arrow reads as part of a card, so at either end
   these disappear instead of fading (and can't be clicked while hidden). */
:is(#review-card-section, #social-media-section) .gallery-arrow.is-at-end{
    opacity: 0;
    pointer-events: none;
}

.gallery-arrow:is(.review-left-nav){ left: 0; }
.gallery-arrow:is(.review-right-nav){ right: 0; }

.gallery-arrow:is(.social-left-nav){ left: var(--site-margin); }
.gallery-arrow:is(.social-right-nav){ right: var(--site-margin); }

#review-card-section .btn-pair, #social-media-section .btn-pair{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: var(--site-margin);
}

.card-gallery{
    --scroller-gap: 1rem;
    --scroller-visible-items:4; /*number of scrollable items visible*/

    --card-min: 15rem;
    --card-max: 50rem;

    /* how much of the next card always shows, so the row reads as
       scrollable at every width */
    --scroller-peek: 0.25rem;

    scroll-snap-type: x mandatory;

    padding-top: var(--card-lift);
    padding-left: var(--card-lift);
    margin-left: calc(-1* var(--card-lift));

    width: 100%;
    gap: var(--scroller-gap);
    overflow-x: scroll;
    display: grid;

    grid-auto-flow: column;
    /* n cards, n gaps, then --scroller-peek of the next card. The min and
       max give way before they'd push that sliver off-screen. */
    grid-auto-columns: clamp(
        min(var(--card-min), 100% - var(--scroller-gap) - var(--scroller-peek)),
        calc((100% - var(--scroller-peek) - var(--scroller-gap) * var(--scroller-visible-items)) / var(--scroller-visible-items)),
        min(var(--card-max), 100% - var(--scroller-gap) - var(--scroller-peek))
    );

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
}

.card-gallery.pg-cards{
    /* bleed to the section's edges like the category rail, so cards scroll
       out to the edge rather than being cut off inside its padding; the
       padding puts the first and last cards back in line with the heading */
    width: auto;
    margin-inline: calc(-1 * var(--site-margin));
    padding-inline: var(--site-margin);
    scroll-padding-left: var(--site-margin);

    /* the scroller clips its overflow, so make room for the cards' drop
       shadow (2.83px offset + 2.83px blur) without moving what follows */
    padding-bottom: 0.375rem;
    margin-bottom: -0.375rem;
}

.card-gallery::-webkit-scrollbar{
    display:none;
    
}

#photographer-category-section{
    margin: var(--site-margin);
    padding: 0 calc(var(--site-margin)) calc(var(--site-margin)*2) calc(var(--site-margin));
    margin-top: var(--site-margin);

    height: calc(100vh - var(--site-margin) * 2);
    height: calc(100dvh - var(--site-margin) * 2);

    box-sizing: content-box;

    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.category-selection-half{
    padding: 1rem 0rem 1rem 0;
    display:flex;
    flex-direction: column;

    justify-content: space-between;
    /* ~40% like the design; 34rem keeps the 2x2 grid two columns wide */
    flex: 0 0 clamp(34rem, 40%, 44rem);
    min-width: 0;
}
/* a variable so the heading's doodle can be sized to match (see .heading-decoration) */
.category-selection-half{
    --category-heading-size: clamp(2.75rem, -1.125rem + 5.5vw, 6rem);
}
.category-selection-half h2{
    font-size: var(--category-heading-size);
}

.category-selection-half > div:first-of-type{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-selection-half > div:last-of-type{
    display: flex;
    flex-direction: column;
    flex: 1;                 /* take the slack */
    justify-content: end;    /* or 'space-between' to push the button down */
    min-height: 0;
    gap: 1rem;
}

.category-grid{
    --category-card-min: 16rem;   /* narrowest a card can be before it breaks */

    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(var(--category-card-min), 1fr)); */
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 1rem;

    min-height: 0;
    margin-bottom: 2rem;
}

.category-polaroid-half-parent{
    min-width: 0;
    display: flex;
    aspect-ratio: 1/1;
}

/* fills the column's width and the section's full height; the padding is
   room for the corner tape to overhang */
.category-polaroid-half{
    position: relative;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem;
}

.category-polaroid-container{
    position:relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    width:100%;
    height:100%;
    /* same border and shadow as the photographer cards (main.js) */
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 2.83px 2.83px rgba(0, 0, 0, 0.25);
}

.category-polaroid-frame{
    position: relative;
    flex: 1;
    min-height: 0;
    isolation: isolate;
}

.corner-tape {
    --tape-size: 6rem;

    position: absolute;
    width: var(--tape-size);
    height: var(--tape-size);
    pointer-events: none;
    overflow: clip;
    backdrop-filter: blur(2px);
}

.corner-tape svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.corner-tape.tl {
    top: 0; left: 0; 
    border-top-left-radius: 1.625rem;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        0% 100%
    );
}

.corner-tape.br { 
    bottom: 0; right: 0;
    border-bottom-right-radius: 1.625rem;
    clip-path: polygon(
        100% 100%,
        100% 0%,
        0% 100%
    );
}

.category-polaroid-description{
    position: relative;
    display: flex;
    width: 100%;
    font-family: 'quicksand-bold';
}

.category-polaroid-description > div{
    display: flex;
    height: fit-content;
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5em;
    padding-right: 8%;
    transition: opacity .42s ease;
}

.category-polaroid-description .desc-B{
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.category-polaroid-img{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .42s ease;
    border-radius: 0.5rem;
}

#category-polaroid-img-A{ z-index: 5; }
#category-polaroid-img-B{ z-index: 10; opacity: 0; }

.category-list > div:not(.category-card-img){
    font-family: 'fraunces-heading';
    font-variation-settings: var(--fraunces-axes);
    font-size: 1.75rem;
    display: flex;
    gap: 0.5rem;
    color: black;
    white-space: nowrap;
}


/* Shown only once the section collapses to the rail; on desktop the shared
   hover polaroid plays this role. */
.category-card-img{
    display: none;
}

.category-list{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #FFE5B2;
    border-radius: 1rem;
    padding: 1rem;
    background-color: white;
    box-shadow: 4px 4px 32px 0 rgba(0, 0, 0, 0.05);
    height: fit-content;
}

ul > li{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul {
    padding: 0;
}

.category-selection-half .category-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1rem;
    align-content: start;
}

.category-list{
    gap: 0.875rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.category-list > div:not(.category-card-img){
    align-items: center;
    font-size: 1.5rem;
}

/* category pills are links to search: no hover underline (base.css adds
   one to links) */
a.category-pill:hover{
    text-decoration: none;
}

/* a little larger here than in the search dropdown and sheet (0.9375rem) */
.category-list .category-pill{
    font-size: 1rem;
}

.category-list ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;   /* same spacing as the search dropdown and sheet */
    margin: 0;
}

/* Star beside each category group heading (Milestones, People, ...),
   hidden for now. Delete this rule to bring them back. */
#photographer-category-section .category-list .decorative-icon-container-sm{
    display: none;
}

#reviews-section{
    height:100vh;
    height:100dvh;
}

#review-card-section{
    background-color: var(--yellow-200);
    margin: var(--site-margin);
     padding: var(--site-margin);
    border-radius:var(--curve-lg);
    margin-top: calc(var(--site-margin) * 2);

    display: flex;
    flex-direction: column;
    align-items: center;
}

#review-card-section .body-text{
   text-align: center;
}

/* Whole sections fade up into place as they scroll into view, once each
   (section-reveal.js adds these classes, only to sections still below the
   screen, so without it nothing is hidden). translate rather than
   transform: it moves the painting, not the layout, so nothing shifts. */
.section-reveal{
    opacity: 0.6;
    translate: 0 8dvh;
    transition:
        opacity .8s ease,
        translate .8s cubic-bezier(.2, .7, .2, 1);
}

.section-reveal.is-revealed{
    opacity: 1;
    translate: none;
}

@media (prefers-reduced-motion: reduce){
    .section-reveal{ opacity: 1; translate: none; transition: none; }
}

/* the phone-only heading (shown in the 768px block) */
.review-heading-mobile{
    display: none;
}

#review-card-section{
    text-align: center;
}

@property --fold-start-x {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --fold-start-y {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

/* The phone search card's gradient border turns round in a loop
   (.search-bar-mobile-border). Registering the angle lets the browser
   animate it; an unregistered custom property would just jump. */
@property --sb-border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 62deg;
}

@keyframes sb-border-spin {
    to { --sb-border-angle: 422deg; }   /* 62deg + one full turn */
}

.review.card-gallery{
    --scroller-gap: 3rem;
    --scroller-visible-items: 3.5;
 
    --card-min: 15rem;
    --card-max: 25rem;
 
    --card-lift: 0.3625rem;
    /* room for the tilt + hover lift so cards aren't clipped at the ends */
    --edge-room: calc(var(--card-lift) * 3.5);
 
    padding-top: calc(var(--edge-room) + var(--card-lift) * 2);
    padding-bottom: calc(var(--card-lift) * 2);
 

    margin-inline: calc(-1 * var(--site-margin));
    margin-top: 2rem;
    width: calc(100% + (var(--site-margin) * 2));
    padding-inline: var(--site-margin);
    scroll-padding-inline: calc(2 * var(--site-margin));

    align-self: stretch;
 
    scroll-snap-type: x mandatory;
 
    gap: var(--scroller-gap);
    overflow-x: scroll;
    display: grid;
    grid-auto-flow: column;
 
    /* same as .card-gallery: always a --scroller-peek of the next card */
    grid-auto-columns: clamp(
        min(var(--card-min), 100% - var(--scroller-gap) - var(--scroller-peek)),
        calc((100% - var(--scroller-peek) - var(--scroller-gap) * var(--scroller-visible-items)) / var(--scroller-visible-items)),
        min(var(--card-max), 100% - var(--scroller-gap) - var(--scroller-peek))
    );
 
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
 
.review.card-gallery::-webkit-scrollbar{
    display: none;
}
 
.btn-pair.review-nav{
    align-items: center;
    gap: 0.75rem;
}

.gallery-dots{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline: 0.25rem;
}

.gallery-dots button{
    position: relative;

    width: 0.9375rem;
    height: 0.9375rem;
    flex: 0 0 auto;

    /* border: 1.5px solid var(--dark-text-color); */
    border-radius: 999px;
    background-color: var(--secondary-700);
    opacity: 0.4;

    cursor: pointer;
    transition: opacity .25s ease, transform .25s ease;
}

.gallery-dots button.is-on{
    opacity: 1;
}

.gallery-dots button:focus-visible{
    outline: 2px solid var(--smp-orange);
    outline-offset: 2px;
}

/* 15px is well under the 44px minimum — grow the hit area, not the dot */
.gallery-dots button::before{
    content: '';
    position: absolute;
    inset: -0.75rem -0.25rem;
}


/* ---------- Instagram marquee section (append to end of style.css) ---------- */
#social-media-section{
    height: auto;
    margin-inline: var(--site-margin);
    margin-block: calc(var(--site-margin) * 3);

    /* areas let the follow buttons sit beside the heading on desktop and
       below the carousel on phones without duplicating the markup */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "head follow"
        "gallery gallery"
        "nav nav";
    align-items: center;
}

#social-media-section > div:first-child{ grid-area: head; }
/* the frame round the gallery (which also holds its arrows) takes the slot */
#social-media-section .social-frame{ grid-area: gallery; }
#social-media-section .btn-pair{ grid-area: nav; }

.social-follow{
    grid-area: follow;
    display: flex;
    gap: 0.5625rem;
    padding-inline: var(--site-margin);
}

/* Instagram / TikTok icon tiles (Figma 7819:4219), with the category pills'
   outline, shadow and hover (.category-pill in search-bar.css) */
.social-follow-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* less the outline, so the tile stays the design's size */
    padding: calc(0.52rem - 1px);
    border-radius: 0.52rem;
    border: 1px solid rgba(226, 232, 240, 0.6);
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 2px;
    transition: background-color 0.15s ease;
}
.social-follow-btn:hover{
    background-color: rgba(255, 229, 178, 0.45);
}
/* the doodle icons are large exports, scaled to the design's 40.67px */
.social-follow-btn img{
    display: block;
    height: 2.542rem;
    width: auto;
}
 

#social-media-section .heading-2{
    padding-inline: var(--site-margin);
}

.social.card-gallery{
    --scroller-gap: 1rem;
    --scroller-visible-items: 4;

    /* social cards are a 3/4 image + a username, so they can go
       narrower than a photographer card before breaking. The max has to
       let three cards fill a wide screen, or it caps the width and more
       than three show. */
    --card-min: 10rem;
    --card-max: 40rem;

    --card-lift: 0;
    overscroll-behavior-x: contain;
    margin-top: 2rem;

    /* room for the cards' drop shadow, as on .pg-cards */
    padding-bottom: 0.375rem;
    margin-bottom: -0.375rem;
}
 
.social.card-gallery social-card{
    scroll-snap-align: start;
}
 

/* ---------------FAQ SECTION */

#faq-section{
    background-color: var(--yellow-200);
    margin: var(--site-margin);
    padding: var(--site-margin);
    border-radius:var(--curve-lg);

    display: flex;
    justify-content: space-between;
    min-height: 80vh;
}

#faq-1{
    display: flex;
    flex-direction: column;
}

#faq-1 h2{
    margin-bottom: calc(var(--site-margin) * 2);;
}

#faq-2{
    display: flex;
    flex-direction: column;
    justify-content: start;

    align-items:end;

    width: 40vw;
    min-width: 30rem;
}

#faq-2-container{
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: end;
    text-align: end;
}

#faq-2-container .body-text{
    padding-inline: 0.25rem;
}

.faq-container{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid black;
}

/* the photo only once the FAQ is near the screen (lazy-bg.js adds .is-near) */
#faq-2-img.is-near{
    background-image: url('/assets/landing/carousel-images/faq-1.jpg');
}

#faq-2-img{
    background-position: center;
    background-size: cover;

    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 1rem;
}

faq-item.faq-hidden{
    display: none;
}

#faq-toggle-button{
    align-self: flex-start;
}

/* ---------- FAQ see more / see less ---------- */

.faq-extra{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.faq-extra.is-open{
    grid-template-rows: 1fr;
}

.faq-extra > div{
    min-height: 0;
    overflow: hidden;
}

#faq-toggle-button{
    align-self: flex-start;
}

@media (prefers-reduced-motion: reduce){
    .faq-extra{ transition: none; }
}

/* ---------- SEO Section (append to end of style.css) ---------- */

#seo-section{
    margin: calc(var(--site-margin) * 3) calc(var(--site-margin) * 2);

    display: flex;
    flex-direction: column;
    gap: var(--site-margin);
}

.seo-block{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.seo-divider{
    width: 100%;
    height: 1px;
    background-color: var(--dark-text-color);
    opacity: 30%;
}

/* the full list fits on desktop, so the collapse is a phone-only affordance */
#seo-category-toggle{
    display: none;
}

/* Horizontally scrollable button bar, scrollbar hidden */
.seo-button-bar{
    display: flex;
    gap: 0.75rem;
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    -webkit-overflow-scrolling: touch;

    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    margin: -0.25rem -0.25rem 0;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

.seo-button-bar::-webkit-scrollbar{
    display: none;
}

.seo-button-bar .button-var-3.is-active{
    background-color: var(--dark-text-color);
    color: var(--bg-color);
}

/* Category + city link grid */
.seo-link-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 0.75rem;
}

.seo-link{
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: fit-content;

    text-decoration: none;
    color: var(--dark-text-color);
    font-family: 'quicksand-medium';
    font-variation-settings: 'wght' 600;
    font-size: 1rem;
    line-height: 120%;
}

.seo-link-state{
    font-size: 0.75rem;
    color: #6A6E7A;
}

@media screen and (max-width: 768px){
    .seo-link-grid{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1536px){ /*	large desktop displays */
    .card-gallery{
        --scroller-gap: 1rem;
        --scroller-visible-items:3;

        --card-min: 15rem;
        --card-max: 50rem;
    }

    .review.card-gallery{
        --scroller-visible-items: 3;
        --scroller-gap: 2.5rem;
    }

    .social.card-gallery{ --scroller-visible-items: 4; }

    .category-selection-half{
        --category-heading-size: clamp(2.75rem, -1.125rem + 5.25vw, 4rem);
    }
    .category-selection-half h2{
        margin-right: 1rem;
    }


    .category-grid{
        grid-template-columns: repeat(auto-fit, minmax(var(--category-card-min), 1fr));
    }
            
}

@media screen and (max-width: 1200px){ /*	tablet	landscape:	reduce	column	counts	*/
    .review.card-gallery{
        --scroller-visible-items: 2.5;
        --scroller-gap: 3rem;
    }

    .social.card-gallery{ --scroller-visible-items: 3; }

    /* Below this the 2x2 grid no longer fits beside the polaroid, so the
       section switches to the phone layout: a rail of category cards. */
    #photographer-category-section{
        margin: var(--site-margin);
        padding: calc(var(--site-margin));
        margin-top: var(--site-margin);

        display: flex;
        flex-direction: column;

        height: 100%;

        box-sizing: border-box;

        display: flex;
        justify-content: space-between;
    }

    /* stacked now, so drop the desktop column width (which would otherwise
       apply to its height) */
    #photographer-category-section{ gap: 1rem; }

    .category-selection-half{
        flex: none;
        gap: 1rem;
    }

    .category-polaroid-half-parent{
        display: none;
    }

    /* ---------- Category cards ----------
       From 1200px down, one swipeable card per photoshoot type replaces the
       grouped lists and the hover polaroid (which needs a mouse anyway).
       Three layers per card: the photo, a strip of tape across the
       bottom-left corner, and the name with its icon on a cream label. */

    .category-grid{
        display: none;
    }

    .category-cards{
        --card-gap: 1rem;

        display: grid;
        grid-auto-flow: column;
        /* --cards-visible cards in view, the last one peeking in */
        --cards-visible: 3.2;
        grid-auto-columns: calc((100% - var(--card-gap) * (var(--cards-visible) - 1)) / var(--cards-visible));
        gap: var(--card-gap);

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;

        /* bleed to the section's edges; the padding leaves room for the
           tape's overhang and the cards' shadow */
        margin-inline: calc(-1 * var(--site-margin));
        padding: 0.5rem var(--site-margin) 1rem;
        scroll-padding-left: var(--site-margin);
    }

    .category-cards::-webkit-scrollbar{
        display: none;
    }

    .category-card{
        position: relative;
        display: block;
        /* Every layer inside is absolutely positioned, so the card has no
           content width of its own; without this it shrinks to 0 when an
           ancestor's alignment keeps grid items from stretching. */
        width: 100%;
        justify-self: stretch;
        aspect-ratio: 4 / 3;
        border-radius: 0.75rem;
        scroll-snap-align: start;

        color: var(--dark-text-color);
        text-decoration: none;
        box-shadow: 0 8px 14px -8px rgba(30, 25, 22, 0.5);
    }

    .category-card:focus-visible{
        outline: 3px solid var(--smp-orange);
        outline-offset: 3px;
    }

    /* layer 1: the photo, always filling the card */
    .category-card-photo{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: inherit;
        background-color: var(--bg-color-hover);
    }

    /* layer 2: tape across the bottom-left corner, overhanging the edges */
    .category-card-tape{
        position: absolute;
        z-index: 3;
        left: -0.1rem;
        bottom: -0.1rem;
        width: 2.25rem;
        height: 2.25rem;

        clip-path: polygon(0 0, 0 100%, 100% 100%);

        background-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        pointer-events: none;

        border-bottom-left-radius: 0.75rem;
    }

    /* layer 3: the name and icon on a cream label */
    .category-card-label{
        position: absolute;
        z-index: 2;
        left: 3%;
        bottom: 4%;
        max-width: 94%;

        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        padding: 0.25em 0.5em 0.3em;
        border-radius: 0.5rem;
        background-color: var(--bg-color);

        font-family: 'fraunces-heading';
        font-variation-settings: var(--fraunces-axes);
        font-size: 1.5rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    /* the bar under the rail shows only on phones (.scroll-progress at
       768px); above that the heading arrows do the job */
    .category-cards-progress{
        margin-top: -0.25rem;
    }

    /* arrows at the end of the heading row, like Top-Rated Photographers */
    .heading-nav.category-heading-nav{
        display: flex;
    }
}

@media screen and (max-width: 900px){	/*	tablet	portrait:	stack	the	2-col	sections	*/	
    .card-gallery{
        --scroller-gap: 1rem;
        --scroller-visible-items:2;
    }

    .review.card-gallery{
        --scroller-visible-items: 2.2;
        --scroller-gap: 3rem;
    }

    .social.card-gallery{ --scroller-visible-items: 2.5; }

    .category-cards{ --cards-visible: 2.5; }
}


@media screen and (max-width: 768px){	/*	phone:	mobile	nav,	mobile	hero,	single	column	*/

    :root{
        --site-margin: 0.75rem;
        --section-gap: 2.5rem;
        --curve-lg: 1rem;

        --h1-size:	clamp(1.875rem,	1.25rem	+	6.5vw,	3.125rem);
        --h2-size:	clamp(1.5rem,	1.75rem	+	1.8vw,	2rem);
    }


    #search-bar-mobile{
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    /* ---------- Landing Page Mobile V3.1 hero ----------
       Full-bleed photo under the transparent navbar; credit and location
       pills at the top right; the headline sits low on the photo, and the
       search card overlaps the photo's bottom edge by about half its height. */

    #hero-section{
        position: relative;

        width: 100%;
        /* Use the small viewport so Safari hiding its toolbar on scroll
           doesn't resize the hero and zoom its cover image. Subtract the
           bottom tab bar (#mobile-bottom-nav, 58px) and a small gap. */
        height: calc(100vh - var(--bottom-nav-h) - 0.5rem);
        height: calc(100svh - var(--bottom-nav-h) - 0.5rem);
        min-height: 34rem;

        display: flex;
        flex-direction: column;

        padding: 0;

        /* how far the search card rides up over the photo */
        --hero-card-overlap: 6rem;
        /* the fixed mobile navbar, and the tab bar fixed to the bottom */
        --nav-h: 3.75rem;
        --bottom-nav-h: 3.625rem;
        /* where the credit pills sit: just under the navbar */
        --pill-top: calc(var(--nav-h));
    }

    /* only the carousel gives up height, so the heading and search bar keep
       their size and the bar clears the bottom of the viewport */
    #hero-carousel-container{
        position: relative;
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        /* clip, not hidden: hidden makes this box the scroll container the
           sticky credit pills stick to, so they would never follow the page.
           clip crops the same without that. */
        overflow: clip;
        border-radius:0;
    }

    #hero-text,
    #search-bar-mobile{
        flex: 0 0 auto;
    }

    #search-bar-mobile{
        position: relative;
        z-index: 30;
        margin-top: calc(-1 * var(--hero-card-overlap));
        padding-inline: var(--site-margin);
    }

    /* The card's border is a gradient (Figma 7807:3239), which a CSS border
       can't round a radius with, so it's a layer stacked beneath the card
       that shows through a 3px gap round its edge. */
    .search-bar-mobile-frame{
        position: relative;
        --frame-width: 3px;
        --frame-radius: 1.1875rem;   /* 19px; the card inside is 19 - 3 = 16px */
    }

    .search-bar-mobile-border{
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: var(--frame-radius);
        /* yellow-600 bottom-left to secondary-700 top-right, as sampled
           from the design; starts at that 62deg and turns round in a loop
           (@property --sb-border-angle, top of this file) */
        background: linear-gradient(var(--sb-border-angle), var(--yellow-600) 0%, var(--secondary-700) 82%);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        animation: sb-border-spin 5.5s linear infinite;
    }

    @media (prefers-reduced-motion: reduce){
        .search-bar-mobile-border{ animation: none; }
    }

    #search-bar-mobile .search-bar-mobile-container{
        position: relative;
        z-index: 1;
        margin: var(--frame-width);
        padding: 0.875rem 0.75rem 0.75rem;
        gap: 0.75rem;
        border: none;
        border-radius: calc(var(--frame-radius) - var(--frame-width));
        background-color: var(--bg-color);
        box-shadow: none;
    }

    #search-bar-mobile .input-container{
        padding: 0 0.25rem;
        gap: 0.625rem;
    }

    #search-bar-mobile .search-bar-input-container{
        margin-top: 0;
        gap: 0.25rem;
    }

    #search-bar-mobile .search-bar-input-container label{
        font-size: 0.875rem;
        line-height: 1.2;
        margin-bottom: 0;
        padding-left: 0;
    }

    /* 1rem, not less: iOS Safari zooms the page in when a field smaller than
       that gets focus, and these read-only triggers still take focus on tap,
       so the zoom carried into the search sheet. Don't fix it with
       maximum-scale=1 in the viewport; that also blocks pinch-zoom. */
    #search-bar-mobile input{
        font-size: 1rem;
    }

    #mobile-search-button{
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        font-size: 1rem;
    }

    .hero-search, #search-bar-desktop, #search-bar-border{
        display: none;
    }

    /* The credit pills and the headline share one column over the photo.
       The pill track fills everything above the headline, so it ends where
       the headline starts. */
    .hero-stack{
        position: absolute;
        inset: 0;
        z-index: 20;

        display: flex;
        flex-direction: column;
        padding-bottom: calc(var(--hero-card-overlap) + 1rem);
    }

    .hero-pill-track{
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        flex: 1 1 auto;
        min-height: 0;
        padding: var(--pill-top) var(--site-margin) 0.75rem;
    }

    /* Credit and location: two dark glass pills, right-aligned just under
       the navbar. Sticky to the same offset, so while you scroll they stay
       under the navbar; when they reach the bottom of the track, just above
       the headline, they stop and scroll away with the hero. They stay in
       the hero's layer, under the navbar. */
    .hero-text-overlay.mobile{
        position: sticky;
        top: var(--pill-top);

        flex-direction: column;
        align-items: flex-end;
        gap: 0.375rem;
    }

    .hero-text-overlay.mobile .hero-credit,
    .hero-text-overlay.mobile .hero-location{
        position: static;
        display: inline-flex;
        align-items: center;

        padding: 0.25rem 0.625rem;
        border-radius: 999px;
        background-color: rgba(30, 25, 22, 0.35);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        color: var(--bg-color);
        font-family: 'quicksand-medium';
        font-size: 0.8125rem;
        line-height: 1.3;
        text-align: right;
        transition: opacity .2s ease;
    }

    /* Everything in the pills is 0.8125rem, the photographer's name included
       (it carried its own larger size from the desktop credit). */
    .hero-text-overlay.mobile .hero-credit-link,
    .hero-text-overlay.mobile .hero-credit-name{
        font-family: 'quicksand-bold';
        font-size: 0.8125rem;
    }

    .hero-text-overlay.mobile .hero-location:empty{
        display: none;
    }

    .hero-credit-link-arrow{
        height: 0.625rem;
    }

    /* Darken the top for the navbar and pills, the bottom for the headline. */
    .image-gradient{
        border-radius: 0;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0) 24%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.55) 100%);
    }

    /* cover, not "auto 100%": matching only the height left empty strips at
       the sides whenever a photo is narrower than the screen (portrait
       uploads on wider phones). cover always fills; the Sanity hotspot,
       set per slide by main.js, decides which part stays in frame. */
    .hero-layer{
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* V3.1 has no slide ticks on phones: the search card covers the bottom
       of the photo where they would sit. Autoplay still advances slides. */
    #hero-ticks{
        display: none;
    }

    /* In the .hero-stack column on phones, under the pill track, rather than
       positioned on its own. */
    #hero-text{
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        flex: 0 0 auto;
        margin-top: 0;

        justify-content: flex-start;
        text-align: left;
        padding-inline: calc(var(--site-margin) + 0.25rem);
    }

    .text-split{
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15em;
        font-size: calc(var(--h1-size) * 0.82);
        /* Short screens need more clear photo above the bottom-aligned copy.
           svh stays stable when mobile browser toolbars hide while scrolling.
           Keep the width-based size as the ceiling and limit the reduction. */
        font-size: clamp(
            calc(var(--h1-size) * 0.68),
            calc(1rem + 2.8svh),
            calc(var(--h1-size) * 0.82)
        );
        line-height: 1.05;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    }

    .hero-text-overlay.mobile{
        display:flex;   /* stacks the credit and location pills */
    }

    .hero-text-overlay.desktop{
        display:none;
    }

    /* The rolling word: upright on phones, in a rounded card with the
       doodle in a yellow tile. main.js measures the word in this exact font. */
    .shifting-copy{
        font-family: 'fraunces-heading';
        font-variation-settings: var(--fraunces-axes);
        font-size: 1em;
        border-radius: 0.75rem;
        padding: 0.3rem 0.3rem 0.3rem 0;
        text-shadow: none;
        gap:0rem;
    }

    .shifting-copy-word{
        font-size: 1em;
        padding: 0 0.15em 0.12em 0.35em;
        line-height: 1.1;
    }

    .copy-icon{
        border-radius: 0.5rem;
        height: 1.15em;
        width: 1.15em;
    }

    #shifting-icon{
        height: 72%;
        width: 72%;
    }

    #photographer-card-section{
        padding: calc(var(--site-margin)*3) var(--site-margin) var(--site-margin);
        border-radius:var(--curve-lg);
    }

    #photographer-category-section{
        gap: 0.75rem;
    }

    .decorative-icon-container-lg{
        background-color: transparent !important;
    }

    .category-selection-half > div:first-of-type{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .card-gallery{
        --scroller-gap: 1rem;
        --scroller-visible-items:1.2;

        --card-min: 20rem;
        --card-max: 50rem;

        padding-top: 0;
    }

    .review.card-gallery{
        --scroller-visible-items: 1.15;
        --scroller-gap: 2.5rem;
        --card-min: 17rem;
        padding-inline: calc(var(--site-margin) + 1rem);
        margin-top: 0;
        padding-top: calc(var(--edge-room) + var(--card-lift));
    }

    #review-card-section{
        margin-top: calc(var(--site-margin));
        padding-top: calc(var(--site-margin) * 2);
    }
 
    #review-card-section .heading-2{
        margin-bottom: 1rem;

    }

    /* Phones get their own heading, laid out like the "Why choose
       SnapMatePhoto?" one (the .why-heading* styles in postcards.css), so
       the desktop heading steps aside. */
    #review-card-section > div:has(> .heading-2){
        display: none;
    }

    .review-heading-mobile{
        display: flex;
        align-self: stretch;
        text-align: left;
        margin-bottom: 1rem;
    }

    /* the room beside the icon (viewport less the section's margins and
       paddings and the 80px icon column: 152px) over the ~8.3em width of
       "lovely community" (plus a little slack), so it stays on one line */
    .review-heading-mobile .why-heading-row h2{
        font-size: clamp(1.25rem, calc((100vw - 152px) / 8.45), 2rem);
    }

    .review-heading-mobile .review-heading-icon img{
        transform: none;
    }
 
    #review-card-section .decorative-icon-container{
        display: none;
    }

    .decorative-icon-container-lg{
        border-radius: 0.5rem;
    }

    .decorative-icon{
        height: 70%;
    }

    .social.card-gallery{
        --scroller-visible-items: 1.035;
        --card-min: 12rem;

        /* line the carousel up with the photographer cards, which sit inside
           their section's padding as well as its margin */
        padding-inline: var(--site-margin);
        scroll-padding-left: var(--site-margin);
    }

    #social-media-section{
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "gallery"
            "nav"
            "follow";
    }

    .social-follow{
        margin-top: var(--site-margin);
        justify-content: center;
        flex-wrap: wrap;
    }

    /* about 1.7 category cards in view (a card is half the screen) */
    .category-cards{ --cards-visible: 1.7; }

    /* the bar under a swipeable rail: a thumb sized to the share of cards
       in view (main.js initScrollProgress) */
    .scroll-progress{
        display: block;
        height: 3px;
        overflow: hidden;
    }

    .pg-cards-progress{
        margin-top: 0.125rem;
    }

    /* inset to line up with the first card in each rail */
    .review-progress{
        align-self: stretch;
        margin: 0.75rem 1rem 0;
    }

    .social-progress{
        grid-area: nav;
        margin: 0.75rem var(--site-margin) 0;
    }

    /* swipeable on touch, so the bars stand in for the arrows and dots */
    #review-card-section .btn-pair,
    #social-media-section .btn-pair,
    .gallery-arrow,
    .heading-nav.category-heading-nav{
        display: none;
    }

    .category-heading-text{
        gap: 0.5rem;
    }

    #search-page-button{
        width: 100%;
        justify-content: center;
        border-radius: 0.625rem;
    }

    .section-heading-row{
        align-items: flex-start;
        justify-content: space-between;
    }

    /* the icon takes ~60px out of the line, so the heading has to come down
       a step to keep wrapping to two lines */
    .category-selection-half h2{
        font-size: var(--h2-size);
        margin-right: 0;
    }

    .heading-decoration{
        display: inline-flex;
        flex: 0 0 auto;
        height: calc(var(--h2-size)*2*1.1);
        /* width: calc(var(--h2-size)*2*1.1); */
    }

    .nav-btn img{
        height: 2rem;
        width: 2rem;
    }

    /* The gallery is swipeable on touch, so the progress bar stands in for
       the arrows */
    #photographer-card-section .heading-2 > div:first-child{
        flex: 1;
    }

    /* swipeable on touch: the progress bar under the cards stands in */
    #photographer-card-section .heading-nav{
        display: none;
    }

    #search-page-button{
        width: 100%;
        justify-content: center;
    }

    #faq-section{
        display: flex;
        flex-direction: column;

        justify-content: space-between;
        min-height: 80vh;
        min-height: 80dvh;
    }

    #faq-2{
        display: flex;
        flex-direction: column;
        justify-content: start;

        align-items:end;

        width: 100%;
        min-width: 0;
    }

    #faq-2-container{
        margin-top: calc(var(--site-margin) * 2);

        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: start;
        text-align: start;
    }

    #faq-2-container .body-text{
        padding-inline: 0.25rem;
    }

    .faq-container{
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid black;
    }

    #faq-2-img{
        background-image: url('/assets/landing/carousel-images/faq-1.jpg');
        background-position: center;
        background-size: cover;

        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 1rem;
    }

    /* the section headings each carry a placeholder mark on phones */
    #review-card-section .section-heading-row,
    #faq-1 .section-heading-row{
        width: 100%;
    }

    .seo-link-grid:not(.is-expanded) .seo-link:nth-child(n + 6){
        display: none;
    }

    #seo-category-toggle{
        display: flex;
        align-items: center;
        width: 100%;
        flex: 1;
    }

    .seo-block .button-var-1{
        width: 100%;
        padding-inline: 0;
        font-family: 'quicksand-bold';
        font-variation-settings: 'wght' 700;
        text-decoration: underline;
    }
}

/* Hover Gating for Mobile */
@media (hover: hover) and (pointer: fine){
    .card-container:hover{	
        transform:	translateX(calc(-1	*	var(--card-lift)))	translateY(calc(-1	*	var(--card-lift)));	
    }

    .hero-credit-link:hover .hero-credit-link-arrow{
        transform: translateY(-0.2em);
    }

    .seo-link:hover .seo-link-title{
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }
}

/* Moved out of base.css during integration. base.css is loaded site-wide,
   and these bare element selectors turned every link and h3 on every page
   cream. They stay here because style.css is landing-page only; the footer
   carries its own scoped copies in footer.css. */
h3{
  font-family: 'quicksand-bold';
  font-size: 1.625rem;
  color: var(--bg-color);
}

a{
  font-family: 'quicksand-medium';
  font-size: 1rem;
  text-decoration: none;
  color: var(--bg-color);
  width: fit-content;
}