/* Original Lov Angels photography and type, with a visual first service journey. */
.service-story{background:#030303;padding-top:118px;padding-bottom:95px;color:#f5f5f2}
.story-breadcrumb{display:flex;gap:13px;align-items:center;flex-wrap:wrap;padding-block:21px 24px;font:12px/1.6 var(--sans);color:#aaa}
.story-breadcrumb a{text-decoration:none;color:inherit}.story-breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.story-hero{display:grid;grid-template-columns:58% 42%;min-height:620px;max-width:1800px;margin-inline:auto}
.story-hero-photo{position:relative;overflow:hidden;min-width:0}
.story-hero-photo img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.story-hero-copy{padding:70px clamp(32px,4.8vw,86px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:#030303}
.service-story .eyebrow,.story-directory-hero .eyebrow{font-family:var(--brand-nav);font-size:10px;line-height:1.8;font-weight:400;letter-spacing:0;text-transform:uppercase;margin-bottom:22px;color:#dadad5}
.service-story h1{font:400 clamp(44px,4.8vw,73px)/1.04 var(--serif);letter-spacing:-.025em;text-transform:none;text-wrap:balance;margin:0 0 28px}
.story-deck{font:17px/1.8 var(--sans);color:#c9c9c4;max-width:38ch;margin:0 0 30px}
.service-story .button{font-family:var(--brand-nav);font-size:10px;line-height:1.6;text-transform:uppercase;letter-spacing:0;min-height:48px;padding:14px 24px;border-radius:999px;max-width:100%;white-space:normal;text-align:center}
.story-shortcuts{display:flex;gap:24px;flex-wrap:wrap;margin-top:29px;font:13px/1.5 var(--sans);color:#a8a8a4}
.story-shortcuts a{padding-block:8px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#555}
.story-chapters{padding-top:95px;scroll-margin-top:130px}
.story-section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:35px}
.story-section-heading .eyebrow{width:100%;margin:0 0 -11px}
.service-story h2{font:400 clamp(34px,3.8vw,54px)/1.12 var(--serif);letter-spacing:-.015em;margin:0;text-wrap:balance;text-transform:none}
.story-chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story-chapter{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#171717;isolation:isolate}
.story-chapter>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.story-chapter::after{content:"";position:absolute;inset:25% 0 0;z-index:0;background:linear-gradient(transparent,#0009)}
.story-chapter>div{position:absolute;bottom:14px;left:14px;right:14px;z-index:1;border:1px solid #ffffff38;border-radius:16px;padding:23px;background:linear-gradient(130deg,#ffffff12,transparent),#080c1257;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff25}
.service-story .story-chapter h3{font:400 clamp(21px,2.1vw,29px)/1.2 var(--sans);letter-spacing:-.02em;text-transform:none;margin:0 0 11px;color:#fff}
.story-chapter p{font:14px/1.65 var(--sans);color:#e5e5e1;margin:0;max-width:32ch}
/* A clear introduction followed by two independent photographs. No collage. */
.story-spread{display:grid;grid-template-columns:minmax(0,1fr);gap:38px;padding-block:85px;scroll-margin-top:30px}
.story-spread-copy{min-width:0}
.story-spread-copy>p:not(.eyebrow){font:16px/1.85 var(--sans);color:#c2c2bd;margin:24px 0;max-width:68ch}
.story-spread-copy .button{margin-top:5px}
.story-photo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.story-photo-pair>div{position:relative;min-width:0;aspect-ratio:3/2;border-radius:20px;overflow:hidden;background:#080808;border:1px solid #ffffff1c}
.story-photo-pair img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.story-collection-link{display:table;font:14px/1.65 var(--sans);text-decoration:underline;text-underline-offset:6px;min-height:44px;padding-block:10px}
.story-film{position:relative;isolation:isolate;background:#111;height:clamp(440px,48vw,700px);margin:0;overflow:hidden}
.story-film video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.story-film::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,#000c,transparent 65%)}
.story-film>figcaption{position:absolute;z-index:1;left:var(--gutter);bottom:65px;max-width:70%;pointer-events:none}
.story-film>figcaption .eyebrow{margin-bottom:18px;color:#fff}
.story-film>figcaption>p:last-child{font:400 clamp(34px,4.5vw,62px)/1.12 var(--serif);max-width:18ch;margin:0;color:#fff}
.story-film-toggle{position:absolute;right:var(--gutter);bottom:65px;z-index:2;border:1px solid #ffffff80;border-radius:999px;background:#1118;color:#fff;padding:13px 23px;min-height:46px;backdrop-filter:blur(14px);font:13px/1.5 var(--sans);cursor:pointer}
.story-film-toggle[hidden]{display:none}
/* Remove floating film chips; keep pause available only on keyboard focus. */
body button[data-film-toggle]:not(:focus-visible){position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}
body button[data-film-toggle]:focus-visible{position:fixed!important;left:24px!important;right:auto!important;top:auto!important;bottom:104px!important;z-index:30;width:auto!important;height:auto!important;max-width:calc(100vw - 48px);outline:2px solid #fff;outline-offset:4px;background:#101010;color:#fff}
.story-information{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:12%;padding-top:110px;padding-bottom:105px;align-items:start;scroll-margin-top:140px}
.story-information>div>p:not(.eyebrow){font:16px/1.8 var(--sans);color:#bfbfbb;margin:25px 0 35px;max-width:50ch}
.story-details-list{border-top:1px solid #ffffff35}
.story-detail{border-bottom:1px solid #ffffff35;scroll-margin-top:140px}
.story-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;list-style:none;padding:22px 2px;min-height:68px;font:17px/1.5 var(--sans);color:#eee}
.story-detail>summary::-webkit-details-marker{display:none}
.story-detail>summary>span:last-child{font:23px/1 var(--sans);flex-shrink:0;width:23px;text-align:center;color:#bdbdb9}
.story-detail[open]>summary>span:last-child{font-size:0}.story-detail[open]>summary>span:last-child::after{content:'−';font-size:23px}
.story-detail:not([open])>div{display:none}
.story-detail>div{padding:0 2px 20px;max-width:65ch;font:15px/1.85 var(--sans);overflow-wrap:break-word;color:#c5c5c0}
.service-story .story-detail h2{font:400 12px/1.9 var(--brand-nav);text-transform:uppercase;letter-spacing:0;margin:22px 0 17px;text-wrap:pretty}
.story-detail p{font:15px/1.85 var(--sans);margin:0 0 21px;white-space:pre-line;color:#c5c5c0}
.story-enquiry{position:sticky;top:135px;border-top:1px solid #ffffff80;padding-top:27px}
.service-story .story-enquiry h2{font-size:40px;line-height:1.1}
.story-enquiry>p:not(.eyebrow){font:15px/1.8 var(--sans);color:#c3c3bd;margin:24px 0}
.story-enquiry>p.story-scope{font:12px/1.75 var(--sans);color:#93938e;margin:23px 0}
.story-enquiry>a{font:13px/1.7 var(--sans);text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.story-related{padding-top:30px;border-top:1px solid #ffffff28}
.story-related .story-section-heading>a{font:13px/1.5 var(--sans);padding:12px 0;text-decoration:underline;text-underline-offset:5px}
.story-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.story-related-card{position:relative;aspect-ratio:1.15;overflow:hidden;border-radius:18px;display:block;background:#111;isolation:isolate}
.story-related-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.story-related-card::after{content:"";position:absolute;inset:15% 0 0;background:linear-gradient(transparent,#000d)}
.story-related-card>div{position:absolute;inset:auto 25px 25px;z-index:1}
.service-story .story-related-card h3{font:400 22px/1.2 var(--sans);margin:0 0 12px;letter-spacing:0;text-transform:none}
.story-related-card span{font:12px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;color:#ddd}
.story-related-card:is(:hover,:focus-visible) img{transform:scale(1.035)}
.service-story :is(a,button,summary):focus-visible,.story-directory-hero :is(a,button):focus-visible{outline:2px solid #fff;outline-offset:5px}
.story-directory-hero{position:relative;min-height:600px;display:flex;align-items:end;isolation:isolate;overflow:hidden;background:#111;color:#fff}
.story-directory-hero .story-film{position:absolute;inset:0;height:100%;width:100%;isolation:auto}
.story-directory-hero .story-film>figcaption{display:none}
.story-directory-hero .story-film::after{background:linear-gradient(90deg,#000a,transparent),linear-gradient(0deg,#030303,transparent 90%)}
.story-directory-hero>.wrap{position:relative;z-index:1;width:100%;padding-bottom:70px;padding-top:160px}
.story-directory-hero h1{font:400 clamp(46px,5.8vw,78px)/1.04 var(--serif);letter-spacing:-.02em;text-transform:none;margin:0 0 25px;max-width:15ch}
.story-directory-hero>.wrap>p:not(.eyebrow){font:17px/1.7 var(--sans);max-width:43ch;color:#ddd;margin:0 0 25px}
.story-directory-hero a{display:inline-flex;align-items:center;min-height:44px;font:13px/1.5 var(--sans);text-decoration:underline;text-underline-offset:6px}
.ux-services-page .ux-services:has(.story-directory-hero){padding-top:0}
.ux-services-page .ux-services:has(.story-directory-hero) .ux-services-intro{padding-top:65px}
.lov-black-edition .ux-services:has(.story-directory-hero) .ux-service-finder input{border-radius:999px;background:#ffffff07;padding-inline:25px}
.ux-services-page .ux-services:has(.story-directory-hero) .ux-service-intro-copy h2{font:400 35px/1.15 var(--serif);text-transform:none}
@media(min-width:1600px){.story-hero{min-height:740px}}
@media(max-width:1000px){.story-hero{grid-template-columns:53% 47%;min-height:590px}.story-hero-copy{padding-inline:35px}.story-chapter>div{padding:20px;left:10px;right:10px;bottom:10px}.story-chapter-grid{gap:12px}.story-chapter p{font-size:13px}.story-spread{gap:32px}.story-photo-pair{gap:18px}.story-information{gap:7%;grid-template-columns:minmax(0,1fr) 33%}.story-film-toggle{bottom:32px}.story-film>figcaption{bottom:85px}}
@media(max-width:700px){
 .service-story{padding-top:120px;padding-bottom:60px}
 .story-breadcrumb{padding-block:19px 22px;font-size:11px;gap:10px}
 .story-hero{position:relative;display:flex;min-height:570px;height:74svh;max-height:650px;align-items:end;isolation:isolate}
 .story-hero-photo{position:absolute;inset:0;z-index:-2}
 .story-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#030303 1%,#030303dd 30%,#03030360 65%,#03030308)}
 .story-hero-copy{padding:180px var(--gutter) 35px;background:none;display:block;width:100%;}
 .service-story .story-hero .eyebrow{font-size:9px;margin-bottom:18px}
 .service-story h1{font-size:clamp(40px,11vw,53px);margin-bottom:19px;max-width:12ch;line-height:1.04}
 .story-deck{font-size:15px;line-height:1.75;margin-bottom:23px;max-width:36ch}
 .story-shortcuts{gap:23px;margin-top:17px;font-size:12px}
 .story-shortcuts a{padding-block:9px;min-height:40px}
 .story-chapters{padding-top:45px;scroll-margin-top:135px}
 .service-story h2{font-size:36px}
 .story-section-heading{gap:22px;margin-bottom:25px}
 .story-section-heading .eyebrow{margin-bottom:-6px}
 .service-story .eyebrow{font-size:9px;margin-bottom:18px}
 .story-chapter-grid{grid-template-columns:1fr;gap:20px}
 .story-chapter{aspect-ratio:4/5}
 .story-chapter>div{padding:23px;left:13px;right:13px;bottom:13px}
 .service-story .story-chapter h3{font-size:26px}
 .story-chapter p{font-size:14px;line-height:1.7;max-width:34ch}
 .story-spread{gap:28px;padding-block:55px}
 .story-photo-pair{grid-template-columns:1fr;gap:16px}
 .story-spread-copy>p:not(.eyebrow){font-size:15px;line-height:1.8;margin-block:22px}
 .story-spread-copy .button{margin-top:12px}
 .story-film{height:500px}
 .story-film>figcaption{bottom:100px;max-width:85%}
 .story-film>figcaption>p:last-child{font-size:37px}
 .story-film-toggle{bottom:30px;left:var(--gutter);right:auto;min-height:46px}
 .story-information{display:flex;flex-direction:column;gap:45px;padding-block:65px;scroll-margin-top:140px}
 .story-information>div{width:100%}
 .story-information>div>p:not(.eyebrow){font-size:15px;line-height:1.8;margin:23px 0 27px}
 .story-enquiry{position:static;width:100%;padding-top:25px}
 .service-story .story-enquiry h2{font-size:40px}
 .story-detail>summary{font-size:16px;min-height:66px;padding-block:21px}
 .story-detail p{font-size:14px;line-height:1.85}
 .story-detail>div{font-size:14px;padding-bottom:13px}
 .service-story .story-detail h2{font-size:11px}
 .story-related{padding-top:25px}
 .story-related-grid{grid-template-columns:1fr;gap:18px}
 .story-related-card{aspect-ratio:1.25}
 .story-directory-hero{min-height:650px}
 .story-directory-hero>.wrap{padding-top:175px;padding-bottom:65px}
 .story-directory-hero h1{font-size:49px;max-width:11ch}
 .story-directory-hero>.wrap>p:not(.eyebrow){font-size:15px;line-height:1.8;max-width:32ch}
 .story-directory-hero .story-film-toggle{left:auto;right:var(--gutter);bottom:20px}
 .ux-services-page .ux-services:has(.story-directory-hero) .ux-services-intro{padding-top:42px}
}
@media(max-width:350px){.story-hero{min-height:570px}.story-hero-copy{padding-bottom:25px}.service-story h1{font-size:40px}.story-deck{font-size:14px}.service-story .button{font-size:9px;padding-inline:19px}.story-chapter>div{padding:20px}.service-story .story-chapter h3{font-size:24px}.story-chapter p{font-size:13px}.service-story h2{font-size:33px}.story-directory-hero h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){.story-related-card img{transition:none}.story-related-card:is(:hover,:focus-visible) img{transform:none}.service-story{scroll-behavior:auto}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.story-chapter>div{background:#0b0d12e8}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.story-chapter>div{background:#080a0d;backdrop-filter:none;-webkit-backdrop-filter:none}}