/* ==========================================================================
FOTOLOOT — SHARED DESIGN SYSTEM
Brand: deep navy + shutter orange, taken straight from the FotoLoot mark.
Navy carries structure and text; orange is reserved for the actions that
matter (search, download, buy) so the accent never loses its meaning.
========================================================================== */
:root{
/* --- brand ------------------------------------------------------------ */
--navy:#1B2A44; /* camera body in the mark */
--navy-deep:#0E1626; /* darkest surface / body text */
--navy-mid:#2C3E5E;
--navy-soft:#4A5B78;
--orange:#F26A1B; /* shutter orange — fills only */
--orange-deep:#D4560C; /* pressed / hover fill */
--orange-ink:#B04C09; /* 5.4:1 white, 5.0:1 mist, 5.0:1 wash — safe for accent TEXT */
--orange-wash:#FFF3EA;
/* --- neutrals --------------------------------------------------------- */
--paper:#ffffff;
--mist:#F4F7FB;
--mist-deep:#E8EEF7;
--line:#DBE3EF;
--line-soft:#EDF1F8;
--ink:#0E1626;
--ink-soft:#4A5B78;
--muted:#5F6E88; /* 5.2:1 on white, 4.8:1 on --mist */
/* --- type ------------------------------------------------------------- */
--font-display:'Outfit','Hanken Grotesk',system-ui,sans-serif;
--font-body:'Hanken Grotesk',system-ui,sans-serif;
--font-mono:'DM Mono',ui-monospace,monospace;
/* --- elevation + radius (one scale, used everywhere) ------------------- */
--r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
--sh-1:0 1px 2px rgba(14,22,38,.06), 0 1px 1px rgba(14,22,38,.04);
--sh-2:0 4px 14px rgba(14,22,38,.07), 0 1px 3px rgba(14,22,38,.05);
--sh-3:0 14px 38px rgba(14,22,38,.12), 0 3px 10px rgba(14,22,38,.06);
--sh-brand:0 8px 22px rgba(242,106,27,.28);
--ease:cubic-bezier(.2,.8,.2,1);
/* --- legacy aliases: older rules below still reference these ----------- */
--sand:var(--mist);
--sand-deep:var(--mist-deep);
--teal:var(--navy);
--teal-deep:var(--navy-deep);
--marigold:var(--orange);
--marigold-deep:var(--orange-deep);
--spice:var(--orange-ink);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* .serif is a legacy hook in the views — it now maps to the display face */
.serif{font-family:var(--font-display);letter-spacing:-.02em}
.mono{font-family:var(--font-mono)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ---------- NAV ---------- */
.nav{
position:sticky;top:0;z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:14px 40px;background:rgba(255,255,255,.88);
backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.03em;color:var(--navy)}
.brand .mark{width:30px;height:30px;flex-shrink:0;display:block}
.brand b{color:var(--orange);font-weight:700} /* logotype - brand colour, exempt from contrast minima */
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--orange-ink)}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-login{font-size:14.5px;font-weight:600;color:var(--ink)}
.btn{font-family:var(--font-body);font-weight:700;border:none;cursor:pointer;transition:transform .18s,background .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:var(--navy);color:#fff;padding:11px 22px;border-radius:999px;font-size:14.5px;box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-1px);box-shadow:var(--sh-2)}
/* the orange button is the money button: search, download, buy - nothing else */
.btn-gold{background:var(--orange);color:var(--navy-deep);padding:11px 22px;border-radius:999px;font-size:14.5px;box-shadow:var(--sh-1)}
.btn-gold:hover{background:var(--orange-deep);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-brand)}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);padding:11px 22px;border-radius:999px;font-size:14.5px}
.btn-ghost:hover{border-color:var(--navy);background:var(--mist);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.nav-toggle{display:none}
/* ---------- NAV: stacked variant (homepage) — logo centred ---------- */
.nav-stack{flex-direction:column;gap:12px;padding:16px 40px 12px}
.nav-stack .nav-top{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-stack .nav-spacer{display:block}
.nav-stack .brand{justify-self:center;font-size:27px}
.nav-stack .nav-right{justify-self:end}
.nav-stack .nav-links{justify-content:center}
/* ---------- CATEGORY DRAWER ---------- */
.menu-btn{
display:inline-flex;align-items:center;gap:9px;justify-self:start;
background:transparent;border:1px solid var(--line);border-radius:8px;
padding:8px 14px;cursor:pointer;font-family:var(--font-body);
font-size:14px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s;
}
.menu-btn:hover{border-color:var(--navy);background:var(--mist);color:var(--navy)}
.menu-btn .bars{display:flex;flex-direction:column;gap:3px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:currentColor;border-radius:1px}
.drawer-overlay{
position:fixed;inset:0;z-index:200;background:rgba(14,22,38,.52);
opacity:0;transition:opacity .25s ease;
}
.drawer-overlay.open{opacity:1}
.drawer{
position:fixed;top:0;left:0;bottom:0;z-index:201;
width:min(340px,86vw);background:var(--paper);
border-right:1px solid var(--line);
display:flex;flex-direction:column;
transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 48px rgba(14,22,38,.20);
}
.drawer.open{transform:translateX(0)}
.drawer-head{
display:flex;align-items:center;justify-content:space-between;
padding:20px 22px 16px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.drawer-title{
font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
text-transform:uppercase;color:var(--muted);
}
.drawer-close{
background:transparent;border:none;font-size:26px;line-height:1;
color:var(--muted);cursor:pointer;padding:0 4px;
}
.drawer-close:hover{color:var(--ink)}
.drawer-list{flex:1;overflow-y:auto;padding:8px 0}
.drawer-list a{
display:flex;align-items:center;justify-content:space-between;
padding:11px 22px;font-size:14.5px;color:var(--ink-soft);
border-left:3px solid transparent;transition:all .15s;
}
.drawer-list a:hover{background:var(--mist);color:var(--navy);border-left-color:var(--orange)}
.drawer-list a.active{color:var(--orange-ink);font-weight:700;border-left-color:var(--orange);background:var(--orange-wash)}
.drawer-list .arrow{color:var(--line);font-size:17px;transition:color .2s,transform .2s}
.drawer-list a:hover .arrow{color:var(--orange);transform:translateX(2px)}
.drawer-foot{padding:16px 22px 22px;border-top:1px solid var(--line);flex-shrink:0}
.drawer-foot .btn{width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){
.drawer,.drawer-overlay{transition:none}
}
/* ---------- SEARCH BAND — directly under the logo, above the slides ---------- */
.search-band{
background:var(--paper);
padding:40px 24px 34px;
text-align:center;
border-bottom:1px solid var(--line);
}
.eyebrow-band{
font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
text-transform:uppercase;color:var(--orange-ink);margin-bottom:18px;
}
.search-band .search-hero{margin:0 auto;max-width:680px;width:100%}
/* on white the box needs its own edge, unlike over a photo */
.search-band .search-box{border:2px solid var(--navy);box-shadow:5px 5px 0 var(--mist-deep)}
.search-band .search-box:focus-within{border-color:var(--orange);box-shadow:5px 5px 0 rgba(242,106,27,.28)}
.search-band .trending{justify-content:center;margin-top:16px}
/* trending chips under the search box */
.trending{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.trending .lbl{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em;margin-right:2px}
.chip{font-size:13.5px;font-weight:500;color:var(--ink-soft);background:var(--sand);border:1px solid var(--line);padding:6px 14px;border-radius:999px;transition:all .2s;cursor:pointer;display:inline-block}
.chip:hover{border-color:var(--orange);color:var(--orange-ink);background:var(--orange-wash)}
/* ---------- SLIDER — full-width background slideshow ---------- */
.hero-slideshow{
position:relative;
min-height:440px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:70px 24px;
overflow:hidden;
text-align:center;
}
/* stacked crossfading background slides */
.slides{position:absolute;inset:0;z-index:0}
.slides .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out}
.slides .slide.active{opacity:1}
/* dark scrim so the headline stays readable over any image */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,22,38,.34),rgba(14,22,38,.72))}
.hero-center{position:relative;z-index:2;width:100%;max-width:820px;margin:0 auto}
.hero-rotating{
font-family:var(--font-display);font-weight:400;
font-size:clamp(32px,4.6vw,58px);line-height:1.05;letter-spacing:-.02em;color:#fff;
/* reserve two lines so a wrapping headline doesn't jolt the layout */
min-height:2.1em;
display:flex;align-items:center;justify-content:center;
transition:opacity .5s ease;
text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.hero-rotating.fade{opacity:0}
.search-hero{max-width:680px;width:100%}
.search-hero .search-box input{font-size:17px;padding:16px 14px}
.search-hero .search-box .btn-gold{padding:16px 30px}
/* slide progress dots */
.hero-dots{position:absolute;bottom:24px;left:0;right:0;z-index:2;display:flex;gap:9px;justify-content:center}
.hero-dots .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s,transform .2s;border:none;padding:0}
.hero-dots .dot.active{background:#fff;transform:scale(1.25)}
/* shared search-box */
.search-box{display:flex;align-items:center;background:#fff;border-radius:12px;padding:6px 6px 6px 20px;transition:box-shadow .2s,border-color .2s}
.search-box svg{flex-shrink:0;color:var(--muted)}
.search-box input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:16.5px;color:var(--ink);padding:14px 14px}
.search-box input::placeholder{color:var(--muted)}
.search-box .btn-gold{padding:14px 26px;border-radius:9px;white-space:nowrap}
/* illustration stand-ins reused as slide backgrounds until real photos are added */
/* Tile background: --illo is the brand illustration. (--photo is an optional
top layer; category covers now use a real ![]()
instead - see section 17.)
A missing photo file simply paints nothing, so the illustration shows through
and there is never a broken-image state. */
div.fill,.slides .slide{
background-color:var(--mist);
background-image:var(--photo,none),var(--illo,none);
background-position:center;background-size:cover;background-repeat:no-repeat;
}
.p1{--illo:url('/illustrations/il-diya.svg')} /* Diwali / diya */
.p2{--illo:url('/illustrations/il-startup.svg')} /* startup / business */
.p3{--illo:url('/illustrations/il-wedding.svg')} /* wedding / festive culture */
.p4{--illo:url('/illustrations/il-monsoon.svg')} /* monsoon */
.p5{--illo:url('/illustrations/il-yoga.svg')} /* yoga / wellness */
.p6{--illo:url('/illustrations/il-food.svg')} /* street food / spice market */
.p7{--illo:url('/illustrations/il-dance.svg')} /* classical dance */
.p8{--illo:url('/illustrations/il-travel.svg')} /* travel / ghats / landmarks */
.p9{--illo:url('/illustrations/il-family.svg')} /* lifestyle / family */
.p10{--illo:url('/illustrations/il-farmer.svg')} /* rural / agriculture */
.p11{--illo:url('/illustrations/il-portrait.svg')} /* people / portraits */
.p12{--illo:url('/illustrations/il-craft.svg')} /* craft / pottery */
.il-leader{--illo:url('/illustrations/il-leader.svg')} /* women who lead / professional */
/* ---------- TRUST STRIP ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sand);padding:26px 40px}
.trust-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.trust .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.wordmarks{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;align-items:center}
.wm{font-weight:800;font-size:19px;color:#A2AFC4;letter-spacing:-.01em;transition:color .25s}
.wm:hover{color:var(--navy)}
/* ---------- SECTION SHELL ---------- */
.section{max-width:1400px;margin:0 auto;padding:82px 40px}
.section-sm{padding-top:48px;padding-bottom:48px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.sec-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;line-height:1.05}
.sec-head h2 em{font-style:normal;color:var(--orange-ink)}
.sec-head p{color:var(--ink-soft);font-size:15.5px;margin-top:8px;max-width:440px}
.sec-link{font-weight:700;color:var(--orange-ink);font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.sec-link:hover{gap:11px}
/* breadcrumb */
.crumb{max-width:1400px;margin:0 auto;padding:20px 40px 0;font-family:var(--font-mono);font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.crumb a{color:var(--muted);transition:color .2s}
.crumb a:hover{color:var(--orange-ink)}
.crumb .sep{color:var(--line)}
.crumb .cur{color:var(--ink)}
/* page header (inner pages) */
.page-head{max-width:1400px;margin:0 auto;padding:28px 40px 12px}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,4.4vw,54px);letter-spacing:-.02em;line-height:1.05}
.page-head h1 em{font-style:normal;color:var(--orange-ink)}
.page-head p{color:var(--ink-soft);font-size:15.5px;margin-top:10px;max-width:560px}
/* ---------- CATEGORIES ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* collage variant — portrait tiles (3:4 / 960x1280), tall magazine-style mosaic */
.cats-collage{
grid-template-columns:repeat(4,1fr);
grid-auto-rows:118px;
grid-auto-flow:dense;
gap:14px;
}
/* base tile spans 3 rows -> ~3:4 portrait at this column width */
.cats-collage .cat{aspect-ratio:auto;height:100%;border-radius:14px;grid-row:span 3}
/* "tall" tiles run even longer for collage rhythm */
.cats-collage .cat.tall{grid-row:span 4}
/* keep a couple of shorter accents so it doesn't feel like rigid columns */
.cats-collage .cat.short{grid-row:span 2}
/* .wide no longer used in portrait mode — normalize any leftover to portrait */
.cats-collage .cat.wide{grid-column:span 1;grid-row:span 3}
.cat{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1.12;display:block;cursor:pointer}
.cat .fill{position:absolute;inset:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat:hover .fill{transform:scale(1.07)}
.cat .grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,22,38,.88),rgba(14,22,38,.12) 58%,rgba(14,22,38,0))}
.cat .txt{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.cat .txt h3{font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-.01em}
.cat .txt .n{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.75);margin-top:3px}
.cat .arrow{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:translateY(-4px);transition:all .3s}
.cat:hover .arrow{opacity:1;transform:translateY(0)}
.cat.small{aspect-ratio:1/1}
/* ---------- COLLECTIONS ---------- */
.collections{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.coll-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.coll-grid.wide{grid-template-columns:repeat(2,1fr)}
.coll{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;display:block;cursor:pointer}
.coll .fill{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.coll:hover .fill{transform:scale(1.05)}
.coll .grad{position:absolute;inset:0;background:linear-gradient(115deg,rgba(14,22,38,.86),rgba(14,22,38,.22) 62%,transparent)}
.coll .txt{position:absolute;left:28px;bottom:26px;right:28px;z-index:2;color:#fff}
.coll .kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);margin-bottom:8px}
.coll .txt h3{font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:-.01em;line-height:1.05}
.coll .txt .n{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:8px}
/* collection detail banner */
.coll-banner{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:21/7;max-width:1400px;margin:0 auto}
.coll-banner .fill{position:absolute;inset:0}
.coll-banner .grad{position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,22,38,.88),rgba(14,22,38,.30) 65%,transparent)}
.coll-banner .txt{position:absolute;left:40px;bottom:32px;right:40px;z-index:2;color:#fff}
.coll-banner .kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--marigold);margin-bottom:10px}
.coll-banner h1{font-family:var(--font-display);font-weight:400;font-size:clamp(32px,4.8vw,56px);letter-spacing:-.02em}
.coll-banner p{margin-top:10px;font-size:15px;color:rgba(255,255,255,.85);max-width:520px}
/* ---------- VALUE PROPS ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.values.cols-3{grid-template-columns:repeat(3,1fr)}
.value{background:var(--paper);padding:34px 28px}
.value .ic{width:46px;height:46px;border-radius:12px;background:var(--orange-wash);display:flex;align-items:center;justify-content:center;color:var(--orange-ink);margin-bottom:18px;transition:transform .25s var(--ease)}
.value:hover .ic{transform:translateY(-2px) scale(1.05)}
.value h3{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.value p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
/* ---------- CTA BAND ---------- */
.cta{max-width:1400px;margin:0 auto 82px;padding:0 40px}
.cta-inner{background:var(--navy);border-radius:24px;padding:64px 56px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.cta-inner::before{content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,27,.45),transparent 68%)}
.cta-inner::after{content:"";position:absolute;left:-40px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(58,96,168,.48),transparent 66%)}
.cta h2{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,3.6vw,44px);color:#fff;letter-spacing:-.02em;line-height:1.05;position:relative;z-index:2}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta p{color:rgba(255,255,255,.72);font-size:16px;margin-top:14px;position:relative;z-index:2;max-width:420px}
.cta-actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.cta-actions .btn{width:100%;padding:16px}
.cta-note{font-size:12.5px;color:rgba(255,255,255,.5);text-align:center;margin-top:2px}
/* ---------- FOOTER ---------- */
.footer{background:var(--sand);border-top:1px solid var(--line);padding:64px 40px 34px}
.foot-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:300px}
.foot-col h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.foot-col a{display:block;font-size:14.5px;color:var(--ink-soft);padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--orange-ink)}
.foot-bottom{max-width:1400px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bottom p{font-size:13px;color:var(--muted)}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
/* ==========================================================================
NEW — BROWSE / RESULTS PAGE
========================================================================== */
/* the old sticky overlay .toolbar rule lived here; it fought the in-flow
definition further down and overlapped the grid. Single definition now. */
.toolbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.toolbar .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.filter-chip{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--sand);border:1px solid var(--line);padding:7px 16px;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-chip:hover{border-color:var(--orange);color:var(--orange-ink);background:var(--orange-wash)}
.filter-chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.sort-select{margin-left:auto;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink);background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.photo-grid{columns:4;column-gap:16px;max-width:1400px;margin:0 auto;padding:36px 40px}
.photo-card{break-inside:avoid;margin-bottom:16px;border-radius:16px;overflow:hidden;position:relative;cursor:pointer;display:block}
.photo-card .fill{width:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.photo-card:hover .fill{transform:scale(1.045)}
.photo-card .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,22,38,.88),rgba(14,22,38,.18) 52%,transparent);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.photo-card:hover .ov{opacity:1}
.photo-card .t{font-family:var(--font-display);font-size:15.5px;color:#fff}
.photo-card .m{display:flex;justify-content:space-between;margin-top:5px}
.photo-card .m span{font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.72)}
.photo-card .price{font-family:var(--font-mono);font-size:11.5px;color:var(--orange)}
.photo-card .badge{position:absolute;top:10px;left:10px;z-index:2;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);padding:4px 10px;border-radius:999px}
.badge-free{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.badge-excl{background:var(--orange);color:var(--navy-deep)}
.empty-state{max-width:600px;margin:80px auto;text-align:center;padding:0 24px}
.empty-state h3{font-family:var(--font-display);font-size:26px;margin-bottom:10px}
.empty-state p{color:var(--muted);font-size:14.5px}
.load-more-wrap{text-align:center;padding:0 0 72px}
/* ==========================================================================
NEW — PRICING PAGE
========================================================================== */
.plan-toggle{display:inline-flex;background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px}
.plan-toggle button{border:none;background:transparent;padding:9px 20px;border-radius:999px;font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;transition:all .2s}
.plan-toggle button.active{background:var(--navy);color:#fff;box-shadow:var(--sh-1)}
.plan-toggle .save{color:var(--orange-ink);font-size:10.5px;margin-left:4px;font-weight:700}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.plan{border:1.5px solid var(--line);border-radius:20px;padding:36px 30px;position:relative;background:#fff;transition:border-color .2s,transform .2s}
.plan:hover{transform:translateY(-4px);border-color:var(--navy-soft);box-shadow:var(--sh-3)}
.plan.feat{border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:var(--sh-3)}
.plan-badge{position:absolute;top:-13px;left:30px;background:var(--orange);color:var(--navy-deep);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.plan-name{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.plan.feat .plan-name{color:rgba(255,255,255,.6)}
.plan-price{font-family:var(--font-display);font-size:48px;font-weight:400;margin-top:14px}
.plan-price span{font-size:16px;color:var(--muted);font-weight:400}
.plan.feat .plan-price span{color:rgba(255,255,255,.6)}
.plan-period{font-size:12.5px;color:var(--muted);margin-bottom:26px}
.plan.feat .plan-period{color:rgba(255,255,255,.55)}
.plan-feat-list{list-style:none;margin-bottom:30px}
.plan-feat-list li{font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;color:var(--ink-soft)}
.plan.feat .plan-feat-list li{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82)}
.plan-feat-list li::before{content:"✓";color:var(--orange-ink);font-weight:700}
.plan.feat .plan-feat-list li::before{color:var(--orange)}
.plan-feat-list li.off{color:var(--muted)}
.plan-feat-list li.off::before{content:"–";color:var(--muted)}
.plan .btn{width:100%}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-q{font-family:var(--font-display);font-size:19px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q .plus{color:var(--orange-ink);font-size:22px;line-height:1;transition:transform .25s var(--ease)}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:14px;color:var(--ink-soft);line-height:1.6}
.faq-item.open .faq-a{max-height:200px;margin-top:12px}
/* ==========================================================================
NEW — ENTERPRISE PAGE
========================================================================== */
.ent-hero{background:var(--navy);position:relative;overflow:hidden}
.ent-hero::before{content:"";position:absolute;right:-10%;top:-30%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(242,106,27,.30),transparent 68%)}
.ent-hero .section{position:relative;z-index:2}
.ent-hero h1{color:#fff}
.ent-hero p.sub{color:rgba(255,255,255,.72)}
.ent-hero .eyebrow{color:var(--orange)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:8px}
.stat-cell{background:#fff;padding:28px 24px;text-align:center}
.stat-cell .n{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.stat-cell .l{font-size:12px;color:var(--muted);margin-top:4px}
/* ==========================================================================
NEW — AUTH PAGES (login/signup)
========================================================================== */
.auth-wrap{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.auth-visual{background:linear-gradient(150deg,#F26A1B,#1B2A44 52%,#0E1626);position:relative;overflow:hidden}
.auth-visual .grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;opacity:.9}
.auth-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,22,38,.82) 0%,rgba(14,22,38,.40) 32%,transparent 58%);z-index:1}
.auth-quote{position:absolute;left:36px;right:36px;bottom:36px;color:#fff;z-index:2}
.auth-quote p{font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.35;letter-spacing:-.02em}
.auth-quote .by{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:12px;font-family:var(--font-mono)}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-card{width:100%;max-width:400px}
.auth-card h1{font-family:var(--font-display);font-size:34px;font-weight:400;margin-bottom:8px}
.auth-card .sub2{color:var(--muted);font-size:14.5px;margin-bottom:30px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:7px;color:var(--ink-soft)}
.field input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--font-body);font-size:14.5px;outline:none;transition:border-color .2s}
/* focus ring lives in one place only - see FOCUS below */
.auth-card .btn{width:100%;padding:14px;margin-top:6px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:11px;background:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;justify-content:center;gap:10px}
.auth-alt:hover{border-color:var(--navy);background:var(--mist)}
.auth-foot{text-align:center;margin-top:24px;font-size:13.5px;color:var(--muted)}
.auth-foot a{color:var(--orange-ink);font-weight:700}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-visual{display:none}}
/* ==========================================================================
NEW — ABOUT / CONTACT
========================================================================== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.timeline{border-left:2px solid var(--line);padding-left:28px;display:flex;flex-direction:column;gap:28px}
.timeline-item .yr{font-family:var(--font-mono);font-size:12px;color:var(--orange-ink);letter-spacing:.1em}
.timeline-item h4{font-family:var(--font-display);font-size:20px;margin:6px 0}
.timeline-item p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px}
.contact-card{background:var(--sand);border:1px solid var(--line);border-radius:18px;padding:30px}
.contact-card h4{font-family:var(--font-display);font-size:19px;margin-bottom:6px}
.contact-card p{font-size:14px;color:var(--ink-soft)}
.contact-card + .contact-card{margin-top:16px}
.contact-form .field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--font-body);font-size:14.5px;outline:none;min-height:120px;resize:vertical;transition:border-color .2s}
/* focus ring lives in one place only - see FOCUS below */
/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
.photo-grid{columns:3}
.plans{grid-template-columns:1fr}
.about-grid{grid-template-columns:1fr}
.contact-grid{grid-template-columns:1fr}
}
@media(max-width:1000px){
.hero-slideshow{min-height:460px;padding:60px 20px}
.cats{grid-template-columns:repeat(2,1fr)}
.cats-collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px}
.cats-collage .cat{grid-row:span 3}
.cats-collage .cat.tall{grid-row:span 4}
.cats-collage .cat.short{grid-row:span 2}
.cats-collage .cat.wide{grid-column:span 1;grid-row:span 3}
.values{grid-template-columns:repeat(2,1fr)}
.values.cols-3{grid-template-columns:repeat(2,1fr)}
.cta-inner{grid-template-columns:1fr;padding:44px 32px}
.foot-inner{grid-template-columns:1fr 1fr}
.stat-row{grid-template-columns:repeat(2,1fr)}
.coll-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
.nav{padding:12px 20px}
.nav-links,.nav-login{display:none}
.nav-stack{padding:12px 16px}
.nav-stack .brand{font-size:22px}
.search-band{padding:26px 16px 24px}
.search-band .trending{gap:7px}
.hero-slideshow{min-height:320px;padding:48px 18px}
.section{padding:56px 22px}
.search-box{flex-wrap:wrap;border-radius:14px}
.search-box input{width:100%;padding:12px}
.search-box .btn-gold{width:100%}
.foot-inner{grid-template-columns:1fr}
.trust-inner{gap:18px}
.photo-grid{columns:2;padding:24px 20px}
/* .toolbar padding moved to section 19 - declared here it lost the cascade */
.page-head,.crumb{padding-left:20px;padding-right:20px}
}
@media(prefers-reduced-motion:reduce){
.reveal{transition:none;opacity:1;transform:none}
}
/* ============================================================
IMAGE DETAIL PAGE (new in MVC site)
============================================================ */
.detail-wrap{max-width:1200px;margin:0 auto}
.detail{display:grid;grid-template-columns:1fr 380px;gap:40px;padding:24px 40px 60px;align-items:start}
.detail-image{position:relative}
.detail-image img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;user-select:none}
.detail-note{font-size:12.5px;color:var(--muted);margin-top:10px;font-style:italic}
.detail-side{position:sticky;top:24px}
.detail-title{font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:-.01em;margin:0 0 6px}
.detail-meta{font-size:13.5px;color:var(--ink-soft);margin:0 0 22px}
.detail-meta a{color:var(--orange-ink);font-weight:600}
.buy-box{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.buy-tier{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.buy-tier-name{font-weight:700;font-size:15px}
.buy-tier-sub{font-size:12.5px;color:var(--muted)}
.buy-price{font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.btn-block{width:100%;justify-content:center;margin-bottom:10px}
.buy-note{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.detail-tags{margin-top:26px}
.detail-tags h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-family:var(--font-mono)}
.detail-tags .tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-tags .tag{font-size:12.5px;padding:5px 12px;border:1px solid var(--line);border-radius:20px;color:var(--ink-soft);transition:all .15s}
.detail-tags .tag:hover{border-color:var(--orange);color:var(--orange-ink);background:var(--orange-wash)}
@media(max-width:820px){
.detail{grid-template-columns:1fr;gap:24px;padding:20px 20px 48px}
.detail-side{position:static}
}
/* ============================================================
BROWSE toolbar + pager (new in MVC site)
============================================================ */
.results-title{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin:6px 0 4px}
.results-title em{font-style:normal;color:var(--orange-ink)}
.results-sub{color:var(--muted);font-size:14px;margin:0}
/* Sole .toolbar definition. In flow - not sticky: at two wrapped rows of
category chips it stands 164px tall, which is far too much of the
viewport to pin above a photo grid. Filters stay reachable while
scrolling through the sticky nav's Categories drawer instead.
max-width matches .page-head and .photo-grid so the search field lines
up with the first photo column. */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:0 40px 22px;max-width:1400px;margin:0 auto}
.tb-search{display:flex;gap:8px;align-items:center}
.tb-search input{padding:9px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;min-width:220px}
.tb-right{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn-sm{padding:9px 16px;font-size:13px}
.pager{display:flex;gap:6px;justify-content:center;padding:36px 0 10px}
.pager a,.pager .cur{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);font-size:14px;font-weight:600}
.pager a{color:var(--ink-soft)}
.pager a:hover{border-color:var(--navy);background:var(--mist);color:var(--navy)}
.pager .cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.linklike{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}
/* ---------- video: play badge on cards + detail player ---------- */
.photo-card{position:relative}
.play-badge{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:52px;height:52px;border-radius:50%;
background:rgba(14,22,38,.58);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:18px;padding-left:4px;backdrop-filter:blur(2px);
pointer-events:none;z-index:2;transition:background .2s
}
.photo-card:hover .play-badge{background:var(--orange);color:var(--navy-deep)}
.detail-video{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block;background:#000}
/* ---------- buyer auth: additions to the base auth design above ---------- */
.field-hint{font-size:12px;color:var(--muted);margin-top:5px;display:block}
.flash.err{background:#FDECEA;border:1px solid #F3C4BD;color:#96271A;padding:11px 15px;border-radius:11px;font-size:13.5px;margin-bottom:18px}
/* signed-in chip in nav */
.nav-user{display:inline-flex;align-items:center;gap:10px}
.nav-user .greet{font-size:13.5px;color:var(--ink-soft)}
.logout-inline{background:none;border:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}
.logout-inline:hover{color:var(--orange-ink)}
/* ---------- dummy checkout ---------- */
.checkout-wrap{max-width:520px;margin:0 auto;padding:50px 20px 80px}
.checkout-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 30px}
.checkout-demo-flag{background:var(--orange-wash);border:1px solid #F6C79E;color:#8F4205;font-size:12.5px;font-weight:600;text-align:center;padding:8px 12px;border-radius:8px;margin-bottom:22px}
.checkout-card h1{font-family:var(--font-display);font-weight:400;font-size:24px;margin:0 0 22px}
.checkout-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checkout-thumb{width:74px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.checkout-item-meta{flex:1}
.checkout-item-title{font-weight:600;font-size:14.5px}
.checkout-item-sub{font-size:12.5px;color:var(--muted)}
.checkout-price{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.checkout-summary{padding:18px 0}
.checkout-summary .row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);padding:5px 0}
.checkout-summary .row.total{font-weight:700;color:var(--ink);font-size:16px;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.btn-lg{padding:14px 22px;font-size:15px}
.checkout-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:14px 0 0}
.checkout-back{display:inline-block;margin-top:18px;font-size:13.5px;color:var(--orange-ink);font-weight:600}
.flash.ok{background:#E8F6EF;border:1px solid #B2DFC6;color:#146B3A;padding:10px 14px;border-radius:9px;font-size:13.5px}
/* ==========================================================================
FOTOLOOT — BRAND LAYER
Everything below refines the system above. No layout/grid/breakpoint is
changed here: only type weight, colour, elevation, state and the component
classes the views were already using but that had never been defined.
========================================================================== */
/* ---------- 1. TYPE SYSTEM ------------------------------------------------
The wordmark is a geometric sans, so the display face is Outfit rather than
a serif. Geometric sans needs more weight and tighter tracking than a serif
at the same size, hence the uniform pass below. */
body{font-size:16px;line-height:1.5}
.hero-rotating,
.sec-head h2,.section-title,
.page-head h1,
.results-title,
.cta h2,
.coll-banner h1,
.auth-card h1,
.checkout-card h1,
.detail-title,
.empty-state h3,
.plan-price{
font-family:var(--font-display);
font-weight:600;
letter-spacing:-.03em;
}
.hero-rotating{font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.cta h2,.page-head h1,.results-title,.coll-banner h1{text-wrap:balance}
.cat .txt h3,.coll .txt h3,.value h3,.contact-card h4,.timeline-item h4,.faq-q{
font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
}
.plan-price{font-variant-numeric:tabular-nums}
.plan-price span{font-weight:500}
/* ---------- 2. EYEBROW / SECTION HEAD -------------------------------------
.eyebrow, .section-head, .section-title, .section-link and .section-alt are
used by Home/Pricing/About/Enterprise but were never styled — they rendered
as unformatted paragraphs. Defined here to match .sec-head. */
.eyebrow{
display:flex;align-items:center;gap:10px;
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--orange-ink);margin-bottom:14px;
}
.eyebrow::before{
content:"";width:22px;height:2px;border-radius:2px;
background:var(--orange);flex-shrink:0;
}
.ent-hero .eyebrow::before{background:var(--orange)}
.section-head{
display:flex;align-items:flex-end;justify-content:space-between;
gap:24px;margin-bottom:38px;flex-wrap:wrap;
}
.section-title{
font-size:clamp(26px,3.1vw,38px);line-height:1.12;max-width:760px;
}
.section-link{
font-weight:700;color:var(--orange-ink);font-size:14.5px;white-space:nowrap;
display:inline-flex;align-items:center;gap:6px;transition:gap .2s var(--ease),color .2s;
}
.section-link:hover{gap:11px;color:var(--orange-deep)}
.section-alt{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.section-alt > *{max-width:1400px;margin-left:auto;margin-right:auto}
/* ---------- 3. FOCUS + POINTER (was missing entirely) --------------------- */
a,button,input,select,textarea,[tabindex]{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--orange);
outline-offset:2px;
border-radius:4px;
}
.cat:focus-visible,.coll:focus-visible,.photo-card:focus-visible{outline-offset:3px;border-radius:var(--r-md)}
button,.btn,.chip,.filter-chip,.tag,.faq-q,summary{cursor:pointer;touch-action:manipulation}
::selection{background:var(--orange);color:var(--navy-deep)}
/* ---------- 4. NAV -------------------------------------------------------- */
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{
content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
border-radius:2px;background:var(--orange);
transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-login{transition:color .2s}
.nav-login:hover{color:var(--orange-ink)}
.brand:hover .mark{transform:rotate(-4deg) scale(1.04)}
.brand .mark{transition:transform .3s var(--ease)}
/* ---------- 5. SEARCH ----------------------------------------------------- */
.search-box{box-shadow:var(--sh-2)}
.search-box svg{transition:color .2s}
.search-box:focus-within svg{color:var(--orange-ink)}
.search-band .search-box{box-shadow:5px 5px 0 var(--mist-deep)}
.trending .chip{transition:all .2s var(--ease)}
.trending .chip:hover{transform:translateY(-1px)}
/* ---------- 6. CARDS + IMAGERY -------------------------------------------- */
.cat,.coll{box-shadow:var(--sh-1);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.cat:hover,.coll:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.cat .arrow{background:var(--orange);color:var(--navy-deep);backdrop-filter:none;font-weight:700}
.cat .txt h3{font-size:20px;line-height:1.2}
.coll .kicker{color:var(--orange)}
.photo-card{box-shadow:var(--sh-1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.photo-card:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
.photo-card .ov{padding:16px}
/* ---------- 7. TRUST + VALUES --------------------------------------------- */
.trust{background:var(--mist)}
.values{box-shadow:var(--sh-1)}
.value{transition:background .25s}
.value:hover{background:var(--mist)}
/* ---------- 8. CTA BAND ---------------------------------------------------
The home CTA markup is h2 + p + button (no .cta-actions wrapper), so the
two-column grid needs explicit placement or the button wraps under the
copy. Same columns as before — items just land where they were meant to. */
.cta-inner > h2{grid-column:1;grid-row:1}
.cta-inner > p{grid-column:1;grid-row:2;margin-top:12px}
.cta-inner > .btn{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center}
.cta-inner{background-image:linear-gradient(135deg,var(--navy) 0%,#16233A 55%,var(--navy-deep) 100%)}
@media(max-width:1000px){
.cta-inner > h2,.cta-inner > p,.cta-inner > .btn{grid-column:1;grid-row:auto;justify-self:start}
}
/* ---------- 9. FOOTER ------------------------------------------------------ */
.footer{background:var(--mist)}
.foot-tag{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;white-space:nowrap;
text-transform:uppercase;color:var(--orange-ink);margin:-6px 0 12px;
}
.foot-col a{position:relative;width:fit-content}
.foot-bottom .mono{color:var(--muted)}
/* ---------- 10. FORMS + FEEDBACK ------------------------------------------ */
.field label{color:var(--navy);font-weight:700}
.field input,.contact-form .field textarea{background:#fff;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.contact-form textarea::placeholder{color:var(--muted)}
.field input:hover,.contact-form textarea:hover{border-color:var(--navy-soft)}
/* 44px minimum touch height on the primary inputs and buttons */
.field input,.auth-alt,.tb-search input{min-height:46px}
.btn{min-height:44px}
.btn-sm{min-height:38px}
.flash{border-radius:var(--r-sm)}
/* ---------- 11. TABLES OF NUMBERS ----------------------------------------- */
.checkout-summary .row span:last-child,
.detail-meta,.results-sub,.stat-cell .n,.buy-price,.checkout-price{
font-variant-numeric:tabular-nums;
}
/* ---------- 12. MISC POLISH ------------------------------------------------ */
.chip.active,.tb-right .chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.sort-select{transition:border-color .2s}
.sort-select:hover{border-color:var(--navy)}
.empty-state h3{color:var(--navy)}
.empty-state a{color:var(--orange-ink);font-weight:700}
.buy-box{box-shadow:var(--sh-2)}
.detail-image img,.detail-video{box-shadow:var(--sh-2)}
.contact-card{transition:border-color .2s,box-shadow .25s}
.contact-card:hover{border-color:var(--navy-soft);box-shadow:var(--sh-2)}
.checkout-card{box-shadow:var(--sh-2)}
.plan{box-shadow:var(--sh-1)}
.faq-item{transition:border-color .2s}
.faq-q:hover{color:var(--orange-ink)}
.timeline-item h4{color:var(--navy)}
.crumb .cur{color:var(--navy);font-weight:500}
/* thin brand scrollbar on the drawer + page */
.drawer-list{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.drawer-list::-webkit-scrollbar{width:8px}
.drawer-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
html{scroll-behavior:auto}
.cat:hover,.coll:hover,.photo-card:hover,.btn:hover,.plan:hover{transform:none}
}
/* ---------- 13. HEADLINE ACCENT WORD ---------------------------------------
The display face has no true italic, so inside a heading would render
as a synthesised oblique. It becomes the orange accent word instead — the
same two-tone idea as the "foto|loot" wordmark. */
h1 em,h2 em,h3 em,.serif em,.section-title em,.hero-rotating em{
font-style:normal;color:var(--orange-ink);
}
.cta h2 em,.ent-hero h1 em,.coll-banner h1 em,.auth-quote em{color:var(--orange)}
/* centred section head (used by the Pricing FAQ) */
.sec-head.center{flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* ---------- 14. UNMODIFIED .btn --------------------------------------------
Browse's search submit is `class="btn btn-sm"` with no colour modifier, so
it used to render as unstyled chrome. Bare .btn now defaults to the navy
solid without touching the modifiers. */
.btn:not(.btn-primary):not(.btn-gold):not(.btn-ghost):not(.auth-alt){
background:var(--navy);color:#fff;border-radius:999px;padding:11px 22px;
font-size:14.5px;box-shadow:var(--sh-1);
}
.btn:not(.btn-primary):not(.btn-gold):not(.btn-ghost):not(.auth-alt):hover{
background:var(--navy-deep);transform:translateY(-1px);box-shadow:var(--sh-2);
}
.tb-search input{border-radius:999px;padding:10px 18px;transition:border-color .2s,box-shadow .2s}
/* focus ring lives in one place only - see FOCUS below */
/* ---------- 15. SMALL PHONES -----------------------------------------------
Same three-column nav, just sized so the lockup and the CTA stop colliding
below ~420px. Touch targets stay at 44px. */
@media(max-width:560px){
.nav-stack{padding:10px 12px}
.nav-stack .nav-top{gap:8px}
.nav-stack .brand,.nav .brand{font-size:18.5px;gap:7px}
.brand .mark{width:24px;height:24px}
.menu-btn{padding:7px 11px;font-size:12.5px;gap:6px}
.menu-btn .bars i{width:14px}
.nav-right{gap:10px}
.nav-right .btn-primary{padding:9px 15px;font-size:13px;white-space:nowrap}
.eyebrow-band{font-size:10.5px;letter-spacing:.16em}
.foot-tag{white-space:normal}
}
/* ---------- 16. DECORATIVE MARKS ------------------------------------------
Breadcrumb separators and drawer chevrons were drawn in --line, which is a
border tone and effectively invisible as a glyph. They are affordances, so
they get a readable grey. */
.crumb .sep{color:var(--muted)}
.drawer-list .arrow{color:var(--muted)}
/* ---------- 17. CATEGORY COVER PHOTOS ---------------------------------------
Covers are real ![]()
elements rendered by the homepage (newest photo in the
category, or a hand-picked images/categories/.jpg). The earlier per-slug
url() hooks here requested 24 files that mostly didn't exist - a 404 each on
every homepage view - so they're gone. Photos sit over the illustration, which
stays visible for empty categories and while a photo is still loading. */
.cat .fill .cat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* ---------- 18. FOCUS, RESOLVED --------------------------------------------
Exactly one visible indicator per control.
Text inputs, links, buttons, chips and cards use the universal 3px orange
outline from section 3.
The search widget is the one exception: it lights up as a whole unit -
border and offset shadow both go orange - so the inner must NOT also
draw an outline or you get the two concentric rings this replaces. That
treatment stands on its own for contrast: the border goes navy #1B2A44 ->
orange #F26A1B, a 4.69:1 change of state, well past the 3:1 WCAG 1.4.11
asks for. The magnifier icon shifts too, so the cue is not colour alone. */
.search-box input:focus,
.search-box input:focus-visible{outline:none;box-shadow:none}
.search-box:focus-within{outline:none}
/* keyboard focus on the submit button still gets its own ring, inset so it
reads inside the widget rather than fighting the container border */
.search-box .btn:focus-visible{outline:3px solid var(--navy-deep);outline-offset:-5px}
/* inputs keep a quiet border shift on hover; focus is carried by the outline */
.field input:hover,.contact-form .field textarea:hover,.tb-search input:hover{
border-color:var(--navy-soft);
}
/* ---------- 19. BROWSE TOOLBAR, RESPONSIVE ---------------------------------
The 720px .toolbar padding override further up is declared before the
toolbar's own rule, so it lost the cascade and mobile kept desktop padding.
Restated here, after the definition, where it actually takes effect. */
@media(max-width:720px){
.toolbar{padding:0 20px 18px;gap:12px}
.tb-search{width:100%}
.tb-search input{flex:1;min-width:0}
}
/* ---------- 20. CATEGORY TILE HOVER INFO -------------------------------------
Description + live image count slide up under the title on hover or keyboard
focus. Uses the 0fr -> 1fr grid-row trick so the reveal needs no fixed height
and the title rises with it. On touch screens (no hover) nothing is hidden
behind a gesture: the tile is a link, and a tap simply opens the category. */
.cat .txt{transition:transform .35s var(--ease)}
.cat-info{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.cat-info-inner{min-height:0;overflow:hidden;opacity:0;transform:translateY(6px);
transition:opacity .25s ease,transform .35s var(--ease)}
.cat-desc{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.86);margin-top:8px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.cat-cta{color:var(--orange);font-weight:500;white-space:nowrap}
/* darker scrim while open so the extra text stays readable over any photo */
.cat .grad::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(14,22,38,.92) 0%,rgba(14,22,38,.55) 55%,rgba(14,22,38,.15) 100%);
opacity:0;transition:opacity .35s ease}
@media (hover:hover){
.cat:hover .cat-info,.cat:focus-visible .cat-info{grid-template-rows:1fr}
.cat:hover .cat-info-inner,.cat:focus-visible .cat-info-inner{opacity:1;transform:none}
.cat:hover .grad::after,.cat:focus-visible .grad::after{opacity:1}
}
/* keyboard users on touch-capable laptops still get it */
.cat:focus-visible .cat-info{grid-template-rows:1fr}
.cat:focus-visible .cat-info-inner{opacity:1;transform:none}
.cat:focus-visible .grad::after{opacity:1}
/* short tiles have little height: keep the description to two lines */
.cats-collage .cat.short .cat-desc{-webkit-line-clamp:2}
@media(prefers-reduced-motion:reduce){
.cat-info,.cat-info-inner,.cat .grad::after{transition:none}
}
/* ---------- 21. PHOTO CARD HOVER INFO ---------------------------------------
Category pill top-left; the three best tags, size/shape and price along the
bottom. Shown on hover and on keyboard focus. Tag rows are capped at one line
and wrap whole chips out of view rather than cutting one in half, so narrow
two-column cards on small screens never get a clipped chip. */
.photo-card .ov{
justify-content:space-between;align-items:flex-start;
background:linear-gradient(to top,rgba(14,22,38,.90) 0%,rgba(14,22,38,.35) 45%,rgba(14,22,38,0) 70%,rgba(14,22,38,.35) 100%);
}
.photo-card:focus-visible .ov{opacity:1}
.ov-cat{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:#fff;background:rgba(14,22,38,.55);border:1px solid rgba(255,255,255,.22);
padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);
transform:translateY(-4px);transition:transform .35s var(--ease)
}
.ov-body{width:100%;transform:translateY(8px);transition:transform .35s var(--ease)}
.photo-card:hover .ov-cat,.photo-card:hover .ov-body,
.photo-card:focus-visible .ov-cat,.photo-card:focus-visible .ov-body{transform:none}
.ov-tags{display:flex;flex-wrap:wrap;gap:6px;max-height:26px;overflow:hidden;margin-bottom:10px}
.ov-tags span{
font-size:12px;line-height:1;color:#fff;white-space:nowrap;text-transform:capitalize;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
padding:6px 10px;border-radius:999px
}
.ov-meta{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.78)
}
.ov-price{color:var(--orange);font-weight:500;white-space:nowrap}
.ov-go{color:#fff;margin-left:8px}
@media(max-width:720px){
.ov-cat{display:none}
.ov-go{display:none}
.photo-card .ov{padding:10px}
}
@media(prefers-reduced-motion:reduce){
.ov-cat,.ov-body{transition:none;transform:none}
}